fix: Address code coverage warnings in store from TiCS dashboard (#5097)

Author: steverydz

static/js/store/components/EmptyResultSection/__tests__/EmptyResultSection.test.tsx

@@ -0,0 +1,56 @@
+import { BrowserRouter } from "react-router-dom";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import EmptyResultSection from "../EmptyResultSection";
+
+const testSearchQuery = "Test search query";
+
+function renderComponent() {
+  render(
+    <BrowserRouter>
+      <EmptyResultSection searchTerm={testSearchQuery} isFetching={false} />
+    </BrowserRouter>,
+  );
+}
+
+jest.mock("react-router-dom", () => {
+  return {
+    ...jest.requireActual("react-router-dom"),
+    useSearchParams: () => [new URLSearchParams({ q: testSearchQuery })],
+  };
+});
+
+describe("EmptyResultSection", () => {
+  test("displays search query on the page", () => {
+    renderComponent();
+    expect(
+      screen.getByRole("heading", {
+        name: `Search results for "${testSearchQuery}"`,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("search input shows search query", () => {
+    renderComponent();
+    expect(screen.getByRole("searchbox")).toHaveValue(testSearchQuery);
+  });
+
+  test("links to explore featured snaps", () => {
+    renderComponent();
+    expect(
+      screen.getByRole("link", {
+        name: "Explore featured snaps",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("links to contact page", () => {
+    renderComponent();
+    expect(
+      screen.getByRole("link", {
+        name: "Contact us",
+      }),
+    ).toBeInTheDocument();
+  });
+});

static/js/store/components/PackageFilter/PackageFilter.tsx

@@ -1,10 +1,11 @@
 import { Button } from "@canonical/react-components";
 import { useState } from "react";
-import type { Category, Packages } from "../../types";
 import { Filters } from "@canonical/store-components";
 import { useSearchParams } from "react-router-dom";
 import { getArchitectures, getCategoryOrder } from "../../utils";
 
+import type { Category, Packages } from "../../types";
+
 export type ICategoryList =
   | {
       display_name: string;

static/js/store/components/PackageFilter/__tests__/PackageFilter.test.tsx

@@ -0,0 +1,39 @@
+import { BrowserRouter } from "react-router-dom";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { PackageFilter } from "../PackageFilter";
+
+import { testPackageData } from "../../../test-utils";
+
+const testCategoriesQueryString = "music-and-audio,productivity";
+
+function renderComponent(isDisabled?: boolean) {
+  render(
+    <BrowserRouter>
+      <PackageFilter data={testPackageData} disabled={isDisabled || false} />
+    </BrowserRouter>,
+  );
+}
+
+jest.mock("react-router-dom", () => {
+  return {
+    ...jest.requireActual("react-router-dom"),
+    useSearchParams: () => [
+      new URLSearchParams({ categories: testCategoriesQueryString }),
+    ],
+  };
+});
+
+describe("PackageFilter", () => {
+  test("disabled if fetching data", () => {
+    renderComponent(true);
+    expect(screen.getByLabelText("Games")).toBeDisabled();
+  });
+
+  test("selects categories from query string", () => {
+    renderComponent();
+    expect(screen.getByLabelText("Music and Audio")).toBeChecked();
+    expect(screen.getByLabelText("Productivity")).toBeChecked();
+  });
+});

static/js/store/test-utils/index.ts

@@ -0,0 +1,3 @@
+import { testPackageData } from "./testPackageData";
+
+export { testPackageData };