test(frontend): add tests for BaseWorkflowRelay

Author: JamesDoingStuff

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

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/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";
+
+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>,
+}));
+
+describe("BaseWorkflowRelay", () => {
+  const user = userEvent.setup();
+
+  beforeAll(() => {
+    server.listen();
+  });
+  beforeEach(async () => {
+    const mockFragmentRef = {} as BaseWorkflowRelayFragment$key;
+    const environment = await getRelayEnvironment();
+    render(
+      <RelayEnvironmentProvider environment={environment}>
+        <BaseWorkflowRelay fragmentRef={mockFragmentRef} />
+      </RelayEnvironmentProvider>,
+    );
+  });
+  afterAll(() => {
+    server.close();
+  });
+
+  it("renders a workflow card wtih name and creator", async () => {
+    expect(
+      await screen.findByText("conditional-steps-first"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Creator: abc12345")).toBeInTheDocument();
+  });
+
+  it("should display the flow box when clicked", async () => {
+    console.log = vi.fn();
+    const accordionButton = await screen.findByText("conditional-steps-first");
+    expect(accordionButton).toBeInTheDocument();
+    expect(screen.queryByText("even")).not.toBeVisible();
+    // expect(screen.queryByText("even")).not.toBeInTheDocument();
+
+    await user.click(accordionButton);
+    expect(console.log).toHaveBeenCalledWith("Expansion registered");
+
+    expect(await screen.findByText("even")).toBeVisible();
+    // expect(screen.queryByText("even")).toBeInTheDocument();
+  });
+});

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

@@ -40,12 +40,15 @@ const WorkflowAccordion: React.FC<WorkflowProps> = ({
   onChange,
   retriggerComponent,
 }) => {
+  const handleExpand = () => {
+    console.log("Expansion registered");
+    if (onChange) {
+      onChange();
+    }
+  };
+
   return (
-    <Accordion
-      key={workflow.name}
-      defaultExpanded={expanded}
-      onChange={onChange}
-    >
+    <Accordion key={workflow.name} expanded={expanded} onChange={handleExpand}>
       <AccordionSummary expandIcon={<ArrowDropDownIcon />}>
         <Box sx={{ display: "flex", flexBasis: 0, flexGrow: 5, gap: 2 }}>
           {getWorkflowStatusIcon(workflow.status)}