From ce82b0e7292ec7346d02cb01515a0c2992c949cb Mon Sep 17 00:00:00 2001 From: Horus Lugo Date: Fri, 13 Dec 2024 21:58:53 +0100 Subject: [PATCH] Upgrade vite and vitest --- apps/pwa/package.json | 28 +- apps/pwa/src/app.d.ts | 6 - apps/pwa/src/components/about/About.test.tsx | 6 +- .../download-app/DownloadApp.test.tsx | 2 +- .../element-picker/ElementPicker.test.tsx | 18 +- .../locale-selector/LocaleSelector.test.tsx | 6 +- .../mass-calculator/MassCalculator.test.tsx | 82 +- .../components/not-found/NotFound.test.tsx | 6 +- .../PeriodicTablePage.test.tsx | 6 +- .../PeriodicTableTest.test.tsx | 41 +- .../PeriodicTableTestSettings.test.tsx | 2 +- .../periodic-table/PeriodicTable.test.tsx | 4 +- .../pt-element/PtElementInfo.test.tsx | 6 +- .../pt-element/PtElementSetting.test.tsx | 6 +- .../src/components/rate-app/RateApp.test.tsx | 18 +- .../src/components/search-view/SearchView.tsx | 2 +- .../components/shared/button/Button.test.tsx | 10 +- apps/pwa/src/components/shared/icon/Icon.tsx | 5 +- .../components/shared/modal/modal.test.tsx | 13 +- .../components/shared/navbar/Navbar.test.tsx | 6 +- .../shared/overlay/overlay.test.tsx | 6 +- .../selector-modal/SelectorModal.test.tsx | 6 +- .../test-selection/TestSelection.test.tsx | 6 +- .../theme-selector/ThemeSelector.test.tsx | 18 +- .../valences-test/ValencesTest.test.tsx | 34 +- .../settings/ValencesTestSettings.test.tsx | 2 +- apps/pwa/src/contexts/ElementContext.tsx | 7 +- apps/pwa/src/hooks/useHubCategories.ts | 6 +- apps/pwa/src/hooks/useHubItems.ts | 7 +- apps/pwa/src/setupTests.ts | 17 +- apps/pwa/tsconfig.json | 2 +- apps/pwa/{vite.config.ts => vite.config.mts} | 9 - apps/pwa/vitest.config.mts | 16 + package.json | 3 - ...es__testing-library__jest-dom@5.14.5.patch | 21 - pnpm-lock.yaml | 3716 ++++++++++------- 36 files changed, 2473 insertions(+), 1676 deletions(-) rename apps/pwa/{vite.config.ts => vite.config.mts} (87%) create mode 100644 apps/pwa/vitest.config.mts delete mode 100644 patches/@types__testing-library__jest-dom@5.14.5.patch diff --git a/apps/pwa/package.json b/apps/pwa/package.json index 1647bc96..1c8276e9 100644 --- a/apps/pwa/package.json +++ b/apps/pwa/package.json @@ -38,11 +38,11 @@ "zustand": "^4.3.2" }, "devDependencies": { - "@testing-library/dom": "^7.30.3", - "@testing-library/jest-dom": "^5.11.10", - "@testing-library/react": "^11.2.6", - "@testing-library/react-hooks": "^5.1.1", - "@testing-library/user-event": "^13.1.1", + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.6.3", + "@testing-library/react": "^16.1.0", + "@testing-library/react-hooks": "^8.0.1", + "@testing-library/user-event": "^14.5.2", "@types/animejs": "^3.1.3", "@types/body-scroll-lock": "^2.6.1", "@types/classnames": "^2.2.11", @@ -51,10 +51,10 @@ "@types/react": "^18.2.15", "@types/react-dom": "^18.2.7", "@types/react-helmet": "^6.1.0", - "@types/testing-library__jest-dom": "^5.14.5", - "@vitejs/plugin-legacy": "^3.0.1", - "@vitejs/plugin-react": "^3.0.1", - "@vitest/coverage-istanbul": "^0.28.1", + "@types/testing-library__jest-dom": "^6.0.0", + "@vitejs/plugin-legacy": "6.0.0", + "@vitejs/plugin-react": "4.3.4", + "@vitest/coverage-istanbul": "2.1.8", "eslint": "^8.44.0", "@internal/eslint-config": "workspace:*", "jest-useragent-mock": "^0.1.1", @@ -65,13 +65,13 @@ "nyc": "^15.1.0", "prettier": "^2.2.1", "rimraf": "^3.0.2", - "sass": "^1.32.8", + "sass": "1.83.0", "typescript": "^4.9.4", "@internal/tsconfig": "workspace:*", - "vite": "4.0.4", - "vite-plugin-istanbul": "^4.0.0", - "vite-plugin-svgr": "^2.4.0", - "vitest": "^0.28.1", + "vite": "6.0.3", + "vite-plugin-istanbul": "6.0.2", + "vite-plugin-svgr": "4.3.0", + "vitest": "2.1.8", "workbox-cli": "^6.1.0" }, "resolutions": { diff --git a/apps/pwa/src/app.d.ts b/apps/pwa/src/app.d.ts index 525e3942..e56d78f7 100644 --- a/apps/pwa/src/app.d.ts +++ b/apps/pwa/src/app.d.ts @@ -7,9 +7,3 @@ interface Window { }; __DEBUG__?: boolean; } - -declare module "*.svg" { - export const ReactComponent: React.ComponentType< - React.SVGAttributes - >; -} diff --git a/apps/pwa/src/components/about/About.test.tsx b/apps/pwa/src/components/about/About.test.tsx index 4f61fb54..9a90db59 100644 --- a/apps/pwa/src/components/about/About.test.tsx +++ b/apps/pwa/src/components/about/About.test.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import About from "./About"; import { render } from "@/test-utils"; @@ -74,7 +74,7 @@ test("should validate Report bug link", () => { ); }); -test("should invoke onNavbarBackButtonClick", () => { +test("should invoke onNavbarBackButtonClick", async () => { const { container, route } = render( <> @@ -88,6 +88,6 @@ test("should invoke onNavbarBackButtonClick", () => { ".navbar__back-button" ) as HTMLAnchorElement; - userEvent.click(navButton); + await userEvent.click(navButton); expect(route.location.pathname).toBe("/"); }); diff --git a/apps/pwa/src/components/download-app/DownloadApp.test.tsx b/apps/pwa/src/components/download-app/DownloadApp.test.tsx index 815ce0b2..850c2428 100644 --- a/apps/pwa/src/components/download-app/DownloadApp.test.tsx +++ b/apps/pwa/src/components/download-app/DownloadApp.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { render, screen, waitFor } from "@testing-library/react"; import DownloadApp, { DownloadAppConfig } from "./DownloadApp"; import { useFlagStore } from "@/services/flags"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import "hammerjs"; import { clear, mockUserAgent } from "jest-useragent-mock"; import { useLocalStorageCacheStore } from "@/hooks/useLocalStorage"; diff --git a/apps/pwa/src/components/element-picker/ElementPicker.test.tsx b/apps/pwa/src/components/element-picker/ElementPicker.test.tsx index 17363bd5..24784089 100644 --- a/apps/pwa/src/components/element-picker/ElementPicker.test.tsx +++ b/apps/pwa/src/components/element-picker/ElementPicker.test.tsx @@ -1,19 +1,19 @@ import * as React from "react"; import { screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import ElementPicker from "./ElementPicker"; import { render } from "@/test-utils"; -test("search for Neon", () => { +test("search for Neon", async () => { const onElement = vi.fn(); render(); expect(screen.getByText("Helium")).toBeVisible(); - userEvent.type(screen.getByRole("textbox"), "Neon"); + await userEvent.type(screen.getByRole("textbox"), "Neon"); expect(screen.queryByText("Helium")).not.toBeInTheDocument(); - userEvent.click(screen.getByText("Noble gases")); + await userEvent.click(screen.getByText("Noble gases")); expect(onElement).toHaveBeenCalledWith( expect.objectContaining({ @@ -22,14 +22,14 @@ test("search for Neon", () => { ); }); -test("search for atomic number 118", () => { +test("search for atomic number 118", async () => { const onElement = vi.fn(); render(); - userEvent.type(screen.getByRole("textbox"), "118"); + await userEvent.type(screen.getByRole("textbox"), "118"); - userEvent.click(screen.getByText("Oganesson")); + await userEvent.click(screen.getByText("Oganesson")); expect(onElement).toHaveBeenCalledWith( expect.objectContaining({ @@ -43,10 +43,10 @@ test("search for atomic number 25", async () => { render(); - userEvent.type(screen.getByRole("textbox"), "25"); + await userEvent.type(screen.getByRole("textbox"), "25"); expect(screen.getByRole("textbox")).toHaveValue("25"); - userEvent.click(await screen.findByText("Manganese")); + await userEvent.click(await screen.findByText("Manganese")); expect(onElement).toHaveBeenCalledWith( expect.objectContaining({ diff --git a/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx b/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx index 58f8c0f3..ecc9405b 100644 --- a/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx +++ b/apps/pwa/src/components/locale-selector/LocaleSelector.test.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { screen } from "@testing-library/react"; import { render, waitMs } from "@/test-utils"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import LocaleSelector from "./LocaleSelector"; beforeEach(() => { @@ -14,9 +14,9 @@ test("should be able to change locale", async () => { expect(screen.getByText(/change language/i)).toBeInTheDocument(); - userEvent.click(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); - userEvent.click( + await userEvent.click( screen.getByRole("button", { name: /español/i, }) diff --git a/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx b/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx index 9197c22c..caa7e86e 100644 --- a/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx +++ b/apps/pwa/src/components/mass-calculator/MassCalculator.test.tsx @@ -1,11 +1,11 @@ import * as React from "react"; import { screen } from "@testing-library/react"; import { render } from "@/test-utils"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import MassCalculator from "./MassCalculator"; import "hammerjs"; -test("should render mass calculator", () => { +test("should render mass calculator", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); @@ -19,151 +19,151 @@ test("should render mass calculator", () => { expect(screen.getByText(/164\.93032 g \/ mol/i)).toBeInTheDocument(); }); -test("should clear elements", () => { +test("should clear elements", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); expect(screen.getByText(/0 g \/ mol/i)).toBeInTheDocument(); expect(screen.queryByText(/holmium/i)).not.toBeInTheDocument(); }); -test("should add elements and verify total mass", () => { +test("should add elements and verify total mass", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); // clear elements - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); // add element - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); expect(screen.getByRole("textbox")).toBeInTheDocument(); - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // adding another element - userEvent.click(screen.getByText(/add element/i)); - userEvent.type(screen.getByRole("textbox"), "oxygen"); + await userEvent.click(screen.getByText(/add element/i)); + await userEvent.type(screen.getByRole("textbox"), "oxygen"); - userEvent.click(screen.getAllByText(/oxygen/i)[0]); + await userEvent.click(screen.getAllByText(/oxygen/i)[0]); - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); - userEvent.clear(screen.getByDisplayValue("1")); - userEvent.type(screen.getByDisplayValue("0"), "2"); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.clear(screen.getByDisplayValue("1")); + await userEvent.type(screen.getByDisplayValue("0"), "2"); - userEvent.click(screen.getAllByRole("button")[5]); + await userEvent.click(screen.getAllByRole("button")[5]); //verify total mass of H2O(water) expect(screen.getByText(/18\.01528 g \/ mol/i)).toBeInTheDocument(); }); -test("should be able to increase and decrease element amount with icons", () => { +test("should be able to increase and decrease element amount with icons", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); // clear elements - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); // add element - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // open increase amount modal - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // verify initial amount of Hydrogen expect(screen.getByDisplayValue("1")).toBeInTheDocument(); // Click + icon - userEvent.click(screen.getAllByRole("button")[6]); + await userEvent.click(screen.getAllByRole("button")[6]); // Verify amount is increased expect(screen.getByDisplayValue("2")).toBeInTheDocument(); // Click - icon - userEvent.click(screen.getAllByRole("button")[5]); + await userEvent.click(screen.getAllByRole("button")[5]); expect(screen.getByDisplayValue("1")).toBeInTheDocument(); }); -test("should increase element amount by +1 if user add same element again", () => { +test("should increase element amount by +1 if user add same element again", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); // clear elements - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); // add element - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // open add element modal again - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); // add hydrogen again - userEvent.click(screen.getAllByText(/hydrogen/i)[2]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[2]); // Verify total mass of 2 atoms of Hydrogen expect(screen.getByText(/2\.01588 g \/ mol/i)).toBeInTheDocument(); }); -test("should navigate back", () => { +test("should navigate back", async () => { const { route } = render(, { initialHistoryEntries: ["/mass-calculator"], }); - userEvent.click(screen.getAllByRole("button")[0]); + await userEvent.click(screen.getAllByRole("button")[0]); expect(route.location.pathname).toBe("/"); }); -test("should not allow user to add negative amounts", () => { +test("should not allow user to add negative amounts", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); // clear elements - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); // add element - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // open increase amount modal - userEvent.click(screen.getAllByText(/hydrogen/i)[0]); + await userEvent.click(screen.getAllByText(/hydrogen/i)[0]); // verify initial amount of Hydrogen expect(screen.getByDisplayValue("1")).toBeInTheDocument(); // Click - icon - userEvent.click(screen.getAllByRole("button")[5]); + await userEvent.click(screen.getAllByRole("button")[5]); expect(screen.getByDisplayValue("0")).toBeInTheDocument(); - userEvent.click(screen.getAllByRole("button")[5]); + await userEvent.click(screen.getAllByRole("button")[5]); // Click again on - icon expect(screen.getByDisplayValue("0")).toBeInTheDocument(); }); -test("should be able to close add element modal by clicking on overlay", () => { +test("should be able to close add element modal by clicking on overlay", async () => { render(, { initialHistoryEntries: ["/mass-calculator"], }); // clear elements - userEvent.click(screen.getByText(/clear/i)); + await userEvent.click(screen.getByText(/clear/i)); // add element - userEvent.click(screen.getByText(/add element/i)); + await userEvent.click(screen.getByText(/add element/i)); // close add elements modal by clicking on overlay - userEvent.click(screen.getByTestId("overlay")); + await userEvent.click(screen.getByTestId("overlay")); }); diff --git a/apps/pwa/src/components/not-found/NotFound.test.tsx b/apps/pwa/src/components/not-found/NotFound.test.tsx index 8a4ce857..19bf0d87 100644 --- a/apps/pwa/src/components/not-found/NotFound.test.tsx +++ b/apps/pwa/src/components/not-found/NotFound.test.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { screen } from "@testing-library/react"; import NotFound from "./NotFound"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import { LocationGetter, render } from "@/test-utils"; import { Location } from "react-router-dom"; @@ -21,7 +21,7 @@ test("should render NotFound page", () => { expect(screen.getByRole("button", { name: /home/i })).toBeInTheDocument(); }); -test("should be able to navigate back to home", () => { +test("should be able to navigate back to home", async () => { let testLocation: Location; render( @@ -34,7 +34,7 @@ test("should be able to navigate back to home", () => { } ); - userEvent.click( + await userEvent.click( screen.getByRole("button", { name: /home/i, }) diff --git a/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.test.tsx b/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.test.tsx index baf81bc0..5af13567 100644 --- a/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.test.tsx +++ b/apps/pwa/src/components/periodic-table-page/PeriodicTablePage.test.tsx @@ -1,15 +1,15 @@ import * as React from "react"; import { screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import PeriodicTablePage from "./PeriodicTablePage"; import "hammerjs"; import { render } from "@/test-utils"; -test("should be able to navigate back to main menu", () => { +test("should be able to navigate back to main menu", async () => { const { route } = render(, { initialHistoryEntries: ["/periodic-table"], }); - userEvent.click(screen.getByTestId("navbar-back-button")); + await userEvent.click(screen.getByTestId("navbar-back-button")); expect(route.location.pathname).toBe("/"); }); diff --git a/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.test.tsx b/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.test.tsx index a296c263..a6c4db9b 100644 --- a/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.test.tsx +++ b/apps/pwa/src/components/periodic-table-test/PeriodicTableTest.test.tsx @@ -5,13 +5,12 @@ import { waitForElementToBeRemoved, within, } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import "hammerjs"; import { STORAGE_KEY, defaultSettings } from "@/hooks/useSettings"; import { TEST_SELECTION } from "@/routes"; import PeriodicTableTest from "./PeriodicTableTest"; import { render } from "@/test-utils"; -import { act } from "react-dom/test-utils"; // Mocking shuffle so the order of the elements is always the same vi.mock("../../utils/shuffle", () => ({ @@ -79,7 +78,7 @@ test("should show results correct answers", async () => { ); // Close the dialog by clicking overlay - userEvent.click(screen.getByTestId("overlay")); + await userEvent.click(screen.getByTestId("overlay")); // To improve test performance limit selection to the first row of the periodic table let firstRow = container.querySelector( @@ -91,10 +90,10 @@ test("should show results correct answers", async () => { } // Place Hydrogen to correct position - userEvent.click(within(firstRow).getByRole("button", { name: "1. ?" })); + await userEvent.click(within(firstRow).getByRole("button", { name: "1. ?" })); // Place Helium to correct position - userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); + await userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); expect(screen.getByText(/test results/i)).toBeInTheDocument(); // Test results will have a 2/2 text but it's divided into span-elements and can't be queried with a single query @@ -105,7 +104,9 @@ test("should show results correct answers", async () => { ).not.toBeInTheDocument(); // Reseting tests - userEvent.click(screen.getByRole("button", { name: /retake full test/i })); + await userEvent.click( + screen.getByRole("button", { name: /retake full test/i }) + ); // Wait for periodic table to be displayed again await waitFor(() => { @@ -136,7 +137,7 @@ test("should show correct results with incorrect answers", async () => { ); // Close the dialog by clicking overlay - userEvent.click(screen.getByTestId("overlay")); + await userEvent.click(screen.getByTestId("overlay")); // To improve test performance limit selection to the first row of the periodic table let firstRow = container.querySelector( @@ -148,13 +149,13 @@ test("should show correct results with incorrect answers", async () => { } // Place Hydrogen to incorrect position - userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); + await userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); // Place Hydrogen to correct position - userEvent.click(within(firstRow).getByRole("button", { name: "1. ?" })); + await userEvent.click(within(firstRow).getByRole("button", { name: "1. ?" })); // Place Helium to correct position - userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); + await userEvent.click(within(firstRow).getByRole("button", { name: "2. ?" })); expect(screen.getByText(/test results/i)).toBeInTheDocument(); // Test results will have a 1/2 text but it's divided into span-elements and can't be queried with a single query @@ -166,7 +167,7 @@ test("should show correct results with incorrect answers", async () => { ).toBeInTheDocument(); // Reseting wrong tests - userEvent.click( + await userEvent.click( screen.getByRole("button", { name: /retake incorrect answers/i }) ); @@ -199,10 +200,10 @@ test("should show question modal", async () => { ); // Close the dialog by clicking overlay - userEvent.click(screen.getByTestId("overlay")); + await userEvent.click(screen.getByTestId("overlay")); // Open dialog by clicking on the question button - userEvent.click( + await userEvent.click( container.querySelector( ".periodic-table-test__current-question__button" ) as HTMLElement @@ -215,17 +216,15 @@ test("should go back to tests", async () => { initialHistoryEntries: ["/tests/periodic-table"], }); - await act(async () => { - const backLink = container.querySelector( - ".navbar__back-button" - ) as HTMLElement; + const backLink = container.querySelector( + ".navbar__back-button" + ) as HTMLElement; - userEvent.click(backLink); + await userEvent.click(backLink); - const continueButton = await screen.findByText("Continue"); + const continueButton = await screen.findByText("Continue"); - userEvent.click(continueButton); - }); + await userEvent.click(continueButton); expect(route.location.pathname).toBe(TEST_SELECTION); }); diff --git a/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.test.tsx b/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.test.tsx index e9127362..9bc99ca6 100644 --- a/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.test.tsx +++ b/apps/pwa/src/components/periodic-table-test/settings/PeriodicTableTestSettings.test.tsx @@ -4,7 +4,7 @@ import { waitFor, waitForElementToBeRemoved, } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import PeriodicTableTestSettings from "./PeriodicTableTestSettings"; import { render } from "@/test-utils"; diff --git a/apps/pwa/src/components/periodic-table/PeriodicTable.test.tsx b/apps/pwa/src/components/periodic-table/PeriodicTable.test.tsx index 86966192..db82da9f 100644 --- a/apps/pwa/src/components/periodic-table/PeriodicTable.test.tsx +++ b/apps/pwa/src/components/periodic-table/PeriodicTable.test.tsx @@ -5,7 +5,9 @@ import PtElementInfo from "@/components/pt-element/PtElementInfo"; import { Element } from "@/Element"; import { render } from "@/test-utils"; -const elementsMap = import.meta.globEager("../../data/elements/*.json"); +const elementsMap = import.meta.glob("../../data/elements/*.json", { + eager: true, +}); const elements = Object.values(elementsMap) as Element[]; function elementRenderer(atomic: number) { diff --git a/apps/pwa/src/components/pt-element/PtElementInfo.test.tsx b/apps/pwa/src/components/pt-element/PtElementInfo.test.tsx index fc455409..dfee77c7 100644 --- a/apps/pwa/src/components/pt-element/PtElementInfo.test.tsx +++ b/apps/pwa/src/components/pt-element/PtElementInfo.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import PtElementInfo from "./PtElementInfo"; import { screen } from "@testing-library/react"; import { render } from "@/test-utils"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import IRON_ELEMENT from "@/data/elements/26.json"; import { Element } from "@/Element"; @@ -35,11 +35,11 @@ describe("PTElementInfo", () => { expect(screen.getByRole("button", { name })).toHaveClass(element.group); }); - it("calls onClick when the element is clicked", () => { + it("calls onClick when the element is clicked", async () => { const onClick = vi.fn(); render(); - userEvent.click(screen.getByText(element.name)); + await userEvent.click(screen.getByText(element.name)); expect(onClick).toHaveBeenCalledWith(element); }); diff --git a/apps/pwa/src/components/pt-element/PtElementSetting.test.tsx b/apps/pwa/src/components/pt-element/PtElementSetting.test.tsx index a3308b0e..e67de1ff 100644 --- a/apps/pwa/src/components/pt-element/PtElementSetting.test.tsx +++ b/apps/pwa/src/components/pt-element/PtElementSetting.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import PtElementSetting from "./PtElementSetting"; import { screen } from "@testing-library/react"; import { render } from "@/test-utils"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import IRON_ELEMENT from "@/data/elements/26.json"; import { Element } from "@/Element"; @@ -42,11 +42,11 @@ describe("PtElementSetting", () => { ).toHaveClass(element.group); }); - it("calls onClick when the element is clicked", () => { + it("calls onClick when the element is clicked", async () => { const onClick = vi.fn(); render(); - userEvent.click(screen.getByText(element.name)); + await userEvent.click(screen.getByText(element.name)); expect(onClick).toHaveBeenCalledWith(element); }); diff --git a/apps/pwa/src/components/rate-app/RateApp.test.tsx b/apps/pwa/src/components/rate-app/RateApp.test.tsx index 3ef78bc5..1523e16f 100644 --- a/apps/pwa/src/components/rate-app/RateApp.test.tsx +++ b/apps/pwa/src/components/rate-app/RateApp.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { render, screen, waitFor } from "@testing-library/react"; import RateApp from "./RateApp"; import NativeBridge from "@/NativeBridge"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; import "hammerjs"; import { clear, mockUserAgent } from "jest-useragent-mock"; import { useLocalStorageCacheStore } from "@/hooks/useLocalStorage"; @@ -34,7 +34,7 @@ test("should open modal to provide rating", async () => { vi.spyOn(NativeBridge, "isHybrid").mockReturnValue(true); render(); - userEvent.click(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); expect(screen.getByTestId("overlay")).toBeInTheDocument(); @@ -44,7 +44,7 @@ test("should open modal to provide rating", async () => { ) ).toBeInTheDocument(); - userEvent.click(screen.getByText(/OK/i)); + await userEvent.click(screen.getByText(/OK/i)); expect(screen.queryByTestId("overlay")).not.toBeInTheDocument(); @@ -60,29 +60,29 @@ test("should open modal to provide rating", async () => { expect(global.open).toHaveBeenCalledTimes(1); }); -test("should close modal", () => { +test("should close modal", async () => { vi.spyOn(NativeBridge, "isHybrid").mockReturnValue(true); render(); - userEvent.click(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); expect(screen.getByTestId("overlay")).toBeInTheDocument(); - userEvent.click(screen.getAllByRole("button")[2]); + await userEvent.click(screen.getAllByRole("button")[2]); expect(screen.queryByTestId("overlay")).not.toBeInTheDocument(); }); -test("should close modal", () => { +test("should close modal", async () => { mockUserAgent("mock"); vi.spyOn(NativeBridge, "isHybrid").mockReturnValue(true); render(); - userEvent.click(screen.getByRole("button")); + await userEvent.click(screen.getByRole("button")); expect(screen.getByTestId("overlay")).toBeInTheDocument(); - userEvent.click(screen.getAllByRole("button")[3]); + await userEvent.click(screen.getAllByRole("button")[3]); expect(screen.queryByTestId("overlay")).not.toBeInTheDocument(); const storageObject = window.localStorage.getItem(RATE_APP_STORAGE_KEY); diff --git a/apps/pwa/src/components/search-view/SearchView.tsx b/apps/pwa/src/components/search-view/SearchView.tsx index 48c879d7..1fe578fe 100644 --- a/apps/pwa/src/components/search-view/SearchView.tsx +++ b/apps/pwa/src/components/search-view/SearchView.tsx @@ -13,7 +13,7 @@ import classNames from "classnames"; import { Element } from "@/Element"; import Atom from "@/components/atom"; import { PERIODIC_TABLE } from "@/routes"; -import { ReactComponent as NoResults } from "./no-results.svg"; +import NoResults from "./no-results.svg?react"; import { useQuery } from "@/hooks/useQuery"; import { useNavigate } from "react-router-dom"; diff --git a/apps/pwa/src/components/shared/button/Button.test.tsx b/apps/pwa/src/components/shared/button/Button.test.tsx index c1693c7c..4d75e46e 100644 --- a/apps/pwa/src/components/shared/button/Button.test.tsx +++ b/apps/pwa/src/components/shared/button/Button.test.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { screen } from "@testing-library/react"; import { render } from "@/test-utils"; import Button from "./Button"; -import userEvent from "@testing-library/user-event"; +import { userEvent } from "@testing-library/user-event"; const onClickMock = vi.fn(); @@ -30,7 +30,7 @@ test("should render button component with link", () => { ); }); -test("should invoke onClick", () => { +test("should invoke onClick", async () => { render(