Model service tests (#4349)

* Add tests for model service filter

* Add tests for model service policies filter

* Remove dead code

static/js/brand-store/components/Model/PoliciesFilter.test.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot, useRecoilValue } from "recoil";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import { policiesListFilterState } from "../../atoms";
+import PoliciesFilter from "./PoliciesFilter";
+
+const searchInputLabel = "Search policies";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+const mockFilterQuery = { filter: "" };
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useSearchParams: () => [new URLSearchParams(mockFilterQuery), jest.fn()],
+}));
+
+export const RecoilObserver = ({
+  node,
+  onChange,
+}: {
+  node: any;
+  onChange: Function;
+}) => {
+  const value = useRecoilValue(node);
+  useEffect(() => onChange(value), [onChange, value]);
+  return null;
+};
+
+const onChange = jest.fn();
+
+const renderComponent = (filterQuery?: string) => {
+  mockFilterQuery.filter = filterQuery || "";
+
+  return render(
+    <RecoilRoot>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <RecoilObserver node={policiesListFilterState} onChange={onChange} />
+          <PoliciesFilter />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </RecoilRoot>
+  );
+};
+
+describe("PoliciesFilter", () => {
+  it("displays a search input", () => {
+    renderComponent();
+    expect(screen.getByLabelText(searchInputLabel)).toBeInTheDocument();
+  });
+
+  it("displays an empty input if there is no filter query", () => {
+    renderComponent();
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("");
+  });
+
+  it("displays an input with the filter query value if it exists", () => {
+    renderComponent("policy-name");
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("policy-name");
+  });
+
+  it("calls `setFilter` when the search input changes", () => {
+    renderComponent();
+    fireEvent.change(screen.getByLabelText(searchInputLabel), {
+      target: {
+        value: "policy-name",
+      },
+    });
+    expect(onChange).toHaveBeenCalledWith("policy-name");
+  });
+
+  it("clears the filter when the reset button is clicked", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click(screen.getByRole("button", { name: "Clear filter" }));
+    expect(onChange).toHaveBeenCalledWith("");
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("");
+  });
+});

static/js/brand-store/components/Model/PoliciesFilter.tsx

@@ -41,7 +41,7 @@ function PoliciesFilter() {
           setFilter("");
         }}
       >
-        <Icon name="close">Close</Icon>
+        <Icon name="close">Clear filter</Icon>
       </Button>
       <Button type="submit" className="p-search-box__button">
         <Icon name="search">Search</Icon>

static/js/brand-store/components/Model/PoliciesTable.tsx

@@ -4,15 +4,13 @@ import { useParams, Link } from "react-router-dom";
 import { format } from "date-fns";
 import { MainTable } from "@canonical/react-components";
 
-import { signingKeysListState } from "../../atoms";
 import { filteredPoliciesListState } from "../../selectors";
 
-import type { Policy, SigningKey } from "../../types/shared";
+import type { Policy } from "../../types/shared";
 
 function ModelsTable() {
   const { id } = useParams();
   const policiesList = useRecoilValue<Array<Policy>>(filteredPoliciesListState);
-  const signingKeys = useRecoilValue<Array<SigningKey>>(signingKeysListState);
 
   return (
     <MainTable

static/js/brand-store/components/Models/ModelsFilter.test.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot, useRecoilValue } from "recoil";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
+
+import ModelsFilter from "./ModelsFilter";
+import { modelsListFilterState } from "../../atoms";
+
+const searchInputLabel = "Search models";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+const mockFilterQuery = { filter: "" };
+
+jest.mock("react-router-dom", () => ({
+  ...jest.requireActual("react-router-dom"),
+  useSearchParams: () => [new URLSearchParams(mockFilterQuery), jest.fn()],
+}));
+
+export const RecoilObserver = ({
+  node,
+  onChange,
+}: {
+  node: any;
+  onChange: Function;
+}) => {
+  const value = useRecoilValue(node);
+  useEffect(() => onChange(value), [onChange, value]);
+  return null;
+};
+
+const onChange = jest.fn();
+
+const renderComponent = (filterQuery?: string) => {
+  mockFilterQuery.filter = filterQuery || "";
+
+  return render(
+    <RecoilRoot>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <RecoilObserver node={modelsListFilterState} onChange={onChange} />
+          <ModelsFilter />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </RecoilRoot>
+  );
+};
+
+describe("ModelsFilter", () => {
+  it("displays a search input", () => {
+    renderComponent();
+    expect(screen.getByLabelText(searchInputLabel)).toBeInTheDocument();
+  });
+
+  it("displays an empty input if there is no filter query", () => {
+    renderComponent();
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("");
+  });
+
+  it("displays an input with the filter query value if it exists", () => {
+    renderComponent("model-name");
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("model-name");
+  });
+
+  it("calls `setFilter` when the search input changes", () => {
+    renderComponent();
+    fireEvent.change(screen.getByLabelText(searchInputLabel), {
+      target: {
+        value: "model-name",
+      },
+    });
+    expect(onChange).toHaveBeenCalledWith("model-name");
+  });
+
+  it("clears the filter when the reset button is clicked", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click(screen.getByRole("button", { name: "Clear filter" }));
+    expect(onChange).toHaveBeenCalledWith("");
+    expect(screen.getByLabelText(searchInputLabel)).toHaveValue("");
+  });
+});

static/js/brand-store/components/Models/ModelsFilter.tsx

@@ -41,7 +41,7 @@ function ModelsFilter() {
           setFilter("");
         }}
       >
-        <Icon name="close">Close</Icon>
+        <Icon name="close">Clear filter</Icon>
       </Button>
       <Button type="submit" className="p-search-box__button">
         <Icon name="search">Search</Icon>