Merge branch 'main' into navigation-tests

.github/workflows/ui-coverage.yml

@@ -18,7 +18,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           name: coverage
           run-id: ${{ github.event.workflow_run.id }}
-          path: "./ui"
+          path: "./ui/coverage"
       - name: "Report Coverage"
         uses: davelosert/vitest-coverage-report-action@v2
         with:

ui/src/components/CheckboxList/CheckboxList.test.tsx

@@ -0,0 +1,58 @@
+import { render } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+
+import CheckboxList from "./CheckboxList";
+
+test("displays a label", () => {
+  const label = "This is a list";
+  render(
+    <CheckboxList
+      label={label}
+      values={[]}
+      checkedValues={[]}
+      toggleValue={vi.fn()}
+    />,
+  );
+  expect(screen.getByText(label)).toBeInTheDocument();
+});
+
+test("displays checkboxes", () => {
+  render(
+    <CheckboxList
+      label="This is a list"
+      values={["val1", "val2"]}
+      checkedValues={[]}
+      toggleValue={vi.fn()}
+    />,
+  );
+  expect(screen.getByRole("checkbox", { name: "val1" })).toBeInTheDocument();
+  expect(screen.getByRole("checkbox", { name: "val2" })).toBeInTheDocument();
+});
+
+test("checks selected checkboxes", () => {
+  render(
+    <CheckboxList
+      label="This is a list"
+      values={["val1", "val2"]}
+      checkedValues={["val2"]}
+      toggleValue={vi.fn()}
+    />,
+  );
+  expect(screen.getByRole("checkbox", { name: "val1" })).not.toBeChecked();
+  expect(screen.getByRole("checkbox", { name: "val2" })).toBeChecked();
+});
+
+test("changes checkbox state", async () => {
+  const toggleValue = vi.fn();
+  render(
+    <CheckboxList
+      label="This is a list"
+      values={["val1", "val2"]}
+      checkedValues={[]}
+      toggleValue={toggleValue}
+    />,
+  );
+  await userEvent.click(screen.getByRole("checkbox", { name: "val2" }));
+  expect(toggleValue).toHaveBeenCalledWith("val2");
+});

ui/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,18 @@
+import { render } from "@testing-library/react";
+import { screen } from "@testing-library/dom";
+
+import Loader from "./Loader";
+
+test("displays a spinner", () => {
+  render(<Loader />);
+  const spinner = document.querySelector(".p-icon--spinner");
+  expect(spinner).toBeInTheDocument();
+  expect(screen.getByText("Loading...")).toBeInTheDocument();
+});
+
+test("displays custom loading text", () => {
+  render(<Loader text="Spinning" />);
+  const spinner = document.querySelector(".p-icon--spinner");
+  expect(spinner).toBeInTheDocument();
+  expect(screen.getByText("Spinning")).toBeInTheDocument();
+});

ui/src/components/Logo/Logo.test.tsx

@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/dom";
+
+import Logo from "./Logo";
+import { SITE_NAME } from "consts";
+import { renderComponent } from "test/utils";
+
+test("links to the root", () => {
+  renderComponent(<Logo />);
+  expect(screen.getByRole("link")).toHaveAttribute("href", "/");
+});
+
+test("displays the site title", () => {
+  renderComponent(<Logo />);
+  expect(screen.getByText(SITE_NAME)).toBeInTheDocument();
+});

ui/src/components/NoMatch/NoMatch.test.tsx

@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/dom";
+import { render } from "@testing-library/react";
+
+import NoMatch from "./NoMatch";
+import { Label } from "./types";
+
+test("displays a no-match message", () => {
+  render(<NoMatch />);
+  expect(
+    screen.getByRole("heading", { name: Label.TITLE }),
+  ).toBeInTheDocument();
+});

ui/src/components/NoMatch/NoMatch.tsx

@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { Row, Col } from "@canonical/react-components";
+import { Label } from "./types";
 
 const NoMatch: FC = () => {
   return (
     <main className="l-main no-match">
       <Row>
         <Col size={6} className="col-start-large-4">
-          <h1 className="p-heading--4">404 Page not found</h1>
+          <h1 className="p-heading--4">{Label.TITLE}</h1>
           <p>
             Sorry, we cannot find the page that you are looking for.
             <br />

ui/src/components/NoMatch/types.ts

@@ -0,0 +1,3 @@
+export enum Label {
+  TITLE = "404 Page not found",
+}