fixup! test(frontend): add tests for RenderSubmittedMessage component

Author: JamesDoingStuff

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

@@ -26,7 +26,7 @@ const RenderSubmittedMessageFragment = graphql`
   }
 `;
 
-interface RenderSubmittedMessagePropsList {
+export interface RenderSubmittedMessagePropsList {
   result:
     | SubmissionGraphQLErrorMessage
     | SubmissionNetworkErrorMessage

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

@@ -1,6 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
-import { RenderSubmittedMessage } from "../../lib/components/RenderSubmittedMessage";
+import {
+  RenderSubmittedMessage,
+  RenderSubmittedMessagePropsList,
+} from "../../lib/components/RenderSubmittedMessage";
 import { RelayEnvironmentProvider, useFragment } from "react-relay";
 import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
 import { MemoryRouter } from "react-router-dom";
@@ -18,11 +21,22 @@ vi.mock("react-relay", async () => {
 });
 
 describe("RenderSubmittedMessage", () => {
-  const environment = async () => {
-    return await getRelayEnvironment();
-  };
   const user = userEvent.setup();
 
+  const renderComponent = async (props: RenderSubmittedMessagePropsList) => {
+    const environment = await getRelayEnvironment();
+    render(
+      <MemoryRouter
+        initialEntries={["/templates/mock-workflow"]}
+        initialIndex={0}
+      >
+        <RelayEnvironmentProvider environment={environment}>
+          <RenderSubmittedMessage {...props} />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+  };
+
   it("renders a success", async () => {
     const mockSuccess: RenderSubmittedMessageFragment$data = {
       status: { __typename: "WorkflowSucceededStatus" },
@@ -33,19 +47,12 @@ describe("RenderSubmittedMessage", () => {
       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 successProps: RenderSubmittedMessagePropsList = {
+      result: { type: "success", message: "ba54321-1/mock-workflow" },
+      index: 0,
+    };
+
+    await renderComponent(successProps);
 
     const link = screen.getByText("ba54321-1/mock-workflow");
     expect(screen.getByTestId("status-icon-succeeded")).toBeInTheDocument();
@@ -61,19 +68,12 @@ describe("RenderSubmittedMessage", () => {
       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 errorProps: RenderSubmittedMessagePropsList = {
+      result: { type: "networkError", error: mockError },
+      index: 0,
+    };
+
+    await renderComponent(errorProps);
 
     const accordionInfo = screen.getByText(/Submission error type/);
     const accordionDetails = screen.getByText(/Submission error message/);
@@ -92,19 +92,12 @@ describe("RenderSubmittedMessage", () => {
       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 graphqlErrorProps: RenderSubmittedMessagePropsList = {
+      result: { type: "graphQLError", errors: [mockError] },
+      index: 0,
+    };
+
+    await renderComponent(graphqlErrorProps);
 
     const accordionInfo = screen.getByText("Submission error type GraphQL");
     const accordionDetails = screen.getByText(/Error 0/);