From a845192de6262ee4cffa01027353325d856d3b95 Mon Sep 17 00:00:00 2001
From: James Gilbert <james.gilbert@diamond.ac.uk>
Date: Wed, 19 Nov 2025 17:52:14 +0000
Subject: [PATCH] test(frontend): add tests for BaseSingleWorkflowView

---
 .../SingleWorkflowViewQueryResponse.ts        |   3 +
 .../views/BaseSingleWorkflowView.test.tsx     | 121 ++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 frontend/relay-workflows-lib/tests/views/BaseSingleWorkflowView.test.tsx

diff --git a/frontend/dashboard/src/mocks/responses/workflows/SingleWorkflowViewQueryResponse.ts b/frontend/dashboard/src/mocks/responses/workflows/SingleWorkflowViewQueryResponse.ts
index cee036336..90d7be4ea 100644
--- a/frontend/dashboard/src/mocks/responses/workflows/SingleWorkflowViewQueryResponse.ts
+++ b/frontend/dashboard/src/mocks/responses/workflows/SingleWorkflowViewQueryResponse.ts
@@ -8,6 +8,9 @@ export const singleWorkflowViewQueryResponse = {
     },
     templateRef: "conditional-steps",
     parameters: {},
+    creator: {
+      creatorId: "abc12345",
+    },
     status: {
       __typename: "WorkflowSucceededStatus",
       startTime: "2025-08-22T10:35:22+00:00",
diff --git a/frontend/relay-workflows-lib/tests/views/BaseSingleWorkflowView.test.tsx b/frontend/relay-workflows-lib/tests/views/BaseSingleWorkflowView.test.tsx
new file mode 100644
index 000000000..1053701b2
--- /dev/null
+++ b/frontend/relay-workflows-lib/tests/views/BaseSingleWorkflowView.test.tsx
@@ -0,0 +1,121 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import BaseSingleWorkflowView from "relay-workflows-lib/lib/views/BaseSingleWorkflowView";
+import { SingleWorkflowViewQuery } from "relay-workflows-lib/lib/views/SingleWorkflowView";
+import { server } from "relay-workflows-lib/tests/mocks/browser.ts";
+import { RelayEnvironmentProvider, useLazyLoadQuery } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { MemoryRouter, useSearchParams } from "react-router-dom";
+import { SingleWorkflowViewQuery as SingleWorkflowViewQueryType } from "relay-workflows-lib/lib/views/__generated__/SingleWorkflowViewQuery.graphql";
+import userEvent from "@testing-library/user-event";
+import * as tasksFlowUtils from "workflows-lib/lib/utils/tasksFlowUtils";
+import { useMemo } from "react";
+
+const QueryWrappedBaseSingleWorkflowView = () => {
+  const [searchParams] = useSearchParams();
+  const taskParam = searchParams.get("tasks");
+
+  const taskIds = useMemo(() => {
+    if (!taskParam) return [];
+    try {
+      return JSON.parse(taskParam) as string[];
+    } catch {
+      return [];
+    }
+  }, [taskParam]);
+
+  const data = useLazyLoadQuery<SingleWorkflowViewQueryType>(
+    SingleWorkflowViewQuery,
+    {
+      visit: {
+        proposalCode: "mg",
+        proposalNumber: 36964,
+        number: 1,
+      },
+      name: "conditional-steps-first",
+    },
+  );
+  return (
+    <BaseSingleWorkflowView fragmentRef={data.workflow} taskIds={taskIds} />
+  );
+};
+
+describe("BaseSingleWorkflowView", () => {
+  const user = userEvent.setup();
+  const highlightSpy = vi.spyOn(tasksFlowUtils, "addHighlightsAndFills");
+
+  beforeAll(() => {
+    server.listen();
+  });
+
+  beforeEach(async () => {
+    const environment = await getRelayEnvironment();
+
+    render(
+      <MemoryRouter>
+        <RelayEnvironmentProvider environment={environment}>
+          <QueryWrappedBaseSingleWorkflowView />
+        </RelayEnvironmentProvider>
+      </MemoryRouter>,
+    );
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  afterAll(() => {
+    server.close();
+  });
+
+  it("highlights the output tasks", async () => {
+    expect(
+      await screen.findByText("conditional-steps-first"),
+    ).toBeInTheDocument();
+    const outputButton = screen.getByText("OUTPUT");
+
+    await user.click(outputButton);
+    expect(highlightSpy).toHaveBeenLastCalledWith(
+      expect.anything(),
+      [
+        "conditional-steps-first-1223470002",
+        "conditional-steps-first-2863409095",
+        "conditional-steps-first-3590043386",
+        "conditional-steps-first-567981434",
+      ],
+      null,
+    );
+  });
+
+  it("clears the output tasks", async () => {
+    expect(
+      await screen.findByText("conditional-steps-first"),
+    ).toBeInTheDocument();
+    await user.click(screen.getByText("CLEAR"));
+    expect(highlightSpy).toHaveBeenLastCalledWith(expect.anything(), [], null);
+  });
+
+  it("renders the artifact list", async () => {
+    expect(await screen.findAllByText("main.log")).toHaveLength(2);
+  });
+
+  it("fills the corresponding task node when an artifact is hovered over", async () => {
+    const artifact = await screen.findByRole("cell", { name: "less-than-5" });
+    await user.hover(artifact);
+    await waitFor(() => {
+      expect(highlightSpy).toHaveBeenLastCalledWith(
+        expect.anything(),
+        [],
+        "conditional-steps-first-2863409095",
+      );
+    });
+    await user.unhover(artifact);
+    await waitFor(() => {
+      expect(highlightSpy).toHaveBeenLastCalledWith(
+        expect.anything(),
+        [],
+        null,
+      );
+    });
+  });
+});