From 0b6c03ca33e6f589cb137e278b949feb866ada3b Mon Sep 17 00:00:00 2001
From: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Date: Mon, 21 Sep 2020 17:56:44 +0200
Subject: [PATCH] Migrate `Button` test from enzyme to react-testing-library
(#13276)
* Migrate `Button` unit test from enzyme to react-testing-library
* Delete 2 obsolete `Button` snapshots
---
.../metabase/components/Button.unit.spec.js | 24 +++++-----
.../__snapshots__/Button.unit.spec.js.snap | 48 -------------------
2 files changed, 13 insertions(+), 59 deletions(-)
delete mode 100644 frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap
diff --git a/frontend/test/metabase/components/Button.unit.spec.js b/frontend/test/metabase/components/Button.unit.spec.js
index c0d26e32e84..c748ab5dc93 100644
--- a/frontend/test/metabase/components/Button.unit.spec.js
+++ b/frontend/test/metabase/components/Button.unit.spec.js
@@ -1,27 +1,29 @@
import React from "react";
-import renderer from "react-test-renderer";
-
-import { render } from "enzyme";
+import "@testing-library/jest-dom/extend-expect";
+import { render, screen } from "@testing-library/react";
import Button from "metabase/components/Button";
describe("Button", () => {
+ const title = "Clickity click";
+
it("should render correctly", () => {
- const tree = renderer.create(<Button>Clickity click</Button>).toJSON();
+ render(<Button>{title}</Button>);
- expect(tree).toMatchSnapshot();
+ // this is why `getByRole()` is so handy and preferred by RTL creators
+ // name is derived from text content: https://www.w3.org/TR/wai-aria-practices-1.1/#naming_techniques
+ screen.getByRole("button", { name: title });
});
+
it("should render correctly with an icon", () => {
- const tree = renderer
- .create(<Button icon="star">Clickity click</Button>)
- .toJSON();
+ render(<Button icon="star">{title}</Button>);
- expect(tree).toMatchSnapshot();
+ screen.getByRole("img", { name: "star icon" });
});
it("should render a primary button given the primary prop", () => {
- const button = render(<Button primary>Clickity click</Button>);
+ render(<Button primary>{title}</Button>);
- expect(button.hasClass("Button--primary")).toBe(true);
+ expect(screen.getByRole("button")).toHaveClass("Button--primary");
});
});
diff --git a/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap b/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap
deleted file mode 100644
index dd827576271..00000000000
--- a/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap
+++ /dev/null
@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button should render correctly 1`] = `
-<button
- className="Button sc-bdVaJa bDWFJH flex-no-shrink "
->
- <div
- className="flex layout-centered"
- style={null}
- >
- <div
- className=""
- >
- Clickity click
- </div>
- </div>
-</button>
-`;
-
-exports[`Button should render correctly with an icon 1`] = `
-<button
- className="Button sc-bdVaJa bDWFJH flex-no-shrink "
->
- <div
- className="flex layout-centered"
- style={null}
- >
- <svg
- aria-label="star icon"
- className="Icon Icon-star Icon-sc-1x67v3y-1 hFNRPZ"
- fill="currentcolor"
- height={14}
- role="img"
- viewBox="0 0 32 32"
- width={14}
- >
- <path
- d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11"
- />
- </svg>
- <div
- className="ml1"
- >
- Clickity click
- </div>
- </div>
-</button>
-`;
--
GitLab