test(frontend): add tests for RetriggerWorkflow

Author: NatLeung96

frontend/relay-workflows-lib/lib/query-components/RetriggerWorkflow.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Tooltip from "@mui/material/Tooltip";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { graphql } from "relay-runtime";
-import { useLazyLoadQuery } from "react-relay/hooks";
+import { useLazyLoadQuery } from "react-relay";
 import { NavLink } from "react-router-dom";
 import { RetriggerWorkflowQuery as RetriggerWorkflowQueryType } from "./__generated__/RetriggerWorkflowQuery.graphql";
 import { Visit, visitToText } from "@diamondlightsource/sci-react-ui";
@@ -57,7 +57,7 @@ const RetriggerWorkflowBase: React.FC<RetriggerWorkflowProps> = ({
   );
 };
 
-const RetriggerWorkflow: React.FC<RetriggerWorkflowProps> = (props) => (
+export const RetriggerWorkflow: React.FC<RetriggerWorkflowProps> = (props) => (
   <WorkflowsErrorBoundary fallback={<NoTemplateIcon />}>
     <RetriggerWorkflowBase {...props} />
   </WorkflowsErrorBoundary>

frontend/relay-workflows-lib/tests/query-components/RetriggerWorkflow.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { RelayEnvironmentProvider } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { MemoryRouter } from "react-router-dom";
+import { RetriggerWorkflowQuery$data } from "../../lib/query-components/__generated__/RetriggerWorkflowQuery.graphql";
+import { RetriggerWorkflow } from "../../lib/query-components/RetriggerWorkflow";
+import { mockLazyLoadQuery } from "../test-utils";
+
+vi.mock("react-relay", async () => {
+  const actual = await vi.importActual("react-relay");
+  return {
+    ...actual,
+    RelayEnvironmentProvider: actual.RelayEnvironmentProvider,
+    useLazyLoadQuery: vi.fn(),
+  };
+});
+
+describe("RetriggerWorkflow", () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+  const renderComponent = async () => {
+    const environment = await getRelayEnvironment();
+    render(
+      <MemoryRouter initialEntries={["/workflows/abc1234-1"]}>
+        <RelayEnvironmentProvider environment={environment}>
+          <RetriggerWorkflow
+            instrumentSession={{
+              proposalCode: "abc",
+              proposalNumber: 1234,
+              number: 1,
+            }}
+            workflowName="mock-workflow"
+          />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+  };
+
+  it("renders a link to previous workflow submission page", async () => {
+    mockLazyLoadQuery<RetriggerWorkflowQuery$data>({
+      workflow: {
+        templateRef: "mock-template",
+      },
+    });
+
+    await renderComponent();
+
+    const icon = await screen.findByTestId("RefreshIcon");
+    expect(icon).toBeInTheDocument();
+    const link = screen.getByRole("link", { name: "Rerun workflow" });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      "href",
+      "/templates/mock-template/abc1234-1-mock-workflow",
+    );
+  });
+
+  it("renders no template icon", async () => {
+    mockLazyLoadQuery<RetriggerWorkflowQuery$data>({
+      workflow: {
+        templateRef: null,
+      },
+    });
+
+    await renderComponent();
+
+    const icon = await screen.findByTestId("RefreshIcon");
+    expect(icon).toBeInTheDocument();
+    expect(screen.getByLabelText("No template found")).toBeInTheDocument();
+  });
+});

frontend/relay-workflows-lib/tests/test-utils.tsx

@@ -0,0 +1,5 @@
+import { useLazyLoadQuery } from "react-relay";
+
+export function mockLazyLoadQuery<T>(response: T) {
+  vi.mocked(useLazyLoadQuery as () => T).mockReturnValueOnce(response);
+}