chore(deps): Update MAAS UI testing libraries (major) MAASENG-4473 (#…

…5620)
canonical · Feb 24, 2025 · dd523aa · dd523aa
1 parent 88e4ea9
commit dd523aa
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 305 deletions.
diff --git a/package.json b/package.json
@@ -109,9 +109,9 @@
     "@tanstack/react-query": "5.45.1",
     "@tanstack/react-query-devtools": "5.45.1",
     "@testing-library/cypress": "10.0.2",
-    "@testing-library/dom": "9.3.4",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.6",
-    "@testing-library/react": "14.3.1",
+    "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.5.2",
     "@types/classnames": "2.3.1",
     "@types/clone-deep": "4.0.4",
@@ -132,7 +132,7 @@
     "colors": "1.4.0",
     "concurrently": "8.2.2",
     "cooky-cutter": "1.5.4",
-    "cypress": "13.12.0",
+    "cypress": "14.0.3",
     "cypress-axe": "1.5.0",
     "cypress-wait-until": "3.0.2",
     "dotenv-flow": "4.1.0",
@@ -204,4 +204,4 @@
       "prefer-alphabetical-devDependencies": "error"
     }
   }
-}
+}
diff --git a/src/app/base/components/DebounceSearchBox/DebounceSearchBox.test.tsx b/src/app/base/components/DebounceSearchBox/DebounceSearchBox.test.tsx
@@ -1,21 +1,10 @@
 import { useState } from "react";
 
