test: fix broken playwright tests affected by Dialog markup changes

Sage · Oct 3, 2024 · d171508 · d171508
1 parent 66c963e
commit d171508
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 51 deletions.
diff --git a/playwright/components/alert/index.ts b/playwright/components/alert/index.ts
@@ -27,15 +27,4 @@ const alertDialog = (page: Page) => {
   return page.locator(ALERT_DIALOG);
 };
 
-const alertChildren = (page: Page) => {
-  return page.locator('[data-component="alert"] div:nth-of-type(2) div');
-};
-
-export {
-  alert,
-  alertCrossIcon,
-  alertTitle,
-  alertSubtitle,
-  alertDialog,
-  alertChildren,
-};
+export { alert, alertCrossIcon, alertTitle, alertSubtitle, alertDialog };
diff --git a/playwright/components/select/index.ts b/playwright/components/select/index.ts
@@ -14,7 +14,6 @@ import {
   SELECT_LIST_SCROLLABLE_WRAPPER,
 } from "./locators";
 import { PILL_PREVIEW } from "../pill/locators";
-import { ALERT_DIALOG } from "../dialog/locators";
 import { getDataElementByValue } from "..";
 
 // component preview locators
@@ -102,8 +101,5 @@ export const filterableSelectAddElementButton = (page: Page) =>
 export const filterableSelectButtonIcon = (page: Page) =>
   filterableSelectAddElementButton(page).locator("span:nth-child(2)");
 
-export const filterableSelectAddNewButton = (page: Page) =>
-  page.locator(ALERT_DIALOG).locator("div:nth-child(3) > div > button");
-
 export const selectResetButton = (page: Page) =>
   page.locator(SELECT_RESET_BUTTON);
diff --git a/src/components/alert/alert.pw.tsx b/src/components/alert/alert.pw.tsx
@@ -4,7 +4,6 @@ import {
   alertCrossIcon,
   alertTitle,
   alertSubtitle,
-  alertChildren,
   alertDialog,
 } from "../../../playwright/components/alert";
 import {
@@ -50,9 +49,7 @@ test.describe("should render Alert component", () => {
     test(`with ${text} as children`, async ({ mount, page }) => {
       await mount(<AlertComponent title="title">{text}</AlertComponent>);
 
-      const children = alertChildren(page);
-      const alertChildrenText = await children.textContent();
-      expect(alertChildrenText).toEqual(text);
+      await expect(page.getByText(text)).toBeVisible();
     });
   });
 

diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { expect, test } from "@playwright/experimental-ct-react17";
 import dayjs from "dayjs";
-import Confirm from "../confirm";
 import {
   DateInputCustom,
   DateInputValidationNewDesign,
@@ -784,26 +783,48 @@ test.describe("Functionality tests", () => {
     await expect(wrapper).toBeVisible();
   });
 
-  [true, false].forEach((state) => {
-    test(`should render with disablePortal prop ${state}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <Confirm open height="60px" onConfirm={() => {}}>
-          <DateInputCustom disablePortal={state} />
-        </Confirm>
-      );
+  test("date picker does not float above the rest of the page, when disablePortal prop is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <div
+        id="clipping-container"
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          border: "1px solid black",
+        }}
+      >
+        <DateInputCustom disablePortal />
+      </div>
+    );
 
-      const input = getDataElementByValue(page, "input");
-      await input.click();
-      const wrapper = dayPickerWrapper(page);
-      if (state) {
-        await expect(wrapper).not.toBeInViewport();
-      } else {
-        await expect(wrapper).toBeInViewport();
-      }
-    });
+    const input = page.getByLabel("Date");
+    await input.click();
+    const datePicker = dayPickerWrapper(page);
+    await expect(datePicker).not.toBeInViewport();
+  });
+  test("date picker floats above the rest of the page, when disablePortal prop is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <div
+        id="clipping-container"
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          border: "1px solid black",
+        }}
+      >
+        <DateInputCustom disablePortal={false} />
+      </div>
+    );
+    const input = page.getByLabel("Date");
+    await input.click();
+    const datePicker = dayPickerWrapper(page);
+    await expect(datePicker).toBeInViewport();
   });
 
   test(`should have the expected border radius styling`, async ({

diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx
@@ -31,7 +31,6 @@ import {
   boldedAndUnderlinedValue,
   dropdownButton,
   filterableSelectAddElementButton,
-  filterableSelectAddNewButton,
   filterableSelectButtonIcon,
   multiColumnsSelectListBody,
   multiColumnsSelectListHeader,
@@ -1088,19 +1087,26 @@ test.describe("FilterableSelect component", () => {
     mount,
     page,
   }) => {
+    const newOption = "New10";
     await mount(<FilterableSelectWithActionButtonComponent />);
 
-    const newOption = "New10";
-    await dropdownButton(page).click();
-    await expect(selectListWrapper(page)).toBeVisible();
-    const addElementButtonElement = filterableSelectAddElementButton(page);
-    await expect(addElementButtonElement).toBeVisible();
+    // open select list
+    const input = page.getByRole("combobox");
+    await input.click();
+    await expect(page.getByRole("listbox")).toBeVisible();
+
+    const addElementButtonElement = page.getByRole("button", {
+      name: "Add a New Element",
+    });
     await addElementButtonElement.click();
-    await expect(alertDialogPreview(page)).toBeVisible();
-    const addNewButtonElement = filterableSelectAddNewButton(page);
-    await expect(addNewButtonElement).toBeVisible();
-    await addNewButtonElement.click();
-    await expect(getDataElementByValue(page, "input")).toHaveValue(newOption);
+
+    const alert = page.getByRole("dialog");
+    await expect(alert).toBeVisible();
+
+    const alertAddNewButton = page.getByRole("button", { name: "Add new" });
+    await alertAddNewButton.click();
+
+    await expect(input).toHaveValue(newOption);
   });
 
   test("should have correct hover state of list option", async ({