test(frontend): add tests for RenderSubmittedMessage component

Author: JamesDoingStuff

frontend/relay-workflows-lib/tests/components/RenderSubmittedMessage.test.tsx

@@ -0,0 +1,120 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { RenderSubmittedMessage } from "../../lib/components/RenderSubmittedMessage";
+import { RelayEnvironmentProvider, useFragment } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { MemoryRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import { PayloadError } from "relay-runtime";
+import { RenderSubmittedMessageFragment$data } from "relay-workflows-lib/lib/components/__generated__/RenderSubmittedMessageFragment.graphql";
+
+vi.mock("react-relay", async () => {
+  const actual = await vi.importActual("react-relay");
+  return {
+    ...actual,
+    RelayEnvironmentProvider: actual.RelayEnvironmentProvider,
+    useFragment: vi.fn(),
+  };
+});
+
+describe("RenderSubmittedMessage", () => {
+  const environment = async () => {
+    return await getRelayEnvironment();
+  };
+  const user = userEvent.setup();
+
+  it("renders a success", async () => {
+    const mockSuccess: RenderSubmittedMessageFragment$data = {
+      status: { __typename: "WorkflowSucceededStatus" },
+      " $fragmentType": "RenderSubmittedMessageFragment",
+    };
+
+    vi.mocked(
+      useFragment as () => RenderSubmittedMessageFragment$data,
+    ).mockReturnValueOnce(mockSuccess);
+
+    render(
+      <MemoryRouter
+        initialEntries={["/templates/mock-workflow"]}
+        initialIndex={0}
+      >
+        <RelayEnvironmentProvider environment={await environment()}>
+          <RenderSubmittedMessage
+            result={{ type: "success", message: "ba54321-1/mock-workflow" }}
+            index={0}
+          />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByText("ba54321-1/mock-workflow");
+    expect(screen.getByTestId("status-icon-succeeded")).toBeInTheDocument();
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute("href", "/workflows/ba54321-1/mock-workflow");
+
+    vi.clearAllMocks();
+  });
+
+  it("renders a network error", async () => {
+    const mockError: Error = {
+      name: "Mock Network Error",
+      message: "This is a mock error message",
+    };
+
+    render(
+      <MemoryRouter
+        initialEntries={["/templates/mock-workflow"]}
+        initialIndex={0}
+      >
+        <RelayEnvironmentProvider environment={await environment()}>
+          <RenderSubmittedMessage
+            result={{ type: "networkError", error: mockError }}
+            index={0}
+          />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+
+    const accordionInfo = screen.getByText(/Submission error type/);
+    const accordionDetails = screen.getByText(/Submission error message/);
+
+    expect(accordionInfo).toHaveTextContent(mockError.name);
+    expect(accordionDetails).not.toBeVisible();
+
+    await user.click(accordionInfo);
+
+    expect(accordionDetails).toBeVisible();
+    expect(accordionDetails).toHaveTextContent(mockError.message);
+  });
+
+  it("renders a graphql error", async () => {
+    const mockError: PayloadError = {
+      message: "This is a graphql error",
+    };
+
+    render(
+      <MemoryRouter
+        initialEntries={["/templates/mock-workflow"]}
+        initialIndex={0}
+      >
+        <RelayEnvironmentProvider environment={await environment()}>
+          <RenderSubmittedMessage
+            result={{ type: "graphQLError", errors: [mockError] }}
+            index={0}
+          />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+
+    const accordionInfo = screen.getByText("Submission error type GraphQL");
+    const accordionDetails = screen.getByText(/Error 0/);
+
+    expect(accordionInfo).toBeInTheDocument();
+    expect(accordionDetails).not.toBeVisible();
+    expect(accordionDetails).toHaveTextContent(mockError.message);
+
+    await user.click(accordionInfo);
+
+    expect(accordionDetails).toBeVisible();
+  });
+});