add unit tests and fix typo

simplify pay error and add tests

remove unused variables

remove it.only

alter state val on unit test

editor.planx.uk/src/@planx/components/Pay/Editor.tsx

@@ -1,6 +1,5 @@
 import DataObjectIcon from "@mui/icons-material/DataObject";
 import Box from "@mui/material/Box";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import {
@@ -352,10 +351,7 @@ const Component: React.FC<Props> = (props: Props) => {
                 <Switch
                   checked={values.allowInviteToPay}
                   onChange={() =>
-                    setFieldValue(
-                      "allowInviteToPay",
-                      !values.allowInviteToPay,
-                    )
+                    setFieldValue("allowInviteToPay", !values.allowInviteToPay)
                   }
                   label="Allow applicants to invite someone else to pay"
                 />

editor.planx.uk/src/@planx/components/Pay/Public/Pay.test.tsx

@@ -450,3 +450,31 @@ describe("Confirm component in information-only mode", () => {
     expect(results).toHaveNoViolations();
   });
 });
+
+describe("the demo user view", () => {
+  beforeEach(() => {
+    act(() =>
+      setState({
+        teamSlug: "demo",
+      }),
+    );
+  });
+  it("should render an error when teamSlug is demo", async () => {
+    const handleSubmit = vi.fn();
+    const { queryByText } = setup(
+      <Pay
+        title="Pay for your application"
+        fn="application.fee.typo"
+        handleSubmit={handleSubmit}
+        govPayMetadata={[]}
+      />,
+    );
+    const errorHeader = queryByText("GOV.UK Pay is not enabled for demo users");
+    const errorGuidance = queryByText(
+      "Click continue to skip payment and proceed with your application for testing.",
+    );
+
+    expect(errorGuidance).toBeInTheDocument();
+    expect(errorHeader).toBeInTheDocument();
+  });
+});

editor.planx.uk/src/@planx/components/Pay/Public/Pay.tsx

@@ -75,11 +75,6 @@ function Component(props: Props) {
 
   const metadata = [...(props.govPayMetadata || []), ...defaultMetadata];
 
-  const errorMessage =
-    teamSlug !== "demo"
-      ? "GOV.UK Pay is not enabled for this local authority"
-      : "GOV.UK Pay is not enabled demo users";
-
   // Handles UI states
   const reducer = (_state: ComponentState, action: Action): ComponentState => {
     switch (action) {
@@ -302,7 +297,10 @@ function Component(props: Props) {
               : "Retry payment"
           }
           error={
-            (state.status === "unsupported_team" && errorMessage) ||
+            (teamSlug === "demo" &&
+              "GOV.UK Pay is not enabled for demo users") ||
+            (state.status === "unsupported_team" &&
+              "GOV.UK Pay is not enabled for this local authority") ||
             (state.status === "undefined_fee" &&
               "We are unable to calculate your fee right now") ||
             undefined

editor.planx.uk/src/@planx/components/PlanningConstraints/Public.test.tsx

@@ -40,7 +40,7 @@ vi.mock("swr", () => ({
 }));
 
 describe("error state", () => {
-  it("renders an error if no addres is present in the passport", async () => {
+  it("renders an error if no address is present in the passport", async () => {
     const { getByRole, getByTestId } = setup(
       <ErrorBoundary FallbackComponent={ErrorFallback}>
         <PlanningConstraints
@@ -240,3 +240,47 @@ describe("following a FindProperty component", () => {
     expect(getByRole("heading", { name: /Ecology/ })).toBeVisible();
   });
 });
+
+describe("demo state", () => {
+  beforeEach(() => {
+    act(() =>
+      setState({
+        breadcrumbs: simpleBreadcrumbs,
+        flow: simpleFlow,
+        teamIntegrations: {
+          hasPlanningData: false,
+        },
+        teamSlug: "demo",
+      }),
+    );
+  });
+  it("should render an error when teamSlug is demo", async () => {
+    const handleSubmit = vi.fn();
+    const { queryByText, queryByRole, user, getByTestId } = setup(
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <PlanningConstraints
+          title="Planning constraints"
+          description="Things that might affect your project"
+          fn="property.constraints.planning"
+          disclaimer="This page does not include information about historic planning conditions that may apply to this property."
+          handleSubmit={handleSubmit}
+        />
+      </ErrorBoundary>,
+    );
+
+    const errorMessage = queryByText(
+      "Planning Constraints are not enabled for demo users.",
+    );
+    expect(errorMessage).toBeVisible();
+
+    // Check planning constraints has not rendered
+    expect(
+      queryByRole("heading", { name: "Planning constraints" }),
+    ).not.toBeInTheDocument();
+
+    // Ensure a demo user can continue on in the application
+    await user.click(getByTestId("continue-button"));
+
+    expect(handleSubmit).toHaveBeenCalled();
+  });
+});

editor.planx.uk/src/@planx/components/Send/Public.test.tsx

@@ -210,3 +210,45 @@ it("should not have any accessibility violations", async () => {
   const results = await axe(container);
   expect(results).toHaveNoViolations();
 });
+
+describe("demo state", () => {
+  beforeEach(() => {
+    act(() =>
+      setState({
+        teamSlug: "demo",
+      }),
+    );
+  });
+  it("should render an error when teamSlug is demo", async () => {
+    const { queryByText } = setup(
+      <SendComponent title="Send" destinations={["bops", "uniform"]} />,
+    );
+
+    const errorHeader = queryByText(
+      "Send is not enabled for services created in the Demo team",
+    );
+    const errorGuidance = queryByText(
+      "Click continue to skip send and proceed with your application for testing.",
+    );
+
+    expect(errorHeader).toBeInTheDocument();
+    expect(errorGuidance).toBeInTheDocument();
+  });
+  it("should allow the user to continue with their application", async () => {
+    const handleSubmit = vi.fn();
+
+    const { findByRole, user } = setup(
+      <SendComponent
+        title="Send"
+        destinations={["bops", "uniform"]}
+        handleSubmit={handleSubmit}
+      />,
+    );
+
+    const continueButton = await findByRole("button", { name: "Continue" });
+    expect(continueButton).toBeInTheDocument();
+
+    await user.click(continueButton);
+    expect(handleSubmit).toHaveBeenCalled();
+  });
+});

editor.planx.uk/src/@planx/components/Send/Public.tsx

@@ -26,13 +26,14 @@ const SendComponent: React.FC<Props> = ({
   destinations = [DEFAULT_DESTINATION],
   ...props
 }) => {
+  const teamSlug = useStore().teamSlug;
   const fullProps = { destinations: destinations, ...props };
   if (
     window.location.pathname.endsWith("/draft") ||
     window.location.pathname.endsWith("/preview")
   ) {
     return <SkipSendWarning {...fullProps} />;
-  } else if (window.location.pathname.split("/")[1] === "demo") {
+  } else if (teamSlug === "demo") {
     return <DemoTeamWarning {...fullProps} />;
   } else {
     return <CreateSendEvents {...fullProps} />;