fix(wip): Flaky E2E tests

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: [

editor.planx.uk/src/routes/authenticated.tsx

@@ -10,7 +10,7 @@ import { makeTitle } from "./utils";
 import { authenticatedView } from "./views/authenticated";
 
 const editorRoutes = compose(
-  withView(authenticatedView),
+  withView(async () => await authenticatedView()),
 
   mount({
     "/": route(async () => {

editor.planx.uk/src/routes/index.tsx

@@ -56,22 +56,25 @@ const editorRoutes = mount({
   ),
 });
 
-const mountPayRoutes = () =>
-  map(async () => {
+const tryImport = () => {
+  try {
     return lazy(() => import("./pay"));
-  });
+  } catch (error) {
+    throw Error(`ERROR MOUNTING PAY ROUTES (LAZY): ${error}`);
+  }
+};
 
 export default isPreviewOnlyDomain
   ? mount({
       "/:team/:flow/preview": lazy(() => import("./preview")), // XXX: keeps old URL working, but only for the team listed in the domain.
       "/:flow": lazy(() => import("./preview")),
-      "/:flow/pay": mountPayRoutes(),
+      "/:flow/pay": tryImport(),
       // XXX: We're not sure where to redirect `/` to so for now we'll just return the default 404
       // "/": redirect("somewhere?"),
     })
   : mount({
       "/:team/:flow/preview": lazy(() => import("./preview")), // loads published flow if exists, or current flow
       "/:team/:flow/unpublished": lazy(() => import("./unpublished")), // loads current flow
-      "/:team/:flow/pay": mountPayRoutes(),
+      "/:team/:flow/pay": tryImport(),
       "*": editorRoutes,
     });

editor.planx.uk/src/routes/pay.tsx

@@ -21,23 +21,33 @@ import standaloneView from "./views/standalone";
 
 const payRoutes = compose(
   withData(async (req) => {
-    const externalDomainTeam = await getTeamFromDomain(
-      window.location.hostname,
-    );
+    console.log("inside pay withData");
+    try {
+      const externalDomainTeam = await getTeamFromDomain(
+        window.location.hostname,
+      );
 
-    return {
-      mountpath: req.mountpath,
-      isPreviewOnlyDomain: Boolean(externalDomainTeam),
-    };
+      return {
+        mountpath: req.mountpath,
+        isPreviewOnlyDomain: Boolean(externalDomainTeam),
+      };
+    } catch (error) {
+      throw Error(`ERROR IN PAY WITHDATA: ${error}`);
+    }
   }),
 
   withView(async (req) => {
-    await validateTeamRoute(req);
-    return await standaloneView(req);
+    try {
+      await validateTeamRoute(req);
+      return await standaloneView(req);
+    } catch (error) {
+      throw Error(`ERROR IN PAY WITHVIEW: ${error}`);
+    }
   }),
 
   mount({
     "/": route(async (req) => {
+      console.log("inside pay mount");
       const paymentRequest = await getPaymentRequest(req);
       if (!paymentRequest) {
         return {

editor.planx.uk/src/routes/team.tsx

@@ -14,7 +14,7 @@ let cached: { flowSlug?: string; teamSlug?: string } = {
 };
 
 const routes = compose(
-  withView(teamView),
+  withView(async (req) => await teamView(req)),
 
   mount({
     "/": route(() => ({

editor.planx.uk/src/routes/utils.ts

@@ -90,6 +90,7 @@ export const getTeamFromDomain = pMemoize(async (domain: string) => {
  * e.g. https://planningservices.southwark.gov.uk/lambeth/some-flow/preview
  */
 export const validateTeamRoute = async (req: NaviRequest) => {
+  console.log("inside ValidateTeamRoute");
   const externalTeamName = await getTeamFromDomain(window.location.hostname);
   if (
     req.params.team &&

editor.planx.uk/src/routes/views/standalone.tsx

@@ -1,3 +1,4 @@
+import { logger } from "airbrake";
 import gql from "graphql-tag";
 import { publicClient } from "lib/graphql";
 import { NaviRequest, NotFoundError } from "navi";
@@ -19,27 +20,34 @@ interface StandaloneViewData {
  * Fetches all necessary data, and sets up layout for a standalone page
  */
 const standaloneView = async (req: NaviRequest) => {
-  const flowSlug = req.params.flow.split(",")[0];
-  const teamSlug =
-    req.params.team || (await getTeamFromDomain(window.location.hostname));
-  const data = await fetchDataForStandaloneView(flowSlug, teamSlug);
+  try {
+    const flowSlug = req.params.flow.split(",")[0];
+    const teamSlug =
+      req.params.team || (await getTeamFromDomain(window.location.hostname));
+    const data = await fetchDataForStandaloneView(flowSlug, teamSlug);
+    if (!data) return;
 
-  const {
-    flows: [{ team, settings: flowSettings }],
-    globalSettings,
-  } = data;
+    // ERROR HERE
+    const {
+      flows: [{ team, settings: flowSettings }],
+      globalSettings,
+    } = data;
 
-  const state = useStore.getState();
-  state.setFlowNameFromSlug(flowSlug);
-  state.setGlobalSettings(globalSettings[0]);
-  state.setFlowSettings(flowSettings);
-  state.setTeam(team);
+    const state = useStore.getState();
+    state.setFlowNameFromSlug(flowSlug);
+    state.setGlobalSettings(globalSettings[0]);
+    state.setFlowSettings(flowSettings);
+    state.setTeam(team);
 
-  return (
-    <PublicLayout>
-      <View />
-    </PublicLayout>
-  );
+    return (
+      <PublicLayout>
+        <View />
+      </PublicLayout>
+    );
+  } catch (error) {
+    console.log("ERROR IN STANDALONE VIEW: ", error);
+    logger.notify(error);
+  }
 };
 
 const fetchDataForStandaloneView = async (

editor.planx.uk/src/routes/views/team.tsx

@@ -1,3 +1,4 @@
+import { logger } from "airbrake";
 import { NaviRequest, NotFoundError } from "navi";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
@@ -9,17 +10,22 @@ import { getTeamFromDomain } from "routes/utils";
  * Initialises TeamStore if not already set
  */
 export const teamView = async (req: NaviRequest) => {
-  const { initTeamStore, teamSlug: currentSlug } = useStore.getState();
-  const routeSlug =
-    req.params.team || (await getTeamFromDomain(window.location.hostname));
+  try {
+    const { initTeamStore, teamSlug: currentSlug } = useStore.getState();
+    const routeSlug =
+      req.params.team || (await getTeamFromDomain(window.location.hostname));
 
-  if (currentSlug !== routeSlug) {
-    try {
-      await initTeamStore(routeSlug);
-    } catch (error) {
-      throw new NotFoundError(`Team not found: ${error}`);
+    if (currentSlug !== routeSlug) {
+      try {
+        await initTeamStore(routeSlug);
+      } catch (error) {
+        throw new NotFoundError(`Team not found: ${error}`);
+      }
     }
-  }
 
-  return <View />;
+    return <View />;
+  } catch (error) {
+    console.error("ERROR WITHIN TEAM VIEW: ", error);
+    logger.notify(error);
+  }
 };