From d26f47692fbc3afc67367b25f89b47d999429644 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 11 Jan 2023 13:37:52 +0000 Subject: [PATCH 1/8] [web] Add an util function for mocking components --- web/src/test-utils.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/web/src/test-utils.js b/web/src/test-utils.js index 4f1d0062e8..6d8ce2d85e 100644 --- a/web/src/test-utils.js +++ b/web/src/test-utils.js @@ -84,4 +84,18 @@ const createCallbackMock = () => { return [on, callbacks]; }; -export { installerRender, plainRender, createCallbackMock }; +/** + * Returns fake component with given content + * + * @param {React.ReactNode} content - content for the fake component + * @param {object} [options] - Options for building the fake component + * @param {string} [options.wrapper="div"] - the HTML element to be used for wrapping given content + * + * @return a function component + */ +const mockComponent = (content, { wrapper } = { wrapper: "div" }) => { + const Wrapper = wrapper; + return () => {content}; +}; + +export { installerRender, plainRender, createCallbackMock, mockComponent }; From 9b8e62cba5be7eb24e50952dcd7142e517f64b01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 11 Jan 2023 13:55:36 +0000 Subject: [PATCH 2/8] [web] Use mockComponent function --- web/src/App.test.jsx | 22 +++++++++---------- web/src/Main.test.jsx | 6 ++--- .../core/InstallationProgress.test.jsx | 4 ++-- web/src/components/layout/DBusError.test.jsx | 4 ++-- web/src/components/network/Network.test.jsx | 6 ++--- .../network/WifiHiddenNetworkForm.test.jsx | 4 ++-- .../network/WifiNetworkListItem.test.jsx | 6 ++--- web/src/components/overview/Overview.test.jsx | 12 +++++----- .../overview/StorageSection.test.jsx | 4 ++-- .../components/questions/Questions.test.jsx | 6 ++--- .../software/ProductSelectionPage.test.jsx | 4 ++-- .../storage/ProposalActionsSection.test.jsx | 4 ++-- .../components/storage/ProposalPage.test.jsx | 8 +++---- .../storage/ProposalTargetSection.test.jsx | 4 ++-- 14 files changed, 47 insertions(+), 47 deletions(-) diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx index 1d48fa8322..e57571f725 100644 --- a/web/src/App.test.jsx +++ b/web/src/App.test.jsx @@ -21,26 +21,26 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; -import { createClient } from "@client"; +import { installerRender, mockComponent } from "@/test-utils"; import App from "./App"; +import { createClient } from "@client"; import { STARTUP, CONFIG, INSTALL } from "@client/phase"; import { IDLE, BUSY } from "@client/status"; jest.mock("@client"); +jest.mock('react-router-dom', () => ({ + Outlet: mockComponent("Content"), +})); + // Mock some components, // See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export - -jest.mock("@components/questions/Questions", () => () =>
Questions Mock
); -jest.mock("@components/layout/DBusError", () => () =>
D-BusError Mock
); +jest.mock("@components/layout/DBusError", () => () => "D-BusError Mock"); jest.mock("@components/layout/LoadingEnvironment", () => () => "LoadingEnvironment Mock"); -jest.mock("@components/core/InstallationProgress", () => () => "InstallationProgress Mock"); -jest.mock("@components/core/InstallationFinished", () => () => "InstallationFinished Mock"); -jest.mock("@components/network/TargetIpsPopup", () => () => "Target IPs Mock"); -jest.mock('react-router-dom', () => ({ - Outlet: () =>
Content
, -})); +jest.mock("@components/questions/Questions", () => mockComponent("Questions Mock")); +jest.mock("@components/core/InstallationProgress", () => mockComponent("InstallationProgress Mock")); +jest.mock("@components/core/InstallationFinished", () => mockComponent("InstallationFinished Mock")); +jest.mock("@components/network/TargetIpsPopup", () => mockComponent("Target IPs Mock")); const callbacks = {}; const getStatusFn = jest.fn(); diff --git a/web/src/Main.test.jsx b/web/src/Main.test.jsx index 09517e7ddc..0c26e77ba1 100644 --- a/web/src/Main.test.jsx +++ b/web/src/Main.test.jsx @@ -21,13 +21,13 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import Main from "@/Main"; -jest.mock("@components/questions/Questions", () => () =>
Questions Mock
); +jest.mock("@components/questions/Questions", () => mockComponent("Questions Mock")); jest.mock('react-router-dom', () => ({ - Outlet: () =>
Content
, + Outlet: mockComponent("Content"), })); it("renders the Questions component and the content", async () => { diff --git a/web/src/components/core/InstallationProgress.test.jsx b/web/src/components/core/InstallationProgress.test.jsx index 381a8c30a3..188e14af27 100644 --- a/web/src/components/core/InstallationProgress.test.jsx +++ b/web/src/components/core/InstallationProgress.test.jsx @@ -22,11 +22,11 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import InstallationProgress from "./InstallationProgress"; -jest.mock("@components/core/ProgressReport", () => () => "ProgressReport Mock"); +jest.mock("@components/core/ProgressReport", () => mockComponent("ProgressReport Mock")); describe("InstallationProgress", () => { it("uses 'Installing' as title", async () => { diff --git a/web/src/components/layout/DBusError.test.jsx b/web/src/components/layout/DBusError.test.jsx index 16acba998b..99fd29ec80 100644 --- a/web/src/components/layout/DBusError.test.jsx +++ b/web/src/components/layout/DBusError.test.jsx @@ -22,11 +22,11 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@/test-utils"; +import { plainRender, mockComponent } from "@/test-utils"; import { DBusError } from "@components/layout"; -jest.mock("@components/network/TargetIpsPopup", () => () => "IP Mock"); +jest.mock("@components/network/TargetIpsPopup", () => mockComponent("IP Mock")); describe("DBusError", () => { it("includes a generic D-Bus connection problem message", () => { diff --git a/web/src/components/network/Network.test.jsx b/web/src/components/network/Network.test.jsx index 1ab48e70a9..bd4b8a7e46 100644 --- a/web/src/components/network/Network.test.jsx +++ b/web/src/components/network/Network.test.jsx @@ -21,14 +21,14 @@ import React from "react"; import { screen, within, waitFor } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import Network from "@components/network/Network"; import { ConnectionTypes } from "@client/network"; import { createClient } from "@client"; jest.mock("@client"); -jest.mock("@components/network/NetworkWiredStatus", () => () =>
Wired Connections
); -jest.mock("@components/network/NetworkWifiStatus", () => () =>
WiFi Connections
); +jest.mock("@components/network/NetworkWiredStatus", () => mockComponent("Wired Connections")); +jest.mock("@components/network/NetworkWifiStatus", () => mockComponent("WiFi Connections")); const networkSettings = { wifiScanSupported: false, hostname: "test" }; let settingsFn = jest.fn().mockReturnValue(networkSettings); diff --git a/web/src/components/network/WifiHiddenNetworkForm.test.jsx b/web/src/components/network/WifiHiddenNetworkForm.test.jsx index 3e7a1103d6..a1ecda8459 100644 --- a/web/src/components/network/WifiHiddenNetworkForm.test.jsx +++ b/web/src/components/network/WifiHiddenNetworkForm.test.jsx @@ -22,11 +22,11 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@/test-utils"; +import { plainRender, mockComponent } from "@/test-utils"; import { WifiHiddenNetworkForm } from "@components/network"; -jest.mock("@components/network/WifiConnectionForm", () => () => "WifiConnectionForm mock"); +jest.mock("@components/network/WifiConnectionForm", () => mockComponent("WifiConnectionForm mock")); describe("WifiHiddenNetworkForm", () => { describe("when it is visible", () => { diff --git a/web/src/components/network/WifiNetworkListItem.test.jsx b/web/src/components/network/WifiNetworkListItem.test.jsx index b857a2530a..4f65b63ded 100644 --- a/web/src/components/network/WifiNetworkListItem.test.jsx +++ b/web/src/components/network/WifiNetworkListItem.test.jsx @@ -22,12 +22,12 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { WifiNetworkListItem } from "@components/network"; -jest.mock("@components/network/WifiConnectionForm", () => () => "WifiConnectionForm mock"); -jest.mock("@components/network/WifiNetworkMenu", () => () => "WifiNetworkMenu mock"); +jest.mock("@components/network/WifiConnectionForm", () => mockComponent("WifiConnectionForm mock")); +jest.mock("@components/network/WifiNetworkMenu", () => mockComponent("WifiNetworkMenu mock")); const onSelectCallback = jest.fn(); const fakeNetwork = { diff --git a/web/src/components/overview/Overview.test.jsx b/web/src/components/overview/Overview.test.jsx index b4e2826659..a537e23ed6 100644 --- a/web/src/components/overview/Overview.test.jsx +++ b/web/src/components/overview/Overview.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import Overview from "./Overview"; import { createClient } from "@client"; @@ -50,11 +50,11 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => jest.fn() })); -jest.mock("@components/language/LanguageSelector", () => () => "Language Selector"); -jest.mock("@components/overview/StorageSection", () => () =>
Storage Section
); -jest.mock("@components/network/Network", () => () => "Network Configuration"); -jest.mock("@components/users/Users", () => () => "Users Configuration"); -jest.mock("@components/core/InstallButton", () => () => "Install Button"); +jest.mock("@components/language/LanguageSelector", () => mockComponent("Language Selector")); +jest.mock("@components/overview/StorageSection", () => mockComponent("Storage Section")); +jest.mock("@components/network/Network", () => mockComponent("Network Configuration")); +jest.mock("@components/users/Users", () => mockComponent("Users Configuration")); +jest.mock("@components/core/InstallButton", () => mockComponent("Install Button")); beforeEach(() => { mockProduct = { id: "openSUSE", name: "openSUSE Tumbleweed" }; diff --git a/web/src/components/overview/StorageSection.test.jsx b/web/src/components/overview/StorageSection.test.jsx index 7fb93adc1e..e8c548dfeb 100644 --- a/web/src/components/overview/StorageSection.test.jsx +++ b/web/src/components/overview/StorageSection.test.jsx @@ -21,14 +21,14 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { installerRender, createCallbackMock, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { BUSY, IDLE } from "@client/status"; import { StorageSection } from "@components/overview"; const mockUseNavigate = jest.fn(); jest.mock("@client"); -jest.mock("@components/core/InstallerSkeleton", () => () => "Loading storage"); +jest.mock("@components/core/InstallerSkeleton", () => mockComponent("Loading storage")); jest.mock("react-router-dom", () => ({ ...jest.requireActual("react-router-dom"), useNavigate: () => mockUseNavigate diff --git a/web/src/components/questions/Questions.test.jsx b/web/src/components/questions/Questions.test.jsx index b18d80563c..12c9498b7a 100644 --- a/web/src/components/questions/Questions.test.jsx +++ b/web/src/components/questions/Questions.test.jsx @@ -22,14 +22,14 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { Questions } from "@components/questions"; jest.mock("@client"); -jest.mock("@components/questions/GenericQuestion", () => () => "A Generic question mock"); -jest.mock("@components/questions/LuksActivationQuestion", () => () => "A LUKS activation question mock"); +jest.mock("@components/questions/GenericQuestion", () => mockComponent("A Generic question mock")); +jest.mock("@components/questions/LuksActivationQuestion", () => mockComponent("A LUKS activation question mock")); const handlers = {}; const genericQuestion = { id: 1, type: 'generic' }; diff --git a/web/src/components/software/ProductSelectionPage.test.jsx b/web/src/components/software/ProductSelectionPage.test.jsx index b949959636..0e653baaa9 100644 --- a/web/src/components/software/ProductSelectionPage.test.jsx +++ b/web/src/components/software/ProductSelectionPage.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProductSelectionPage } from "@components/software"; import { createClient } from "@client"; @@ -38,7 +38,7 @@ const products = [ } ]; jest.mock("@client"); -jest.mock("@components/network/TargetIpsPopup", () => () => "Target IPs Mock"); +jest.mock("@components/network/TargetIpsPopup", () => mockComponent("Target IPs Mock")); const mockUseNavigate = jest.fn(); jest.mock("react-router-dom", () => ({ diff --git a/web/src/components/storage/ProposalActionsSection.test.jsx b/web/src/components/storage/ProposalActionsSection.test.jsx index c0caa38f57..bb2e1b826d 100644 --- a/web/src/components/storage/ProposalActionsSection.test.jsx +++ b/web/src/components/storage/ProposalActionsSection.test.jsx @@ -21,10 +21,10 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProposalActionsSection } from "@components/storage"; -jest.mock("@components/storage/ProposalActions", () => () => "ProposalActions content"); +jest.mock("@components/storage/ProposalActions", () => mockComponent("ProposalActions content")); const proposal = {}; diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx index 3fd6d76a77..cee976a004 100644 --- a/web/src/components/storage/ProposalPage.test.jsx +++ b/web/src/components/storage/ProposalPage.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitForElementToBeRemoved } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { ProposalPage } from "@components/storage"; @@ -40,11 +40,11 @@ jest.mock("react-router-dom", () => ({ useNavigate: () => jest.fn() })); -jest.mock("@components/core/InstallerSkeleton", () => () => "Loading proposal"); +jest.mock("@components/core/InstallerSkeleton", () => mockComponent("Loading proposal")); jest.mock("@components/storage/ProposalTargetSection", () => FakeProposalTargetSection); -jest.mock("@components/storage/ProposalSettingsSection", () => () =>
Settings section
); -jest.mock("@components/storage/ProposalActionsSection", () => () =>
Actions section
); +jest.mock("@components/storage/ProposalSettingsSection", () => mockComponent("Settings section")); +jest.mock("@components/storage/ProposalActionsSection", () => mockComponent("Actions section")); let proposal; diff --git a/web/src/components/storage/ProposalTargetSection.test.jsx b/web/src/components/storage/ProposalTargetSection.test.jsx index 824ccd2a65..45e80bc425 100644 --- a/web/src/components/storage/ProposalTargetSection.test.jsx +++ b/web/src/components/storage/ProposalTargetSection.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProposalTargetSection } from "@components/storage"; const FakeProposalTargetForm = ({ id, onSubmit }) => { @@ -33,7 +33,7 @@ const FakeProposalTargetForm = ({ id, onSubmit }) => { return
; }; -jest.mock("@components/storage/ProposalSummary", () => () => "Proposal summary"); +jest.mock("@components/storage/ProposalSummary", () => mockComponent("Proposal summary")); jest.mock("@components/storage/ProposalTargetForm", () => FakeProposalTargetForm); const proposal = { From e222ec35ebfd40d9e4d4ffb002bb3221dea21fce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Wed, 11 Jan 2023 21:28:55 +0000 Subject: [PATCH 3/8] [web] Update changelog --- web/package/cockpit-d-installer.changes | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/package/cockpit-d-installer.changes b/web/package/cockpit-d-installer.changes index 39cdc794cf..27f040a53c 100644 --- a/web/package/cockpit-d-installer.changes +++ b/web/package/cockpit-d-installer.changes @@ -1,3 +1,9 @@ +------------------------------------------------------------------- +Wed Jan 11 20:37:26 UTC 2023 - David Diaz + +- Testing: use a mocking function to make mocked components + consistent across the test suite (gh#yast/d-installer#392). + ------------------------------------------------------------------- Wed Jan 11 11:54:29 UTC 2023 - David Diaz From f2af72144a6ef41976c60b920dd428735fa53aa8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 12 Jan 2023 13:14:20 +0000 Subject: [PATCH 4/8] [web] Fix wrong reference in the changelog --- web/package/cockpit-d-installer.changes | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/package/cockpit-d-installer.changes b/web/package/cockpit-d-installer.changes index 27f040a53c..787587a14a 100644 --- a/web/package/cockpit-d-installer.changes +++ b/web/package/cockpit-d-installer.changes @@ -9,7 +9,7 @@ Wed Jan 11 11:54:29 UTC 2023 - David Diaz - Rework UI internals by using plain CSS as much as possible for building the layout instead of relying on wrapper components - (gd#yast/d-installer#391). + (gh#yast/d-installer#391). ------------------------------------------------------------------- Tue Jan 10 10:30:05 UTC 2023 - Imobach Gonzalez Sosa From 1a42fc6bed2336abda2a3cca33cbb0818d04b62b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 12 Jan 2023 13:19:17 +0000 Subject: [PATCH 5/8] [web] Use the default Layout import in test-utils.js To avoid having the failure > TypeError: Cannot read properties of undefined (reading 'mockComponent') when using the recently introduced mockComonent function for components living in the layout namespace. See https://github.com/yast/d-installer/pull/392#discussion_r1067485958 --- web/src/test-utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/test-utils.js b/web/src/test-utils.js index 6d8ce2d85e..3fc8579c5a 100644 --- a/web/src/test-utils.js +++ b/web/src/test-utils.js @@ -25,7 +25,7 @@ import { render } from "@testing-library/react"; import { createClient } from "@client/index"; import { InstallerClientProvider } from "@context/installer"; -import { Layout } from "@components/layout"; +import Layout from "@components/layout/Layout"; const InstallerProvider = ({ children }) => { const client = createClient(); From 08f711f2595751f6bdcbbc0325356a52d163d82f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 12 Jan 2023 13:20:36 +0000 Subject: [PATCH 6/8] [web] Use mockComponent for layout components too --- web/src/App.test.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx index e57571f725..6e0e2d9ee5 100644 --- a/web/src/App.test.jsx +++ b/web/src/App.test.jsx @@ -35,8 +35,8 @@ jest.mock('react-router-dom', () => ({ // Mock some components, // See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export -jest.mock("@components/layout/DBusError", () => () => "D-BusError Mock"); -jest.mock("@components/layout/LoadingEnvironment", () => () => "LoadingEnvironment Mock"); +jest.mock("@components/layout/DBusError", () => mockComponent("D-BusError Mock")); +jest.mock("@components/layout/LoadingEnvironment", () => mockComponent("LoadingEnvironment Mock")); jest.mock("@components/questions/Questions", () => mockComponent("Questions Mock")); jest.mock("@components/core/InstallationProgress", () => mockComponent("InstallationProgress Mock")); jest.mock("@components/core/InstallationFinished", () => mockComponent("InstallationFinished Mock")); From 5ef9c478ac4f07e88ec3297cfab1da1617e1b252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 12 Jan 2023 16:22:11 +0000 Subject: [PATCH 7/8] [web] Split test-utils in two files Because in some cases the import order matters. To know more, read https://github.com/yast/d-installer/pull/392#discussion_r1068143506 --- web/src/App.test.jsx | 3 +- web/src/Main.test.jsx | 3 +- web/src/components/core/About.test.jsx | 2 +- web/src/components/core/Fieldset.test.jsx | 2 +- .../components/core/InstallButton.test.jsx | 2 +- .../core/InstallationFinished.test.jsx | 2 +- .../core/InstallationProgress.test.jsx | 3 +- .../PasswordAndConfirmationInput.test.jsx | 2 +- web/src/components/core/Popup.test.jsx | 2 +- .../components/core/ProgressReport.test.jsx | 3 +- web/src/components/core/Section.test.jsx | 2 +- .../components/core/ValidationErrors.test.jsx | 2 +- .../language/LanguageSelector.test.jsx | 3 +- web/src/components/layout/DBusError.test.jsx | 3 +- .../layout/LoadingEnvironment.test.jsx | 2 +- .../network/ConnectionsDataList.test.jsx | 2 +- web/src/components/network/Network.test.jsx | 3 +- .../network/TargetIpsPopup.test.jsx | 2 +- .../network/WifiHiddenNetworkForm.test.jsx | 3 +- .../network/WifiNetworkListItem.test.jsx | 3 +- .../network/WifiNetworksList.test.jsx | 2 +- web/src/components/overview/Overview.test.jsx | 3 +- .../overview/StorageSection.test.jsx | 3 +- .../questions/GenericQuestion.test.jsx | 2 +- .../questions/LuksActivationQuestion.test.jsx | 2 +- .../questions/QuestionActions.test.jsx | 2 +- .../components/questions/Questions.test.jsx | 3 +- .../software/ProductSelectionPage.test.jsx | 3 +- .../storage/DeviceSelector.test.jsx | 2 +- .../storage/ProposalActions.test.jsx | 2 +- .../storage/ProposalActionsSection.test.jsx | 3 +- .../components/storage/ProposalPage.test.jsx | 3 +- .../storage/ProposalSettingsForm.test.jsx | 2 +- .../storage/ProposalSettingsSection.test.jsx | 2 +- .../storage/ProposalTargetForm.test.jsx | 2 +- .../storage/ProposalTargetSection.test.jsx | 3 +- web/src/components/users/FirstUser.test.jsx | 3 +- .../components/users/RootPassword.test.jsx | 3 +- web/src/components/users/RootSSHKey.test.jsx | 3 +- web/src/test-utils/mocks.js | 37 +++++++++++++++++++ .../renderers.js} | 36 +----------------- web/tsconfig.json | 1 + 42 files changed, 97 insertions(+), 74 deletions(-) create mode 100644 web/src/test-utils/mocks.js rename web/src/{test-utils.js => test-utils/renderers.js} (63%) diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx index 6e0e2d9ee5..1f6c4be7f7 100644 --- a/web/src/App.test.jsx +++ b/web/src/App.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import App from "./App"; import { createClient } from "@client"; import { STARTUP, CONFIG, INSTALL } from "@client/phase"; diff --git a/web/src/Main.test.jsx b/web/src/Main.test.jsx index 0c26e77ba1..246f5a1231 100644 --- a/web/src/Main.test.jsx +++ b/web/src/Main.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import Main from "@/Main"; diff --git a/web/src/components/core/About.test.jsx b/web/src/components/core/About.test.jsx index 1c56e135b1..06004b9386 100644 --- a/web/src/components/core/About.test.jsx +++ b/web/src/components/core/About.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import About from "./About"; diff --git a/web/src/components/core/Fieldset.test.jsx b/web/src/components/core/Fieldset.test.jsx index 35a1a5ce10..f384ac410e 100644 --- a/web/src/components/core/Fieldset.test.jsx +++ b/web/src/components/core/Fieldset.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { Fieldset } from "@components/core"; const ComplexLegend = () => { diff --git a/web/src/components/core/InstallButton.test.jsx b/web/src/components/core/InstallButton.test.jsx index e29944e413..0ae6440280 100644 --- a/web/src/components/core/InstallButton.test.jsx +++ b/web/src/components/core/InstallButton.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { InstallButton } from "@components/core"; diff --git a/web/src/components/core/InstallationFinished.test.jsx b/web/src/components/core/InstallationFinished.test.jsx index 1ef9a7eed9..af7abe892f 100644 --- a/web/src/components/core/InstallationFinished.test.jsx +++ b/web/src/components/core/InstallationFinished.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import InstallationFinished from "./InstallationFinished"; diff --git a/web/src/components/core/InstallationProgress.test.jsx b/web/src/components/core/InstallationProgress.test.jsx index 188e14af27..349df4b2d8 100644 --- a/web/src/components/core/InstallationProgress.test.jsx +++ b/web/src/components/core/InstallationProgress.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import InstallationProgress from "./InstallationProgress"; diff --git a/web/src/components/core/PasswordAndConfirmationInput.test.jsx b/web/src/components/core/PasswordAndConfirmationInput.test.jsx index ffa1a36cd1..5e4ca82b44 100644 --- a/web/src/components/core/PasswordAndConfirmationInput.test.jsx +++ b/web/src/components/core/PasswordAndConfirmationInput.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@/test-utils"; +import { plainRender } from "@test-utils/renderers"; import PasswordAndConfirmationInput from "./PasswordAndConfirmationInput"; describe("when the passwords do not match", () => { diff --git a/web/src/components/core/Popup.test.jsx b/web/src/components/core/Popup.test.jsx index 09fed21f49..6040cf75bd 100644 --- a/web/src/components/core/Popup.test.jsx +++ b/web/src/components/core/Popup.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { Popup } from "@components/core"; diff --git a/web/src/components/core/ProgressReport.test.jsx b/web/src/components/core/ProgressReport.test.jsx index 9361671256..649f7d7521 100644 --- a/web/src/components/core/ProgressReport.test.jsx +++ b/web/src/components/core/ProgressReport.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { createCallbackMock } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { ProgressReport } from "@components/core"; diff --git a/web/src/components/core/Section.test.jsx b/web/src/components/core/Section.test.jsx index 1eaa710a41..ae45c6720a 100644 --- a/web/src/components/core/Section.test.jsx +++ b/web/src/components/core/Section.test.jsx @@ -21,7 +21,7 @@ import React, { useState } from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { Section } from "@components/core"; describe("Section", () => { diff --git a/web/src/components/core/ValidationErrors.test.jsx b/web/src/components/core/ValidationErrors.test.jsx index 29e80e36a7..81da4db021 100644 --- a/web/src/components/core/ValidationErrors.test.jsx +++ b/web/src/components/core/ValidationErrors.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { plainRender } from "@/test-utils"; +import { plainRender } from "@test-utils/renderers"; import ValidationErrors from "./ValidationErrors"; describe("when there is a single error", () => { diff --git a/web/src/components/language/LanguageSelector.test.jsx b/web/src/components/language/LanguageSelector.test.jsx index 0cd99db394..8234f0a127 100644 --- a/web/src/components/language/LanguageSelector.test.jsx +++ b/web/src/components/language/LanguageSelector.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { createCallbackMock } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { LanguageSelector } from "@components/language"; import { createClient } from "@client"; diff --git a/web/src/components/layout/DBusError.test.jsx b/web/src/components/layout/DBusError.test.jsx index 99fd29ec80..d29601cab0 100644 --- a/web/src/components/layout/DBusError.test.jsx +++ b/web/src/components/layout/DBusError.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { plainRender } from "@test-utils/renderers"; import { DBusError } from "@components/layout"; diff --git a/web/src/components/layout/LoadingEnvironment.test.jsx b/web/src/components/layout/LoadingEnvironment.test.jsx index f608e73314..5d74986a2d 100644 --- a/web/src/components/layout/LoadingEnvironment.test.jsx +++ b/web/src/components/layout/LoadingEnvironment.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import LoadingEnvironment from "./LoadingEnvironment"; diff --git a/web/src/components/network/ConnectionsDataList.test.jsx b/web/src/components/network/ConnectionsDataList.test.jsx index 659058d933..8672c0be73 100644 --- a/web/src/components/network/ConnectionsDataList.test.jsx +++ b/web/src/components/network/ConnectionsDataList.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@/test-utils"; +import { plainRender } from "@test-utils/renderers"; import { ConnectionTypes } from "@client/network"; import ConnectionsDataList from "@components/network/ConnectionsDataList"; diff --git a/web/src/components/network/Network.test.jsx b/web/src/components/network/Network.test.jsx index bd4b8a7e46..18f697eec1 100644 --- a/web/src/components/network/Network.test.jsx +++ b/web/src/components/network/Network.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen, within, waitFor } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import Network from "@components/network/Network"; import { ConnectionTypes } from "@client/network"; import { createClient } from "@client"; diff --git a/web/src/components/network/TargetIpsPopup.test.jsx b/web/src/components/network/TargetIpsPopup.test.jsx index 9e003dfb81..c77ff366b4 100644 --- a/web/src/components/network/TargetIpsPopup.test.jsx +++ b/web/src/components/network/TargetIpsPopup.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { TargetIpsPopup } from "@components/network"; diff --git a/web/src/components/network/WifiHiddenNetworkForm.test.jsx b/web/src/components/network/WifiHiddenNetworkForm.test.jsx index a1ecda8459..869b820097 100644 --- a/web/src/components/network/WifiHiddenNetworkForm.test.jsx +++ b/web/src/components/network/WifiHiddenNetworkForm.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { plainRender } from "@test-utils/renderers"; import { WifiHiddenNetworkForm } from "@components/network"; diff --git a/web/src/components/network/WifiNetworkListItem.test.jsx b/web/src/components/network/WifiNetworkListItem.test.jsx index 4f65b63ded..09bc52d14c 100644 --- a/web/src/components/network/WifiNetworkListItem.test.jsx +++ b/web/src/components/network/WifiNetworkListItem.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { WifiNetworkListItem } from "@components/network"; diff --git a/web/src/components/network/WifiNetworksList.test.jsx b/web/src/components/network/WifiNetworksList.test.jsx index 06d4b53ff9..f2bdf75047 100644 --- a/web/src/components/network/WifiNetworksList.test.jsx +++ b/web/src/components/network/WifiNetworksList.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { WifiNetworksList } from "@components/network"; diff --git a/web/src/components/overview/Overview.test.jsx b/web/src/components/overview/Overview.test.jsx index a537e23ed6..fbb0eddc5c 100644 --- a/web/src/components/overview/Overview.test.jsx +++ b/web/src/components/overview/Overview.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import Overview from "./Overview"; import { createClient } from "@client"; diff --git a/web/src/components/overview/StorageSection.test.jsx b/web/src/components/overview/StorageSection.test.jsx index e8c548dfeb..91aa0b8381 100644 --- a/web/src/components/overview/StorageSection.test.jsx +++ b/web/src/components/overview/StorageSection.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { installerRender, createCallbackMock, mockComponent } from "@/test-utils"; +import { createCallbackMock, mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { BUSY, IDLE } from "@client/status"; import { StorageSection } from "@components/overview"; diff --git a/web/src/components/questions/GenericQuestion.test.jsx b/web/src/components/questions/GenericQuestion.test.jsx index a790e66ffb..8f9118db4e 100644 --- a/web/src/components/questions/GenericQuestion.test.jsx +++ b/web/src/components/questions/GenericQuestion.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { GenericQuestion } from "@components/questions"; const question = { diff --git a/web/src/components/questions/LuksActivationQuestion.test.jsx b/web/src/components/questions/LuksActivationQuestion.test.jsx index 303c84b4cf..c0ad506f5b 100644 --- a/web/src/components/questions/LuksActivationQuestion.test.jsx +++ b/web/src/components/questions/LuksActivationQuestion.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { LuksActivationQuestion } from "@components/questions"; let question; diff --git a/web/src/components/questions/QuestionActions.test.jsx b/web/src/components/questions/QuestionActions.test.jsx index fff6790c98..50c9230c76 100644 --- a/web/src/components/questions/QuestionActions.test.jsx +++ b/web/src/components/questions/QuestionActions.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { QuestionActions } from "@components/questions"; let defaultOption = "handsdown"; diff --git a/web/src/components/questions/Questions.test.jsx b/web/src/components/questions/Questions.test.jsx index 12c9498b7a..68e4fb67a8 100644 --- a/web/src/components/questions/Questions.test.jsx +++ b/web/src/components/questions/Questions.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { Questions } from "@components/questions"; diff --git a/web/src/components/software/ProductSelectionPage.test.jsx b/web/src/components/software/ProductSelectionPage.test.jsx index 0e653baaa9..3264cb1a08 100644 --- a/web/src/components/software/ProductSelectionPage.test.jsx +++ b/web/src/components/software/ProductSelectionPage.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { ProductSelectionPage } from "@components/software"; import { createClient } from "@client"; diff --git a/web/src/components/storage/DeviceSelector.test.jsx b/web/src/components/storage/DeviceSelector.test.jsx index f369ad8006..0f15bef223 100644 --- a/web/src/components/storage/DeviceSelector.test.jsx +++ b/web/src/components/storage/DeviceSelector.test.jsx @@ -21,7 +21,7 @@ import React, { useState } from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { DeviceSelector } from "@components/storage"; const availableDevices = [ diff --git a/web/src/components/storage/ProposalActions.test.jsx b/web/src/components/storage/ProposalActions.test.jsx index 43cdaadaab..8f4450eacf 100644 --- a/web/src/components/storage/ProposalActions.test.jsx +++ b/web/src/components/storage/ProposalActions.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor, within, waitForElementToBeRemoved } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { ProposalActions } from "@components/storage"; const actions = [ diff --git a/web/src/components/storage/ProposalActionsSection.test.jsx b/web/src/components/storage/ProposalActionsSection.test.jsx index bb2e1b826d..df5da94c01 100644 --- a/web/src/components/storage/ProposalActionsSection.test.jsx +++ b/web/src/components/storage/ProposalActionsSection.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { ProposalActionsSection } from "@components/storage"; jest.mock("@components/storage/ProposalActions", () => mockComponent("ProposalActions content")); diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx index cee976a004..d73d25665a 100644 --- a/web/src/components/storage/ProposalPage.test.jsx +++ b/web/src/components/storage/ProposalPage.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen, waitForElementToBeRemoved } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { ProposalPage } from "@components/storage"; diff --git a/web/src/components/storage/ProposalSettingsForm.test.jsx b/web/src/components/storage/ProposalSettingsForm.test.jsx index 51ff685937..fbf99e601e 100644 --- a/web/src/components/storage/ProposalSettingsForm.test.jsx +++ b/web/src/components/storage/ProposalSettingsForm.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { ProposalSettingsForm } from "@components/storage"; const proposal = { diff --git a/web/src/components/storage/ProposalSettingsSection.test.jsx b/web/src/components/storage/ProposalSettingsSection.test.jsx index 010a0a13d8..9943bd48c4 100644 --- a/web/src/components/storage/ProposalSettingsSection.test.jsx +++ b/web/src/components/storage/ProposalSettingsSection.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { ProposalSettingsSection } from "@components/storage"; const FakeProposalSettingsForm = ({ id, onSubmit }) => { diff --git a/web/src/components/storage/ProposalTargetForm.test.jsx b/web/src/components/storage/ProposalTargetForm.test.jsx index c0b800bd96..7bca2d6463 100644 --- a/web/src/components/storage/ProposalTargetForm.test.jsx +++ b/web/src/components/storage/ProposalTargetForm.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@/test-utils"; +import { installerRender } from "@test-utils/renderers"; import { ProposalTargetForm } from "@components/storage"; const proposal = { diff --git a/web/src/components/storage/ProposalTargetSection.test.jsx b/web/src/components/storage/ProposalTargetSection.test.jsx index 45e80bc425..e38d835bdf 100644 --- a/web/src/components/storage/ProposalTargetSection.test.jsx +++ b/web/src/components/storage/ProposalTargetSection.test.jsx @@ -21,7 +21,8 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender, mockComponent } from "@/test-utils"; +import { mockComponent } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { ProposalTargetSection } from "@components/storage"; const FakeProposalTargetForm = ({ id, onSubmit }) => { diff --git a/web/src/components/users/FirstUser.test.jsx b/web/src/components/users/FirstUser.test.jsx index f7b65f6965..e2d39638c9 100644 --- a/web/src/components/users/FirstUser.test.jsx +++ b/web/src/components/users/FirstUser.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { createCallbackMock } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { FirstUser } from "@components/users"; diff --git a/web/src/components/users/RootPassword.test.jsx b/web/src/components/users/RootPassword.test.jsx index 98269e8cd1..cc8ce4f471 100644 --- a/web/src/components/users/RootPassword.test.jsx +++ b/web/src/components/users/RootPassword.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { createCallbackMock } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { RootPassword } from "@components/users"; diff --git a/web/src/components/users/RootSSHKey.test.jsx b/web/src/components/users/RootSSHKey.test.jsx index 557077837a..a9b9c913aa 100644 --- a/web/src/components/users/RootSSHKey.test.jsx +++ b/web/src/components/users/RootSSHKey.test.jsx @@ -22,7 +22,8 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "@/test-utils"; +import { createCallbackMock } from "@test-utils/mocks"; +import { installerRender } from "@test-utils/renderers"; import { createClient } from "@client"; import { RootSSHKey } from "@components/users"; diff --git a/web/src/test-utils/mocks.js b/web/src/test-utils/mocks.js new file mode 100644 index 0000000000..85d687459a --- /dev/null +++ b/web/src/test-utils/mocks.js @@ -0,0 +1,37 @@ +import React from "react"; + +/** + * Creates a function to register callbacks + * + * It can be useful to mock functions that might receive a callback that you can + * execute on-demand during the test. + * + * @return a tuple with the mocked function and the list of callbacks. + */ +const createCallbackMock = () => { + const callbacks = []; + const on = (callback) => { + callbacks.push(callback); + return () => { + const position = callbacks.indexOf(callback); + if (position > -1) callbacks.splice(position, 1); + }; + }; + return [on, callbacks]; +}; + +/** + * Returns fake component with given content + * + * @param {React.ReactNode} content - content for the fake component + * @param {object} [options] - Options for building the fake component + * @param {string} [options.wrapper="div"] - the HTML element to be used for wrapping given content + * + * @return a function component + */ +const mockComponent = (content, { wrapper } = { wrapper: "div" }) => { + const Wrapper = wrapper; + return () => {content}; +}; + +export { createCallbackMock, mockComponent }; diff --git a/web/src/test-utils.js b/web/src/test-utils/renderers.js similarity index 63% rename from web/src/test-utils.js rename to web/src/test-utils/renderers.js index 3fc8579c5a..f29bc101ea 100644 --- a/web/src/test-utils.js +++ b/web/src/test-utils/renderers.js @@ -64,38 +64,4 @@ const plainRender = (ui, options = { usingLayout: true }) => { ); }; -/** - * Creates a function to register callbacks - * - * It can be useful to mock functions that might receive a callback that you can - * execute on-demand during the test. - * - * @return a tuple with the mocked function and the list of callbacks. - */ -const createCallbackMock = () => { - const callbacks = []; - const on = (callback) => { - callbacks.push(callback); - return () => { - const position = callbacks.indexOf(callback); - if (position > -1) callbacks.splice(position, 1); - }; - }; - return [on, callbacks]; -}; - -/** - * Returns fake component with given content - * - * @param {React.ReactNode} content - content for the fake component - * @param {object} [options] - Options for building the fake component - * @param {string} [options.wrapper="div"] - the HTML element to be used for wrapping given content - * - * @return a function component - */ -const mockComponent = (content, { wrapper } = { wrapper: "div" }) => { - const Wrapper = wrapper; - return () => {content}; -}; - -export { installerRender, plainRender, createCallbackMock, mockComponent }; +export { installerRender, plainRender }; diff --git a/web/tsconfig.json b/web/tsconfig.json index 93ff49a61b..b6135154f2 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -16,6 +16,7 @@ "@components/*": ["src/components/*"], "@context/*": ["src/context/*"], "@lib/*": ["src/lib/*"], + "@test-utils/*": ["src/test-utils/*"], "~icons/*": ["node_modules/@material-symbols/svg-400/outlined/*"] } }, From b00320a28741862c069379535fc65ad243a4d22d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20D=C3=ADaz=20Gonz=C3=A1lez?= Date: Thu, 12 Jan 2023 17:09:33 +0000 Subject: [PATCH 8/8] Revert "[web] Split test-utils in two files" This reverts commit 5ef9c478ac4f07e88ec3297cfab1da1617e1b252. --- web/src/App.test.jsx | 3 +- web/src/Main.test.jsx | 3 +- web/src/components/core/About.test.jsx | 2 +- web/src/components/core/Fieldset.test.jsx | 2 +- .../components/core/InstallButton.test.jsx | 2 +- .../core/InstallationFinished.test.jsx | 2 +- .../core/InstallationProgress.test.jsx | 3 +- .../PasswordAndConfirmationInput.test.jsx | 2 +- web/src/components/core/Popup.test.jsx | 2 +- .../components/core/ProgressReport.test.jsx | 3 +- web/src/components/core/Section.test.jsx | 2 +- .../components/core/ValidationErrors.test.jsx | 2 +- .../language/LanguageSelector.test.jsx | 3 +- web/src/components/layout/DBusError.test.jsx | 3 +- .../layout/LoadingEnvironment.test.jsx | 2 +- .../network/ConnectionsDataList.test.jsx | 2 +- web/src/components/network/Network.test.jsx | 3 +- .../network/TargetIpsPopup.test.jsx | 2 +- .../network/WifiHiddenNetworkForm.test.jsx | 3 +- .../network/WifiNetworkListItem.test.jsx | 3 +- .../network/WifiNetworksList.test.jsx | 2 +- web/src/components/overview/Overview.test.jsx | 3 +- .../overview/StorageSection.test.jsx | 3 +- .../questions/GenericQuestion.test.jsx | 2 +- .../questions/LuksActivationQuestion.test.jsx | 2 +- .../questions/QuestionActions.test.jsx | 2 +- .../components/questions/Questions.test.jsx | 3 +- .../software/ProductSelectionPage.test.jsx | 3 +- .../storage/DeviceSelector.test.jsx | 2 +- .../storage/ProposalActions.test.jsx | 2 +- .../storage/ProposalActionsSection.test.jsx | 3 +- .../components/storage/ProposalPage.test.jsx | 3 +- .../storage/ProposalSettingsForm.test.jsx | 2 +- .../storage/ProposalSettingsSection.test.jsx | 2 +- .../storage/ProposalTargetForm.test.jsx | 2 +- .../storage/ProposalTargetSection.test.jsx | 3 +- web/src/components/users/FirstUser.test.jsx | 3 +- .../components/users/RootPassword.test.jsx | 3 +- web/src/components/users/RootSSHKey.test.jsx | 3 +- .../renderers.js => test-utils.js} | 36 +++++++++++++++++- web/src/test-utils/mocks.js | 37 ------------------- web/tsconfig.json | 1 - 42 files changed, 74 insertions(+), 97 deletions(-) rename web/src/{test-utils/renderers.js => test-utils.js} (63%) delete mode 100644 web/src/test-utils/mocks.js diff --git a/web/src/App.test.jsx b/web/src/App.test.jsx index 1f6c4be7f7..6e0e2d9ee5 100644 --- a/web/src/App.test.jsx +++ b/web/src/App.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import App from "./App"; import { createClient } from "@client"; import { STARTUP, CONFIG, INSTALL } from "@client/phase"; diff --git a/web/src/Main.test.jsx b/web/src/Main.test.jsx index 246f5a1231..0c26e77ba1 100644 --- a/web/src/Main.test.jsx +++ b/web/src/Main.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import Main from "@/Main"; diff --git a/web/src/components/core/About.test.jsx b/web/src/components/core/About.test.jsx index 06004b9386..1c56e135b1 100644 --- a/web/src/components/core/About.test.jsx +++ b/web/src/components/core/About.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import About from "./About"; diff --git a/web/src/components/core/Fieldset.test.jsx b/web/src/components/core/Fieldset.test.jsx index f384ac410e..35a1a5ce10 100644 --- a/web/src/components/core/Fieldset.test.jsx +++ b/web/src/components/core/Fieldset.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { Fieldset } from "@components/core"; const ComplexLegend = () => { diff --git a/web/src/components/core/InstallButton.test.jsx b/web/src/components/core/InstallButton.test.jsx index 0ae6440280..e29944e413 100644 --- a/web/src/components/core/InstallButton.test.jsx +++ b/web/src/components/core/InstallButton.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { createClient } from "@client"; import { InstallButton } from "@components/core"; diff --git a/web/src/components/core/InstallationFinished.test.jsx b/web/src/components/core/InstallationFinished.test.jsx index af7abe892f..1ef9a7eed9 100644 --- a/web/src/components/core/InstallationFinished.test.jsx +++ b/web/src/components/core/InstallationFinished.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { createClient } from "@client"; import InstallationFinished from "./InstallationFinished"; diff --git a/web/src/components/core/InstallationProgress.test.jsx b/web/src/components/core/InstallationProgress.test.jsx index 349df4b2d8..188e14af27 100644 --- a/web/src/components/core/InstallationProgress.test.jsx +++ b/web/src/components/core/InstallationProgress.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import InstallationProgress from "./InstallationProgress"; diff --git a/web/src/components/core/PasswordAndConfirmationInput.test.jsx b/web/src/components/core/PasswordAndConfirmationInput.test.jsx index 5e4ca82b44..ffa1a36cd1 100644 --- a/web/src/components/core/PasswordAndConfirmationInput.test.jsx +++ b/web/src/components/core/PasswordAndConfirmationInput.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@test-utils/renderers"; +import { plainRender } from "@/test-utils"; import PasswordAndConfirmationInput from "./PasswordAndConfirmationInput"; describe("when the passwords do not match", () => { diff --git a/web/src/components/core/Popup.test.jsx b/web/src/components/core/Popup.test.jsx index 6040cf75bd..09fed21f49 100644 --- a/web/src/components/core/Popup.test.jsx +++ b/web/src/components/core/Popup.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { Popup } from "@components/core"; diff --git a/web/src/components/core/ProgressReport.test.jsx b/web/src/components/core/ProgressReport.test.jsx index 649f7d7521..9361671256 100644 --- a/web/src/components/core/ProgressReport.test.jsx +++ b/web/src/components/core/ProgressReport.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { createCallbackMock } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock } from "@/test-utils"; import { createClient } from "@client"; import { ProgressReport } from "@components/core"; diff --git a/web/src/components/core/Section.test.jsx b/web/src/components/core/Section.test.jsx index ae45c6720a..1eaa710a41 100644 --- a/web/src/components/core/Section.test.jsx +++ b/web/src/components/core/Section.test.jsx @@ -21,7 +21,7 @@ import React, { useState } from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { Section } from "@components/core"; describe("Section", () => { diff --git a/web/src/components/core/ValidationErrors.test.jsx b/web/src/components/core/ValidationErrors.test.jsx index 81da4db021..29e80e36a7 100644 --- a/web/src/components/core/ValidationErrors.test.jsx +++ b/web/src/components/core/ValidationErrors.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { plainRender } from "@test-utils/renderers"; +import { plainRender } from "@/test-utils"; import ValidationErrors from "./ValidationErrors"; describe("when there is a single error", () => { diff --git a/web/src/components/language/LanguageSelector.test.jsx b/web/src/components/language/LanguageSelector.test.jsx index 8234f0a127..0cd99db394 100644 --- a/web/src/components/language/LanguageSelector.test.jsx +++ b/web/src/components/language/LanguageSelector.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { act, screen } from "@testing-library/react"; -import { createCallbackMock } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock } from "@/test-utils"; import { LanguageSelector } from "@components/language"; import { createClient } from "@client"; diff --git a/web/src/components/layout/DBusError.test.jsx b/web/src/components/layout/DBusError.test.jsx index d29601cab0..99fd29ec80 100644 --- a/web/src/components/layout/DBusError.test.jsx +++ b/web/src/components/layout/DBusError.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { plainRender } from "@test-utils/renderers"; +import { plainRender, mockComponent } from "@/test-utils"; import { DBusError } from "@components/layout"; diff --git a/web/src/components/layout/LoadingEnvironment.test.jsx b/web/src/components/layout/LoadingEnvironment.test.jsx index 5d74986a2d..f608e73314 100644 --- a/web/src/components/layout/LoadingEnvironment.test.jsx +++ b/web/src/components/layout/LoadingEnvironment.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import LoadingEnvironment from "./LoadingEnvironment"; diff --git a/web/src/components/network/ConnectionsDataList.test.jsx b/web/src/components/network/ConnectionsDataList.test.jsx index 8672c0be73..659058d933 100644 --- a/web/src/components/network/ConnectionsDataList.test.jsx +++ b/web/src/components/network/ConnectionsDataList.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { plainRender } from "@test-utils/renderers"; +import { plainRender } from "@/test-utils"; import { ConnectionTypes } from "@client/network"; import ConnectionsDataList from "@components/network/ConnectionsDataList"; diff --git a/web/src/components/network/Network.test.jsx b/web/src/components/network/Network.test.jsx index 18f697eec1..bd4b8a7e46 100644 --- a/web/src/components/network/Network.test.jsx +++ b/web/src/components/network/Network.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen, within, waitFor } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import Network from "@components/network/Network"; import { ConnectionTypes } from "@client/network"; import { createClient } from "@client"; diff --git a/web/src/components/network/TargetIpsPopup.test.jsx b/web/src/components/network/TargetIpsPopup.test.jsx index c77ff366b4..9e003dfb81 100644 --- a/web/src/components/network/TargetIpsPopup.test.jsx +++ b/web/src/components/network/TargetIpsPopup.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { createClient } from "@client"; import { TargetIpsPopup } from "@components/network"; diff --git a/web/src/components/network/WifiHiddenNetworkForm.test.jsx b/web/src/components/network/WifiHiddenNetworkForm.test.jsx index 869b820097..a1ecda8459 100644 --- a/web/src/components/network/WifiHiddenNetworkForm.test.jsx +++ b/web/src/components/network/WifiHiddenNetworkForm.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { plainRender } from "@test-utils/renderers"; +import { plainRender, mockComponent } from "@/test-utils"; import { WifiHiddenNetworkForm } from "@components/network"; diff --git a/web/src/components/network/WifiNetworkListItem.test.jsx b/web/src/components/network/WifiNetworkListItem.test.jsx index 09bc52d14c..4f65b63ded 100644 --- a/web/src/components/network/WifiNetworkListItem.test.jsx +++ b/web/src/components/network/WifiNetworkListItem.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { WifiNetworkListItem } from "@components/network"; diff --git a/web/src/components/network/WifiNetworksList.test.jsx b/web/src/components/network/WifiNetworksList.test.jsx index f2bdf75047..06d4b53ff9 100644 --- a/web/src/components/network/WifiNetworksList.test.jsx +++ b/web/src/components/network/WifiNetworksList.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, waitFor } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { WifiNetworksList } from "@components/network"; diff --git a/web/src/components/overview/Overview.test.jsx b/web/src/components/overview/Overview.test.jsx index fbb0eddc5c..a537e23ed6 100644 --- a/web/src/components/overview/Overview.test.jsx +++ b/web/src/components/overview/Overview.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import Overview from "./Overview"; import { createClient } from "@client"; diff --git a/web/src/components/overview/StorageSection.test.jsx b/web/src/components/overview/StorageSection.test.jsx index 91aa0b8381..e8c548dfeb 100644 --- a/web/src/components/overview/StorageSection.test.jsx +++ b/web/src/components/overview/StorageSection.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { createCallbackMock, mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { BUSY, IDLE } from "@client/status"; import { StorageSection } from "@components/overview"; diff --git a/web/src/components/questions/GenericQuestion.test.jsx b/web/src/components/questions/GenericQuestion.test.jsx index 8f9118db4e..a790e66ffb 100644 --- a/web/src/components/questions/GenericQuestion.test.jsx +++ b/web/src/components/questions/GenericQuestion.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { GenericQuestion } from "@components/questions"; const question = { diff --git a/web/src/components/questions/LuksActivationQuestion.test.jsx b/web/src/components/questions/LuksActivationQuestion.test.jsx index c0ad506f5b..303c84b4cf 100644 --- a/web/src/components/questions/LuksActivationQuestion.test.jsx +++ b/web/src/components/questions/LuksActivationQuestion.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { LuksActivationQuestion } from "@components/questions"; let question; diff --git a/web/src/components/questions/QuestionActions.test.jsx b/web/src/components/questions/QuestionActions.test.jsx index 50c9230c76..fff6790c98 100644 --- a/web/src/components/questions/QuestionActions.test.jsx +++ b/web/src/components/questions/QuestionActions.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { QuestionActions } from "@components/questions"; let defaultOption = "handsdown"; diff --git a/web/src/components/questions/Questions.test.jsx b/web/src/components/questions/Questions.test.jsx index 68e4fb67a8..12c9498b7a 100644 --- a/web/src/components/questions/Questions.test.jsx +++ b/web/src/components/questions/Questions.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { act, screen, waitFor } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { Questions } from "@components/questions"; diff --git a/web/src/components/software/ProductSelectionPage.test.jsx b/web/src/components/software/ProductSelectionPage.test.jsx index 3264cb1a08..0e653baaa9 100644 --- a/web/src/components/software/ProductSelectionPage.test.jsx +++ b/web/src/components/software/ProductSelectionPage.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProductSelectionPage } from "@components/software"; import { createClient } from "@client"; diff --git a/web/src/components/storage/DeviceSelector.test.jsx b/web/src/components/storage/DeviceSelector.test.jsx index 0f15bef223..f369ad8006 100644 --- a/web/src/components/storage/DeviceSelector.test.jsx +++ b/web/src/components/storage/DeviceSelector.test.jsx @@ -21,7 +21,7 @@ import React, { useState } from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { DeviceSelector } from "@components/storage"; const availableDevices = [ diff --git a/web/src/components/storage/ProposalActions.test.jsx b/web/src/components/storage/ProposalActions.test.jsx index 8f4450eacf..43cdaadaab 100644 --- a/web/src/components/storage/ProposalActions.test.jsx +++ b/web/src/components/storage/ProposalActions.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor, within, waitForElementToBeRemoved } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { ProposalActions } from "@components/storage"; const actions = [ diff --git a/web/src/components/storage/ProposalActionsSection.test.jsx b/web/src/components/storage/ProposalActionsSection.test.jsx index df5da94c01..bb2e1b826d 100644 --- a/web/src/components/storage/ProposalActionsSection.test.jsx +++ b/web/src/components/storage/ProposalActionsSection.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProposalActionsSection } from "@components/storage"; jest.mock("@components/storage/ProposalActions", () => mockComponent("ProposalActions content")); diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx index d73d25665a..cee976a004 100644 --- a/web/src/components/storage/ProposalPage.test.jsx +++ b/web/src/components/storage/ProposalPage.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen, waitForElementToBeRemoved } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { createClient } from "@client"; import { ProposalPage } from "@components/storage"; diff --git a/web/src/components/storage/ProposalSettingsForm.test.jsx b/web/src/components/storage/ProposalSettingsForm.test.jsx index fbf99e601e..51ff685937 100644 --- a/web/src/components/storage/ProposalSettingsForm.test.jsx +++ b/web/src/components/storage/ProposalSettingsForm.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { ProposalSettingsForm } from "@components/storage"; const proposal = { diff --git a/web/src/components/storage/ProposalSettingsSection.test.jsx b/web/src/components/storage/ProposalSettingsSection.test.jsx index 9943bd48c4..010a0a13d8 100644 --- a/web/src/components/storage/ProposalSettingsSection.test.jsx +++ b/web/src/components/storage/ProposalSettingsSection.test.jsx @@ -21,7 +21,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { ProposalSettingsSection } from "@components/storage"; const FakeProposalSettingsForm = ({ id, onSubmit }) => { diff --git a/web/src/components/storage/ProposalTargetForm.test.jsx b/web/src/components/storage/ProposalTargetForm.test.jsx index 7bca2d6463..c0b800bd96 100644 --- a/web/src/components/storage/ProposalTargetForm.test.jsx +++ b/web/src/components/storage/ProposalTargetForm.test.jsx @@ -22,7 +22,7 @@ import React from "react"; import { screen, within } from "@testing-library/react"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender } from "@/test-utils"; import { ProposalTargetForm } from "@components/storage"; const proposal = { diff --git a/web/src/components/storage/ProposalTargetSection.test.jsx b/web/src/components/storage/ProposalTargetSection.test.jsx index e38d835bdf..45e80bc425 100644 --- a/web/src/components/storage/ProposalTargetSection.test.jsx +++ b/web/src/components/storage/ProposalTargetSection.test.jsx @@ -21,8 +21,7 @@ import React from "react"; import { screen, waitFor, within } from "@testing-library/react"; -import { mockComponent } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, mockComponent } from "@/test-utils"; import { ProposalTargetSection } from "@components/storage"; const FakeProposalTargetForm = ({ id, onSubmit }) => { diff --git a/web/src/components/users/FirstUser.test.jsx b/web/src/components/users/FirstUser.test.jsx index e2d39638c9..f7b65f6965 100644 --- a/web/src/components/users/FirstUser.test.jsx +++ b/web/src/components/users/FirstUser.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { createCallbackMock } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock } from "@/test-utils"; import { createClient } from "@client"; import { FirstUser } from "@components/users"; diff --git a/web/src/components/users/RootPassword.test.jsx b/web/src/components/users/RootPassword.test.jsx index cc8ce4f471..98269e8cd1 100644 --- a/web/src/components/users/RootPassword.test.jsx +++ b/web/src/components/users/RootPassword.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { createCallbackMock } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock } from "@/test-utils"; import { createClient } from "@client"; import { RootPassword } from "@components/users"; diff --git a/web/src/components/users/RootSSHKey.test.jsx b/web/src/components/users/RootSSHKey.test.jsx index a9b9c913aa..557077837a 100644 --- a/web/src/components/users/RootSSHKey.test.jsx +++ b/web/src/components/users/RootSSHKey.test.jsx @@ -22,8 +22,7 @@ import React from "react"; import { act, screen, waitFor, within } from "@testing-library/react"; -import { createCallbackMock } from "@test-utils/mocks"; -import { installerRender } from "@test-utils/renderers"; +import { installerRender, createCallbackMock } from "@/test-utils"; import { createClient } from "@client"; import { RootSSHKey } from "@components/users"; diff --git a/web/src/test-utils/renderers.js b/web/src/test-utils.js similarity index 63% rename from web/src/test-utils/renderers.js rename to web/src/test-utils.js index f29bc101ea..3fc8579c5a 100644 --- a/web/src/test-utils/renderers.js +++ b/web/src/test-utils.js @@ -64,4 +64,38 @@ const plainRender = (ui, options = { usingLayout: true }) => { ); }; -export { installerRender, plainRender }; +/** + * Creates a function to register callbacks + * + * It can be useful to mock functions that might receive a callback that you can + * execute on-demand during the test. + * + * @return a tuple with the mocked function and the list of callbacks. + */ +const createCallbackMock = () => { + const callbacks = []; + const on = (callback) => { + callbacks.push(callback); + return () => { + const position = callbacks.indexOf(callback); + if (position > -1) callbacks.splice(position, 1); + }; + }; + return [on, callbacks]; +}; + +/** + * Returns fake component with given content + * + * @param {React.ReactNode} content - content for the fake component + * @param {object} [options] - Options for building the fake component + * @param {string} [options.wrapper="div"] - the HTML element to be used for wrapping given content + * + * @return a function component + */ +const mockComponent = (content, { wrapper } = { wrapper: "div" }) => { + const Wrapper = wrapper; + return () => {content}; +}; + +export { installerRender, plainRender, createCallbackMock, mockComponent }; diff --git a/web/src/test-utils/mocks.js b/web/src/test-utils/mocks.js deleted file mode 100644 index 85d687459a..0000000000 --- a/web/src/test-utils/mocks.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; - -/** - * Creates a function to register callbacks - * - * It can be useful to mock functions that might receive a callback that you can - * execute on-demand during the test. - * - * @return a tuple with the mocked function and the list of callbacks. - */ -const createCallbackMock = () => { - const callbacks = []; - const on = (callback) => { - callbacks.push(callback); - return () => { - const position = callbacks.indexOf(callback); - if (position > -1) callbacks.splice(position, 1); - }; - }; - return [on, callbacks]; -}; - -/** - * Returns fake component with given content - * - * @param {React.ReactNode} content - content for the fake component - * @param {object} [options] - Options for building the fake component - * @param {string} [options.wrapper="div"] - the HTML element to be used for wrapping given content - * - * @return a function component - */ -const mockComponent = (content, { wrapper } = { wrapper: "div" }) => { - const Wrapper = wrapper; - return () => {content}; -}; - -export { createCallbackMock, mockComponent }; diff --git a/web/tsconfig.json b/web/tsconfig.json index b6135154f2..93ff49a61b 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -16,7 +16,6 @@ "@components/*": ["src/components/*"], "@context/*": ["src/context/*"], "@lib/*": ["src/lib/*"], - "@test-utils/*": ["src/test-utils/*"], "~icons/*": ["node_modules/@material-symbols/svg-400/outlined/*"] } },