diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx index bc5e9b5d..0bfd43a5 100644 --- a/src/components/Form/Form.test.tsx +++ b/src/components/Form/Form.test.tsx @@ -1,28 +1,36 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Form from "./Form"; describe("Form ", () => { it("renders", () => { - const wrapper = shallow(
Test content
); - expect(wrapper).toMatchSnapshot(); + render( +
Test content
+ ); + expect(screen.getByRole("form")).toMatchSnapshot(); }); it("can be inline", () => { - const wrapper = shallow(
); - expect(wrapper.prop("className").includes("p-form--inline")).toBe(true); + render(); + expect(screen.getByRole("form")).toHaveClass("p-form--inline"); }); it("can be stacked", () => { - const wrapper = shallow(); - expect(wrapper.prop("className").includes("p-form--stacked")).toBe(true); + render(); + expect(screen.getByRole("form")).toHaveClass("p-form--stacked"); }); it("can add additional classes", () => { - const wrapper = shallow(); - const className = wrapper.prop("className"); - expect(className.includes("p-form")).toBe(true); - expect(className.includes("extra-class")).toBe(true); + render( + + ); + const form = screen.getByRole("form"); + expect(form).toHaveClass("p-form"); + expect(form).toHaveClass("extra-class"); }); }); diff --git a/src/components/Form/__snapshots__/Form.test.tsx.snap b/src/components/Form/__snapshots__/Form.test.tsx.snap index db1420c9..83ded498 100644 --- a/src/components/Form/__snapshots__/Form.test.tsx.snap +++ b/src/components/Form/__snapshots__/Form.test.tsx.snap @@ -2,7 +2,8 @@ exports[`Form renders 1`] = ` Test content
diff --git a/src/components/Icon/Icon.test.tsx b/src/components/Icon/Icon.test.tsx index 6e927f59..af0e0911 100644 --- a/src/components/Icon/Icon.test.tsx +++ b/src/components/Icon/Icon.test.tsx @@ -1,27 +1,31 @@ -import { shallow } from "enzyme"; +import { render } from "@testing-library/react"; import React from "react"; import Icon, { ICONS } from "./Icon"; describe("Icon", () => { it("renders", () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + const { container } = render(); + // eslint-disable-next-line testing-library/no-node-access + expect(container.firstChild).toMatchSnapshot(); }); it("sets correct class name based on given name", () => { - const wrapper = shallow(); - expect(wrapper.prop("className").includes("p-icon--test")).toBe(true); + const { container } = render(); + // eslint-disable-next-line testing-library/no-node-access + expect(container.firstChild).toHaveClass("p-icon--test"); }); it("can be given a custom class name", () => { - const wrapper = shallow(); - expect(wrapper.prop("className")).toBe("custom-class p-icon--test"); + const { container } = render(); + // eslint-disable-next-line testing-library/no-node-access + expect(container.firstChild).toHaveClass("custom-class p-icon--test"); }); it("can be given standard HTML props", () => { const style = { width: "200px" }; - const wrapper = shallow(); - expect(wrapper.prop("style")).toBe(style); + const { container } = render(); + // eslint-disable-next-line testing-library/no-node-access + expect(container.firstChild).toHaveAttribute("style", "width: 200px;"); }); }); diff --git a/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/src/components/Icon/__snapshots__/Icon.test.tsx.snap index 64f1461b..ba64d549 100644 --- a/src/components/Icon/__snapshots__/Icon.test.tsx.snap +++ b/src/components/Icon/__snapshots__/Icon.test.tsx.snap @@ -2,6 +2,6 @@ exports[`Icon renders 1`] = ` `; diff --git a/src/components/Input/Input.test.tsx b/src/components/Input/Input.test.tsx index ce26742e..80a75d8d 100644 --- a/src/components/Input/Input.test.tsx +++ b/src/components/Input/Input.test.tsx @@ -1,73 +1,84 @@ import { render, screen } from "@testing-library/react"; -import { mount, shallow } from "enzyme"; import React from "react"; import Input from "./Input"; describe("Input", () => { + it("displays the field label for text inputs", () => { + render(); + expect(screen.getByText("text label")).toHaveClass("p-form__label"); + }); + it("moves the label for radio buttons", () => { - const wrapper = shallow(); - expect(wrapper.prop("label")).toBe(""); + render(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-radio__label") + ).toBeInTheDocument(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-form__label") + ).not.toBeInTheDocument(); }); it("moves the label for checkboxes", () => { - const wrapper = shallow(); - expect(wrapper.prop("label")).toBe(""); + render(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-checkbox__label") + ).toBeInTheDocument(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-form__label") + ).not.toBeInTheDocument(); }); it("can take focus on first render", () => { - const container = document.createElement("div"); - document.body.appendChild(container); - const wrapper = mount(, { attachTo: container }); - expect(wrapper.find("input").getDOMNode()).toBe(document.activeElement); - document.body.removeChild(container); + render(); + expect(screen.getByRole("textbox")).toHaveFocus(); }); it("sets aria-invalid to false when there is no error", () => { - const wrapper = mount(); - expect(wrapper.find("input").prop("aria-invalid")).toBe(false); + render(); + expect(screen.getByRole("textbox")).not.toBeInvalid(); }); it("sets aria-invalid to true when there is an error", () => { - const wrapper = mount(); - expect(wrapper.find("input").prop("aria-invalid")).toBe(true); + render(); + expect(screen.getByRole("textbox")).toBeInvalid(); }); it("sets required field on input", () => { - const wrapper = mount(); - expect(wrapper.find("input").prop("required")).toBe(true); + render(); + expect(screen.getByRole("textbox")).toBeRequired(); }); it("can set required for a radiobutton", () => { - const wrapper = mount(); - expect(wrapper.find("input").prop("required")).toBe(true); + render(); + expect(screen.getByRole("radio")).toBeRequired(); }); it("can set required for a checkbox", () => { - const wrapper = mount(); - expect(wrapper.find("input").prop("required")).toBe(true); + render(); + expect(screen.getByRole("checkbox")).toBeRequired(); }); it("can set a label class name for a radiobutton", () => { - const wrapper = mount( - - ); + render(); expect( - wrapper.find("label").prop("className").includes("label-class-name") - ).toBe(true); + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-radio") + ).toHaveClass("label-class-name"); }); it("can set a label class name for a checkbox", () => { - const wrapper = mount( - - ); + render(); expect( - wrapper.find("label").prop("className").includes("label-class-name") - ).toBe(true); + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-checkbox") + ).toHaveClass("label-class-name"); }); -}); -describe("Input RTL", () => { it("renders", () => { const { container } = render(); expect(container).toMatchSnapshot(); diff --git a/src/components/Input/__snapshots__/Input.test.tsx.snap b/src/components/Input/__snapshots__/Input.test.tsx.snap index 551ba024..3f870888 100644 --- a/src/components/Input/__snapshots__/Input.test.tsx.snap +++ b/src/components/Input/__snapshots__/Input.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Input RTL renders 1`] = ` +exports[`Input renders 1`] = `