diff --git a/src/app/base/components/NodeSummaryNetworkCard/NetworkCardTable/NetworkCardTable.test.tsx b/src/app/base/components/NodeSummaryNetworkCard/NetworkCardTable/NetworkCardTable.test.tsx index 196a6ed0e0..0002e40221 100644 --- a/src/app/base/components/NodeSummaryNetworkCard/NetworkCardTable/NetworkCardTable.test.tsx +++ b/src/app/base/components/NodeSummaryNetworkCard/NetworkCardTable/NetworkCardTable.test.tsx @@ -82,7 +82,7 @@ describe("NetworkCardInterface", () => { ); expect( - screen.getByRole("gridcell", { name: "Relayed" }) + screen.getByRole("gridcell", { name: /Relayed/i }) ).toBeInTheDocument(); expect( screen.getByRole("tooltip", { name: "Relayed via fabrice.99" }) diff --git a/src/app/base/components/ScriptStatus/ScriptStatus.tsx b/src/app/base/components/ScriptStatus/ScriptStatus.tsx index e46a247e7c..944324e15d 100644 --- a/src/app/base/components/ScriptStatus/ScriptStatus.tsx +++ b/src/app/base/components/ScriptStatus/ScriptStatus.tsx @@ -74,6 +74,7 @@ const ScriptStatus = ({ {iconName && ( { render(); @@ -9,8 +9,10 @@ it("renders with default options correctly", async () => { await userEvent.click(button); - expect(screen.getByTestId("tooltip-portal")).toMatchSnapshot(); - expect(button).toMatchSnapshot(); + expect(screen.getByRole("tooltip")).toHaveTextContent("Tooltip"); + expect(within(button).getByLabelText("information")).toHaveClass( + "p-icon--information" + ); }); it("can override default props", async () => { @@ -26,10 +28,16 @@ it("can override default props", async () => { ); const button = screen.getByRole("button"); + expect(button).toHaveClass("p-button--negative"); + expect(button).toHaveClass("button-class"); + expect(within(button).getByLabelText("warning")).toHaveClass( + "p-icon--warning" + ); + expect(within(button).getByLabelText("warning")).toHaveClass("icon-class"); + await userEvent.click(button); - expect(screen.getByTestId("tooltip-portal")).toMatchSnapshot(); - expect(button).toMatchSnapshot(); + expect(screen.getByTestId("tooltip-portal")).toHaveClass("tooltip-class"); }); it("automatically unindents and breaks string messages into lines", async () => { diff --git a/src/app/base/components/TooltipButton/TooltipButton.tsx b/src/app/base/components/TooltipButton/TooltipButton.tsx index b4d6638048..aa7f796dab 100644 --- a/src/app/base/components/TooltipButton/TooltipButton.tsx +++ b/src/app/base/components/TooltipButton/TooltipButton.tsx @@ -46,7 +46,9 @@ const TooltipButton = ({ {...buttonProps} > {children} - {iconName ? : null} + {iconName ? ( + + ) : null} ); diff --git a/src/app/base/components/TooltipButton/__snapshots__/TooltipButton.test.tsx.snap b/src/app/base/components/TooltipButton/__snapshots__/TooltipButton.test.tsx.snap deleted file mode 100644 index a9efdc9872..0000000000 --- a/src/app/base/components/TooltipButton/__snapshots__/TooltipButton.test.tsx.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`can override default props 1`] = ` - - - Tooltip - - -`; - -exports[`can override default props 2`] = ` - -`; - -exports[`renders with default options correctly 1`] = ` - - - Tooltip - - -`; - -exports[`renders with default options correctly 2`] = ` - -`; diff --git a/src/app/images/components/UbuntuImageSelect/ArchSelect/ArchSelect.test.tsx b/src/app/images/components/UbuntuImageSelect/ArchSelect/ArchSelect.test.tsx index 817bc7e61c..a7d9560b68 100644 --- a/src/app/images/components/UbuntuImageSelect/ArchSelect/ArchSelect.test.tsx +++ b/src/app/images/components/UbuntuImageSelect/ArchSelect/ArchSelect.test.tsx @@ -94,7 +94,7 @@ describe("ArchSelect", () => { { state } ); - expect(screen.getByRole("checkbox", { name: "i386" })).toBeDisabled(); + expect(screen.getByRole("checkbox", { name: /i386/i })).toBeDisabled(); expect( screen.getByRole("tooltip", { name: "i386 is not available on 20.04 LTS.", @@ -130,7 +130,7 @@ describe("ArchSelect", () => { , { state } ); - const archCheckbox = screen.getByRole("checkbox", { name: "amd64" }); + const archCheckbox = screen.getByRole("checkbox", { name: /amd64/i }); expect(archCheckbox).toBeChecked(); expect(archCheckbox).toBeDisabled(); diff --git a/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.test.tsx b/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.test.tsx index 4d79f6c78d..fad33eb850 100644 --- a/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.test.tsx +++ b/src/app/images/views/ImageList/ImageListHeader/ImageListHeader.test.tsx @@ -52,7 +52,7 @@ describe("ImageListHeader", () => { expect( screen.queryByRole("checkbox", { - name: ImageListHeaderLabels.AutoSyncImages, + name: new RegExp(ImageListHeaderLabels.AutoSyncImages), }) ).not.toBeInTheDocument(); }); @@ -74,7 +74,7 @@ describe("ImageListHeader", () => { await userEvent.click( screen.getByRole("checkbox", { - name: ImageListHeaderLabels.AutoSyncImages, + name: new RegExp(ImageListHeaderLabels.AutoSyncImages), }) ); diff --git a/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.test.tsx b/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.test.tsx index ac48efcf85..e048459db0 100644 --- a/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.test.tsx +++ b/src/app/machines/views/MachineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.test.tsx @@ -237,7 +237,7 @@ describe("NetworkTableActions", () => { // Open the menu: await openMenu(); const addAlias = screen.getByRole("button", { - name: "Add alias", + name: /Add alias/i, }); expect(addAlias).toBeInTheDocument(); expect(addAlias).not.toBeDisabled(); @@ -263,7 +263,7 @@ describe("NetworkTableActions", () => { // Open the menu: await openMenu(); const addAlias = screen.getByRole("button", { - name: "Add alias", + name: /Add alias/i, }); expect(addAlias).toBeInTheDocument(); expect(addAlias).toBeDisabled(); @@ -292,7 +292,7 @@ describe("NetworkTableActions", () => { ); // Open the menu: await openMenu(); - const addVLAN = screen.getByRole("button", { name: "Add VLAN" }); + const addVLAN = screen.getByRole("button", { name: /Add VLAN/i }); expect(addVLAN).toBeInTheDocument(); expect(addVLAN).not.toBeDisabled(); expect( @@ -316,7 +316,7 @@ describe("NetworkTableActions", () => { ); // Open the menu: await openMenu(); - const addVLAN = screen.getByRole("button", { name: "Add VLAN" }); + const addVLAN = screen.getByRole("button", { name: /Add VLAN/i }); expect(addVLAN).toBeInTheDocument(); expect(addVLAN).toBeDisabled(); expect( @@ -341,10 +341,10 @@ describe("NetworkTableActions", () => { // Open the menu: await openMenu(); expect( - screen.queryByRole("button", { name: "Add alias" }) + screen.queryByRole("button", { name: /Add alias/i }) ).not.toBeInTheDocument(); expect( - screen.queryByRole("button", { name: "Add VLAN" }) + screen.queryByRole("button", { name: /Add VLAN/i }) ).not.toBeInTheDocument(); }); }); diff --git a/src/app/machines/views/MachineList/MachineListTable/CoresColumn/CoresColumn.test.tsx b/src/app/machines/views/MachineList/MachineListTable/CoresColumn/CoresColumn.test.tsx index b9b3a7768f..7a40cd5725 100644 --- a/src/app/machines/views/MachineList/MachineListTable/CoresColumn/CoresColumn.test.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/CoresColumn/CoresColumn.test.tsx @@ -1,8 +1,3 @@ -import { mount } from "enzyme"; -import { Provider } from "react-redux"; -import { MemoryRouter } from "react-router-dom"; -import configureStore from "redux-mock-store"; - import { CoresColumn } from "./CoresColumn"; import type { RootState } from "app/store/root/types"; @@ -12,11 +7,11 @@ import { rootState as rootStateFactory, testStatus as testStatusFactory, } from "testing/factories"; - -const mockStore = configureStore(); +import { renderWithBrowserRouter, screen } from "testing/utils"; describe("CoresColumn", () => { let state: RootState; + beforeEach(() => { state = rootStateFactory({ machine: machineStateFactory({ @@ -35,66 +30,34 @@ describe("CoresColumn", () => { }); }); - it("renders", () => { - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - - expect(wrapper.find("CoresColumn")).toMatchSnapshot(); - }); - it("displays the number of cores", () => { state.machine.items[0].cpu_count = 8; - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find('[data-testid="cores"]').text()).toEqual("8"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByLabelText("Cores")).toHaveTextContent("8"); }); it("truncates architecture", () => { state.machine.items[0].architecture = "i386/generic"; - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find('[data-testid="arch"]').text()).toEqual("i386"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByTestId("arch")).toHaveTextContent("i386"); }); it("displays a Tooltip with the full architecture", () => { state.machine.items[0].architecture = "amd64/generic"; - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find("Tooltip").prop("message")).toEqual("amd64/generic"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + + expect(screen.getByRole("tooltip")).toHaveTextContent("amd64/generic"); }); }); diff --git a/src/app/machines/views/MachineList/MachineListTable/CoresColumn/__snapshots__/CoresColumn.test.tsx.snap b/src/app/machines/views/MachineList/MachineListTable/CoresColumn/__snapshots__/CoresColumn.test.tsx.snap deleted file mode 100644 index afd92fe872..0000000000 --- a/src/app/machines/views/MachineList/MachineListTable/CoresColumn/__snapshots__/CoresColumn.test.tsx.snap +++ /dev/null @@ -1,150 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CoresColumn renders 1`] = ` - - - 4 - - } - primaryAriaLabel="Cores" - primaryClassName="u-align--right" - secondary={ - - - amd64 - - - } - secondaryAriaLabel="Architecture" - > -
-
-
-
- - - - - - - 4 - - - -
-
-
- - - - - amd64 - - - - - - - amd64/generic - - -
- } - > - - - amd64/generic - - - - - - -
-
- -
-
-`; diff --git a/src/app/machines/views/MachineList/MachineListTable/DisksColumn/DisksColumn.test.tsx b/src/app/machines/views/MachineList/MachineListTable/DisksColumn/DisksColumn.test.tsx index 1bcd105967..700a8f1094 100644 --- a/src/app/machines/views/MachineList/MachineListTable/DisksColumn/DisksColumn.test.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/DisksColumn/DisksColumn.test.tsx @@ -1,8 +1,3 @@ -import { mount } from "enzyme"; -import { Provider } from "react-redux"; -import { MemoryRouter } from "react-router-dom"; -import configureStore from "redux-mock-store"; - import { DisksColumn } from "./DisksColumn"; import type { RootState } from "app/store/root/types"; @@ -13,8 +8,7 @@ import { rootState as rootStateFactory, testStatus as testStatusFactory, } from "testing/factories"; - -const mockStore = configureStore(); +import { renderWithBrowserRouter, screen } from "testing/utils"; describe("DisksColumn", () => { let state: RootState; @@ -35,53 +29,29 @@ describe("DisksColumn", () => { }); }); - it("renders", () => { - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - - expect(wrapper.find("DisksColumn")).toMatchSnapshot(); - }); - it("displays the physical disk count", () => { state.machine.items[0].physical_disk_count = 2; - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find('[data-testid="disks"]').text()).toEqual("2"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByTestId("primary")).toHaveTextContent("2"); }); it("correctly shows error icon and tooltip if storage tests failed", () => { state.machine.items[0].storage_test_status = testStatusFactory({ status: TestStatusStatus.FAILED, }); - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find(".p-icon--error").exists()).toEqual(true); - expect(wrapper.find("Tooltip").exists()).toBe(true); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + + expect(screen.getByLabelText("error")).toHaveClass("p-icon--error"); + expect(screen.getByRole("tooltip")).toHaveTextContent( + "Machine has failed tests." + ); }); }); diff --git a/src/app/machines/views/MachineList/MachineListTable/DisksColumn/__snapshots__/DisksColumn.test.tsx.snap b/src/app/machines/views/MachineList/MachineListTable/DisksColumn/__snapshots__/DisksColumn.test.tsx.snap deleted file mode 100644 index f7948e36f0..0000000000 --- a/src/app/machines/views/MachineList/MachineListTable/DisksColumn/__snapshots__/DisksColumn.test.tsx.snap +++ /dev/null @@ -1,45 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DisksColumn renders 1`] = ` - - - 1 - - } - primaryClassName="u-align--right" - > -
-
-
-
- - 1 - -
-
-
-
-
-
-`; diff --git a/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.test.tsx b/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.test.tsx index 38bbf9c0d8..d0ab2a499a 100644 --- a/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.test.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/FabricColumn/FabricColumn.test.tsx @@ -1,9 +1,3 @@ -import { mount } from "enzyme"; -import { Provider } from "react-redux"; -import { MemoryRouter } from "react-router-dom"; -import { CompatRouter } from "react-router-dom-v5-compat"; -import configureStore from "redux-mock-store"; - import { FabricColumn } from "./FabricColumn"; import type { RootState } from "app/store/root/types"; @@ -13,11 +7,11 @@ import { rootState as rootStateFactory, testStatus as testStatusFactory, } from "testing/factories"; - -const mockStore = configureStore(); +import { renderWithBrowserRouter, screen } from "testing/utils"; describe("FabricColumn", () => { let state: RootState; + beforeEach(() => { state = rootStateFactory({ machine: machineStateFactory({ @@ -40,23 +34,6 @@ describe("FabricColumn", () => { }); }); - it("renders", () => { - const store = mockStore(state); - const wrapper = mount( - - - - - - - - ); - - expect(wrapper.find("FabricColumn")).toMatchSnapshot(); - }); - it("displays the fabric name", () => { state.machine.items[0] = machineFactory({ system_id: "abc123", @@ -70,20 +47,12 @@ describe("FabricColumn", () => { fabric_name: "fabric-2", }, }); - const store = mockStore(state); - const wrapper = mount( - - - - - - - - ); - expect(wrapper.find('[data-testid="fabric"]').text()).toEqual("fabric-2"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByLabelText("Fabric")).toHaveTextContent(/fabric-2/i); }); it("displays '-' with no fabric present", () => { @@ -94,20 +63,12 @@ describe("FabricColumn", () => { }), vlan: null, }); - const store = mockStore(state); - const wrapper = mount( - - - - - - - - ); - expect(wrapper.find('[data-testid="fabric"]').text()).toEqual("-"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByLabelText("Fabric")).toHaveTextContent("-"); }); it("displays VLAN name", () => { @@ -123,19 +84,11 @@ describe("FabricColumn", () => { fabric_name: "fabric-2", }, }); - const store = mockStore(state); - const wrapper = mount( - - - - - - - - ); - expect(wrapper.find('[data-testid="vlan"]').text()).toEqual("Wombat"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + expect(screen.getByTestId("vlan")).toHaveTextContent(/Wombat/i); }); }); diff --git a/src/app/machines/views/MachineList/MachineListTable/FabricColumn/__snapshots__/FabricColumn.test.tsx.snap b/src/app/machines/views/MachineList/MachineListTable/FabricColumn/__snapshots__/FabricColumn.test.tsx.snap deleted file mode 100644 index b97f6076cf..0000000000 --- a/src/app/machines/views/MachineList/MachineListTable/FabricColumn/__snapshots__/FabricColumn.test.tsx.snap +++ /dev/null @@ -1,99 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FabricColumn renders 1`] = ` - - - - fabric-0 - - - } - primaryAriaLabel="Fabric" - primaryTitle="fabric-0" - secondary={ - - Default VLAN - - } - secondaryAriaLabel="VLAN" - secondaryTitle="Default VLAN" - > -
-
-
-
- - - - - - - - - fabric-0 - - - - - -
-
-
- - Default VLAN - -
-
-
-
-
-`; diff --git a/src/app/machines/views/MachineList/MachineListTable/RamColumn/RamColumn.test.tsx b/src/app/machines/views/MachineList/MachineListTable/RamColumn/RamColumn.test.tsx index 7c189837b1..a1f3777a95 100644 --- a/src/app/machines/views/MachineList/MachineListTable/RamColumn/RamColumn.test.tsx +++ b/src/app/machines/views/MachineList/MachineListTable/RamColumn/RamColumn.test.tsx @@ -1,8 +1,3 @@ -import { mount } from "enzyme"; -import { Provider } from "react-redux"; -import { MemoryRouter } from "react-router-dom"; -import configureStore from "redux-mock-store"; - import { RamColumn } from "./RamColumn"; import type { RootState } from "app/store/root/types"; @@ -13,8 +8,7 @@ import { rootState as rootStateFactory, testStatus as testStatusFactory, } from "testing/factories"; - -const mockStore = configureStore(); +import { renderWithBrowserRouter, screen } from "testing/utils"; describe("RamColumn", () => { let state: RootState; @@ -37,35 +31,15 @@ describe("RamColumn", () => { }); }); - it("renders", () => { - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - - expect(wrapper.find("RamColumn")).toMatchSnapshot(); - }); - it("displays ram amount", () => { state.machine.items[0].memory = 16; - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find('[data-testid="memory"]').text()).toEqual("16"); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + + expect(screen.getByTestId("memory")).toHaveTextContent("16"); }); it("displays an error and tooltip if memory tests have failed", () => { @@ -73,18 +47,15 @@ describe("RamColumn", () => { state.machine.items[0].memory_test_status = testStatusFactory({ status: TestStatusStatus.FAILED, }); - const store = mockStore(state); - const wrapper = mount( - - - - - - ); - expect(wrapper.find("Tooltip").exists()).toBe(true); - expect(wrapper.find(".p-icon--error").exists()).toBe(true); + renderWithBrowserRouter(, { + route: "/machines", + state, + }); + + expect(screen.getByRole("tooltip")).toHaveTextContent( + "Machine has failed tests." + ); + expect(screen.getByLabelText("error")).toHaveClass("p-icon--error"); }); }); diff --git a/src/app/machines/views/MachineList/MachineListTable/RamColumn/__snapshots__/RamColumn.test.tsx.snap b/src/app/machines/views/MachineList/MachineListTable/RamColumn/__snapshots__/RamColumn.test.tsx.snap deleted file mode 100644 index e0a5282adb..0000000000 --- a/src/app/machines/views/MachineList/MachineListTable/RamColumn/__snapshots__/RamColumn.test.tsx.snap +++ /dev/null @@ -1,63 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RamColumn renders 1`] = ` - - - - 8 - -   - - GiB - - - } - primaryClassName="u-align--right" - > -
-
-
-
- - - 8 - -   - - GiB - - -
-
-
-
-
-
-`; diff --git a/src/app/subnets/views/SubnetDetails/SubnetSummary/SubnetSummaryForm/SubnetSummaryForm.test.tsx b/src/app/subnets/views/SubnetDetails/SubnetSummary/SubnetSummaryForm/SubnetSummaryForm.test.tsx index 6286e8cfae..ea96f1c1fc 100644 --- a/src/app/subnets/views/SubnetDetails/SubnetSummary/SubnetSummaryForm/SubnetSummaryForm.test.tsx +++ b/src/app/subnets/views/SubnetDetails/SubnetSummary/SubnetSummaryForm/SubnetSummaryForm.test.tsx @@ -71,15 +71,17 @@ it("can dispatch an action to update the subnet", async () => { await userEvent.clear(dnsField); await userEvent.type(dnsField, "fghij"); await userEvent.click( - screen.getByRole("checkbox", { name: "Managed allocation" }) + screen.getByRole("checkbox", { name: /Managed allocation/i }) ); await userEvent.click( - screen.getByRole("checkbox", { name: "Active discovery" }) + screen.getByRole("checkbox", { name: /Active discovery/i }) ); await userEvent.click( - screen.getByRole("checkbox", { name: "Allow DNS resolution" }) + screen.getByRole("checkbox", { name: /Allow DNS resolution/i }) + ); + await userEvent.click( + screen.getByRole("checkbox", { name: /Proxy access/i }) ); - await userEvent.click(screen.getByRole("checkbox", { name: "Proxy access" })); await userEvent.selectOptions( screen.getByRole("combobox", { name: "Fabric" }), fabrics[1].id.toString()