[web] Add function for mocking components

web/package/cockpit-d-installer.changes

@@ -1,9 +1,15 @@
+-------------------------------------------------------------------
+Wed Jan 11 20:37:26 UTC 2023 - David Diaz <dgonzalez@suse.com>
+
+- 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 <dgonzalez@suse.com>
 
 - 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 <igonzalezsosa@suse.com>

web/src/App.test.jsx

@@ -21,27 +21,27 @@
 
 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");
 
-// Mock some components,
-// See https://www.chakshunyu.com/blog/how-to-mock-a-react-component-in-jest/#default-export
-
-jest.mock("@components/questions/Questions", () => () => <div>Questions Mock</div>);
-jest.mock("@components/layout/DBusError", () => () => <div>D-BusError Mock</div>);
-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: () => <div>Content</div>,
+  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/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"));
+jest.mock("@components/network/TargetIpsPopup", () => mockComponent("Target IPs Mock"));
+
 const callbacks = {};
 const getStatusFn = jest.fn();
 const getPhaseFn = jest.fn();

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", () => () => <div>Questions Mock</div>);
+jest.mock("@components/questions/Questions", () => mockComponent("Questions Mock"));
 jest.mock('react-router-dom', () => ({
-  Outlet: () => <div>Content</div>,
+  Outlet: mockComponent("Content"),
 }));
 
 it("renders the Questions component and the content", async () => {

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 () => {

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", () => {

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", () => () => <div>Wired Connections</div>);
-jest.mock("@components/network/NetworkWifiStatus", () => () => <div>WiFi Connections</div>);
+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);

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", () => {

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 = {

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", () => () => <div>Storage Section</div>);
-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" };

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

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' };

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", () => ({

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 = {};
 

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", () => () => <div>Settings section</div>);
-jest.mock("@components/storage/ProposalActionsSection", () => () => <div>Actions section</div>);
+jest.mock("@components/storage/ProposalSettingsSection", () => mockComponent("Settings section"));
+jest.mock("@components/storage/ProposalActionsSection", () => mockComponent("Actions section"));
 
 let proposal;
 

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 <form id={id} onSubmit={accept} aria-label="Target form" />;
 };
 
-jest.mock("@components/storage/ProposalSummary", () => () => "Proposal summary");
+jest.mock("@components/storage/ProposalSummary", () => mockComponent("Proposal summary"));
 jest.mock("@components/storage/ProposalTargetForm", () => FakeProposalTargetForm);
 
 const proposal = {

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();
@@ -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 () => <Wrapper>{content}</Wrapper>;
+};
+
+export { installerRender, plainRender, createCallbackMock, mockComponent };