fix: Failing regression E2E tests (#2337)

* chore: Misc tidy ups

* chore: Route tidyups

* fix: Remove useSWRMutation due to incompatability with react-navi

* fix: Typo on Uniform error handling

* chore: Bump Playwright

* test(wip): Reorder e2e tests

api.planx.uk/send/uniform.ts

@@ -225,7 +225,10 @@ async function authenticate({
     throw Error("Failed to authenticate to Uniform - no access token returned");
   }
 
-  if (!response.data["organisation-name"] || response.data["organisation-id"]) {
+  if (
+    !response.data["organisation-name"] ||
+    !response.data["organisation-id"]
+  ) {
     throw Error(
       "Failed to authenticate to Uniform - no organisation details returned",
     );

e2e/tests/ui-driven/package.json

@@ -20,7 +20,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
+    "@playwright/test": "^1.39.0",
     "@types/node": "18.16.1",
     "eslint-plugin-playwright": "^0.12.0"
   }

e2e/tests/ui-driven/playwright.config.ts

@@ -46,7 +46,7 @@ const config: PlaywrightTestConfig = {
   webServer: {
     command: `pnpm ui`,
     port: 3000,
-    reuseExistingServer: false,
+    reuseExistingServer: !process.env.CI,
   },
   /* Configure projects for major browsers */
   projects: [

e2e/tests/ui-driven/src/create-flow.spec.ts

@@ -35,62 +35,6 @@ test.describe("Navigation", () => {
     await tearDownTestContext(context);
   });
 
-  test("Create a flow", async ({ browser }) => {
-    const page = await getTeamPage({
-      browser,
-      userId: context.user!.id!,
-      teamName: context.team.name,
-    });
-
-    page.on("dialog", (dialog) => dialog.accept(serviceProps.name));
-    await page.locator("button", { hasText: "Add a new service" }).click();
-
-    // update context to allow flow to be torn down
-    context.flow = { ...serviceProps };
-
-    await page.locator("li.hanger > a").click();
-    await page.getByRole("dialog").waitFor();
-
-    const questionText = "Is this a test?";
-    await page.getByPlaceholder("Text").fill(questionText);
-
-    await page.locator("button").filter({ hasText: "add new" }).click();
-    await page.getByPlaceholder("Option").fill("Yes");
-
-    await page.locator("button").filter({ hasText: "add new" }).click();
-    await page.getByPlaceholder("Option").nth(1).fill("No");
-
-    await page.locator("button").filter({ hasText: "Create question" }).click();
-    await expect(
-      page.locator("a").filter({ hasText: questionText }),
-    ).toBeVisible();
-
-    // Add a notice to the "Yes" path
-    const yesBranch = page.locator("#flow .card .options .option").nth(0);
-    await yesBranch.locator(".hanger > a").click();
-    await page.getByRole("dialog").waitFor();
-
-    await page.locator("select").selectOption({ label: "Notice" });
-    const yesBranchNoticeText = "Yes! this is a test";
-    await page.getByPlaceholder("Notice").fill(yesBranchNoticeText);
-    await page.locator("button").filter({ hasText: "Create notice" }).click();
-
-    // Add a notice to the "No" path
-    const noBranch = page.locator("#flow .card .options .option").nth(1);
-    await noBranch.locator(".hanger > a").click();
-    await page.getByRole("dialog").waitFor();
-
-    await page.locator("select").selectOption({ label: "Notice" });
-    const noBranchNoticeText = "Sorry, this is a test";
-    await page.getByPlaceholder("Notice").fill(noBranchNoticeText);
-    await page.locator("button").filter({ hasText: "Create notice" }).click();
-
-    const nodes = page.locator(".card");
-    await expect(nodes.getByText(questionText)).toBeVisible();
-    await expect(nodes.getByText(yesBranchNoticeText)).toBeVisible();
-    await expect(nodes.getByText(noBranchNoticeText)).toBeVisible();
-  });
-
   test("user data persists on page refresh @regression", async ({
     browser,
   }) => {
@@ -151,6 +95,62 @@ test.describe("Navigation", () => {
     await expect(teamSlugInHeader).toBeHidden();
   });
 
+  test("Create a flow", async ({ browser }) => {
+    const page = await getTeamPage({
+      browser,
+      userId: context.user!.id!,
+      teamName: context.team.name,
+    });
+
+    page.on("dialog", (dialog) => dialog.accept(serviceProps.name));
+    await page.locator("button", { hasText: "Add a new service" }).click();
+
+    // update context to allow flow to be torn down
+    context.flow = { ...serviceProps };
+
+    await page.locator("li.hanger > a").click();
+    await page.getByRole("dialog").waitFor();
+
+    const questionText = "Is this a test?";
+    await page.getByPlaceholder("Text").fill(questionText);
+
+    await page.locator("button").filter({ hasText: "add new" }).click();
+    await page.getByPlaceholder("Option").fill("Yes");
+
+    await page.locator("button").filter({ hasText: "add new" }).click();
+    await page.getByPlaceholder("Option").nth(1).fill("No");
+
+    await page.locator("button").filter({ hasText: "Create question" }).click();
+    await expect(
+      page.locator("a").filter({ hasText: questionText }),
+    ).toBeVisible();
+
+    // Add a notice to the "Yes" path
+    const yesBranch = page.locator("#flow .card .options .option").nth(0);
+    await yesBranch.locator(".hanger > a").click();
+    await page.getByRole("dialog").waitFor();
+
+    await page.locator("select").selectOption({ label: "Notice" });
+    const yesBranchNoticeText = "Yes! this is a test";
+    await page.getByPlaceholder("Notice").fill(yesBranchNoticeText);
+    await page.locator("button").filter({ hasText: "Create notice" }).click();
+
+    // Add a notice to the "No" path
+    const noBranch = page.locator("#flow .card .options .option").nth(1);
+    await noBranch.locator(".hanger > a").click();
+    await page.getByRole("dialog").waitFor();
+
+    await page.locator("select").selectOption({ label: "Notice" });
+    const noBranchNoticeText = "Sorry, this is a test";
+    await page.getByPlaceholder("Notice").fill(noBranchNoticeText);
+    await page.locator("button").filter({ hasText: "Create notice" }).click();
+
+    const nodes = page.locator(".card");
+    await expect(nodes.getByText(questionText)).toBeVisible();
+    await expect(nodes.getByText(yesBranchNoticeText)).toBeVisible();
+    await expect(nodes.getByText(noBranchNoticeText)).toBeVisible();
+  });
+
   test("Preview a created flow", async ({ browser }: { browser: Browser }) => {
     const page = await createAuthenticatedSession({
       browser,

editor.planx.uk/package.json

@@ -84,7 +84,7 @@
     "scroll-into-view-if-needed": "^2.2.31",
     "sharedb": "^3.3.1",
     "striptags": "^3.2.0",
-    "swr": "^2.2.0",
+    "swr": "^2.2.4",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",
     "wkt": "^0.1.1",

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

@@ -13,10 +13,9 @@ import { WarningContainer } from "@planx/components/shared/Preview/WarningContai
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import { useFormik } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useCurrentRoute, useNavigation } from "react-navi";
 import { isPreviewOnlyDomain } from "routes/utils";
-import useSWRMutation from "swr/mutation";
 import { ApplicationPath } from "types";
 import ErrorWrapper from "ui/ErrorWrapper";
 import Input from "ui/Input";
@@ -88,6 +87,8 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
   paymentStatus,
 }) => {
   const [sessionId, path] = useStore((state) => [state.sessionId, state.path]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(false);
   const isSaveReturn = path === ApplicationPath.SaveAndReturn;
   const navigation = useNavigation();
   const {
@@ -99,38 +100,39 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
     window.scrollTo(0, 0);
   }, []);
 
-  const postRequest = async (
-    url: string,
-    { arg }: { arg: CreatePaymentRequest },
-  ) => {
+  const postRequest = async (createPaymentRequest: CreatePaymentRequest) => {
+    setIsLoading(true);
+    const url = `${process.env.REACT_APP_API_URL}/invite-to-pay/${sessionId}`;
     const response = await fetch(url, {
       method: "POST",
-      body: JSON.stringify(arg),
+      body: JSON.stringify(createPaymentRequest),
       headers: {
         "Content-Type": "application/json",
       },
     });
+    setIsLoading(false);
     if (!response.ok) {
+      setError(true);
       throw new Error(
-        `Error generating payment request for session ${sessionId}: ${error}`,
+        `Error generating payment request for session ${sessionId}: ${response.body}`,
       );
     }
     return response.json();
   };
 
-  const { trigger, isMutating, error } = useSWRMutation(
-    `${process.env.REACT_APP_API_URL}/invite-to-pay/${sessionId}`,
-    postRequest,
-  );
-
   const onSubmit = async (values: FormValues) => {
     const createPaymentRequest: CreatePaymentRequest = {
       ...values,
       sessionPreviewKeys: SESSION_PREVIEW_KEYS,
     };
-    const paymentRequest: PaymentRequest = await trigger(createPaymentRequest);
-    if (!error && paymentRequest.id)
-      redirectToConfirmationPage(paymentRequest.id);
+    try {
+      const paymentRequest: PaymentRequest = await postRequest(
+        createPaymentRequest,
+      );
+      if (paymentRequest.id) redirectToConfirmationPage(paymentRequest.id);
+    } catch (error) {
+      console.error(error);
+    }
   };
 
   const redirectToConfirmationPage = (paymentRequestId: string) => {
@@ -153,7 +155,7 @@ const InviteToPayForm: React.FC<InviteToPayFormProps> = ({
     validationSchema,
   });
 
-  return isMutating ? (
+  return isLoading ? (
     <DelayedLoadingIndicator />
   ) : (
     <Card>

editor.planx.uk/src/components/DelayedLoadingIndicator.tsx

@@ -33,7 +33,7 @@ const DelayedLoadingIndicator: React.FC<{
     >
       <CircularProgress aria-label="Loading" />
       <Typography variant="body2" sx={{ ml: "1rem" }}>
-        {text ?? "Loading…"}
+        {text ?? "Loading..."}
       </Typography>
     </Root>
   ) : null;

editor.planx.uk/src/pages/Pay/MakePayment.tsx

@@ -305,7 +305,6 @@ function computePaymentState(govUkPayment: GovUKPayment | null): PaymentState {
   ) {
     return PaymentState.Pending;
   }
-  // PaymentStatus.cancelled, PaymentStatus.error, PaymentStatus.failed,
   return PaymentState.Failed;
 }