feat: Add External Portals to E2E ui-driven tests

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

@@ -1,5 +1,4 @@
 import { expect, test } from "@playwright/test";
-import type { Context } from "./helpers/context";
 import {
   contextDefaults,
   setUpTestContext,
@@ -9,27 +8,30 @@ import { getTeamPage } from "./helpers/getPage";
 import { createAuthenticatedSession } from "./helpers/globalHelpers";
 import { answerFindProperty, clickContinue } from "./helpers/userActions";
 import { PlaywrightEditor } from "./pages/Editor";
+import {
+  navigateToService,
+  publishService,
+  turnServiceOnline,
+} from "./helpers/navigateAndPublish";
+import { TestContext } from "./helpers/types";
+import { serviceProps } from "./helpers/serviceData";
 
 test.describe("Flow creation, publish and preview", () => {
-  let context: Context = {
+  let context: TestContext = {
     ...contextDefaults,
   };
-  const serviceProps = {
-    name: "A Test Service",
-    slug: "a-test-service",
-  };
 
   test.beforeAll(async () => {
     try {
       context = await setUpTestContext(context);
     } catch (error) {
-      await tearDownTestContext(context);
+      await tearDownTestContext();
       throw error;
     }
   });
 
   test.afterAll(async () => {
-    await tearDownTestContext(context);
+    await tearDownTestContext();
   });
 
   test("Create a flow", async ({ browser }) => {
@@ -44,9 +46,6 @@ test.describe("Flow creation, publish and preview", () => {
     page.on("dialog", (dialog) => dialog.accept(serviceProps.name));
     await editor.addNewService();
 
-    // update context to allow flow to be torn down
-    context.flow = { ...serviceProps };
-
     await editor.createFindProperty();
     await expect(editor.nodeList).toContainText(["Find property"]);
     await editor.createInternalPortal();
@@ -78,24 +77,16 @@ test.describe("Flow creation, publish and preview", () => {
       userId: context.user!.id!,
     });
     // publish flow
-    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
-    page.getByRole("button", { name: "CHECK FOR CHANGES TO PUBLISH" }).click();
-    page.getByRole("button", { name: "PUBLISH", exact: true }).click();
+    await navigateToService(page, serviceProps.slug);
+    await publishService(page);
 
     let previewLink = page.getByRole("link", {
       name: "Open published service",
     });
     await expect(previewLink).toBeVisible();
 
-    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
-
-    // Toggle flow online
-    page.locator('[aria-label="Service settings"]').click();
-    page.getByLabel("Offline").click();
-    page.getByRole("button", { name: "Save", disabled: false }).click();
-    await expect(
-      page.getByText("Service settings updated successfully"),
-    ).toBeVisible();
+    await navigateToService(page, serviceProps.slug);
+    await turnServiceOnline(page);
 
     // Exit back to main Editor page
     page.locator('[aria-label="Editor"]').click();

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

@@ -1,5 +1,4 @@
 import { Browser, expect, test } from "@playwright/test";
-import type { Context } from "./helpers/context";
 import {
   contextDefaults,
   setUpTestContext,
@@ -19,9 +18,20 @@ import {
   clickContinue,
 } from "./helpers/userActions";
 import { PlaywrightEditor } from "./pages/Editor";
+import { createExternalPortal } from "./helpers/addComponent";
+import {
+  navigateToService,
+  publishService,
+  turnServiceOnline,
+} from "./helpers/navigateAndPublish";
+import { TestContext } from "./helpers/types";
+import {
+  externalPortalFlowData,
+  externalPortalServiceProps,
+} from "./helpers/serviceData";
 
 test.describe("Flow creation, publish and preview", () => {
-  let context: Context = {
+  let context: TestContext = {
     ...contextDefaults,
   };
   const serviceProps = {
@@ -34,13 +44,13 @@ test.describe("Flow creation, publish and preview", () => {
       context = await setUpTestContext(context);
     } catch (error) {
       // ensure proper teardown if setup fails
-      await tearDownTestContext(context);
+      await tearDownTestContext();
       throw error;
     }
   });
 
   test.afterAll(async () => {
-    await tearDownTestContext(context);
+    await tearDownTestContext();
   });
 
   test("Create a flow", async ({ browser }) => {
@@ -120,10 +130,8 @@ test.describe("Flow creation, publish and preview", () => {
       userId: context.user!.id!,
     });
 
-    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
-
-    page.getByRole("button", { name: "CHECK FOR CHANGES TO PUBLISH" }).click();
-    page.getByRole("button", { name: "PUBLISH", exact: true }).click();
+    await navigateToService(page, serviceProps.slug);
+    await publishService(page);
 
     const previewLink = page.getByRole("link", {
       name: "Open published service",
@@ -156,17 +164,8 @@ test.describe("Flow creation, publish and preview", () => {
       userId: context.user!.id!,
     });
 
-    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
-
-    // Open flow settings
-    page.locator('[aria-label="Service settings"]').click();
-
-    // Toggle flow online
-    page.getByLabel("Offline").click();
-    page.getByRole("button", { name: "Save", disabled: false }).click();
-    await expect(
-      page.getByText("Service settings updated successfully"),
-    ).toBeVisible();
+    await navigateToService(page, serviceProps.slug);
+    await turnServiceOnline(page);
 
     // Exit back to main Editor page
     page.locator('[aria-label="Editor"]').click();
@@ -177,6 +176,52 @@ test.describe("Flow creation, publish and preview", () => {
     await expect(previewLink).toBeVisible();
   });
 
+  test("Can add an external portal", async ({
+    browser,
+  }: {
+    browser: Browser;
+  }) => {
+    const page = await createAuthenticatedSession({
+      browser,
+      userId: context.user!.id!,
+    });
+
+    await page.goto(`/${context.team.slug}`);
+
+    const editor = new PlaywrightEditor(page);
+
+    page.on("dialog", (dialog) =>
+      dialog.accept(externalPortalServiceProps.name),
+    );
+    await editor.addNewService();
+
+    // update context to allow new flow to be torn down
+    context.externalPortalFlow = { ...externalPortalServiceProps };
+
+    const { title, answers } = externalPortalFlowData;
+
+    await editor.createQuestionWithOptions(title, answers);
+
+    await expect(editor.nodeList).toContainText([
+      title,
+      answers[0],
+      answers[1],
+    ]);
+
+    await publishService(page);
+    await turnServiceOnline(page);
+
+    await navigateToService(page, serviceProps.slug);
+
+    await createExternalPortal(page, page.locator("li:nth-child(6)"));
+
+    await expect(
+      page.getByRole("link", { name: "E2E/an-external-portal-service" }),
+    ).toBeVisible();
+
+    await publishService(page);
+  });
+
   test("Can preview a published flow", async ({
     browser,
   }: {
@@ -187,6 +232,12 @@ test.describe("Flow creation, publish and preview", () => {
       userId: context.user!.id!,
     });
 
+    await page.goto(`/${context.team.slug}/${serviceProps.slug}`);
+
+    await expect(
+      page.getByRole("link", { name: "E2E/an-external-portal-service" }),
+    ).toBeVisible();
+
     await page.goto(
       `/${context.team.slug}/${serviceProps.slug}/published?analytics=false`,
     );
@@ -213,6 +264,13 @@ test.describe("Flow creation, publish and preview", () => {
     });
     await clickContinue({ page });
 
+    await answerQuestion({
+      page,
+      title: externalPortalFlowData.title,
+      answer: externalPortalFlowData.answers[0],
+    });
+    await clickContinue({ page });
+
     await answerTextInput(page, {
       expectedQuestion: "Tell us about your trees.",
       answer: "My trees are lovely",

e2e/tests/ui-driven/src/helpers/addComponent.ts

@@ -1,5 +1,7 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
 import { expect, Locator, Page } from "@playwright/test";
+import { contextDefaults } from "./context";
+import { externalPortalServiceProps } from "./serviceData";
 
 const createBaseComponent = async (
   page: Page,
@@ -26,7 +28,7 @@ const createBaseComponent = async (
       await page.getByPlaceholder("Notice").fill(title || "");
       break;
     case ComponentType.Checklist:
-      await page.getByPlaceholder("Text").fill(title || "text");
+      await page.getByPlaceholder("Text").fill(title || "");
       if (options) {
         await createComponentOptions(options, "add new option", page);
       }
@@ -122,6 +124,13 @@ const createBaseComponent = async (
     case ComponentType.InternalPortal:
       await page.getByPlaceholder("Portal name").fill(title || "");
       break;
+    case ComponentType.ExternalPortal:
+      await page
+        .getByTestId("flowId")
+        .selectOption(
+          `${contextDefaults.team.slug}/${externalPortalServiceProps.slug}`,
+        );
+      break;
     default:
       throw new Error(`Unsupported type: ${type}`);
   }
@@ -394,3 +403,10 @@ export const createInternalPortal = async (
 export const createFeedback = async (page: Page, locatingNode: Locator) => {
   await createBaseComponent(page, locatingNode, ComponentType.Feedback);
 };
+
+export const createExternalPortal = async (
+  page: Page,
+  locatingNode: Locator,
+) => {
+  await createBaseComponent(page, locatingNode, ComponentType.ExternalPortal);
+};