Add tests for model service create forms (#4354)

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

@@ -0,0 +1,87 @@
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot } from "recoil";
+import { QueryClient, QueryClientProvider, useQuery } from "react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import CreatePolicyForm from "./CreatePolicyForm";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+jest.mock("react-query", () => ({
+  ...jest.requireActual("react-query"),
+  useQuery: jest.fn(),
+}));
+
+const renderComponent = () => {
+  return render(
+    <RecoilRoot>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <CreatePolicyForm
+            setShowErrorNotification={jest.fn()}
+            setShowNotification={jest.fn()}
+            refetchPolicies={jest.fn()}
+          />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </RecoilRoot>
+  );
+};
+
+describe("CreatePolicyForm", () => {
+  it("shows a message if there are no available signing keys", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({ data: [] });
+    renderComponent();
+    expect(screen.getByText(/No signing keys available/)).toBeInTheDocument();
+  });
+
+  it("disables the 'Add policy' button if there is no selected signing key", () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      data: [
+        {
+          name: "signing-key-1",
+          fingerprint: "A8BC257825695F43BFC83889A6583339",
+          "sha3-384":
+            "-r3_wh8I2TzfSq4R6SOWPJfsTl8AWu7AuvduEhx5Gr95Rwt61IPLPnVyDamY423_",
+        },
+      ],
+    });
+    renderComponent();
+    expect(screen.getByRole("button", { name: "Add policy" })).toBeDisabled();
+  });
+
+  it("enables the 'Add policy' button if a signing key is selected", async () => {
+    // @ts-ignore
+    useQuery.mockReturnValue({
+      data: [
+        {
+          name: "signing-key-1",
+          fingerprint: "A8BC257825695F43BFC83889A6583339",
+          "sha3-384":
+            "-r3_wh8I2TzfSq4R6SOWPJfsTl8AWu7AuvduEhx5Gr95Rwt61IPLPnVyDamY423_",
+        },
+      ],
+    });
+    renderComponent();
+    const user = userEvent.setup();
+    await user.selectOptions(screen.getByLabelText("Signing key"), [
+      "signing-key-1",
+    ]);
+    expect(
+      screen.getByRole("button", { name: "Add policy" })
+    ).not.toBeDisabled();
+  });
+});

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

@@ -29,20 +29,6 @@ const renderComponent = () => {
   );
 };
 
-const mockModel = {
-  "api-key": "K2NjWGA4iKhLmGDDQUJhJyhzS35CBLJClyNu8dAS0TWrTF3aSD",
-  "created-at": "2023-07-13T15:56:35.088052",
-  "created-by": {
-    "display-name": "Steve Rydz",
-    email: "[email protected]",
-    id: "prFvYmvaBsQbXLNaVaQFV4EAcJ8zh0Ej",
-    username: "steverydz",
-    validation: "unproven",
-  },
-  name: "model-1",
-  series: "16",
-};
-
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
   useParams: () => ({
@@ -58,10 +44,10 @@ jest.mock("react-query", () => ({
         "api-key": "K2NjWGA4iKhLmGDDQUJhJyhzS35CBLJClyNu8dAS0TWrTF3aSD",
         "created-at": "2023-07-13T15:56:35.088052",
         "created-by": {
-          "display-name": "Steve Rydz",
-          email: "steve.rydz@canonical.com",
+          "display-name": "John Doe",
+          email: "john.doe@canonical.com",
           id: "prFvYmvaBsQbXLNaVaQFV4EAcJ8zh0Ej",
-          username: "steverydz",
+          username: "johndoe",
           validation: "unproven",
         },
         name: "model-1",
@@ -90,17 +76,21 @@ describe("Model", () => {
     await user.click(screen.getByRole("button", { name: "Generate key" }));
     const apiKeyField: HTMLInputElement = screen.getByLabelText("API key");
     const apiKeyFieldValue = apiKeyField.value;
-    expect(apiKeyFieldValue).not.toEqual(mockModel["api-key"]);
+    expect(apiKeyFieldValue).not.toEqual(
+      "K2NjWGA4iKhLmGDDQUJhJyhzS35CBLJClyNu8dAS0TWrTF3aSD"
+    );
   });
 
   it("resets the API when clicking the 'Revert' button", async () => {
     renderComponent();
     const user = userEvent.setup();
     await user.click(screen.getByRole("button", { name: "Generate key" }));
     expect(screen.getByLabelText("API key")).not.toHaveValue(
-      mockModel["api-key"]
+      "K2NjWGA4iKhLmGDDQUJhJyhzS35CBLJClyNu8dAS0TWrTF3aSD"
     );
     await user.click(screen.getByRole("button", { name: "Revert" }));
-    expect(screen.getByLabelText("API key")).toHaveValue(mockModel["api-key"]);
+    expect(screen.getByLabelText("API key")).toHaveValue(
+      "K2NjWGA4iKhLmGDDQUJhJyhzS35CBLJClyNu8dAS0TWrTF3aSD"
+    );
   });
 });

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot } from "recoil";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import "@testing-library/jest-dom";
+
+import CreateModelForm from "./CreateModelForm";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+const renderComponent = () => {
+  return render(
+    <RecoilRoot>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <CreateModelForm
+            setShowErrorNotification={jest.fn()}
+            setShowNotification={jest.fn()}
+          />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </RecoilRoot>
+  );
+};
+
+describe("CreateModelForm", () => {
+  it("disables 'Add model' button if no new model name", async () => {
+    renderComponent();
+    expect(screen.getByRole("button", { name: "Add model" })).toBeDisabled();
+  });
+
+  it("enables 'Add model' button if there is a new model name", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.type(
+      screen.getByRole("textbox", { name: "Name" }),
+      "test-model-name"
+    );
+    expect(
+      screen.getByRole("button", { name: "Add model" })
+    ).not.toBeDisabled();
+  });
+
+  it("generates an API key when clicking 'Generate key'", async () => {
+    const user = userEvent.setup();
+    renderComponent();
+    await user.click(screen.getByRole("button", { name: "Generate key" }));
+    const input: HTMLInputElement = screen.getByRole("textbox", {
+      name: "API key",
+    });
+    expect(input.value.length).toEqual(50);
+  });
+});

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

@@ -63,37 +63,6 @@ describe("Models", () => {
     ).toBeInTheDocument();
   });
 
-  it("disables 'Add model' button if no new model name", async () => {
-    const user = userEvent.setup();
-    renderComponent();
-    await user.click(screen.getByRole("link", { name: "Create new model" }));
-    expect(screen.getByRole("button", { name: "Add model" })).toBeDisabled();
-  });
-
-  it("enables 'Add model' button if there is a new model name", async () => {
-    const user = userEvent.setup();
-    renderComponent();
-    await user.click(screen.getByRole("link", { name: "Create new model" }));
-    await user.type(
-      screen.getByRole("textbox", { name: "Name" }),
-      "test-model-name"
-    );
-    expect(
-      screen.getByRole("button", { name: "Add model" })
-    ).not.toBeDisabled();
-  });
-
-  it("generates an API key when clicking 'Generate key'", async () => {
-    const user = userEvent.setup();
-    renderComponent();
-    await user.click(screen.getByRole("link", { name: "Create new model" }));
-    await user.click(screen.getByRole("button", { name: "Generate key" }));
-    const input: HTMLInputElement = screen.getByRole("textbox", {
-      name: "API key",
-    });
-    expect(input.value.length).toEqual(50);
-  });
-
   it("displays a filter input", () => {
     renderComponent();
     expect(screen.getByLabelText("Search models")).toBeInTheDocument();