test(frontend): add tests for BaseWorkflowRelay

test(frontend): update mock values

Author: JamesDoingStuff

frontend/dashboard/src/mocks/responses/workflows/WorkflowsListViewQueryResponse.ts

@@ -14,6 +14,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "conditional-steps",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-22T10:35:22+00:00",
@@ -104,6 +107,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "conditional-steps",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-05T17:06:00+00:00",
@@ -194,6 +200,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "conditional-steps",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-19T09:45:55+00:00",
@@ -284,6 +293,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "mount-tmpdir",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-19T09:49:41+00:00",
@@ -342,6 +354,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "notebook",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-19T11:14:17+00:00",
@@ -405,6 +420,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "notebook",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-21T18:12:48+00:00",
@@ -468,6 +486,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "ptycho-tomo-job",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-22T10:27:18+00:00",
@@ -607,6 +628,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "ptycho-tomo-job",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-22T10:27:22+00:00",
@@ -746,6 +770,9 @@ export const workflowsListViewQueryResponse = {
         },
         templateRef: "ptycho-tomo-job",
         parameters: {},
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-22T10:18:00+00:00",
@@ -889,6 +916,9 @@ export const workflowsListViewQueryResponse = {
           step: "1",
           start: "0",
         },
+        creator: {
+          creatorId: "abc12345",
+        },
         status: {
           __typename: "WorkflowSucceededStatus",
           startTime: "2025-08-19T09:47:26+00:00",

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

@@ -0,0 +1,85 @@
+import { render, screen } from "@testing-library/react";
+import { useState } from "react";
+import "@testing-library/jest-dom";
+import BaseWorkflowRelay from "relay-workflows-lib/lib/components/BaseWorkflowRelay";
+import { workflowsListViewQueryResponse } from "dashboard/src/mocks/responses/workflows/WorkflowsListViewQueryResponse";
+import { BaseWorkflowRelayFragment$key } from "relay-workflows-lib/lib/components/__generated__/BaseWorkflowRelayFragment.graphql";
+import { RelayEnvironmentProvider } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { beforeAll } from "vitest";
+import { server } from "relay-workflows-lib/tests/mocks/browser.ts";
+import userEvent from "@testing-library/user-event";
+import { mockReactFlow } from "../mocks/mockReactFlow";
+
+vi.mock("react-relay", async () => {
+  const actual = await import("react-relay");
+
+  return {
+    ...actual,
+    useFragment: vi.fn(() => workflowsListViewQueryResponse.workflows.nodes[0]),
+    RelayEnvironmentProvider: actual.RelayEnvironmentProvider,
+  };
+});
+
+vi.mock("react-router-dom", () => ({
+  useNavigate: vi.fn(),
+  useLocation: vi.fn(),
+  useParams: vi.fn(() => ({ workflowName: "conditional-steps" })),
+  useSearchParams: vi.fn(() => [new URLSearchParams(""), vi.fn()]),
+  NavLink: () => <div></div>,
+}));
+
+const ExpansionHandler = () => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const mockFragmentRef = {} as BaseWorkflowRelayFragment$key;
+  return (
+    <BaseWorkflowRelay
+      fragmentRef={mockFragmentRef}
+      expanded={isExpanded}
+      onChange={() => {
+        setIsExpanded(!isExpanded);
+      }}
+    />
+  );
+};
+
+describe("BaseWorkflowRelay", () => {
+  const user = userEvent.setup();
+
+  beforeAll(() => {
+    server.listen();
+  });
+  beforeEach(async () => {
+    mockReactFlow();
+    const environment = await getRelayEnvironment();
+
+    render(
+      <RelayEnvironmentProvider environment={environment}>
+        <ExpansionHandler />
+      </RelayEnvironmentProvider>,
+    );
+  });
+  afterAll(() => {
+    server.close();
+  });
+
+  it("renders a workflow card with name and creator", async () => {
+    expect(
+      await screen.findByText("conditional-steps-first"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Creator: abc12345")).toBeInTheDocument();
+  });
+
+  it("should display flow box nodes when expanded", async () => {
+    const accordionButton = await screen.findByRole("button", {
+      name: /conditional-steps-first/i,
+    });
+    expect(accordionButton).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByText("even")).not.toBeVisible();
+
+    await user.click(accordionButton);
+
+    expect(accordionButton).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("even")).toBeVisible();
+  });
+});

frontend/relay-workflows-lib/tests/mocks/mockReactFlow.ts

@@ -0,0 +1,63 @@
+// Taken from https://reactflow.dev/learn/advanced-use/testing
+
+class ResizeObserver {
+  callback: globalThis.ResizeObserverCallback;
+
+  constructor(callback: globalThis.ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe(target: Element) {
+    this.callback([{ target } as globalThis.ResizeObserverEntry], this);
+  }
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+class DOMMatrixReadOnly {
+  m22: number;
+  constructor(transform: string) {
+    const scale = transform.match(/scale\(([1-9.])\)/)?.[1];
+    this.m22 = scale !== undefined ? +scale : 1;
+  }
+}
+
+let init = false;
+
+export const mockReactFlow = () => {
+  if (init) return;
+  init = true;
+
+  global.ResizeObserver = ResizeObserver;
+
+  // @ts-expect-error: using partial mock of DOMMatrixReadOnly; full implementation requires many more methods
+  global.DOMMatrixReadOnly = DOMMatrixReadOnly;
+
+  Object.defineProperties(global.HTMLElement.prototype, {
+    offsetHeight: {
+      get(this: HTMLElement) {
+        return parseFloat(this.style.height) || 300;
+      },
+    },
+    offsetWidth: {
+      get(this: HTMLElement) {
+        return parseFloat(this.style.width) || 300;
+      },
+    },
+  });
+
+  (global.SVGElement as unknown as { getBBox: () => DOMRect }).getBBox =
+    () => ({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      toJSON: () => {},
+    });
+};

frontend/workflows-lib/lib/components/workflow/WorkflowAccordion.tsx

@@ -36,16 +36,12 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
   workflow,
   children,
   workflowLink = false,
-  expanded = false,
+  expanded,
   onChange,
   retriggerComponent,
 }) => {
   return (
-    <Accordion
-      key={workflow.name}
-      defaultExpanded={expanded}
-      onChange={onChange}
-    >
+    <Accordion key={workflow.name} expanded={expanded} onChange={onChange}>
       <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
         <Box sx={{ display: "flex", flexBasis: 0, flexGrow: 5, gap: 2 }}>
           {getWorkflowStatusIcon(workflow.status)}