From c02497e14df80920202934010561492bce03f9db Mon Sep 17 00:00:00 2001 From: Mike Heneghan Date: Fri, 15 Mar 2024 18:03:23 +0000 Subject: [PATCH 1/2] test: add test coverage for `index.tsx` - Adds basic tests dependent on potential query results --- .../Settings/Submissions/index.test.tsx | 85 +++++++++++++++++++ .../components/Settings/Submissions/mocks.ts | 36 +++++++- 2 files changed, 118 insertions(+), 3 deletions(-) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.test.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.test.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.test.tsx new file mode 100644 index 0000000000..c5d514a036 --- /dev/null +++ b/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( + + + , + ); + + 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( + + + , + ); + + 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( + + + , + ); + + 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(); + }); +}); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/mocks.ts b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/mocks.ts index 44009b0f98..cc9cdac3a3 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/mocks.ts +++ b/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"), + }, +]; From 592e5bebfc4c7bbbc3e5516a083a2c2ac8e1da5b Mon Sep 17 00:00:00 2001 From: Mike Heneghan Date: Mon, 25 Mar 2024 11:43:08 +0000 Subject: [PATCH 2/2] story: add basic stories for the Submissions component --- .../Settings/Submissions/index.stories.tsx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.stories.tsx diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.stories.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/index.stories.tsx new file mode 100644 index 0000000000..ba082f27ca --- /dev/null +++ b/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 = { + title: "Design System/Molecules/Submissions", + component: Submissions, +}; + +type Story = StoryObj; + +export default meta; + +export const DefaultView: Story = { + render: () => ( + + + + ), +}; + +export const LoadingState: Story = { + render: () => ( + + + + ), +}; + +export const ErrorState: Story = { + render: () => ( + + + + ), +}; + +export const NoResults: Story = { + render: () => ( + + + + ), +};