From 4dec254b9b05b1b42e619ab920186336bd582226 Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 09:30:57 +1000 Subject: [PATCH 01/77] Migrate Col to RTL. --- src/components/Col/Col.test.tsx | 54 ++++++++++--------- .../Col/__snapshots__/Col.test.tsx.snap | 3 +- 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/src/components/Col/Col.test.tsx b/src/components/Col/Col.test.tsx index baf0f0fd1..9b8d2f9d7 100644 --- a/src/components/Col/Col.test.tsx +++ b/src/components/Col/Col.test.tsx @@ -1,72 +1,76 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Col from "./Col"; describe("Col ", () => { it("renders", () => { - const wrapper = shallow(Test content); - expect(wrapper).toMatchSnapshot(); + render( + + Test content + + ); + expect(screen.getByTestId("col")).toMatchSnapshot(); }); it("can set a size for small screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-small-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-small-1"); }); it("can set a size for medium screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-medium-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-medium-1"); }); it("can set a size for large screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-large-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-large-1"); }); it("can set empty cols for small screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-start-small-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-start-small-1"); }); it("can set empty cols for medium screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-start-medium-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-start-medium-1"); }); it("can set empty cols for large screens", () => { - const wrapper = shallow( - + render( + Test content ); - expect(wrapper.prop("className").includes("col-start-large-1")).toBe(true); + expect(screen.getByTestId("col")).toHaveClass("col-start-large-1"); }); it("can add additional classes", () => { - const wrapper = shallow(); - const className = wrapper.prop("className"); - expect(className.includes("col-3")).toBe(true); - expect(className.includes("extra-class")).toBe(true); + render(); + const col = screen.getByTestId("col"); + expect(col).toHaveClass("col-3"); + expect(col).toHaveClass("extra-class"); }); }); diff --git a/src/components/Col/__snapshots__/Col.test.tsx.snap b/src/components/Col/__snapshots__/Col.test.tsx.snap index 0fd8cd6b4..012852303 100644 --- a/src/components/Col/__snapshots__/Col.test.tsx.snap +++ b/src/components/Col/__snapshots__/Col.test.tsx.snap @@ -2,7 +2,8 @@ exports[`Col renders 1`] = `
Test content
From 189b4ff45734cb498b05f23fb3e47016d734c898 Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 15:20:02 +1000 Subject: [PATCH 02/77] Migrate Row to RTL. --- src/components/Row/Row.test.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/Row/Row.test.tsx b/src/components/Row/Row.test.tsx index 61d6b5902..ed8021b67 100644 --- a/src/components/Row/Row.test.tsx +++ b/src/components/Row/Row.test.tsx @@ -1,18 +1,22 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Row from "./Row"; describe("Row ", () => { it("renders", () => { - const wrapper = shallow(Test content); - expect(wrapper).toMatchSnapshot(); + render(Test content); + expect(screen.getByTestId("row")).toMatchSnapshot(); }); it("can add additional classes", () => { - const wrapper = shallow(Test content); - const className = wrapper.prop("className"); - expect(className.includes("row")).toBe(true); - expect(className.includes("extra-class")).toBe(true); + render( + + Test content + + ); + const row = screen.getByTestId("row"); + expect(row).toHaveClass("row"); + expect(row).toHaveClass("extra-class"); }); }); From a61e1fe667addf8888808404d5ae48b594221fbf Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 16:54:18 +1000 Subject: [PATCH 03/77] Update snapshot. --- src/components/Row/__snapshots__/Row.test.tsx.snap | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Row/__snapshots__/Row.test.tsx.snap b/src/components/Row/__snapshots__/Row.test.tsx.snap index 6fbfd1b46..f8927e240 100644 --- a/src/components/Row/__snapshots__/Row.test.tsx.snap +++ b/src/components/Row/__snapshots__/Row.test.tsx.snap @@ -2,7 +2,8 @@ exports[`Row renders 1`] = `
Test content
From c88d23f66933935bdf795d6bb902ea3b85da6e16 Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 17:52:54 +1000 Subject: [PATCH 04/77] Migrate Strip to RTL. --- src/components/Strip/Strip.test.tsx | 111 ++++++++++++------ .../Strip/__snapshots__/Strip.test.tsx.snap | 15 ++- 2 files changed, 87 insertions(+), 39 deletions(-) diff --git a/src/components/Strip/Strip.test.tsx b/src/components/Strip/Strip.test.tsx index 48be09240..065dda1b3 100644 --- a/src/components/Strip/Strip.test.tsx +++ b/src/components/Strip/Strip.test.tsx @@ -1,81 +1,126 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Strip from "./Strip"; describe("Strip ", () => { it("renders", () => { - const wrapper = shallow(Test content); - expect(wrapper).toMatchSnapshot(); + render(Test content); + expect(screen.getByTestId("strip")).toMatchSnapshot(); }); it("can set a background", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("style")).toStrictEqual({ + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveStyle({ backgroundImage: "url('test.png')", }); }); it("can set a type", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("p-strip--dark")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("p-strip--dark"); }); it("can set the element", () => { - const wrapper = shallow(Test content); - expect(wrapper.type()).toEqual("section"); + render( + + Test content + + ); + expect(screen.getByTestId("strip").nodeName).toEqual("SECTION"); }); it("can be bordered", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("is-bordered")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("is-bordered"); }); it("can be dark", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("is-dark")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("is-dark"); }); it("can be deep", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("is-deep")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("is-deep"); }); it("can be light", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("is-light")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("is-light"); }); it("can be shallow", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("is-shallow")).toBe(true); + render( + + Test content + + ); + expect(screen.getByTestId("strip")).toHaveClass("is-shallow"); }); it("can set a col size", () => { - const wrapper = shallow(Test content); - expect(wrapper.find("Col").first().prop("size")).toEqual(4); + render( + + Test content + + ); + // eslint-disable-next-line testing-library/no-node-access + expect(document.querySelector(".row .col-4")).toBeInTheDocument(); }); it("can not include a col", () => { - const wrapper = shallow(Test content); - expect(wrapper.find(".col-12").exists()).toBe(false); + render( + + Test content + + ); + // eslint-disable-next-line testing-library/no-node-access + expect(document.querySelector(".row .col-12")).not.toBeInTheDocument(); }); it("can set row classes", () => { - const wrapper = shallow( - Test content - ); - expect(wrapper.find("Row").prop("className").includes("row--extra")).toBe( - true + render( + + Test content + ); + // eslint-disable-next-line testing-library/no-node-access + expect(document.querySelector(".row")).toHaveClass("row--extra"); }); it("can add additional classes", () => { - const wrapper = shallow( - Test content + render( + + Test content + ); - const className = wrapper.prop("className"); - expect(className.includes("p-strip")).toBe(true); - expect(className.includes("extra-class")).toBe(true); + const strip = screen.getByTestId("strip"); + expect(strip).toHaveClass("p-strip"); + expect(strip).toHaveClass("extra-class"); }); }); diff --git a/src/components/Strip/__snapshots__/Strip.test.tsx.snap b/src/components/Strip/__snapshots__/Strip.test.tsx.snap index d4e28fb11..d59eb775f 100644 --- a/src/components/Strip/__snapshots__/Strip.test.tsx.snap +++ b/src/components/Strip/__snapshots__/Strip.test.tsx.snap @@ -2,14 +2,17 @@ exports[`Strip renders 1`] = `
- - +
Test content - - +
+
`; From 3e55d6e252d02d96c23edee88710642487b8862a Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 17:31:41 +1000 Subject: [PATCH 05/77] Migrate Spinner to RTL. --- src/components/Spinner/Spinner.test.tsx | 53 +++++++++++-------- .../__snapshots__/Spinner.test.tsx.snap | 8 +-- 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/components/Spinner/Spinner.test.tsx b/src/components/Spinner/Spinner.test.tsx index d8e777c96..97b0670d6 100644 --- a/src/components/Spinner/Spinner.test.tsx +++ b/src/components/Spinner/Spinner.test.tsx @@ -1,4 +1,4 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Spinner from "./Spinner"; @@ -6,57 +6,64 @@ import Spinner from "./Spinner"; describe("", () => { // snapshot tests it("renders and matches the snapshot", () => { - const component = shallow(); + render(); - expect(component).toMatchSnapshot(); + expect(screen.getByRole("alert")).toMatchSnapshot(); }); it("renders and matches the snapshot with text", () => { - const component = shallow(); + render(); - expect(component).toMatchSnapshot(); + expect(screen.getByRole("alert")).toMatchSnapshot(); }); // unit tests it("renders a spinner icon", () => { - const component = shallow(); - - expect( - component.find("i").first().hasClass("p-icon--spinner") - ).toBeTruthy(); - expect(component.find("i").first().text()).toContain("Loading"); + render(); + // eslint-disable-next-line testing-library/no-node-access + expect(document.querySelector(".p-icon--spinner")).toBeInTheDocument(); + expect(screen.getByText("Loading")).toBeInTheDocument(); }); it("renders text correctly if given text prop", () => { const text = "Loading..."; - const component = shallow(); + render(); - expect(component.find("span").first().text()).toContain(text); - expect(component.find("i").first().text()).not.toContain(text); + expect(screen.getByText(text)).toBeInTheDocument(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-icon--spinner")?.textContent + ).not.toContain(text); }); it("renders Loading... for icon text if no text prop is provided", () => { - const component = shallow(); - - expect(component.find("i").first().text()).toContain("Loading"); + render(); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-icon--spinner")?.textContent + ).toBe("Loading"); }); it("renders an assertive spinner", () => { - const component = shallow(); + render(); - expect(component.find({ ariaLive: "assertive" })); + expect(screen.getByRole("alert")).toHaveAttribute("aria-live", "assertive"); }); it("renders a light spinner if given isLight prop", () => { - const component = shallow(); + render(); - expect(component.find("i").first().hasClass("is-light")).toEqual(true); + expect( + // eslint-disable-next-line testing-library/no-node-access + document.querySelector(".p-icon--spinner") + ).toHaveClass("is-light"); }); it("renders a custom aria-label", () => { - const component = shallow(); + render(); - expect(component.find("span").first().props()["aria-label"]).toEqual( + expect(screen.getByRole("alert")).toHaveAttribute( + "aria-label", "custom loading text" ); }); diff --git a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap index 72fc6e2dd..3de34d6a5 100644 --- a/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap +++ b/src/components/Spinner/__snapshots__/Spinner.test.tsx.snap @@ -3,11 +3,11 @@ exports[` renders and matches the snapshot 1`] = ` Loading @@ -17,11 +17,11 @@ exports[` renders and matches the snapshot 1`] = ` exports[` renders and matches the snapshot with text 1`] = ` From 0aaa968be9cc3623bd7b7db45c758cefc5b10c55 Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 11:37:43 +1000 Subject: [PATCH 06/77] Migrate Link to RTL. --- .../Label/__snapshots__/Label.test.tsx.snap | 5 ++-- src/components/Link/Link.test.tsx | 26 +++++++++---------- 2 files changed, 16 insertions(+), 15 deletions(-) diff --git a/src/components/Label/__snapshots__/Label.test.tsx.snap b/src/components/Label/__snapshots__/Label.test.tsx.snap index 2b56eaac7..63d9aebe2 100644 --- a/src/components/Label/__snapshots__/Label.test.tsx.snap +++ b/src/components/Label/__snapshots__/Label.test.tsx.snap @@ -2,8 +2,9 @@ exports[`Label renders 1`] = ` diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index 030f89dfb..8eb9046ff 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -1,37 +1,37 @@ -import { shallow } from "enzyme"; +import { render, screen } from "@testing-library/react"; import React from "react"; import Link from "./Link"; describe("Link ", () => { it("renders", () => { - const wrapper = shallow(Test content); - expect(wrapper).toMatchSnapshot(); + render(Test content); + expect(screen.getByRole("link")).toMatchSnapshot(); }); it("can be an inverted link", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("p-link--inverted")).toBe(true); + render(Test content); + expect(screen.getByRole("link")).toHaveClass("p-link--inverted"); }); it("can be a soft link", () => { - const wrapper = shallow(Test content); - expect(wrapper.prop("className").includes("p-link--soft")).toBe(true); + render(Test content); + expect(screen.getByRole("link")).toHaveClass("p-link--soft"); }); it("can be a back to top link", () => { - const wrapper = shallow(Back to top); - expect(wrapper).toMatchSnapshot(); + render(Back to top); + expect(screen.getByRole("link")).toMatchSnapshot(); }); it("can add additional classes", () => { - const wrapper = shallow( + render( Test content ); - const className = wrapper.prop("className"); - expect(className.includes("p-link--soft")).toBe(true); - expect(className.includes("extra-class")).toBe(true); + const link = screen.getByRole("link"); + expect(link).toHaveClass("p-link--soft"); + expect(link).toHaveClass("extra-class"); }); }); From 03f371c9ec8e9c1836e6962d9ec28559347db9e8 Mon Sep 17 00:00:00 2001 From: Huw Wilkins Date: Wed, 14 Sep 2022 11:38:18 +1000 Subject: [PATCH 07/77] Revert label snapshot. --- .../Label/__snapshots__/Label.test.tsx.snap | 5 ++--- .../Link/__snapshots__/Link.test.tsx.snap | 16 ++++++---------- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/Label/__snapshots__/Label.test.tsx.snap b/src/components/Label/__snapshots__/Label.test.tsx.snap index 63d9aebe2..2b56eaac7 100644 --- a/src/components/Label/__snapshots__/Label.test.tsx.snap +++ b/src/components/Label/__snapshots__/Label.test.tsx.snap @@ -2,9 +2,8 @@ exports[`Label renders 1`] = ` diff --git a/src/components/Link/__snapshots__/Link.test.tsx.snap b/src/components/Link/__snapshots__/Link.test.tsx.snap index 011c4087e..61594c920 100644 --- a/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -1,21 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Link can be a back to top link 1`] = ` - + Back to top + `; exports[`Link renders 1`] = ` Test content From 2b5d75d859e4115b6e4971b829fa8d684e8c87bb Mon Sep 17 00:00:00 2001 From: huwshimi Date: Mon, 26 Sep 2022 11:18:40 +1000 Subject: [PATCH 08/77] Migrate Button to RTL. (#825) * Migrate Button to RTL. --- src/components/Button/Button.test.tsx | 129 ++++++++++-------- .../Button/__snapshots__/Button.test.tsx.snap | 5 +- 2 files changed, 78 insertions(+), 56 deletions(-) diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index d7cb6f78e..94870067d 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -1,101 +1,120 @@ -import { shallow } from "enzyme"; +import { createEvent, fireEvent, render, screen } from "@testing-library/react"; import React from "react"; import Button from "./Button"; +import userEvent from "@testing-library/user-event"; describe("Button ", () => { it("renders", () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + render(); + expect(screen.getByRole("button")).toMatchSnapshot(); }); it("renders as a link", () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); + render( + + ); + expect(screen.getByRole("link")).toMatchSnapshot(); }); - it("can handle button click events", () => { + it("can handle button click events", async () => { const onClick = jest.fn(); - const wrapper = shallow( @@ -10,7 +10,8 @@ exports[`Button renders 1`] = ` exports[`Button renders as a link 1`] = ` Test content From 47737f79546e6489dd5216af4bcae7108b570ba7 Mon Sep 17 00:00:00 2001 From: huwshimi Date: Mon, 26 Sep 2022 11:46:28 +1000 Subject: [PATCH 09/77] Migrate Textarea to RTL. (#852) * Migrate Textarea to RTL. --- src/components/Textarea/Textarea.test.tsx | 30 +++++++++---------- .../__snapshots__/Textarea.test.tsx.snap | 25 ++++++++-------- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/components/Textarea/Textarea.test.tsx b/src/components/Textarea/Textarea.test.tsx index 9b7495bc9..6f16fbc32 100644 --- a/src/components/Textarea/Textarea.test.tsx +++ b/src/components/Textarea/Textarea.test.tsx @@ -1,37 +1,35 @@ import { render, screen } from "@testing-library/react"; -import { mount, shallow } from "enzyme"; import React from "react"; import Textarea from "./Textarea"; describe("Textarea ", () => { it("renders", () => { - const wrapper = shallow(