test: add test coverage for index.tsx as well as stories (#2910)

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.stories.tsx

@@ -0,0 +1,69 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { Meta, StoryObj } from "@storybook/react";
+import { vanillaStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+
+import Submissions from "./index";
+import { mockRequests } from "./mocks";
+
+const { setState } = vanillaStore;
+setState({ flowSlug: "test-service", teamSlug: "test-team" });
+
+const meta: Meta<typeof Submissions> = {
+  title: "Design System/Molecules/Submissions",
+  component: Submissions,
+};
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const DefaultView: Story = {
+  render: () => (
+    <MockedProvider mocks={[mockRequests[0]]} addTypename={false}>
+      <Submissions />
+    </MockedProvider>
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <MockedProvider
+      mocks={[{ ...mockRequests[0], delay: 2000 }]}
+      addTypename={false}
+    >
+      <Submissions />
+    </MockedProvider>
+  ),
+};
+
+export const ErrorState: Story = {
+  render: () => (
+    <MockedProvider
+      mocks={[{ ...mockRequests[0], error: new Error("An error occurred") }]}
+      addTypename={false}
+    >
+      <Submissions />
+    </MockedProvider>
+  ),
+};
+
+export const NoResults: Story = {
+  render: () => (
+    <MockedProvider
+      mocks={[
+        {
+          ...mockRequests[0],
+          result: {
+            data: {
+              submissionServicesSummary: [],
+            },
+          },
+        },
+      ]}
+      addTypename={false}
+    >
+      <Submissions />
+    </MockedProvider>
+  ),
+};

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.test.tsx

@@ -0,0 +1,85 @@
+import { MockedProvider } from "@apollo/client/testing";
+import { waitFor } from "@testing-library/react";
+import { vanillaStore } from "pages/FlowEditor/lib/store";
+import React from "react";
+import { axe, setup } from "testUtils";
+
+import Submissions from "./index";
+import { mockApplications, mockRequests } from "./mocks";
+
+const { setState } = vanillaStore;
+
+describe("Submissions Component", () => {
+  test("no results message", async () => {
+    setState({ flowSlug: "no-results-service", teamSlug: "test-team" });
+    const { container, getByText } = setup(
+      <MockedProvider mocks={mockRequests} addTypename={false}>
+        <Submissions />
+      </MockedProvider>,
+    );
+
+    expect(getByText("Submissions")).toBeInTheDocument();
+    expect(
+      getByText(
+        "View data on the user submitted applications for this service.",
+      ),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(
+        getByText("No submitted applications found for this service."),
+      ).toBeInTheDocument();
+    });
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("basic view table with expected values", async () => {
+    setState({ flowSlug: "test-service", teamSlug: "test-team" });
+    const { container, getByText } = setup(
+      <MockedProvider mocks={mockRequests} addTypename={false}>
+        <Submissions />
+      </MockedProvider>,
+    );
+
+    expect(getByText("Submissions")).toBeInTheDocument();
+    expect(
+      getByText(
+        "View data on the user submitted applications for this service.",
+      ),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      mockApplications.forEach((app) => {
+        expect(getByText(app.sessionId)).toBeInTheDocument();
+      });
+    });
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("error renders as expected", async () => {
+    setState({ flowSlug: "error-service", teamSlug: "test-team" });
+    const { container, getByText } = setup(
+      <MockedProvider mocks={mockRequests} addTypename={false}>
+        <Submissions />
+      </MockedProvider>,
+    );
+
+    expect(getByText("Submissions")).toBeInTheDocument();
+    expect(
+      getByText(
+        "View data on the user submitted applications for this service.",
+      ),
+    ).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(getByText("An error occurred")).toBeInTheDocument();
+    });
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/mocks.ts

@@ -1,3 +1,5 @@
+import { SUBMITTED_APPLICATIONS_QUERY } from "./submissionData";
+
 export const mockApplications = [
   {
     sessionId: "test-session-3",
@@ -110,6 +112,34 @@ export const mockApplications = [
   },
 ];
 
-export const mockQueryResult = {
-  submissionServicesSummary: mockApplications,
-};
+export const mockRequests = [
+  {
+    request: {
+      query: SUBMITTED_APPLICATIONS_QUERY,
+      variables: { service_slug: "test-service", team_slug: "test-team" },
+    },
+    result: {
+      data: {
+        submissionServicesSummary: mockApplications,
+      },
+    },
+  },
+  {
+    request: {
+      query: SUBMITTED_APPLICATIONS_QUERY,
+      variables: { service_slug: "no-results-service", team_slug: "test-team" },
+    },
+    result: {
+      data: {
+        submissionServicesSummary: [],
+      },
+    },
+  },
+  {
+    request: {
+      query: SUBMITTED_APPLICATIONS_QUERY,
+      variables: { service_slug: "error-service", team_slug: "test-team" },
+    },
+    error: new Error("An error occurred"),
+  },
+];