-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: display external portals on readme page + test coverage (#4177)
- Loading branch information
Showing
14 changed files
with
346 additions
and
101 deletions.
There are no files selected for viewing
26 changes: 26 additions & 0 deletions
26
editor.planx.uk/src/pages/FlowEditor/ReadMePage/ReadMePage.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Meta, StoryObj } from "@storybook/react"; | ||
|
|
||
| import { ReadMePage } from "./ReadMePage"; | ||
|
|
||
| const meta = { | ||
| title: "Design System/Pages/ReadMe", | ||
| component: ReadMePage, | ||
| } satisfies Meta<typeof ReadMePage>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Basic = { | ||
| args: { | ||
| teamSlug: "barnet", | ||
| flowSlug: "Apply for prior permission", | ||
| flowInformation: { | ||
| status: "online", | ||
| description: "A long description of a service", | ||
| summary: "A short blurb", | ||
| limitations: "", | ||
| settings: {}, | ||
| }, | ||
| }, | ||
| } satisfies Story; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
editor.planx.uk/src/pages/FlowEditor/ReadMePage/tests/ReadMePage.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import { act, screen } from "@testing-library/react"; | ||
| import { FullStore, useStore } from "pages/FlowEditor/lib/store"; | ||
| import React from "react"; | ||
| import { DndProvider } from "react-dnd"; | ||
| import { HTML5Backend } from "react-dnd-html5-backend"; | ||
| import { setup } from "testUtils"; | ||
| import { axe } from "vitest-axe"; | ||
|
|
||
| import { ReadMePage } from "../ReadMePage"; | ||
| import { defaultProps, longInput, platformAdminUser } from "./helpers"; | ||
|
|
||
| const { getState, setState } = useStore; | ||
|
|
||
| let initialState: FullStore; | ||
|
|
||
| describe("Read Me Page component", () => { | ||
| beforeAll(() => (initialState = getState())); | ||
|
|
||
| beforeEach(() => { | ||
| getState().setUser(platformAdminUser); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| act(() => setState(initialState)); | ||
| }); | ||
|
|
||
| it("renders and submits data without an error", async () => { | ||
| const { user } = setup( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ReadMePage {...defaultProps} /> | ||
| </DndProvider> | ||
| ); | ||
|
|
||
| expect(getState().flowSummary).toBe(""); | ||
|
|
||
| const serviceSummaryInput = screen.getByPlaceholderText("Description"); | ||
|
|
||
| await user.type(serviceSummaryInput, "a summary"); | ||
|
|
||
| await user.click(screen.getByRole("button", { name: "Save" })); | ||
|
|
||
| expect(screen.getByText("a summary")).toBeInTheDocument(); | ||
| await user.click(screen.getByRole("button", { name: "Reset changes" })); // refreshes page and refetches data | ||
|
|
||
| expect(getState().flowSummary).toEqual("a summary"); | ||
| expect(screen.getByText("a summary")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("displays an error if the service description is longer than 120 characters", async () => { | ||
| const { user } = setup( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ReadMePage {...defaultProps} /> | ||
| </DndProvider> | ||
| ); | ||
|
|
||
| expect(getState().flowSummary).toBe(""); | ||
|
|
||
| const serviceSummaryInput = screen.getByPlaceholderText("Description"); | ||
|
|
||
| await user.type(serviceSummaryInput, longInput); | ||
|
|
||
| expect( | ||
| await screen.findByText("You have 2 characters too many") | ||
| ).toBeInTheDocument(); | ||
|
|
||
| await user.click(screen.getByRole("button", { name: "Save" })); | ||
|
|
||
| expect( | ||
| screen.getByText("Service description must be 120 characters or less") | ||
| ).toBeInTheDocument(); | ||
|
|
||
| await user.click(screen.getByRole("button", { name: "Reset changes" })); // refreshes page and refetches data | ||
| expect(getState().flowSummary).toBe(""); // db has not been updated | ||
| }); | ||
|
|
||
| it("displays data in the fields if there is already flow information in the database", async () => { | ||
| await act(async () => | ||
| setState({ | ||
| flowSummary: "This flow summary is in the db already", | ||
| }) | ||
| ); | ||
|
|
||
| setup( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ReadMePage {...defaultProps} /> | ||
| </DndProvider> | ||
| ); | ||
|
|
||
| expect( | ||
| screen.getByText("This flow summary is in the db already") | ||
| ).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it.todo("displays an error toast if there is a server-side issue"); // waiting for PR 4019 to merge first so can use msw package | ||
|
|
||
| it("should not have any accessibility violations", async () => { | ||
| const { container } = setup( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ReadMePage {...defaultProps} /> | ||
| </DndProvider> | ||
| ); | ||
|
|
||
| const results = await axe(container); | ||
| expect(results).toHaveNoViolations(); | ||
| }); | ||
|
|
||
| it("is not editable if the user has the teamViewer role", async () => { | ||
| const teamViewerUser = { ...platformAdminUser, isPlatformAdmin: false }; | ||
| getState().setUser(teamViewerUser); | ||
|
|
||
| getState().setTeamMembers([{ ...teamViewerUser, role: "teamViewer" }]); | ||
|
|
||
| setup( | ||
| <DndProvider backend={HTML5Backend}> | ||
| <ReadMePage {...defaultProps} /> | ||
| </DndProvider> | ||
| ); | ||
|
|
||
| expect(getState().flowSummary).toBe(""); | ||
|
|
||
| const serviceSummaryInput = screen.getByPlaceholderText("Description"); | ||
|
|
||
| expect(serviceSummaryInput).toBeDisabled(); | ||
| expect(screen.getByRole("button", { name: "Save" })).toBeDisabled(); | ||
| }); | ||
| }); |
26 changes: 26 additions & 0 deletions
26
editor.planx.uk/src/pages/FlowEditor/ReadMePage/tests/helpers.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { ReadMePageProps } from "../types"; | ||
|
|
||
| export const platformAdminUser = { | ||
| id: 1, | ||
| firstName: "Editor", | ||
| lastName: "Test", | ||
| isPlatformAdmin: true, | ||
| email: "[email protected]", | ||
| teams: [], | ||
| jwt: "x.y.z", | ||
| }; | ||
|
|
||
| export const defaultProps = { | ||
| flowSlug: "apply-for-planning-permission", | ||
| teamSlug: "barnet", | ||
| flowInformation: { | ||
| status: "online", | ||
| description: "A long description of a service", | ||
| summary: "A short blurb", | ||
| limitations: "", | ||
| settings: {}, | ||
| }, | ||
| } as ReadMePageProps; | ||
|
|
||
| export const longInput = | ||
| "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my who"; // 122 characters |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { FlowInformation } from "../utils"; | ||
|
|
||
| export interface ReadMePageProps { | ||
| flowInformation: FlowInformation; | ||
| teamSlug: string; | ||
| flowSlug: string; | ||
| } | ||
|
|
||
| export interface ReadMePageForm { | ||
| serviceSummary: string; | ||
| serviceDescription: string; | ||
| serviceLimitations: string; | ||
| } |
Oops, something went wrong.