[web] Use section w/o title at the top of Software

openSUSE · Oct 31, 2023 · eedc325 · eedc325
1 parent a61df81
commit eedc325
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/web/src/components/software/PatternSelector.jsx b/web/src/components/software/PatternSelector.jsx
@@ -24,7 +24,7 @@ import { SearchInput } from "@patternfly/react-core";
 import { sprintf } from "sprintf-js";
 
 import { useInstallerClient } from "~/context/installer";
-import { ValidationErrors } from "~/components/core";
+import { Section, ValidationErrors } from "~/components/core";
 import PatternGroup from "./PatternGroup";
 import PatternItem from "./PatternItem";
 import UsedSize from "./UsedSize";
@@ -207,17 +207,20 @@ function PatternSelector() {
 
   return (
     <>
-      <UsedSize size={used} />
-      <ValidationErrors errors={errors} title={errorLabel} />
-      <SearchInput
-        // TRANSLATORS: search field placeholder text
-        placeholder={_("Search")}
-        value={searchValue}
-        onChange={(_event, value) => onSearchChange(value)}
-        onClear={() => onSearchChange("")}
-        // do not display the counter when search filter is empty
-        resultsCount={searchValue === "" ? 0 : patternsData.length}
-      />
+      <Section aria-label={_("Software summary and filter options")}>
+        <UsedSize size={used} />
+        <ValidationErrors errors={errors} title={errorLabel} />
+        <SearchInput
+          // TRANSLATORS: search field placeholder text
+          placeholder={_("Search")}
+          aria-label={_("Search")}
+          value={searchValue}
+          onChange={(_event, value) => onSearchChange(value)}
+          onClear={() => onSearchChange("")}
+          // do not display the counter when search filter is empty
+          resultsCount={searchValue === "" ? 0 : patternsData.length}
+        />
+      </Section>
 
       { selector }
     </>

diff --git a/web/src/components/software/PatternSelector.test.jsx b/web/src/components/software/PatternSelector.test.jsx
@@ -20,7 +20,7 @@
  */
 
 import React from "react";
-import { act, screen } from "@testing-library/react";
+import { act, screen, within } from "@testing-library/react";
 import { installerRender } from "~/test-utils";
 
 import { createClient } from "~/client";
@@ -30,7 +30,7 @@ import PatternSelector from "./PatternSelector";
 
 jest.mock("~/client");
 const selectedPatternsFn = jest.fn().mockResolvedValue([]);
-const getUsedSpaceFn = jest.fn().mockResolvedValue();
+const getUsedSpaceFn = jest.fn().mockResolvedValue("1 Gb");
 const getValidationErrorsFn = jest.fn().mockResolvedValue([]);
 const patternsFn = jest.fn().mockResolvedValue(test_patterns);
 
@@ -51,6 +51,18 @@ const PatternItemMock = ({ pattern }) => <span>{pattern.summary}</span>;
 jest.mock("~/components/software/PatternItem", () => ({ pattern }) => { return <PatternItemMock pattern={pattern} /> });
 
 describe("PatternSelector", () => {
+  it("renders a summary", async () => {
+    installerRender(<PatternSelector />);
+    const summarySection = await screen.findByRole("region", { name: /Software summary/ });
+    within(summarySection).findByText(/Installation will take/);
+  });
+
+  it("renders a input for filtering", async () => {
+    installerRender(<PatternSelector />);
+    const summarySection = await screen.findByRole("region", { name: /Software summary/ });
+    within(summarySection).getByRole("textbox", { name: "Search" });
+  });
+
   it("displays the pattern groups in correct order", async () => {
     const { container } = await act(async () => installerRender(<PatternSelector />));
     const groups = Array.from(container.querySelectorAll("h2")).map((node) => node.textContent);