test: add feedback component into e2e flow

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

@@ -73,6 +73,7 @@ test.describe("Flow creation, publish and preview", () => {
     await editor.createResult();
     await editor.createNextSteps();
     await editor.createReview();
+    await editor.createFeedback();
     await editor.createConfirmation();
 
     await expect(editor.nodeList).toContainText([
@@ -91,6 +92,7 @@ test.describe("Flow creation, publish and preview", () => {
       "Planning permission", // default result flag
       "Next steps",
       "Check your answers before sending your application",
+      "Tell us what you think",
       "Confirmation",
     ]);
   });
@@ -290,6 +292,10 @@ test.describe("Flow creation, publish and preview", () => {
     ).toBeVisible();
     await clickContinue({ page });
 
+    await expect(
+      page.locator("h1", { hasText: "Tell us what you think" }),
+    ).toBeVisible();
+    await clickContinue({ page });
     await expect(
       page.locator("h1", { hasText: "Application sent" }),
     ).toBeVisible();

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

@@ -1,5 +1,5 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
-import { Locator, Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 
 const createBaseComponent = async (
   page: Page,
@@ -10,7 +10,10 @@ const createBaseComponent = async (
 ) => {
   await locatingNode.click();
   await page.getByRole("dialog").waitFor();
-  await page.locator("select").selectOption({ value: type.toString() });
+  const headerSelect = page.getByRole("heading", { name: "Question close" });
+  await headerSelect.locator("select").selectOption({ value: type.toString() });
+
+  await expect(page.getByTestId("header-select")).toHaveValue(type.toString());
 
   switch (type) {
     case ComponentType.Question:
@@ -23,7 +26,7 @@ const createBaseComponent = async (
       await page.getByPlaceholder("Notice").fill(title || "");
       break;
     case ComponentType.Checklist:
-      await page.getByPlaceholder("Text").fill(title || "");
+      await page.getByPlaceholder("Text").fill(title || "text");
       if (options) {
         await createComponentOptions(options, "add new option", page);
       }
@@ -114,6 +117,7 @@ const createBaseComponent = async (
         .fill(options?.[0] || "");
       break;
     case ComponentType.Filter:
+    case ComponentType.Feedback:
       break;
     case ComponentType.InternalPortal:
       await page.getByPlaceholder("Portal name").fill(title || "");
@@ -386,3 +390,7 @@ export const createInternalPortal = async (
     portalName,
   );
 };
+
+export const createFeedback = async (page: Page, locatingNode: Locator) => {
+  await createBaseComponent(page, locatingNode, ComponentType.Feedback);
+};

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

@@ -9,6 +9,7 @@ import {
   createContent,
   createDateInput,
   createDrawBoundary,
+  createFeedback,
   createFileUpload,
   createFilter,
   createFindProperty,
@@ -240,4 +241,8 @@ export class PlaywrightEditor {
       .fill("A notice inside a portal!");
     await this.page.locator('button[form="modal"][type="submit"]').click();
   }
+
+  async createFeedback() {
+    await createFeedback(this.page, this.getNextNode());
+  }
 }

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -43,6 +43,7 @@ const NodeTypeSelect: React.FC<{
   return (
     <TypeSelect
       value={fromSlug(props.value)}
+      data-testId="header-select"
       onChange={(ev) => {
         props.onChange(ev.target.value);
       }}