-import DebounceSearchBox, {
-  DEFAULT_DEBOUNCE_INTERVAL,
-  Labels,
-} from "./DebounceSearchBox";
+import DebounceSearchBox, { Labels } from "./DebounceSearchBox";
 
 import { userEvent, render, screen, waitFor } from "@/testing/utils";
 
 describe("DebounceSearchBox", () => {
-  beforeEach(() => {
-    vi.useFakeTimers();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-  });
-
   it(`runs onDebounced fn when the search text changes via the input, after the
       debounce interval`, async () => {
     const onDebounced = vi.fn();
@@ -31,15 +20,11 @@ describe("DebounceSearchBox", () => {
     };
     render(<Proxy />);
     const searchBox = screen.getByRole("searchbox");
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
 
-    await user.clear(searchBox);
-    await user.type(searchBox, "new-value");
+    await userEvent.clear(searchBox);
+    await userEvent.type(searchBox, "new-value");
 
-    expect(onDebounced).not.toHaveBeenCalled();
-
-    vi.advanceTimersByTime(DEFAULT_DEBOUNCE_INTERVAL);
-    expect(onDebounced).toHaveBeenCalledWith("new-value");
+    await waitFor(() => expect(onDebounced).toHaveBeenCalledWith("new-value"));
   });
 
   it(`does not run onDebounced fn when the search text changes via props, even
@@ -57,7 +42,6 @@ describe("DebounceSearchBox", () => {
     expect(onDebounced).not.toHaveBeenCalled();
 
     rerender(<Proxy searchText="new-value" />);
-    vi.advanceTimersByTime(DEFAULT_DEBOUNCE_INTERVAL);
     expect(onDebounced).not.toHaveBeenCalled();
   });
 
@@ -70,19 +54,16 @@ describe("DebounceSearchBox", () => {
       />
     );
     const searchBox = screen.getByRole("searchbox");
-    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
     expect(
       screen.queryByRole("alert", { name: Labels.Loading })
     ).not.toBeInTheDocument();
 
-    await user.clear(searchBox);
+    await userEvent.clear(searchBox);
 
     expect(
       screen.getByRole("alert", { name: Labels.Loading })
     ).toBeInTheDocument();
 
-    vi.advanceTimersByTime(DEFAULT_DEBOUNCE_INTERVAL);
-
     await waitFor(() => {
       expect(
         screen.queryByRole("alert", { name: Labels.Loading })

diff --git a/...p/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.test.tsx b/...p/base/components/DhcpFormFields/MachineSelect/MachineSelectBox/MachineSelectBox.test.tsx
@@ -2,97 +2,94 @@ import configureStore from "redux-mock-store";
 
 import MachineSelectBox from "./MachineSelectBox";
 
-import { DEFAULT_DEBOUNCE_INTERVAL } from "@/app/base/components/DebounceSearchBox/DebounceSearchBox";
 import { machineActions } from "@/app/store/machine";
 import * as query from "@/app/store/machine/utils/query";
 import type { RootState } from "@/app/store/root/types";
 import * as factory from "@/testing/factories";
 import {
   userEvent,
   screen,
-  renderWithMockStore,
+  renderWithProviders,
   waitFor,
 } from "@/testing/utils";
 
 const mockStore = configureStore<RootState>();
 
-beforeEach(() => {
-  vi.spyOn(query, "generateCallId")
-    .mockReturnValueOnce("mocked-nanoid-1")
-    .mockReturnValueOnce("mocked-nanoid-2");
-  vi.useFakeTimers();
-});
-afterEach(() => {
-  vi.restoreAllMocks();
-  vi.useRealTimers();
-});
-
-it("displays a listbox and a search input field", async () => {
-  renderWithMockStore(<MachineSelectBox onSelect={vi.fn()} />);
+describe("MachineSelectBox", () => {
+  beforeEach(() => {
+    vi.spyOn(query, "generateCallId")
+      .mockReturnValueOnce("mocked-nanoid-1")
+      .mockReturnValueOnce("mocked-nanoid-2");
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
 
-  expect(screen.getByRole("listbox")).toBeInTheDocument();
-});
+  it("displays a listbox and a search input field", async () => {
+    renderWithProviders(<MachineSelectBox onSelect={vi.fn()} />);
 
-it("fetches machines on mount", async () => {
-  const state = factory.rootState();
-  const store = mockStore(state);
-  renderWithMockStore(<MachineSelectBox onSelect={vi.fn()} />, {
-    store,
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
   });
 
-  expect(screen.getByRole("listbox")).toBeInTheDocument();
-  expect(screen.getByRole("listbox")).toBeInTheDocument();
-  const expectedAction = machineActions.fetch("mocked-nanoid-1", {
-    filter: { free_text: "" },
-    group_collapsed: undefined,
-    group_key: null,
-    page_number: 1,
-    page_size: 5,
-    sort_direction: null,
-    sort_key: null,
-  });
-  expect(
-    store.getActions().find((action) => action.type === expectedAction.type)
-  ).toStrictEqual(expectedAction);
-});
+  it("fetches machines on mount", async () => {
+    const state = factory.rootState();
+    const store = mockStore(state);
+    renderWithProviders(<MachineSelectBox onSelect={vi.fn()} />, {
+      store,
+    });
 
-it("requests machines filtered by the free text input value", async () => {
-  const state = factory.rootState();
-  const store = mockStore(state);
-  renderWithMockStore(<MachineSelectBox onSelect={vi.fn()} />, {
-    store,
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    const expectedAction = machineActions.fetch("mocked-nanoid-1", {
+      filter: { free_text: "" },
+      group_collapsed: undefined,
+      group_key: null,
+      page_number: 1,
+      page_size: 5,
+      sort_direction: null,
+      sort_key: null,
+    });
+    expect(
+      store.getActions().find((action) => action.type === expectedAction.type)
+    ).toStrictEqual(expectedAction);
   });
 
-  const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-  await user.type(screen.getByRole("combobox"), "test-machine");
-  const expectedActionParams = {
-    group_collapsed: undefined,
-    group_key: null,
-    page_number: 1,
-    page_size: 5,
-    sort_direction: null,
-    sort_key: null,
-  };
-  const expectedInitialAction = machineActions.fetch("mocked-nanoid-1", {
-    filter: { free_text: "" },
-    ...expectedActionParams,
-  });
-  const expectedAction = machineActions.fetch("mocked-nanoid-2", {
-    filter: { free_text: "test-machine" },
-    ...expectedActionParams,
-  });
+  it("requests machines filtered by the free text input value", async () => {
+    const state = factory.rootState();
+    const store = mockStore(state);
+    renderWithProviders(<MachineSelectBox onSelect={vi.fn()} />, {
+      store,
+    });
 
-  vi.advanceTimersByTime(DEFAULT_DEBOUNCE_INTERVAL);
+    await userEvent.type(screen.getByRole("combobox"), "test-machine");
+    const expectedActionParams = {
+      group_collapsed: undefined,
+      group_key: null,
+      page_number: 1,
+      page_size: 5,
+      sort_direction: null,
+      sort_key: null,
+    };
+    const expectedInitialAction = machineActions.fetch("mocked-nanoid-1", {
+      filter: { free_text: "" },
+      ...expectedActionParams,
+    });
+    const expectedAction = machineActions.fetch("mocked-nanoid-2", {
+      filter: { free_text: "test-machine" },
+      ...expectedActionParams,
+    });
 
-  await waitFor(() =>
-    expect(
-      store.getActions().filter((action) => action.type === expectedAction.type)
-        .length
-    ).toEqual(2)
-  );
-  const machineFetchActions = store
-    .getActions()
-    .filter((action) => action.type === expectedAction.type);
-  expect(machineFetchActions[0]).toStrictEqual(expectedInitialAction);
-  expect(machineFetchActions[1]).toStrictEqual(expectedAction);
+    await waitFor(() =>
+      expect(
+        store
+          .getActions()
+          .filter((action) => action.type === expectedAction.type).length
+      ).toEqual(2)
+    );
+    const machineFetchActions = store
+      .getActions()
+      .filter((action) => action.type === expectedAction.type);
+    expect(machineFetchActions[0]).toStrictEqual(expectedInitialAction);
+    expect(machineFetchActions[1]).toStrictEqual(expectedAction);
+  });
 });