diff --git a/web/package-lock.json b/web/package-lock.json index 5b34deaa4e..d2ad77b1d3 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -9,9 +9,9 @@ "dependencies": { "@date-fns/tz": "^1.1.2", "@material-symbols/svg-400": "^0.29.2", - "@patternfly/patternfly": "^6.1.0", - "@patternfly/react-core": "^6.1.0", - "@patternfly/react-table": "^6.1.0", + "@patternfly/patternfly": "^6.2.3", + "@patternfly/react-core": "^6.2.2", + "@patternfly/react-table": "^6.2.2", "@tanstack/react-query": "^5.49.2", "axios": "^1.7.3", "fast-sort": "^3.4.0", @@ -3528,21 +3528,21 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.1.0.tgz", - "integrity": "sha512-w+QazL8NHKkg5j01eotblsswKxQQSYB0CN3yBXQL9ScpHdp/fK8M6TqWbKZNRpf+NqhMxcH/om8eR0N/fDCJqw==", + "version": "6.2.3", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.2.3.tgz", + "integrity": "sha512-FR027W7JygcQpvlRU/Iom936Vm0apzfi2o5lvtlcWW6IaeZCCTtTaDxehoYuELHlemzkLziQAgu6LuCJEVayjw==", "license": "MIT" }, "node_modules/@patternfly/react-core": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.1.0.tgz", - "integrity": "sha512-zj0lJPZxQanXKD8ae2kYnweT0kpp1CzpHYAkaBjTrw2k6ZMfr/UPlp0/ugCjWEokBqh79RUADLkKJJPce/yoSQ==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.2.2.tgz", + "integrity": "sha512-JUrZ57JQ4bkmed1kxaciXb0ZpIVYyCHc2HjtzoKQ5UNRlx204zR2isATSHjdw2GFcWvwpkC5/fU2BR+oT3opbg==", "license": "MIT", "dependencies": { - "@patternfly/react-icons": "^6.1.0", - "@patternfly/react-styles": "^6.1.0", - "@patternfly/react-tokens": "^6.1.0", - "focus-trap": "7.6.2", + "@patternfly/react-icons": "^6.2.2", + "@patternfly/react-styles": "^6.2.2", + "@patternfly/react-tokens": "^6.2.2", + "focus-trap": "7.6.4", "react-dropzone": "^14.3.5", "tslib": "^2.8.1" }, @@ -3552,9 +3552,9 @@ } }, "node_modules/@patternfly/react-icons": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.1.0.tgz", - "integrity": "sha512-V1w/j19YmOgvh72IRRf1p07k+u4M5+9P+o/IxunlF0fWzLDX4Hf+utBI11A8cRfUzpQN7eLw/vZIS3BLM8Ge3Q==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.2.2.tgz", + "integrity": "sha512-XkBwzuV/uiolX+T6QgB3RIqphM1m+vAZjAe3McYtyY22j1rsOdlWDE4RtRrJ1q7EoIZwyZHj0h8T9vMfUsLn4Q==", "license": "MIT", "peerDependencies": { "react": "^17 || ^18", @@ -3562,21 +3562,21 @@ } }, "node_modules/@patternfly/react-styles": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.1.0.tgz", - "integrity": "sha512-JQ3zIl5SFiSB0YWVYibcUwgZdsp6Wn8hkfZ7KhtCjHFccSDdJexPOXVV1O9f2h4PfxTlY3YntZ81ZsguBx/Q7A==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.2.2.tgz", + "integrity": "sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g==", "license": "MIT" }, "node_modules/@patternfly/react-table": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.1.0.tgz", - "integrity": "sha512-eC8mKkvFR0btfv6yEOvE+J4gBXU8ZGe9i2RSezBM+MJaXEQt/CKRjV+SAB5EeE3PyBYKG8yYDdsOoNmaPxxvSA==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.2.2.tgz", + "integrity": "sha512-7CxVKhnpA+f8dLJ0hVvzZOe4Djx/nE+w70ipeAHf4Yi5JwfDWmbK97YvjYPfamp/bsXTLtPcK2n4AoY5DQX6Pg==", "license": "MIT", "dependencies": { - "@patternfly/react-core": "^6.1.0", - "@patternfly/react-icons": "^6.1.0", - "@patternfly/react-styles": "^6.1.0", - "@patternfly/react-tokens": "^6.1.0", + "@patternfly/react-core": "^6.2.2", + "@patternfly/react-icons": "^6.2.2", + "@patternfly/react-styles": "^6.2.2", + "@patternfly/react-tokens": "^6.2.2", "lodash": "^4.17.21", "tslib": "^2.8.1" }, @@ -3586,9 +3586,9 @@ } }, "node_modules/@patternfly/react-tokens": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.1.0.tgz", - "integrity": "sha512-t1UcHbOa4txczTR5UlnG4XcAAdnDSfSlCaOddw/HTqRF59pn2ks2JUu9sfnFRZ8SiAAxKRiYdX5bT7Mf4R24+w==", + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.2.2.tgz", + "integrity": "sha512-2GRWDPBTrcTlGNFc5NPJjrjEVU90RpgcGX/CIe2MplLgM32tpVIkeUtqIoJPLRk5GrbhyFuHJYRU+O93gU4o3Q==", "license": "MIT" }, "node_modules/@pkgr/core": { @@ -9120,9 +9120,9 @@ "license": "ISC" }, "node_modules/focus-trap": { - "version": "7.6.2", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz", - "integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==", + "version": "7.6.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz", + "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==", "license": "MIT", "dependencies": { "tabbable": "^6.2.0" diff --git a/web/package.json b/web/package.json index a54c8fc766..87555942e3 100644 --- a/web/package.json +++ b/web/package.json @@ -100,9 +100,9 @@ "dependencies": { "@date-fns/tz": "^1.1.2", "@material-symbols/svg-400": "^0.29.2", - "@patternfly/patternfly": "^6.1.0", - "@patternfly/react-core": "^6.1.0", - "@patternfly/react-table": "^6.1.0", + "@patternfly/patternfly": "^6.2.3", + "@patternfly/react-core": "^6.2.2", + "@patternfly/react-table": "^6.2.2", "@tanstack/react-query": "^5.49.2", "axios": "^1.7.3", "fast-sort": "^3.4.0", diff --git a/web/src/components/network/WifiNetworksList.test.tsx b/web/src/components/network/WifiNetworksList.test.tsx index 9f53bc1e9d..3c52f2b65b 100644 --- a/web/src/components/network/WifiNetworksList.test.tsx +++ b/web/src/components/network/WifiNetworksList.test.tsx @@ -20,7 +20,7 @@ */ import React from "react"; -import { screen, within } from "@testing-library/react"; +import { screen } from "@testing-library/react"; import { installerRender } from "~/test-utils"; import WifiNetworksList from "~/components/network/WifiNetworksList"; import { @@ -120,31 +120,27 @@ describe("WifiNetworksList", () => { it("renders a list of available wifi networks", () => { // @ts-expect-error: you need to specify the aria-label installerRender(); - screen.getByRole("listitem", { name: "Secured network Network 1 Weak signal" }); - screen.getByRole("listitem", { name: "Secured network Network 2 Excellent signal" }); - screen.getByRole("listitem", { name: "Public network Network 3 Good signal" }); + screen.getByLabelText("Secured network Network 1 Weak signal"); + screen.getByLabelText("Secured network Network 2 Excellent signal"); + screen.getByLabelText("Public network Network 3 Good signal"); }); - it("renders a spinner in network in connecting state", () => { + it("renders a spinner for network in connecting state", () => { // @ts-expect-error: you need to specify the aria-label installerRender(); - const network2 = screen.getByRole("listitem", { - name: "Secured network Network 2 Excellent signal", - }); - within(network2).getByRole("progressbar", { name: "Connecting to Network 2" }); + screen.getByLabelText("Secured network Network 2 Excellent signal"); + screen.getByRole("progressbar", { name: "Connecting to Network 2" }); }); describe.skip("and user selects a connected network", () => { it("renders basic network information and actions instead of the connection form", async () => { // @ts-expect-error: you need to specify the aria-label const { user } = installerRender(); - const network1 = screen.getByRole("listitem", { - name: "Secured network Network 1 Weak signal", - }); + const network1 = screen.getByLabelText("Secured network Network 1 Weak signal"); await user.click(network1); screen.getByRole("heading", { name: "Connection details" }); expect(screen.queryByRole("form", { name: "Wi-Fi connection form" })).toBeNull(); - screen.getByText("192.168.69.201/24"); + screen.getByLabelText("192.168.69.201/24"); }); }); @@ -152,9 +148,7 @@ describe("WifiNetworksList", () => { it("renders the connection form", async () => { // @ts-expect-error: you need to specify the aria-label const { user } = installerRender(); - const network2 = screen.getByRole("listitem", { - name: "Secured network Network 2 Excellent signal", - }); + const network2 = screen.getByLabelText("Secured network Network 2 Excellent signal"); await user.click(network2); screen.getByRole("heading", { name: "Connect to Network 2" }); screen.queryByRole("form", { name: "Wi-Fi connection form" }); @@ -167,9 +161,7 @@ describe("WifiNetworksList", () => { it("renders the connection form", async () => { // @ts-expect-error: you need to specify the aria-label const { user } = installerRender(); - const network3 = screen.getByRole("listitem", { - name: "Public network Network 3 Good signal", - }); + const network3 = screen.getByLabelText("Public network Network 3 Good signal"); await user.click(network3); screen.getByRole("heading", { name: "Connect to Network 3" }); screen.queryByRole("form", { name: "Wi-Fi connection form" }); diff --git a/web/src/components/network/WifiNetworksList.tsx b/web/src/components/network/WifiNetworksList.tsx index f4b9852aff..ced47f4767 100644 --- a/web/src/components/network/WifiNetworksList.tsx +++ b/web/src/components/network/WifiNetworksList.tsx @@ -113,18 +113,19 @@ const NetworkListItem = ({ network, connection, showIp }: NetworkListItemProps) const ipId = useId(); return ( - + - + {network.ssid} {connection?.state === ConnectionState.activated && ( diff --git a/web/src/components/software/SoftwarePatternsSelection.test.tsx b/web/src/components/software/SoftwarePatternsSelection.test.tsx index e80ecac6b9..0d89580cbf 100644 --- a/web/src/components/software/SoftwarePatternsSelection.test.tsx +++ b/web/src/components/software/SoftwarePatternsSelection.test.tsx @@ -69,12 +69,8 @@ describe("SoftwarePatternsSelection", () => { expect(headingsText).toEqual(["Desktop Functions"]); const desktopGroup = screen.getByRole("list", { name: "Desktop Functions" }); - expect( - within(desktopGroup).queryByRole("listitem", { name: /Multimedia/ }), - ).toBeInTheDocument(); - expect( - within(desktopGroup).queryByRole("listitem", { name: /Office Software/ }), - ).not.toBeInTheDocument(); + expect(within(desktopGroup).queryByText(/Multimedia$/)).toBeInTheDocument(); + expect(within(desktopGroup).queryByText(/Office Software/)).not.toBeInTheDocument(); }); it("displays the checkbox reflecting the current pattern selection status", async () => { @@ -83,12 +79,14 @@ describe("SoftwarePatternsSelection", () => { // the "Base Technologies" pattern group const baseGroup = await screen.findByRole("list", { name: "Base Technologies" }); - const basisItem = within(baseGroup).getByRole("listitem", { name: /YaST Base/ }); - const basisCheckbox = await within(basisItem).findByRole("checkbox"); + const basisCheckbox = await within(baseGroup).findByRole("checkbox", { + name: /Unselect YaST Base/, + }); expect(basisCheckbox).toBeChecked(); - const serverItem = within(baseGroup).getByRole("listitem", { name: /YaST Server/ }); - const serverCheckbox = await within(serverItem).findByRole("checkbox"); + const serverCheckbox = await within(baseGroup).findByRole("checkbox", { + name: /Select YaST Server/, + }); expect(serverCheckbox).not.toBeChecked(); }); @@ -96,8 +94,9 @@ describe("SoftwarePatternsSelection", () => { const { user } = installerRender(); const y2BasisPattern = testingPatterns.find((p) => p.name === "yast2_basis"); - const basisItem = screen.getByRole("listitem", { name: y2BasisPattern.summary }); - const basisCheckbox = await within(basisItem).findByRole("checkbox"); + const basisCheckbox = await screen.findByRole("checkbox", { + name: `Unselect ${y2BasisPattern.summary}`, + }); expect(basisCheckbox).toBeChecked(); await user.click(basisCheckbox); diff --git a/web/src/components/software/SoftwarePatternsSelection.tsx b/web/src/components/software/SoftwarePatternsSelection.tsx index 99b7d37a77..5a6bdb8740 100644 --- a/web/src/components/software/SoftwarePatternsSelection.tsx +++ b/web/src/components/software/SoftwarePatternsSelection.tsx @@ -146,7 +146,7 @@ function SoftwarePatternsSelection(): React.ReactNode { const nextActionId = `${option.name}-next-action`; return ( - + onToggle(option.name)}