test: Migrate 4 small MachineList tests to RTL MAASENG-1734 (#4949)

canonical · Jun 1, 2023 · 5a1a488 · 5a1a488
1 parent b8ab859
commit 5a1a488
Show file tree

Hide file tree

Showing 17 changed files with 100 additions and 644 deletions.
diff --git 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
@@ -74,6 +74,7 @@ const ScriptStatus = ({
     <span>
       {iconName && (
         <Icon
+          aria-label={iconName}
           className={classNames({
             "is-inline": children !== null && children !== undefined,
           })}

diff --git a/src/app/base/components/TooltipButton/TooltipButton.test.tsx b/src/app/base/components/TooltipButton/TooltipButton.test.tsx
@@ -1,16 +1,18 @@
 import TooltipButton from "./TooltipButton";
 
 import { breakLines, unindentString } from "app/utils";
-import { userEvent, render, screen } from "testing/utils";
+import { userEvent, render, screen, within } from "testing/utils";
 
 it("renders with default options correctly", async () => {
   render(<TooltipButton data-testid="tooltip-portal" message="Tooltip" />);
   const button = screen.getByRole("button");
 
   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
@@ -46,7 +46,9 @@ const TooltipButton = ({
         {...buttonProps}
       >
         {children}
-        {iconName ? <Icon name={iconName} {...iconProps} /> : null}
+        {iconName ? (
+          <Icon aria-label={iconName} name={iconName} {...iconProps} />
+        ) : null}
       </Button>
     </Tooltip>
   );

diff --git a/src/app/base/components/TooltipButton/__snapshots__/TooltipButton.test.tsx.snap b/src/app/base/components/TooltipButton/__snapshots__/TooltipButton.test.tsx.snap
diff --git 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", () => {
       </Formik>,
       { 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
@@ -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/...chineDetails/MachineNetwork/NetworkTable/NetworkTableActions/NetworkTableActions.test.tsx b/...chineDetails/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
@@ -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(
-      <Provider store={store}>
-        <MemoryRouter
-          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
-        >
-          <CoresColumn systemId="abc123" />
-        </MemoryRouter>
-      </Provider>
-    );
-
-    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(
-      <Provider store={store}>
-        <MemoryRouter
-          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
-        >
-          <CoresColumn systemId="abc123" />
-        </MemoryRouter>
-      </Provider>
-    );
 
-    expect(wrapper.find('[data-testid="cores"]').text()).toEqual("8");
+    renderWithBrowserRouter(<CoresColumn systemId="abc123" />, {
+      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(
-      <Provider store={store}>
-        <MemoryRouter
-          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
-        >
-          <CoresColumn systemId="abc123" />
-        </MemoryRouter>
-      </Provider>
-    );
 
-    expect(wrapper.find('[data-testid="arch"]').text()).toEqual("i386");
+    renderWithBrowserRouter(<CoresColumn systemId="abc123" />, {
+      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(
-      <Provider store={store}>
-        <MemoryRouter
-          initialEntries={[{ pathname: "/machines", key: "testKey" }]}
-        >
-          <CoresColumn systemId="abc123" />
-        </MemoryRouter>
-      </Provider>
-    );
 
-    expect(wrapper.find("Tooltip").prop("message")).toEqual("amd64/generic");
+    renderWithBrowserRouter(<CoresColumn systemId="abc123" />, {
+      route: "/machines",
+      state,
+    });
+
+    expect(screen.getByRole("tooltip")).toHaveTextContent("amd64/generic");
   });
 });