feat: E2E test coverage for Filters

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

@@ -5,7 +5,11 @@ import {
   tearDownTestContext,
 } from "./helpers/context";
 import { getTeamPage } from "./helpers/getPage";
-import { createAuthenticatedSession } from "./helpers/globalHelpers";
+import {
+  createAuthenticatedSession,
+  filterFlags,
+  selectedFlag,
+} from "./helpers/globalHelpers";
 import {
   answerAddressInput,
   answerChecklist,
@@ -79,7 +83,7 @@ test.describe("Flow creation, publish and preview", () => {
     await editor.createList();
     await editor.createTaskList();
     await editor.createContent();
-
+    await editor.createFilter();
     await editor.createResult();
     await editor.createNextSteps();
     await editor.createReview();
@@ -99,6 +103,7 @@ test.describe("Flow creation, publish and preview", () => {
       "A list title",
       "What you should do next",
       "Some content",
+      ...filterFlags,
       "Planning permission", // default result flag
       "Next steps",
       "Check your answers before sending your application",
@@ -336,6 +341,14 @@ test.describe("Flow creation, publish and preview", () => {
     await expect(page.locator("p", { hasText: "Some content" })).toBeVisible();
     await clickContinue({ page });
 
+    // this is the content placed in the filtered branch
+    await expect(
+      page.locator("p", {
+        hasText: `This is the ${selectedFlag} filter`,
+      }),
+    ).toBeVisible();
+    await clickContinue({ page });
+
     await expect(page.locator("h1", { hasText: "No result" })).toBeVisible();
     await clickContinue({ page });
 

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

@@ -3,6 +3,7 @@ import { expect, Locator, Page } from "@playwright/test";
 import { contextDefaults } from "./context";
 import { externalPortalServiceProps } from "./serviceData";
 import { OptionWithDataValues } from "./types";
+import { selectedFlag } from "./globalHelpers";
 
 const createBaseComponent = async (
   page: Page,
@@ -123,6 +124,10 @@ const createBaseComponent = async (
         .fill(options?.[0] || "");
       break;
     case ComponentType.Filter:
+      await page
+        .getByTestId("flagset-category-select")
+        .selectOption(selectedFlag);
+      break;
     case ComponentType.Feedback:
       break;
     case ComponentType.InternalPortal:
@@ -359,6 +364,9 @@ async function createComponentOptions(
     await page.getByPlaceholder("Option").nth(index).fill(option);
     index++;
   }
+
+  await page.getByPlaceholder("Flags (up to one per category)").nth(1).click();
+  await page.getByRole("option", { name: selectedFlag, exact: true }).click();
 }
 
 async function createComponentOptionsWithDataValues(

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

@@ -1,8 +1,9 @@
 import { FlowGraph } from "@opensystemslab/planx-core/types";
-import type { Browser, Page, Request } from "@playwright/test";
+import { type Browser, type Page, type Request } from "@playwright/test";
 import { gql } from "graphql-request";
 import { generateAuthenticationToken, getGraphQLClient } from "./context";
 import { TestContext } from "./types";
+import { flatFlags } from "@opensystemslab/planx-core/types";
 
 // Test card numbers to be used in gov.uk sandbox environment
 // reference: https://docs.payments.service.gov.uk/testing_govuk_pay/#if-you-39-re-using-a-test-39-sandbox-39-account
@@ -80,6 +81,11 @@ export async function setFeatureFlag(page: Page, featureFlag: string) {
   );
 }
 
+export const selectedFlag = "Material change of use";
+export const filterFlags = flatFlags
+  .filter((flag) => flag.category === selectedFlag)
+  .map((flag) => flag.text);
+
 export async function getSessionId(page: Page): Promise<string> {
   // @ts-expect-error - Property api does not exist on type Window & typeof globalThis
   const sessionId = page.evaluate(() => window.api.getState().sessionId);

e2e/tests/ui-driven/src/pages/Editor.ts

@@ -30,6 +30,7 @@ import {
   createUploadAndLabel,
 } from "../helpers/addComponent";
 import { OptionWithDataValues } from "../helpers/types";
+import { selectedFlag } from "../helpers/globalHelpers";
 
 export class PlaywrightEditor {
   readonly page: Page;
@@ -246,6 +247,18 @@ export class PlaywrightEditor {
 
   async createFilter() {
     await createFilter(this.page, this.getNextNode());
+    // select the branch filter and add some content
+    const filteredBranch = this.page
+      .locator("li")
+      .filter({ hasText: /Material change of use$/ })
+      .getByRole("listitem")
+      .getByRole("link");
+
+    await createContent(
+      this.page,
+      filteredBranch,
+      `This is the ${selectedFlag} filter`,
+    );
   }
 
   async createInternalPortal() {