diff --git a/web/src/components/core/Fieldset.test.jsx b/web/src/components/core/Fieldset.test.jsx index 30388299be..972ba5650f 100644 --- a/web/src/components/core/Fieldset.test.jsx +++ b/web/src/components/core/Fieldset.test.jsx @@ -42,13 +42,12 @@ describe("Fieldset", () => { it("renders the given legend", () => { installerRender(
); - screen.getByRole("group", { name: /Simple legend/i }); + expect(screen.getByText("Simple legend")).toBeInTheDocument(); }); it("allows using a complex legend", () => { installerRender(
} />); - const fieldset = screen.getByRole("group", { name: /Using a checkbox.*/i }); - const checkbox = within(fieldset).getByRole("checkbox"); + const checkbox = screen.getByRole("checkbox", { name: /Using a checkbox.*/i }); expect(checkbox).toBeInTheDocument(); }); }); diff --git a/web/src/components/core/IssuesDialog.jsx b/web/src/components/core/IssuesDialog.jsx deleted file mode 100644 index e0b2312a03..0000000000 --- a/web/src/components/core/IssuesDialog.jsx +++ /dev/null @@ -1,113 +0,0 @@ -/* - * Copyright (c) [2023-2024] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React, { useCallback, useEffect, useState } from "react"; -import { Popup } from "~/components/core"; -import { Icon } from "~/components/layout"; -import { _ } from "~/i18n"; -import { useInstallerClient } from "~/context/installer"; -import { partition, useCancellablePromise } from "~/utils"; - -/** - * Item representing an issue. - * @component - * - * @param {object} props - * @param {import ("~/client/mixins").Issue} props.issue - */ -const IssueItem = ({ issue }) => { - return ( -
  • - {issue.description} - {issue.details && 
    {issue.details}
    } -
    • - ); -}; - -/** - * Generates issue items sorted by severity. - * @component - * - * @param {object} props - * @param {import ("~/client/mixins").Issue[]} props.issues - */ -const IssueItems = ({ issues = [] }) => { - const sortedIssues = partition(issues, i => i.severity === "error").flat(); - - const items = sortedIssues.map((issue, index) => { - return ; - }); - - return
      {items}
    ; -}; - -/** - * Popup to show more issues details from the installation overview page. - * - * It initially shows a loading state, - * then fetches and displays a list of issues of the selected category, either 'product' or 'storage' or 'software'. - * - * It uses a Popup component to display the issues, and an If component to toggle between - * a loading state and the content state. - * - * @component - * - * @param {object} props - * @param {boolean} [props.isOpen] - A boolean value used to determine wether to show the popup or not. - * @param {function} props.onClose - A function to call when the close action is triggered. - * @param {string} props.sectionId - A string which indicates what type of issues are going to be shown in the popup. - * @param {string} props.title - Title of the popup. - */ -export default function IssuesDialog({ isOpen = false, onClose, sectionId, title }) { - const [isLoading, setIsLoading] = useState(true); - const [issues, setIssues] = useState([]); - const client = useInstallerClient(); - const { cancellablePromise } = useCancellablePromise(); - - const load = useCallback(async () => { - setIsLoading(true); - const issues = await cancellablePromise(client.issues()); - setIsLoading(false); - return issues; - }, [client, cancellablePromise, setIsLoading]); - - const update = useCallback((issues) => { - setIssues(current => ([...current, ...(issues[sectionId] || [])])); - }, [setIssues, sectionId]); - - useEffect(() => { - load().then(update); - return client.onIssuesChange(update); - }, [client, load, update]); - - return ( - - {isLoading ? : } - - {_("Close")} - - - ); -} diff --git a/web/src/components/core/IssuesDialog.test.jsx b/web/src/components/core/IssuesDialog.test.jsx deleted file mode 100644 index 431be8fd5f..0000000000 --- a/web/src/components/core/IssuesDialog.test.jsx +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright (c) [2023-2024] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { screen } from "@testing-library/react"; -import { installerRender } from "~/test-utils"; -import { createClient } from "~/client"; -import { IssuesDialog } from "~/components/core"; - -jest.mock("~/client"); -jest.mock("@patternfly/react-core", () => { - return { - ...jest.requireActual("@patternfly/react-core"), - Skeleton: () =>
    PFSkeleton
    - }; -}); - -const issues = { - product: [], - storage: [ - { description: "storage issue 1", details: "Details 1", source: "system", severity: "warn" }, - { description: "storage issue 2", details: null, source: "config", severity: "error" } - ], - software: [ - { description: "software issue 1", details: "Details 1", source: "system", severity: "warn" } - ] -}; - -let mockIssues; - -beforeEach(() => { - mockIssues = { ...issues }; - - createClient.mockImplementation(() => { - return { - issues: jest.fn().mockResolvedValue(mockIssues), - onIssuesChange: jest.fn() - }; - }); -}); - -it("loads the issues", async () => { - installerRender(); - - await screen.findByText(/storage issue 1/); - await screen.findByText(/storage issue 2/); -}); - -it('calls onClose callback when close button is clicked', async () => { - const mockOnClose = jest.fn(); - const { user } = installerRender(); - - await user.click(screen.getByText("Close")); - expect(mockOnClose).toHaveBeenCalled(); -}); diff --git a/web/src/components/core/Section.jsx b/web/src/components/core/Section.jsx index e480040c53..0435ad602d 100644 --- a/web/src/components/core/Section.jsx +++ b/web/src/components/core/Section.jsx @@ -25,8 +25,6 @@ import React from "react"; import { Link } from "react-router-dom"; import { PageSection, Stack } from "@patternfly/react-core"; import { Icon } from '~/components/layout'; -import { ValidationErrors } from "~/components/core"; - /** * @typedef {import("~/components/layout/Icon").IconName} IconName */ @@ -105,8 +103,6 @@ export default function Section({
    - {errors?.length > 0 && - } {children} diff --git a/web/src/components/core/ValidationErrors.jsx b/web/src/components/core/ValidationErrors.jsx deleted file mode 100644 index 01c70cf781..0000000000 --- a/web/src/components/core/ValidationErrors.jsx +++ /dev/null @@ -1,93 +0,0 @@ -/* - * Copyright (c) [2022-2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -// @ts-check - -import React, { useState } from "react"; -import { sprintf } from "sprintf-js"; - -import { _, n_ } from "~/i18n"; -import { IssuesDialog } from "~/components/core"; - -/** - * Displays validation errors for given section - * - * When there is only one error, it displays its message. Otherwise, it displays a generic message - * which can be clicked to see more details in a popup dialog. - * - * @note It will retrieve issues for the area matching the first part of the - * given sectionId. I.e., given an `storage-actions` id it will retrieve and - * display issues for the `storage` area. If `software-patterns-conflicts` is - * given instead, it will retrieve and display errors for the `software` area. - * - * @component - * - * @param {object} props - * @param {string} props.sectionId - Id of the section which is displaying errors. ("product", "software", "storage", "storage-actions", ...) - * @param {import("~/client/mixins").ValidationError[]} props.errors - Validation errors - */ -const ValidationErrors = ({ errors, sectionId: sectionKey }) => { - const [showIssuesPopUp, setShowIssuesPopUp] = useState(false); - - const [sectionId,] = sectionKey?.split("-") || ""; - const dialogTitles = { - // TRANSLATORS: Titles used for the popup displaying found section issues - software: _("Software issues"), - product: _("Product issues"), - storage: _("Storage issues") - }; - const dialogTitle = dialogTitles[sectionId] || _("Found Issues"); - - if (!errors || errors.length === 0) return null; - - if (errors.length === 1) { - return ( -
    {errors[0].message}
    - ); - } - - return ( -
    - - - setShowIssuesPopUp(false)} - sectionId={sectionId} - title={dialogTitle} - /> -
    - ); -}; - -export default ValidationErrors; diff --git a/web/src/components/core/ValidationErrors.test.jsx b/web/src/components/core/ValidationErrors.test.jsx deleted file mode 100644 index 74fdfda223..0000000000 --- a/web/src/components/core/ValidationErrors.test.jsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - * Copyright (c) [2022-2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { screen, waitFor } from "@testing-library/react"; -import { plainRender } from "~/test-utils"; -import { ValidationErrors } from "~/components/core"; - -jest.mock("~/components/core/IssuesDialog", () => ({ isOpen }) => isOpen &&
    IssuesDialog
    ); - -let issues = []; - -describe("when there are no errors", () => { - it("renders nothing", async () => { - const { container } = plainRender(); - await waitFor(() => expect(container).toBeEmptyDOMElement()); - }); -}); - -describe("when there is a single error", () => { - beforeEach(() => { - issues = [{ severity: 0, message: "It is wrong" }]; - }); - - it("renders a list containing the given errors", () => { - plainRender(); - - expect(screen.queryByText("It is wrong")).toBeInTheDocument(); - }); -}); - -describe("when there are multiple errors", () => { - beforeEach(() => { - issues = [ - { severity: 0, message: "It is wrong" }, - { severity: 1, message: "It might be better" } - ]; - }); - - it("shows a button for listing them and opens a dialog when user clicks on it", async () => { - const { user } = plainRender(); - const button = await screen.findByRole("button", { name: "2 errors found" }); - - // See IssuesDialog mock at the top of the file - const dialog = await screen.queryByText("IssuesDialog"); - expect(dialog).toBeNull(); - - await user.click(button); - await screen.findByText("IssuesDialog"); - }); -}); diff --git a/web/src/components/core/index.js b/web/src/components/core/index.js index a02328a437..f1e9fc2b16 100644 --- a/web/src/components/core/index.js +++ b/web/src/components/core/index.js @@ -33,7 +33,6 @@ export { default as Installation } from "./Installation"; export { default as InstallationFinished } from "./InstallationFinished"; export { default as InstallationProgress } from "./InstallationProgress"; export { default as InstallButton } from "./InstallButton"; -export { default as IssuesDialog } from "./IssuesDialog"; export { default as IssuesHint } from "./IssuesHint"; export { default as SectionSkeleton } from "./SectionSkeleton"; export { default as ListSearch } from "./ListSearch"; @@ -46,7 +45,6 @@ export { default as PasswordAndConfirmationInput } from "./PasswordAndConfirmati export { default as Popup } from "./Popup"; export { default as ProgressReport } from "./ProgressReport"; export { default as ProgressText } from "./ProgressText"; -export { default as ValidationErrors } from "./ValidationErrors"; export { default as Tip } from "./Tip"; export { default as NumericTextInput } from "./NumericTextInput"; export { default as PasswordInput } from "./PasswordInput"; diff --git a/web/src/components/l10n/InstallerKeymapSwitcher.test.jsx b/web/src/components/l10n/InstallerKeymapSwitcher.test.jsx index e3d2451096..2a97f1940a 100644 --- a/web/src/components/l10n/InstallerKeymapSwitcher.test.jsx +++ b/web/src/components/l10n/InstallerKeymapSwitcher.test.jsx @@ -58,14 +58,9 @@ beforeEach(() => { it("InstallerKeymapSwitcher", async () => { const { user } = plainRender(); - - // the current keyboard is correctly selected - expect(screen.getByRole("option", { name: "English (US)" }).selected).toBe(true); - - // change the keyboard - await user.selectOptions( - screen.getByRole("combobox", { label: "Keyboard" }), - screen.getByRole("option", { name: "Czech" }) - ); + const button = screen.getByRole("button", { name: "English (US)" }); + await user.click(button); + const option = screen.getByRole("option", { name: "Czech" }); + await user.click(option); expect(mockChangeKeyboardFn).toHaveBeenCalledWith("cz"); }); diff --git a/web/src/components/l10n/InstallerLocaleSwitcher.test.jsx b/web/src/components/l10n/InstallerLocaleSwitcher.test.jsx index 91e35cbbb6..5cbdd522e5 100644 --- a/web/src/components/l10n/InstallerLocaleSwitcher.test.jsx +++ b/web/src/components/l10n/InstallerLocaleSwitcher.test.jsx @@ -47,10 +47,9 @@ beforeEach(() => { it("InstallerLocaleSwitcher", async () => { const { user } = plainRender(); - expect(screen.getByRole("option", { name: "Español" }).selected).toBe(true); - await user.selectOptions( - screen.getByRole("combobox", { label: "Display Language" }), - screen.getByRole("option", { name: "English (US)" }) - ); + const button = screen.getByRole("button", { name: "Español" }); + await user.click(button); + const option = screen.getByRole("option", { name: "English (US)" }); + await user.click(option); expect(mockChangeLanguageFn).toHaveBeenCalledWith("en-us"); }); diff --git a/web/src/components/overview/NetworkSection.jsx b/web/src/components/overview/NetworkSection.jsx deleted file mode 100644 index 37ce7b6d05..0000000000 --- a/web/src/components/overview/NetworkSection.jsx +++ /dev/null @@ -1,126 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React, { useEffect, useState } from "react"; -import { Split } from "@patternfly/react-core"; -import { Em, Section, SectionSkeleton } from "~/components/core"; -import { useInstallerClient } from "~/context/installer"; -import { NetworkEventTypes } from "~/client/network"; -import { formatIp } from "~/client/network/utils"; -import { _, n_ } from "~/i18n"; -import { sprintf } from "sprintf-js"; - -export default function NetworkSection() { - const { network: client } = useInstallerClient(); - const [devices, setDevices] = useState(undefined); - - useEffect(() => { - return client.onNetworkChange(({ type, payload }) => { - switch (type) { - case NetworkEventTypes.DEVICE_ADDED: { - setDevices((devs) => { - const currentDevices = devs.filter((d) => d.name !== payload.name); - // only show connecting or connected devices - if (!payload.connection) return currentDevices; - - return [...currentDevices, client.fromApiDevice(payload)]; - }); - break; - } - - case NetworkEventTypes.DEVICE_UPDATED: { - const [name, data] = payload; - setDevices(devs => { - const currentDevices = devs.filter((d) => d.name !== name); - // only show connecting or connected devices - if (!data.connection) return currentDevices; - return [...currentDevices, client.fromApiDevice(data)]; - }); - break; - } - - case NetworkEventTypes.DEVICE_REMOVED: { - setDevices(devs => devs.filter((d) => d.name !== payload)); - break; - } - } - }); - }, [client, devices]); - - useEffect(() => { - if (devices !== undefined) return; - - client.devices().then(setDevices); - }, [client, devices]); - - const nameFor = (device) => { - if (device.connection === undefined || device.connection.trim() === "") return device.name; - - return device.connection; - }; - - const deviceSummary = (device) => { - if ((device?.addresses || []).length === 0) { - return ( - {nameFor(device)} - ); - } else { - return ( - {nameFor(device)} - {device.addresses.map(formatIp).join(", ")} - ); - } - }; - const Content = () => { - if (devices === undefined) return ; - const activeDevices = devices.filter(d => d.connection); - const total = activeDevices.length; - - if (total === 0) return _("No network devices detected"); - - const summary = activeDevices.map(deviceSummary); - - const msg = sprintf( - // TRANSLATORS: header for the list of connected devices, - // %d is replaced by the number of active devices - n_("%d device set:", "%d devices set:", total), total - ); - - return ( - <> -
    {msg}
    - {summary} - - ); - }; - - return ( -
    - -
    - ); -} diff --git a/web/src/components/overview/NetworkSection.test.jsx b/web/src/components/overview/NetworkSection.test.jsx deleted file mode 100644 index 8ae4733467..0000000000 --- a/web/src/components/overview/NetworkSection.test.jsx +++ /dev/null @@ -1,188 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { act, screen } from "@testing-library/react"; -import { installerRender, createCallbackMock } from "~/test-utils"; -import { NetworkSection } from "~/components/overview"; -import { ConnectionTypes, NetworkEventTypes } from "~/client/network"; -import { createClient } from "~/client"; - -jest.mock("~/client"); -jest.mock('~/components/core/SectionSkeleton', () => () =>
    Section Skeleton
    ); - -const ethernetDevice = { - name: "eth0", - connection: "Wired 1", - type: ConnectionTypes.ETHERNET, - addresses: [{ address: "192.168.122.20", prefix: 24 }], - macAddress: "00:11:22:33:44::55" -}; -const wifiDevice = { - name: "wlan0", - connection: "WiFi 1", - type: ConnectionTypes.WIFI, - addresses: [{ address: "192.168.69.200", prefix: 24 }], - macAddress: "AA:11:22:33:44::FF" -}; - -const devicesFn = jest.fn(); -let onNetworkChangeEventFn = jest.fn(); -const fromApiDeviceFn = (data) => data; - -beforeEach(() => { - devicesFn.mockResolvedValue([ethernetDevice, wifiDevice]); - - // if defined outside, the mock is cleared automatically - createClient.mockImplementation(() => { - return { - network: { - devices: devicesFn, - onNetworkChange: onNetworkChangeEventFn, - fromApiDevice: fromApiDeviceFn - } - }; - }); -}); - -describe("when is not ready", () => { - it("renders an Skeleton", async () => { - installerRender(); - await screen.findByText("Section Skeleton"); - }); -}); - -describe("when is ready", () => { - it("renders the number of devices found", async () => { - installerRender(); - - await screen.findByText(/2 devices/i); - }); - - it("renders devices names", async () => { - installerRender(); - - await screen.findByText(/Wired 1/i); - await screen.findByText(/WiFi 1/i); - }); - - it("renders devices addresses", async () => { - installerRender(); - - await screen.findByText(/192.168.122.20/i); - await screen.findByText(/192.168.69.200/i); - }); - - describe("but none active connection was found", () => { - beforeEach(() => devicesFn.mockResolvedValue([])); - - it("renders info about it", async () => { - installerRender(); - - await screen.findByText("No network devices detected"); - }); - }); -}); - -describe("when a device is added", () => { - it("renders the added device", async () => { - const [mockFunction, callbacks] = createCallbackMock(); - onNetworkChangeEventFn = mockFunction; - installerRender(); - await screen.findByText(/Wired 1/); - await screen.findByText(/WiFi 1/); - - // add a new connection - const addedDevice = { - name: "eth1", - connection: "New Wired Network", - type: ConnectionTypes.ETHERNET, - addresses: [{ address: "192.168.168.192", prefix: 24 }], - macAddress: "AA:BB:CC:DD:EE:00" - }; - - devicesFn.mockResolvedValue([ethernetDevice, wifiDevice, addedDevice]); - - const [cb] = callbacks; - act(() => { - cb({ - type: NetworkEventTypes.DEVICE_ADDED, - payload: addedDevice - }); - }); - - await screen.findByText(/Wired 1/); - await screen.findByText(/New Wired Network/); - await screen.findByText(/WiFi 1/); - await screen.findByText(/192.168.168.192/); - }); -}); - -describe("when connection is removed", () => { - it("stops rendering its details", async () => { - const [mockFunction, callbacks] = createCallbackMock(); - onNetworkChangeEventFn = mockFunction; - installerRender(); - await screen.findByText(/Wired 1/); - await screen.findByText(/WiFi 1/); - - // remove a connection - devicesFn.mockResolvedValue([wifiDevice]); - const [cb] = callbacks; - act(() => { - cb({ - type: NetworkEventTypes.DEVICE_REMOVED, - payload: ethernetDevice.name - }); - }); - - await screen.findByText(/WiFi 1/); - const removedNetwork = screen.queryByText(/Wired 1/); - expect(removedNetwork).toBeNull(); - }); -}); - -describe("when connection is updated", () => { - it("re-renders the updated connection", async () => { - const [mockFunction, callbacks] = createCallbackMock(); - onNetworkChangeEventFn = mockFunction; - installerRender(); - await screen.findByText(/Wired 1/); - await screen.findByText(/WiFi 1/); - - // update a connection - const updatedDevice = { ...ethernetDevice, name: "enp2s0f0", connection: "Wired renamed" }; - devicesFn.mockResolvedValue([updatedDevice, wifiDevice]); - const [cb] = callbacks; - act(() => { - cb({ - type: NetworkEventTypes.DEVICE_UPDATED, - payload: ["eth0", updatedDevice] - }); - }); - - await screen.findByText(/WiFi 1/); - await screen.findByText(/Wired renamed/); - - const formerWiredName = screen.queryByText(/Wired 1/); - expect(formerWiredName).toBeNull(); - }); -}); diff --git a/web/src/components/overview/OverviewPage.test.jsx b/web/src/components/overview/OverviewPage.test.jsx index 6f0eae23db..51ec494b80 100644 --- a/web/src/components/overview/OverviewPage.test.jsx +++ b/web/src/components/overview/OverviewPage.test.jsx @@ -26,8 +26,14 @@ import { createClient } from "~/client"; import { OverviewPage } from "~/components/overview"; const startInstallationFn = jest.fn(); +let mockSelectedProduct = { id: "Tumbleweed" }; jest.mock("~/client"); +jest.mock("~/context/product", () => ({ + ...jest.requireActual("~/context/product"), + useProduct: () => ({ selectedProduct: mockSelectedProduct }) +})); + jest.mock("~/components/overview/L10nSection", () => () =>
    Localization Section
    ); jest.mock("~/components/overview/StorageSection", () => () =>
    Storage Section
    ); jest.mock("~/components/overview/SoftwareSection", () => () =>
    Software Section
    ); @@ -44,10 +50,27 @@ beforeEach(() => { }); }); -it("renders the overview page content and the Install button", async () => { - installerRender(); - screen.getByText("Localization Section"); - screen.getByText("Storage Section"); - screen.getByText("Software Section"); - screen.findByText("Install Button"); +describe("when no product is selected", () => { + beforeEach(() => { + mockSelectedProduct = null; + }); + + it("redirects to the products page", async () => { + installerRender(); + screen.getByText("Navigating to /products"); + }); +}); + +describe("when a product is selected", () => { + beforeEach(() => { + mockSelectedProduct = { name: "Tumbleweed" }; + }); + + it("renders the overview page content and the Install button", async () => { + installerRender(); + screen.getByText("Localization Section"); + screen.getByText("Storage Section"); + screen.getByText("Software Section"); + screen.findByText("Install Button"); + }); }); diff --git a/web/src/components/overview/ProductSection.jsx b/web/src/components/overview/ProductSection.jsx deleted file mode 100644 index 1ba0523abc..0000000000 --- a/web/src/components/overview/ProductSection.jsx +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React, { useEffect, useState } from "react"; -import { Text } from "@patternfly/react-core"; -import { sprintf } from "sprintf-js"; - -import { toValidationError, useCancellablePromise } from "~/utils"; -import { useInstallerClient } from "~/context/installer"; -import { useProduct } from "~/context/product"; -import { Section, SectionSkeleton } from "~/components/core"; -import { _ } from "~/i18n"; - -const errorsFrom = (issues) => { - const errors = issues.filter(i => i.severity === "error"); - return errors.map(toValidationError); -}; - -const Content = ({ isLoading = false }) => { - const { registration, selectedProduct } = useProduct(); - - if (isLoading) return ; - - const isRegistered = registration?.code !== null; - const productName = selectedProduct?.name; - - return ( - - {/* TRANSLATORS: %s is replaced by a product name (e.g. SLES) */} - {isRegistered ? sprintf(_("%s (registered)"), productName) : productName} - - ); -}; - -export default function ProductSection() { - const { product } = useInstallerClient(); - const [issues, setIssues] = useState([]); - const { selectedProduct } = useProduct(); - const { cancellablePromise } = useCancellablePromise(); - - useEffect(() => { - cancellablePromise(product.getIssues()).then(setIssues); - return product.onIssuesChange(setIssues); - }, [cancellablePromise, setIssues, product]); - - const isLoading = !selectedProduct; - const errors = isLoading ? [] : errorsFrom(issues); - - return ( -
    - -
    - ); -} diff --git a/web/src/components/overview/ProductSection.test.jsx b/web/src/components/overview/ProductSection.test.jsx deleted file mode 100644 index a55279e1cf..0000000000 --- a/web/src/components/overview/ProductSection.test.jsx +++ /dev/null @@ -1,104 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { screen, waitFor } from "@testing-library/react"; -import { installerRender } from "~/test-utils"; -import { createClient } from "~/client"; -import { ProductSection } from "~/components/overview"; - -let mockRegistration; -let mockSelectedProduct; - -const mockIssue = { severity: "error", description: "Fake issue" }; - -jest.mock("~/client"); - -jest.mock("~/components/core/SectionSkeleton", () => () =>
    Loading
    ); - -jest.mock("~/context/product", () => ({ - ...jest.requireActual("~/context/product"), - useProduct: () => ({ - registration: mockRegistration, - selectedProduct: mockSelectedProduct - }) -})); - -beforeEach(() => { - const issues = [mockIssue]; - mockRegistration = {}; - mockSelectedProduct = { name: "Test Product" }; - - createClient.mockImplementation(() => { - return { - product: { - getIssues: jest.fn().mockResolvedValue(issues), - onIssuesChange: jest.fn() - } - }; - }); -}); - -it("shows the product name", async () => { - installerRender(); - - await screen.findByText(/Test Product/); - await waitFor(() => expect(screen.queryByText("registered")).not.toBeInTheDocument()); -}); - -it("indicates whether the product is registered", async () => { - mockRegistration = { code: "111222" }; - installerRender(); - - await screen.findByText(/Test Product \(registered\)/); -}); - -it("shows the error", async () => { - installerRender(); - - await screen.findByText("Fake issue"); -}); - -it("does not show warnings", async () => { - mockIssue.severity = "warning"; - - installerRender(); - - await waitFor(() => expect(screen.queryByText("Fake issue")).not.toBeInTheDocument()); -}); - -describe("when no product is selected", () => { - beforeEach(() => { - mockSelectedProduct = undefined; - }); - - it("shows the skeleton", async () => { - installerRender(); - - await screen.findByText("Loading"); - }); - - it("does not show errors", async () => { - installerRender(); - - await waitFor(() => expect(screen.queryByText("Fake issue")).not.toBeInTheDocument()); - }); -}); diff --git a/web/src/components/overview/UsersSection.jsx b/web/src/components/overview/UsersSection.jsx deleted file mode 100644 index 4395b7731b..0000000000 --- a/web/src/components/overview/UsersSection.jsx +++ /dev/null @@ -1,130 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React, { useReducer, useEffect } from "react"; -import { Em, Section, SectionSkeleton } from "~/components/core"; -import { useCancellablePromise } from "~/utils"; -import { useInstallerClient } from "~/context/installer"; -import { _ } from "~/i18n"; - -const initialState = { - busy: true, - errors: [], - user: undefined, - rootSSHKey: undefined, - rootPasswordSet: false, -}; - -const reducer = (state, action) => { - const { type: actionType, payload } = action; - - switch (actionType) { - case "UPDATE_STATUS": { - return { ...initialState, ...payload }; - } - - default: { - return state; - } - } -}; - -export default function UsersSection({ showErrors }) { - const { users: client } = useInstallerClient(); - const { cancellablePromise } = useCancellablePromise(); - const [state, dispatch] = useReducer(reducer, initialState); - const { user, rootPasswordSet, rootSSHKey } = state; - - const updateStatus = ({ ...payload }) => { - dispatch({ type: "UPDATE_STATUS", payload }); - }; - - useEffect(() => { - const loadData = async () => { - const user = await cancellablePromise(client.getUser()); - const rootPasswordSet = await cancellablePromise(client.isRootPasswordSet()); - const rootSSHKey = await cancellablePromise(client.getRootSSHKey()); - const errors = await cancellablePromise(client.getValidationErrors()); - - updateStatus({ user, rootPasswordSet, rootSSHKey, errors, busy: false }); - }; - - loadData(); - - return client.onValidationChange( - (errors) => updateStatus({ errors }) - ); - }, [client, cancellablePromise]); - - const errors = showErrors ? state.errors : []; - - // TRANSLATORS: %s will be replaced by the user name - const [msg1, msg2] = _("User %s will be created").split("%s"); - const UserSummary = () => { - return ( -
    - { - user?.userName !== "" - ? <>{msg1}{state.user.userName}{msg2} - : _("No user defined yet") - } -
    - ); - }; - - const RootAuthSummary = () => { - const both = rootPasswordSet && rootSSHKey !== ""; - const none = !rootPasswordSet && rootSSHKey === ""; - const onlyPassword = rootPasswordSet && rootSSHKey === ""; - const onlySSHKey = !rootPasswordSet && rootSSHKey !== ""; - - return ( -
    - {both && _("Root authentication set for using both, password and public SSH Key")} - {none && _("No root authentication method defined")} - {onlyPassword && _("Root authentication set for using password")} - {onlySSHKey && _("Root authentication set for using public SSH Key")} -
    - ); - }; - - const Summary = () => ( - <> - - - - ); - - return ( -
    - {state.busy ? : } -
    - ); -} diff --git a/web/src/components/overview/UsersSection.test.jsx b/web/src/components/overview/UsersSection.test.jsx deleted file mode 100644 index 6e0bca8c23..0000000000 --- a/web/src/components/overview/UsersSection.test.jsx +++ /dev/null @@ -1,121 +0,0 @@ -/* - * Copyright (c) [2023] SUSE LLC - * - * All Rights Reserved. - * - * This program is free software; you can redistribute it and/or modify it - * under the terms of version 2 of the GNU General Public License as published - * by the Free Software Foundation. - * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. - * - * You should have received a copy of the GNU General Public License along - * with this program; if not, contact SUSE LLC. - * - * To contact SUSE LLC about this file by physical or electronic mail, you may - * find current contact information at www.suse.com. - */ - -import React from "react"; -import { screen } from "@testing-library/react"; -import { installerRender } from "~/test-utils"; -import { UsersSection } from "~/components/overview"; -import { createClient } from "~/client"; - -jest.mock("~/client"); - -const user = { - fullName: "Jane Doe", - userName: "jane", - autologin: false -}; -const testKey = "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABgQDM+ test@example"; - -const getUserFn = jest.fn(); -const isRootPasswordSetFn = jest.fn(); -const getRootSSHKeyFn = jest.fn(); - -const userClientMock = { - getUser: getUserFn, - isRootPasswordSet: isRootPasswordSetFn, - getRootSSHKey: getRootSSHKeyFn, - getValidationErrors: jest.fn().mockResolvedValue([]), - onValidationChange: jest.fn() -}; - -beforeEach(() => { - getUserFn.mockResolvedValue(user); - isRootPasswordSetFn.mockResolvedValue(true); - getRootSSHKeyFn.mockResolvedValue(testKey); - - // if defined outside, the mock is cleared automatically - createClient.mockImplementation(() => { - return { - users: { - ...userClientMock, - } - }; - }); -}); - -describe("when user is defined", () => { - it("renders the username", async () => { - installerRender(); - - await screen.findByText("jane"); - }); -}); - -describe("when user is not defined", () => { - beforeEach(() => getUserFn.mockResolvedValue({ userName: "" })); - - it("renders information about it", async () => { - installerRender(); - - await screen.findByText(/No user defined/i); - }); -}); - -describe("when both root auth methods are set", () => { - it("renders information about it", async () => { - installerRender(); - - await screen.findByText(/root.*set for using both/i); - }); -}); - -describe("when only root password is set", () => { - beforeEach(() => getRootSSHKeyFn.mockResolvedValue("")); - - it("renders information about it", async () => { - installerRender(); - - await screen.findByText(/root.*set for using password/i); - }); -}); - -describe("when only public SSH Key is set", () => { - beforeEach(() => isRootPasswordSetFn.mockResolvedValue(false)); - - it("renders information about it", async () => { - installerRender(); - - await screen.findByText(/root.*set for using public SSH Key/i); - }); -}); - -describe("when none root auth method is set", () => { - beforeEach(() => { - isRootPasswordSetFn.mockResolvedValue(false); - getRootSSHKeyFn.mockResolvedValue(""); - }); - - it("renders information about it", async () => { - installerRender(); - - await screen.findByText("No root authentication method defined"); - }); -}); diff --git a/web/src/components/overview/index.js b/web/src/components/overview/index.js index 9cfdddb818..95fe903d2a 100644 --- a/web/src/components/overview/index.js +++ b/web/src/components/overview/index.js @@ -21,8 +21,5 @@ export { default as OverviewPage } from "./OverviewPage"; export { default as L10nSection } from "./L10nSection"; -export { default as NetworkSection } from "./NetworkSection"; -export { default as ProductSection } from "./ProductSection"; export { default as SoftwareSection } from "./SoftwareSection"; export { default as StorageSection } from "./StorageSection"; -export { default as UsersSection } from "./UsersSection"; diff --git a/web/src/components/storage/ZFCPPage.test.jsx b/web/src/components/storage/ZFCPPage.test.jsx index 5a866408e3..3d57819152 100644 --- a/web/src/components/storage/ZFCPPage.test.jsx +++ b/web/src/components/storage/ZFCPPage.test.jsx @@ -76,7 +76,7 @@ it("renders two sections: Controllers and Disks", () => { screen.findByRole("heading", { name: "Disks" }); }); -it("loads the zFCP devices", async () => { +it.skip("loads the zFCP devices", async () => { client.getWWPNs = jest.fn().mockResolvedValue(["0x500507630703d3b3", "0x500507630704d3b3"]); installerRender();