Skip to content
Snippets Groups Projects
Unverified Commit 0b6c03ca authored by Nemanja Glumac's avatar Nemanja Glumac Committed by GitHub
Browse files

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
parent 907533e5
No related branches found
No related tags found
No related merge requests found
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");
});
});
// 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>
`;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment