Merge branch 'master' into text-editor-link-prev-story

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/components/navigation-bar/index.ts

@@ -0,0 +1,7 @@
+import { Page } from "playwright-core";
+import NAVIGATION_BAR from "./locators";
+
+// component preview locators
+const navigationBar = (page: Page) => page.locator(NAVIGATION_BAR);
+
+export default navigationBar;

playwright/components/navigation-bar/locators.ts

@@ -0,0 +1,4 @@
+// component preview locators
+const NAVIGATION_BAR = '[data-component="navigation-bar"]';
+
+export default NAVIGATION_BAR;

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
+        );
       });
     }
   );