test: add test coverage for index.tsx

- Adds basic tests dependent on potential query results

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"),
+  },
+];