Merge branch 'master' into playwright_refactor_navigation_bar

playwright/components/index.ts

@@ -10,6 +10,7 @@ import {
   LABEL,
   STICKY_FOOTER,
   COMMMON_DATA_ELEMENT_INPUT,
+  PORTAL,
 } from "./locators";
 
 export const icon = (page: Page) => {
@@ -67,3 +68,11 @@ export const label = (page: Page) => {
 export const legendSpan = (page: Page) => {
   return page.locator("legend > span");
 };
+
+export const openDialogByName = (page: Page, name: string) => {
+  getDataElementByValue(page, "main-text").filter({ hasText: name });
+};
+
+export const portal = (page: Page) => {
+  return page.locator(PORTAL).nth(1).locator("h1");
+};

playwright/support/helper.ts

@@ -330,3 +330,23 @@ export const getDesignTokensByCssProperty = async (
   }
   return tokens;
 };
+
+export const continuePressingTAB = async (page: Page, count: number) => {
+  const promises = [];
+
+  for (let i = 0; i < count; i++) {
+    promises.push(page.keyboard.press(`Tab`));
+  }
+
+  await Promise.all(promises);
+};
+
+export const continuePressingSHIFTTAB = async (page: Page, count: number) => {
+  const promises = [];
+
+  for (let i = 0; i < count; i++) {
+    promises.push(page.keyboard.press(`Shift+Tab`));
+  }
+
+  await Promise.all(promises);
+};

src/components/batch-selection/batch-selection.pw.tsx

@@ -13,6 +13,7 @@ import {
   batchSelectionComponent,
   batchSelectionButtonsByPosition,
 } from "../../../playwright/components/batch-selection";
+import { getComponent } from "../../../playwright/components/index";
 import { HooksConfig } from "../../../playwright";
 
 const BATCH_SELECTION_COLOR = [
@@ -39,43 +40,37 @@ test.describe("check BatchSelection component properties", () => {
   test("should check hidden BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent hidden />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection.getAttribute("hidden")).not.toBeNull();
-
+    await expect(batchSelection).toHaveAttribute("hidden", /.*/);
     await expect(batchSelection).toHaveCSS("opacity", "0");
   });
 
   test("should check disabled BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent disabled />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection).toHaveAttribute("disabled", "");
+
+    await expect(batchSelection).toHaveAttribute("disabled", /.*/);
   });
 
   ([
     [BATCH_SELECTION_COLOR[0], "rgb(0, 50, 76)"],
     [BATCH_SELECTION_COLOR[1], "rgb(179, 194, 201)"],
     [BATCH_SELECTION_COLOR[2], "rgb(255, 255, 255)"],
-    [BATCH_SELECTION_COLOR[3], ""],
+    [BATCH_SELECTION_COLOR[3], "rgba(0, 0, 0, 0)"],
   ] as [BatchSelectionProps["colorTheme"], string][]).forEach(
     ([colorTheme, backgroundColor]) => {
-      test(`check BatchSelection component ${colorTheme} colorTheme and it uses ${backgroundColor} as a background color`, async ({
+      test(`check background color is ${backgroundColor} when colorTheme is ${colorTheme}`, async ({
         mount,
         page,
       }) => {
         await mount(
           <BatchSelectionComponent colorTheme={colorTheme} selectedCount={0} />
         );
 
-        if (colorTheme === "transparent") {
-          await expect(batchSelectionComponent(page)).not.toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        } else {
-          await expect(batchSelectionComponent(page)).toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        }
+        const batchSelection = getComponent(page, "batch-selection");
+        await expect(batchSelection).toHaveCSS(
+          "background-color",
+          backgroundColor
+        );
       });
     }
   );

src/components/button/button.pw.tsx

@@ -7,10 +7,7 @@ import {
   buttonDataComponent,
 } from "../../../playwright/components/button/index";
 import { ICON } from "../../../playwright/components/locators";
-import {
-  checkAccessibility,
-  expectEventWasCalledOnce,
-} from "../../../playwright/support/helper";
+import { checkAccessibility } from "../../../playwright/support/helper";
 import {
   dlsRoot,
   icon,
@@ -55,8 +52,6 @@ import {
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
-const messages: string[] = [];
-
 test.describe("Button component", () => {
   testData.forEach((label) => {
     test(`should render label using ${label} special characters`, async ({
@@ -189,83 +184,82 @@ test.describe("Check events for Button component", () => {
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onClick={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onClick={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).click();
-
-    await expectEventWasCalledOnce(messages, "onClick");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.click();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onBlur callback when a blur event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onBlur={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onBlur={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await buttonDataComponent(page).blur();
-    await expect(buttonDataComponent(page)).not.toBeFocused();
-    await expectEventWasCalledOnce(messages, "onBlur");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    await buttonComponent.blur();
+    await expect(buttonComponent).not.toBeFocused();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onKeyDown callback when a keydown event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onKeyDown={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onKeyDown={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).press("Enter");
-    await expectEventWasCalledOnce(messages, "onKeyDown");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.press("Enter");
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onFocus callback when a focus event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onFocus={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onFocus={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await expectEventWasCalledOnce(messages, "onFocus");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    expect(callbackCount).toBe(1);
   });
 });