test(frontend): add tests for TemplateView

frontend/dashboard/src/mocks/handlers.ts

@@ -149,13 +149,30 @@ export const handlers = [
   api.mutation<TemplateViewMutation$data, TemplateViewMutation$variables>(
     "TemplateViewMutation",
     ({ variables }) => {
-      return HttpResponse.json({
-        data: {
-          submitWorkflowTemplate: {
-            name: `${variables.visit.proposalCode}-${variables.templateName}`,
-          },
-        },
-      });
+      switch (variables.visit.proposalCode) {
+        case "er": {
+          return HttpResponse.error();
+        }
+        case "gr": {
+          return HttpResponse.json({
+            data: {
+              submitWorkflowTemplate: {
+                name: `${variables.visit.proposalCode}-${variables.templateName}`,
+              },
+            },
+            errors: [{ message: "Mock GraphQL Error" }],
+          });
+        }
+        default: {
+          return HttpResponse.json({
+            data: {
+              submitWorkflowTemplate: {
+                name: `${variables.visit.proposalCode}-${variables.templateName}`,
+              },
+            },
+          });
+        }
+      }
     },
   ),
 ];

frontend/relay-workflows-lib/tests/views/TemplateView.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+import { server } from "relay-workflows-lib/tests/mocks/browser.ts";
+import { RelayEnvironmentProvider } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { MemoryRouter } from "react-router-dom";
+import TemplateView from "../../lib/views/TemplateView";
+
+describe("TemplateView", () => {
+  const user = userEvent.setup();
+
+  beforeAll(() => {
+    server.listen();
+  });
+
+  beforeEach(async () => {
+    const environment = await getRelayEnvironment();
+
+    render(
+      <RelayEnvironmentProvider environment={environment}>
+        <MemoryRouter>
+          <TemplateView templateName="sin-simulate-artifact" />
+        </MemoryRouter>
+      </RelayEnvironmentProvider>,
+    );
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
+  it("passes fragment data to the submission form correctly", async () => {
+    expect(await screen.findByText("Away Day")).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Step" })).toHaveValue("1");
+    expect(screen.getByRole("textbox", { name: "Stop" })).toHaveValue("10");
+  });
+
+  it("adds submitted workflows to the list", async () => {
+    expect(await screen.findByText("Away Day")).toBeInTheDocument();
+    expect(screen.queryByText("Submissions")).not.toBeInTheDocument();
+
+    const visitBox = screen.getByRole("textbox", { name: "Visit" });
+    const submitButton = screen.getByText("Submit");
+
+    await user.type(visitBox, "mg36964-1");
+    for (let i = 0; i < 5; i++) await user.click(submitButton);
+
+    expect(await screen.findByText("Submissions")).toBeVisible();
+    expect(
+      screen.getAllByText("mg36964-1/mg-sin-simulate-artifact"),
+    ).toHaveLength(5);
+    expect(screen.getAllByTestId("status-icon-unknown")[0]).toBeVisible();
+  });
+
+  it("shows a network error submission response if network fails", async () => {
+    expect(await screen.findByText("Away Day")).toBeInTheDocument();
+    expect(screen.queryByText("Submissions")).not.toBeInTheDocument();
+
+    const visitBox = screen.getByRole("textbox", { name: "Visit" });
+    const submitButton = screen.getByText("Submit");
+
+    await user.clear(visitBox);
+    await user.type(visitBox, "er12345-6");
+    await user.click(submitButton);
+
+    expect(await screen.findByText("Submissions")).toBeVisible();
+    expect(screen.getByText(/Submission error type/)).toBeVisible();
+  });
+
+  it("shows a graphql error submission response if mutation fails", async () => {
+    expect(await screen.findByText("Away Day")).toBeInTheDocument();
+    expect(screen.queryByText("Submissions")).not.toBeInTheDocument();
+
+    const visitBox = screen.getByRole("textbox", { name: "Visit" });
+    const submitButton = screen.getByText("Submit");
+
+    await user.clear(visitBox);
+    await user.type(visitBox, "gr65432-1");
+    await user.click(submitButton);
+
+    expect(await screen.findByText("Submissions")).toBeVisible();
+    expect(screen.getByText(/Submission error type GraphQL/)).toBeVisible();
+    expect(screen.getByText(/Mock GraphQL Error/)).toBeInTheDocument();
+  });
+});