From 007aa962d3c045f25591cb778a92fc7b77f8c36b Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Thu, 19 Dec 2024 16:08:14 +0000
Subject: [PATCH] alter testing for new format

---
 .../components/ExternalPortal/Editor.test.tsx | 44 +++++++++++++------
 .../components/ExternalPortal/Editor.tsx      |  3 ++
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx
index 139c78584d..8b52b345de 100644
--- a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx
+++ b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.test.tsx
@@ -1,5 +1,5 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
 import React from "react";
 import { setup } from "testUtils";
 import { vi } from "vitest";
@@ -9,7 +9,7 @@ import ExternalPortalForm from "./Editor";
 test("adding an external portal", async () => {
   const handleSubmit = vi.fn();
 
-  setup(
+  const { user } = setup(
     <ExternalPortalForm
       flows={[
         { id: "a", name: "flow a", slug: "flow-a", team: "team" },
@@ -18,13 +18,22 @@ test("adding an external portal", async () => {
       handleSubmit={handleSubmit}
     />,
   );
+  const autocompleteComp = screen.getByTestId("flowId");
+  const autocompleteInput = within(autocompleteComp).getByRole("combobox");
 
-  expect(screen.getByTestId("flowId")).toHaveValue("");
+  screen.debug(autocompleteInput);
 
-  await fireEvent.change(screen.getByTestId("flowId"), {
-    target: { value: "b" },
-  });
-  await fireEvent.submit(screen.getByTestId("form"));
+  expect(autocompleteInput).toHaveValue("");
+
+  await user.click(autocompleteInput);
+
+  await user.click(screen.getByTestId("flow-b"));
+
+  expect(autocompleteInput).toHaveValue("flow b");
+
+  const extPortalForm = screen.getByTestId("form");
+
+  fireEvent.submit(extPortalForm);
 
   await waitFor(() =>
     expect(handleSubmit).toHaveBeenCalledWith({
@@ -41,9 +50,8 @@ test("adding an external portal", async () => {
 test("changing an external portal", async () => {
   const handleSubmit = vi.fn();
 
-  setup(
+  const { user } = setup(
     <ExternalPortalForm
-      id="test"
       flowId="b"
       flows={[
         { id: "a", name: "flow a", slug: "flow-a", team: "team" },
@@ -53,12 +61,20 @@ test("changing an external portal", async () => {
     />,
   );
 
-  expect(screen.getByTestId("flowId")).toHaveValue("b");
+  const autocompleteComp = screen.getByTestId("flowId");
+  const autocompleteInput = within(autocompleteComp).getByRole("combobox");
+
+  expect(autocompleteInput).toHaveValue("flow b");
+
+  await user.click(autocompleteInput);
+
+  await user.click(screen.getByTestId("flow-a"));
+
+  expect(autocompleteInput).toHaveValue("flow a");
+
+  const extPortalForm = screen.getByTestId("form");
 
-  await fireEvent.change(screen.getByTestId("flowId"), {
-    target: { value: "a" },
-  });
-  await fireEvent.submit(screen.getByTestId("form"));
+  fireEvent.submit(extPortalForm);
 
   await waitFor(() =>
     expect(handleSubmit).toHaveBeenCalledWith({
diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
index 3bfa26dbe8..1844ebc8c7 100644
--- a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
@@ -56,6 +56,7 @@ const renderOption: FlowAutocompleteListProps["renderOption"] = (
   <MenuItem
     {...props}
     key={option.id}
+    data-testid={`flow-${option.id}`}
     sx={(theme) => ({ paddingY: `${theme.spacing(1.25)}` })}
   >
     {option.name}
@@ -149,6 +150,8 @@ const ExternalPortalForm: React.FC<{
         </ModalSectionContent>
         <ModalSectionContent title="Pick a flow">
           <Autocomplete
+            data-testid="flowId"
+            id="flowId"
             role="status"
             aria-atomic={true}
             aria-live="polite"