diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx index bedc191887..f26920ff84 100644 --- a/src/components/accordion/accordion.pw.tsx +++ b/src/components/accordion/accordion.pw.tsx @@ -262,8 +262,8 @@ test.describe("should render Accordion component", () => { await mount(); const cssHeight = await getStyle(accordionTitleContainer(page), "height"); - await expect(parseInt(cssHeight)).toBeLessThanOrEqual(height + 1); - await expect(parseInt(cssHeight)).toBeGreaterThanOrEqual(height - 1); + expect(parseInt(cssHeight)).toBeLessThanOrEqual(height + 1); + expect(parseInt(cssHeight)).toBeGreaterThanOrEqual(height - 1); }); }); @@ -403,7 +403,7 @@ test.describe("should render Accordion component", () => { ); const cssWidth = await getStyle(accordionTitleContainer(page), "width"); - await expect(cssWidth).toContain(width); + expect(cssWidth).toContain(width); }); }); diff --git a/src/components/action-popover/action-popover.pw.tsx b/src/components/action-popover/action-popover.pw.tsx index d6efc078fd..6f228fd916 100644 --- a/src/components/action-popover/action-popover.pw.tsx +++ b/src/components/action-popover/action-popover.pw.tsx @@ -73,9 +73,9 @@ const subMenuOption = ["Sub Menu 1", "Sub Menu 2", "Sub Menu 3"] as const; test.describe("check functionality for ActionPopover component", () => { test("should render component", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toBeVisible(); }); @@ -94,13 +94,13 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -114,7 +114,7 @@ test.describe("check functionality for ActionPopover component", () => { const actionPopoverButtonElement = actionPopoverButton(page).first(); await actionPopoverButtonElement.press("ArrowUp"); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText("Download CSV"); await expect(focusedElement).toBeVisible(); @@ -127,12 +127,11 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = - await actionPopoverButton(page).first(); + const actionPopoverButtonElement = actionPopoverButton(page).first(); await actionPopoverButtonElement.press(key); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText("Email Invoice"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toBeVisible(); }); }); @@ -143,13 +142,13 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("Home"); await expect(focusedElement).toContainText("Email Invoice"); }); @@ -160,13 +159,13 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); for (let i = 0; i < 2; i++) { await focusedElement.press("ArrowDown"); @@ -182,9 +181,9 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press(key); await expect(focusedElement).toContainText("Delete"); }); @@ -196,13 +195,13 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); await focusedElement.press("End"); await expect(focusedElement).toContainText("Sub Menu 2"); @@ -219,48 +218,48 @@ test.describe("check functionality for ActionPopover component", () => { await mount(); await page.evaluate(() => window.scrollTo(0, 1000)); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toBeVisible(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText("Print"); const scrollPosition = await page.evaluate(() => window.scrollY); - await expect(scrollPosition).not.toBe(0); + expect(scrollPosition).not.toBe(0); }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 test.skip("should close using Tab key", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("Tab"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 test.skip("should close using ShiftTab key", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("Shift+Tab"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 test.skip("should close using ESC key", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("Escape"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); @@ -270,12 +269,12 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); await focusedElement.press("Escape"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); @@ -285,16 +284,16 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); await page.locator("*:focus").press("Escape"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); @@ -303,18 +302,18 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await page.locator("body").click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); test("should close by clicking onto Open icon", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.dblclick(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); @@ -333,15 +332,15 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press(key); } - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toBeVisible(); - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(innerText); }); }); @@ -355,14 +354,13 @@ test.describe("check functionality for ActionPopover component", () => { // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 test.skip(`should focus ${innerText} element`, async ({ mount, page }) => { await mount(); - const actionPopoverButtonElementEq0 = - await actionPopoverButton(page).nth(0); + const actionPopoverButtonElementEq0 = actionPopoverButton(page).nth(0); await actionPopoverButtonElementEq0.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); for (let i = 0; i < times; i++) { await focusedElement.press("ArrowDown"); @@ -376,14 +374,13 @@ test.describe("check functionality for ActionPopover component", () => { ).forEach(([innerText, times]) => { test(`should not focus ${innerText} element`, async ({ mount, page }) => { await mount(); - const actionPopoverButtonElementEq0 = - await actionPopoverButton(page).nth(0); + const actionPopoverButtonElementEq0 = actionPopoverButton(page).nth(0); await actionPopoverButtonElementEq0.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); for (let i = 0; i < times; i++) { await focusedElement.press("ArrowDown"); @@ -403,19 +400,17 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); - const submenuItem = await getDataElementByValue(page, "submenu1").nth( - position, - ); + const submenuItem = getDataElementByValue(page, "submenu1").nth(position); await submenuItem.press("Enter"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); }); @@ -431,19 +426,19 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); if (shouldPressDownArrow) { await focusedElement.press("ArrowDown"); } await focusedElement.press("ArrowRight"); - const submenu = await actionPopoverSubmenuByIndex(page, 1); + const submenu = actionPopoverSubmenuByIndex(page, 1); await expect(submenu).not.toBeVisible(); }); }); @@ -459,19 +454,19 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); if (shouldPressDownArrow) { await focusedElement.press("ArrowDown"); } await focusedElement.press("Escape"); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); }); @@ -482,19 +477,19 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < 2; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowLeft"); for (let i = 0; i < 2; i++) { await focusedElement.press("ArrowDown"); } await focusedElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).not.toBeVisible(); }); }); @@ -508,11 +503,11 @@ test.describe("check functionality for ActionPopover component", () => { , ); - const accordionDefaultTitleElement = await accordionDefaultTitle(page); + const accordionDefaultTitleElement = accordionDefaultTitle(page); await accordionDefaultTitleElement.press("Enter"); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toBeVisible(); }); @@ -557,12 +552,12 @@ test.describe("check functionality for ActionPopover component", () => { , ); - const accordionDefaultTitleElement = await accordionDefaultTitle(page); + const accordionDefaultTitleElement = accordionDefaultTitle(page); await accordionDefaultTitleElement.press("Enter"); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await page.evaluate(() => window.scrollTo(0, 1000)); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toHaveAttribute( "data-floating-placement", "bottom-end", @@ -587,9 +582,9 @@ test.describe("check functionality for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const submenuItem = await actionPopoverInnerItem(page, index); + const submenuItem = actionPopoverInnerItem(page, index); await submenuItem.hover(); await expect(submenuItem).toHaveCSS( "background-color", @@ -613,13 +608,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -639,13 +634,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowUp"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -664,13 +659,13 @@ test.describe("check functionality for ActionPopover component", () => { , ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -689,13 +684,13 @@ test.describe("check functionality for ActionPopover component", () => { , ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowUp"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -713,13 +708,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -737,13 +732,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowUp"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).toContainText(elementText); }); }); @@ -762,13 +757,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowDown"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).not.toContainText(elementText); }); }); @@ -787,13 +782,13 @@ test.describe("check functionality for ActionPopover component", () => { }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); for (let i = 0; i < times; i++) { - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await focusedElement.press("ArrowUp"); } - const focusedElement = await page.locator("*:focus"); + const focusedElement = page.locator("*:focus"); await expect(focusedElement).not.toContainText(elementText); }); }); @@ -802,9 +797,9 @@ test.describe("check functionality for ActionPopover component", () => { test.describe("check props for ActionPopover component", () => { test("should render with unique id", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverWrapperElement = await actionPopoverWrapper(page); + const actionPopoverWrapperElement = actionPopoverWrapper(page); await expect(actionPopoverWrapperElement).toHaveAttribute( "id", "playwright", @@ -822,9 +817,9 @@ test.describe("check props for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toHaveAttribute( "data-floating-placement", placement, @@ -834,9 +829,9 @@ test.describe("check props for ActionPopover component", () => { test("should render with custom button", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await buttonDataComponent(page); + const actionPopoverButtonElement = buttonDataComponent(page); await actionPopoverButtonElement.click(); - const customButton = await actionPopoverWrapper(page).locator( + const customButton = actionPopoverWrapper(page).locator( '[data-component="button"]', ); await expect(customButton).toBeVisible(); @@ -844,11 +839,11 @@ test.describe("check props for ActionPopover component", () => { test("should render with icons within a submenu", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); const actionPopoverMenuItemIconElement = - await actionPopoverMenuItemIcon(page).nth(0); - await expect(await actionPopoverMenuItemIconElement.count()).toBe(1); + actionPopoverMenuItemIcon(page).nth(0); + expect(await actionPopoverMenuItemIconElement.count()).toBe(1); }); [ @@ -860,9 +855,9 @@ test.describe("check props for ActionPopover component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const actionPopoverItem = await actionPopover(page) + const actionPopoverItem = actionPopover(page) .first() .locator("button") .first(); @@ -884,9 +879,9 @@ test.describe("check props for ActionPopover component", () => { await mount( , ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemChevron = await actionPopoverMenuItemChevron(page).first(); + const itemChevron = actionPopoverMenuItemChevron(page).first(); await expect(itemChevron).toHaveAttribute("type", chevronType); }); }); @@ -925,11 +920,11 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const clickedItem = await actionPopoverInnerItem(page, index); + const clickedItem = actionPopoverInnerItem(page, index); await clickedItem.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -943,11 +938,11 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const activatedItem = await actionPopoverInnerItem(page, index); + const activatedItem = actionPopoverInnerItem(page, index); await activatedItem.press("Enter"); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -961,13 +956,13 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const submenuTrigger = await actionPopoverInnerItem(page, 2); + const submenuTrigger = actionPopoverInnerItem(page, 2); await submenuTrigger.hover(); - const submenuItem = await actionPopoverSubmenu(page, index); + const submenuItem = actionPopoverSubmenu(page, index); await submenuItem.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -980,7 +975,7 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await page.keyboard.press("ArrowDown"); await page.keyboard.press("ArrowDown"); @@ -989,7 +984,7 @@ test.describe("check events for ActionPopover component", () => { await page.keyboard.press("ArrowDown"); } await page.keyboard.press("Enter"); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -1002,9 +997,9 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onClose callback when menu is closed by a click event", async ({ @@ -1016,9 +1011,9 @@ test.describe("check events for ActionPopover component", () => { callbackCount += 1; }; await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.dblclick(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -1039,23 +1034,23 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition={position} />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-left", "8px"); const plTokens = await getDesignTokensByCssProperty( page, itemText, "padding-left", ); - await expect(plTokens[0]).toBe("--spacing100"); + expect(plTokens[0]).toBe("--spacing100"); await expect(itemText).toHaveCSS("padding-right", "8px"); const prTokens = await getDesignTokensByCssProperty( page, itemText, "padding-right", ); - await expect(prTokens[0]).toBe("--spacing100"); + expect(prTokens[0]).toBe("--spacing100"); }); }); @@ -1069,16 +1064,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="left" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-left", "32px"); const plTokens = await getDesignTokensByCssProperty( page, itemText, "padding-left", ); - await expect(plTokens[0]).toBe("--spacing400"); + expect(plTokens[0]).toBe("--spacing400"); }); test("when horizontalAlignment is right, submenuPosition is right and Menu Item children have some submenus and no icons, then padding-right is --spacing400", async ({ @@ -1091,16 +1086,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="right" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-right", "32px"); const prTokens = await getDesignTokensByCssProperty( page, itemText, "padding-right", ); - await expect(prTokens[0]).toBe("--spacing400"); + expect(prTokens[0]).toBe("--spacing400"); }); test("when horizontalAlignment is left, submenuPosition is left and Menu Item children have submenus and some icons, then padding-left is --spacing600", async ({ @@ -1113,16 +1108,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="left" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-left", "48px"); const plTokens = await getDesignTokensByCssProperty( page, itemText, "padding-left", ); - await expect(plTokens[0]).toBe("--spacing600"); + expect(plTokens[0]).toBe("--spacing600"); }); test("when horizontalAlignment is right, submenuPosition is right and Menu Item children have submenus and some icons, then padding-right is --spacing600", async ({ @@ -1135,16 +1130,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="right" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-right", "48px"); const prTokens = await getDesignTokensByCssProperty( page, itemText, "padding-right", ); - await expect(prTokens[0]).toBe("--spacing600"); + expect(prTokens[0]).toBe("--spacing600"); }); test("when horizontalAlignment is left, submenuPosition is left and Menu Item children are variable, then padding-left is --spacing900", async ({ @@ -1157,16 +1152,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="left" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-left", "72px"); const plTokens = await getDesignTokensByCssProperty( page, itemText, "padding-left", ); - await expect(plTokens[0]).toBe("--spacing900"); + expect(plTokens[0]).toBe("--spacing900"); }); test("when horizontalAlignment is right, submenuPosition is right and Menu Item children are variable, then padding-right is --spacing900", async ({ @@ -1179,16 +1174,16 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition="right" />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).first(); + const itemText = actionPopoverMenuItemInnerText(page).first(); await expect(itemText).toHaveCSS("padding-right", "72px"); const prTokens = await getDesignTokensByCssProperty( page, itemText, "padding-right", ); - await expect(prTokens[0]).toBe("--spacing900"); + expect(prTokens[0]).toBe("--spacing900"); }); ( @@ -1209,23 +1204,23 @@ test.describe("padding checks on 'StyledMenuItemInnerText'", () => { submenuPosition={position} />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const itemText = await actionPopoverMenuItemInnerText(page).nth(index); + const itemText = actionPopoverMenuItemInnerText(page).nth(index); await expect(itemText).toHaveCSS("padding-left", "0px"); const plTokens = await getDesignTokensByCssProperty( page, itemText, "padding-left", ); - await expect(plTokens[0]).toBe("--spacing000"); + expect(plTokens[0]).toBe("--spacing000"); await expect(itemText).toHaveCSS("padding-right", "0px"); const prTokens = await getDesignTokensByCssProperty( page, itemText, "padding-right", ); - await expect(prTokens[0]).toBe("--spacing000"); + expect(prTokens[0]).toBe("--spacing000"); }); }); }); @@ -1240,9 +1235,9 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const menuItem = await getDataElementByValue(page, "menu-item1"); + const menuItem = getDataElementByValue(page, "menu-item1"); await expect(menuItem).toHaveCSS("justify-content", itemAlignment); }); }); @@ -1261,9 +1256,9 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => { submenuPosition={position} />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const menuItem = await getDataElementByValue(page, "menu-item1"); + const menuItem = getDataElementByValue(page, "menu-item1"); await expect(menuItem).toHaveCSS("justify-content", itemAlignment); }); }); @@ -1282,9 +1277,9 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => { submenuPosition={position} />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const menuItem = await getDataElementByValue(page, "menu-item1"); + const menuItem = getDataElementByValue(page, "menu-item1"); await expect(menuItem).toHaveCSS("justify-content", itemAlignment); }); }); @@ -1293,16 +1288,16 @@ test.describe("justify-content checks on 'StyledMenuItem'", () => { test.describe("padding checks on 'MenuItemIcon'", () => { test("padding is: --spacing100", async ({ mount, page }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const icon = await actionPopoverMenuItemIcon(page).nth(0); + const icon = actionPopoverMenuItemIcon(page).nth(0); await expect(icon).toHaveCSS("padding", "8px"); const paddingTokens = await getDesignTokensByCssProperty( page, icon, "padding", ); - await expect(paddingTokens.join(" ")).toEqual( + expect(paddingTokens.join(" ")).toEqual( "--spacing100 --spacing100 --spacing100 --spacing100", ); }); @@ -1343,16 +1338,16 @@ test.describe("padding checks on 'MenuItemIcon'", () => { horizontalAlignment={alignment} />, ); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const icon = await actionPopoverMenuItemIcon(page).nth(0); + const icon = actionPopoverMenuItemIcon(page).nth(0); await expect(icon).toHaveCSS("padding", padding); const paddingTokens = await getDesignTokensByCssProperty( page, icon, "padding", ); - await expect(paddingTokens.join(" ")).toEqual(spacing); + expect(paddingTokens.join(" ")).toEqual(spacing); }); }); }); @@ -1363,11 +1358,11 @@ test.describe("rounded-corners", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.focus(); await expect(actionPopoverButtonElement).toHaveCSS("border-radius", "4px"); await actionPopoverButtonElement.click(); - const actionPopoverElement = await actionPopover(page).first(); + const actionPopoverElement = actionPopover(page).first(); await expect(actionPopoverElement).toHaveCSS("border-radius", "8px"); }); }); @@ -1423,7 +1418,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1433,7 +1428,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1443,7 +1438,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1453,7 +1448,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1463,7 +1458,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1473,7 +1468,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1483,7 +1478,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1493,7 +1488,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1503,9 +1498,9 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const submenuTrigger = await actionPopoverInnerItem(page, 0); + const submenuTrigger = actionPopoverInnerItem(page, 0); await submenuTrigger.click(); await checkAccessibility(page); }); @@ -1515,7 +1510,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1525,7 +1520,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1535,7 +1530,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1545,9 +1540,9 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const submenuTrigger = await actionPopoverInnerItem(page, 0); + const submenuTrigger = actionPopoverInnerItem(page, 0); await submenuTrigger.click(); await checkAccessibility(page); }); @@ -1557,9 +1552,9 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); - const submenuTrigger = await actionPopoverInnerItem(page, 0); + const submenuTrigger = actionPopoverInnerItem(page, 0); await submenuTrigger.click(); await checkAccessibility(page); }); @@ -1569,7 +1564,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1579,7 +1574,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1589,7 +1584,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const accordionIcon = await getDataElementByValue(page, "accordion-icon"); + const accordionIcon = getDataElementByValue(page, "accordion-icon"); await accordionIcon.click(); await checkAccessibility(page); }); @@ -1599,7 +1594,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1609,7 +1604,7 @@ test.describe("Accessibility tests for ActionPopover", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await checkAccessibility(page); }); @@ -1621,12 +1616,12 @@ test.describe("when nested inside a Dialog component", () => { page, }) => { await mount(); - const actionPopoverButtonElement = await actionPopoverButton(page).nth(0); + const actionPopoverButtonElement = actionPopoverButton(page).nth(0); await actionPopoverButtonElement.click(); await page.keyboard.press("Escape"); - const actionPopoverElement = await actionPopover(page); + const actionPopoverElement = actionPopover(page); await expect(actionPopoverElement).not.toBeVisible(); - const dialogElement = await alertDialogPreview(page); + const dialogElement = alertDialogPreview(page); await expect(dialogElement).toBeVisible(); await page.keyboard.press("Escape"); await expect(dialogElement).not.toBeVisible(); diff --git a/src/components/box/box.pw.tsx b/src/components/box/box.pw.tsx index 6b4672a70b..96c021fc7b 100644 --- a/src/components/box/box.pw.tsx +++ b/src/components/box/box.pw.tsx @@ -90,7 +90,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -101,7 +101,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -112,7 +112,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -123,7 +123,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -134,7 +134,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -145,7 +145,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("background-color", rgbValue); }); }); @@ -153,7 +153,7 @@ test.describe("should render Box component", () => { ["0.1", "0.5", "1"].forEach((opacity) => { test(`should verify opacity is ${opacity}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("opacity", opacity); }); }); @@ -227,7 +227,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately( boxElement, "width", @@ -247,7 +247,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately( boxElement, "width", @@ -265,7 +265,7 @@ test.describe("should render Box component", () => { (display) => { test(`should verify display is ${display}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveAttribute("display", display); await expect(boxElement).toHaveCSS("display", display); }); @@ -287,7 +287,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("vertical-align", alignment); }); }); @@ -295,7 +295,7 @@ test.describe("should render Box component", () => { ["auto", "clip", "hidden", "scroll", "visible"].forEach((overflow) => { test(`should verify overflow is ${overflow}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveAttribute("overflow", overflow); await expect(boxElement).toHaveCSS("overflow", overflow); }); @@ -308,7 +308,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("overflow-x", overflow); }); }, @@ -321,7 +321,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("overflow-y", overflow); }); }, @@ -336,7 +336,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -352,7 +352,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -366,7 +366,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -380,7 +380,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -396,7 +396,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -410,7 +410,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "width", actualWidth); }); }); @@ -424,7 +424,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "height", actualHeight); }); }); @@ -440,7 +440,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "height", actualHeight); }); }); @@ -454,7 +454,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "height", actualHeight); }); }); @@ -470,7 +470,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await assertCssValueIsApproximately(boxElement, "height", actualHeight); }); }); @@ -482,7 +482,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("align-items", alignment); }); }, @@ -503,7 +503,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("align-content", alignment); }); }); @@ -522,7 +522,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("justify-items", justified); }); }); @@ -543,7 +543,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("justify-content", justified); }); }); @@ -551,7 +551,7 @@ test.describe("should render Box component", () => { (["nowrap", "wrap", "wrap-reverse"] as const).forEach((wrap) => { test(`should verify flex wrap is ${wrap}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-wrap", wrap); }); }); @@ -563,7 +563,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-direction", direction); }); }, @@ -573,7 +573,7 @@ test.describe("should render Box component", () => { (flex) => { test(`should verify flex is ${flex}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-basis", flex); }); }, @@ -588,7 +588,7 @@ test.describe("should render Box component", () => { ).forEach(([value, growText]) => { test(`should verify flex grow is ${value}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-grow", growText); }); }); @@ -602,7 +602,7 @@ test.describe("should render Box component", () => { ).forEach(([value, shrinkText]) => { test(`should verify flex shrink is ${value}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-shrink", shrinkText); }); }); @@ -611,7 +611,7 @@ test.describe("should render Box component", () => { (basis) => { test(`should verify flex basis is ${basis}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("flex-basis", basis); }); }, @@ -630,7 +630,7 @@ test.describe("should render Box component", () => { ].forEach((justify) => { test(`should verify justifySelf is ${justify}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("justify-self", justify); }); }); @@ -646,7 +646,7 @@ test.describe("should render Box component", () => { ].forEach((align) => { test(`should verify alignSelf is ${align}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("align-self", align); }); }); @@ -660,7 +660,7 @@ test.describe("should render Box component", () => { ).forEach(([value, orderText]) => { test(`should verify order is ${value}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("order", orderText); }); }); @@ -668,7 +668,7 @@ test.describe("should render Box component", () => { (["break-word", "anywhere"] as const).forEach((wrap) => { test(`should verify overflow wrap is ${wrap}`, async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("overflow-wrap", wrap); }); }); @@ -709,7 +709,7 @@ test.describe("should render Box component", () => { position={value} />, ); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("top", "0px"); await expect(boxElement).toHaveCSS("bottom", "0px"); await expect(boxElement).toHaveCSS("right", "0px"); @@ -725,7 +725,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS( "row-gap", typeof gap === "number" ? `${gap * 8}px` : gap, @@ -743,7 +743,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS( "row-gap", typeof rowGap === "number" ? `${rowGap * 8}px` : rowGap, @@ -758,7 +758,7 @@ test.describe("should render Box component", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("row-gap", "64px"); await expect(boxElement).toHaveCSS( "column-gap", @@ -769,7 +769,7 @@ test.describe("should render Box component", () => { test("should allow custom boxShadow prop values", async ({ mount, page }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS( "box-shadow", "rgba(0, 20, 30, 0.04) 0px 10px 40px 0px, rgba(0, 20, 30, 0.1) 0px 50px 80px 0px", @@ -874,7 +874,7 @@ test.describe("Accessibility tests for Box", () => { page, }) => { await mount(); - const boxElement = await getDataElementByValue(page, "box"); + const boxElement = getDataElementByValue(page, "box"); await expect(boxElement).toHaveCSS("border-radius", expected); }); }); diff --git a/src/components/card/card.pw.tsx b/src/components/card/card.pw.tsx index c16115dfc7..391f26f4b3 100644 --- a/src/components/card/card.pw.tsx +++ b/src/components/card/card.pw.tsx @@ -213,9 +213,9 @@ test.describe("Check Card component properties", () => { .locator('[data-component="card"]') .count(); - await expect(resultForColumnOne).toEqual(countOfFirstColumn); + expect(resultForColumnOne).toEqual(countOfFirstColumn); - await expect(resultForColumnTwo).toEqual(countOfSecondColumn); + expect(resultForColumnTwo).toEqual(countOfSecondColumn); }); }, ); diff --git a/src/components/date-range/date-range.pw.tsx b/src/components/date-range/date-range.pw.tsx index fe3620bfef..d4aae3548a 100644 --- a/src/components/date-range/date-range.pw.tsx +++ b/src/components/date-range/date-range.pw.tsx @@ -474,7 +474,7 @@ test.describe("Event tests for DateRange component", () => { getDataElementByValue(page, "input").nth(inputIndex); await getDataElementByValueElementInputEqInputIndex.clear(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); }); @@ -495,7 +495,7 @@ test.describe("Event tests for DateRange component", () => { await textboxInput(page).nth(inputIndex).type(value); - await expect(callbackCount).toEqual(value.length); + expect(callbackCount).toEqual(value.length); }); }); }); @@ -517,7 +517,7 @@ test.describe("Event tests for DateRange component", () => { await textboxInput(page).nth(START_DATE_RANGE_INDEX).type("1"); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); }); diff --git a/src/components/detail/detail.pw.tsx b/src/components/detail/detail.pw.tsx index c7f83b1a35..038342bda7 100644 --- a/src/components/detail/detail.pw.tsx +++ b/src/components/detail/detail.pw.tsx @@ -22,7 +22,7 @@ test.describe("check Detail component text input", () => { }) => { await mount({text}); - await expect(await childrenPreview(page)).toHaveText(text); + await expect(childrenPreview(page)).toHaveText(text); }); test(`check Detail footnote on preview is ${text} footnote value`, async ({ @@ -31,7 +31,7 @@ test.describe("check Detail component text input", () => { }) => { await mount(); - await expect(await footnotePreview(page)).toHaveText(text); + await expect(footnotePreview(page)).toHaveText(text); }); }); }); @@ -42,9 +42,9 @@ test("should set Detail icon on preview to chevron_up", async ({ }) => { await mount(); - await expect(await icon(page)).toHaveAttribute("type", "chevron_up"); + await expect(icon(page)).toHaveAttribute("type", "chevron_up"); const isVisible = await icon(page).isVisible(); - await expect(await isVisible).toBeTruthy(); + expect(isVisible).toBeTruthy(); }); test.describe("Accessibility tests for Detail component", () => { diff --git a/src/components/file-input/file-input.pw.tsx b/src/components/file-input/file-input.pw.tsx index ee5b119997..a2a8ebb9ee 100644 --- a/src/components/file-input/file-input.pw.tsx +++ b/src/components/file-input/file-input.pw.tsx @@ -138,7 +138,7 @@ test.describe("FileInput component", () => { page, }) => { await mount(); - const input = await hiddenInput(page, "File input"); + const input = hiddenInput(page, "File input"); await expect(input).toHaveAttribute("accept", accept); }); }); @@ -149,7 +149,7 @@ test.describe("FileInput component", () => { page, }) => { await mount(); - const buttonElement = await selectFileButton(page, testVal); + const buttonElement = selectFileButton(page, testVal); await expect(buttonElement).toBeVisible(); }); }); @@ -170,9 +170,9 @@ test.describe("FileInput component", () => { page, }) => { await mount(); - const input = await hiddenInput(page, testVal); + const input = hiddenInput(page, testVal); await expect(input).toHaveCount(1); - const labelElement = await label(page); + const labelElement = label(page); await expect(labelElement).toHaveText(testVal); await expect(labelElement).toBeVisible(); }); @@ -184,7 +184,7 @@ test.describe("FileInput component", () => { page, }) => { await mount(); - const inputHintElement = await page.getByText(testVal); + const inputHintElement = page.getByText(testVal); await expect(inputHintElement).toBeVisible(); }); }); @@ -199,7 +199,7 @@ test.describe("FileInput component", () => { .getPropertyValue("border-color"), ); // TODO: should check token value (--colorsSemanticNegative500), rewrite this when we have the equivalent playwright util merged in - await expect(borderColor).toBe("rgb(203, 55, 74)"); + expect(borderColor).toBe("rgb(203, 55, 74)"); }); test("should render with string error prop", async ({ mount, page }) => { @@ -212,8 +212,8 @@ test.describe("FileInput component", () => { .getPropertyValue("border-color"), ); // TODO: should check token value (--colorsSemanticNegative500), rewrite this when we have the equivalent playwright util merged in - await expect(borderColor).toBe("rgb(203, 55, 74)"); - const errorMessage = await page.getByText("error text"); + expect(borderColor).toBe("rgb(203, 55, 74)"); + const errorMessage = page.getByText("error text"); await expect(errorMessage).toBeVisible(); await expect(errorMessage).toHaveCSS("color", "rgb(203, 55, 74)"); }); @@ -221,7 +221,7 @@ test.describe("FileInput component", () => { specialCharacters.forEach((testVal) => { test(`should render with id '${testVal}'`, async ({ mount, page }) => { await mount(); - const input = await hiddenInput(page, "File input"); + const input = hiddenInput(page, "File input"); await expect(input).toHaveAttribute("id", testVal); }); }); @@ -330,12 +330,12 @@ test.describe("with uploadStatus prop", () => { uploadStatus={{ ...uploadingStatusProps, onAction }} />, ); - const actionButton = await page.getByRole("button", { + const actionButton = page.getByRole("button", { name: "Cancel upload", }); await expect(actionButton).toBeVisible(); await actionButton.click(); - await expect(clickCount).toBe(1); + expect(clickCount).toBe(1); }); test("in the uploading state, it renders the file name, but not as a link", async ({ @@ -371,9 +371,9 @@ test.describe("with uploadStatus prop", () => { uploadStatus={{ ...uploadingStatusProps, progress: undefined }} />, ); - const loaderBar = await page.getByRole("progressbar"); + const loaderBar = page.getByRole("progressbar"); await expect(loaderBar).toBeVisible(); - await expect(await loaderBar.getAttribute("aria-valuenow")).toBeNull(); + expect(await loaderBar.getAttribute("aria-valuenow")).toBeNull(); }); test("in the completed state, it renders a status message", async ({ @@ -397,12 +397,12 @@ test.describe("with uploadStatus prop", () => { uploadStatus={{ ...completedStatusProps, onAction }} />, ); - const actionButton = await page.getByRole("button", { + const actionButton = page.getByRole("button", { name: "Delete file", }); await expect(actionButton).toBeVisible(); await actionButton.click(); - await expect(clickCount).toBe(1); + expect(clickCount).toBe(1); }); test("in the completed state, it renders the file name as a link with the provided props", async ({ @@ -410,7 +410,7 @@ test.describe("with uploadStatus prop", () => { page, }) => { await mount(); - const link = await page.getByRole("link", { name: "foo.pdf" }); + const link = page.getByRole("link", { name: "foo.pdf" }); await expect(link).toBeVisible(); await expect(link).toHaveAttribute("href", "http://carbon.sage.com"); await expect(link).toHaveAttribute("target", "_blank"); @@ -438,7 +438,7 @@ test.describe("with uploadStatus prop", () => { page, }) => { await mount(); - const link = await page.getByRole("link", { name: "foo.pdf" }); + const link = page.getByRole("link", { name: "foo.pdf" }); await expect(link).toBeVisible(); await expect(link).toHaveAttribute("href", "http://carbon.sage.com"); await expect(link).toHaveAttribute("target", "_blank"); @@ -458,12 +458,12 @@ test.describe("with uploadStatus prop", () => { uploadStatus={{ ...previouslyStatusProps, onAction }} />, ); - const actionButton = await page.getByRole("button", { + const actionButton = page.getByRole("button", { name: "Delete file", }); await expect(actionButton).toBeVisible(); await actionButton.click(); - await expect(clickCount).toBe(1); + expect(clickCount).toBe(1); }); test("in the previously state, it does not render a progress bar", async ({ @@ -493,10 +493,10 @@ test.describe("with uploadStatus prop", () => { await mount( , ); - const actionButton = await page.getByRole("button", { name: "Clear" }); + const actionButton = page.getByRole("button", { name: "Clear" }); await expect(actionButton).toBeVisible(); await actionButton.click(); - await expect(clickCount).toBe(1); + expect(clickCount).toBe(1); }); test("in the error state, it renders the file name, but not as a link", async ({ @@ -558,8 +558,8 @@ test.describe("interactions", () => { fileName: "README.md", fileType: "text/markdown", }); - await expect(onChangeCalls.length).toBe(1); - await expect(onChangeCalls[0]).toMatchObject({ + expect(onChangeCalls.length).toBe(1); + expect(onChangeCalls[0]).toMatchObject({ name: "README.md", type: "text/markdown", }); @@ -585,7 +585,7 @@ test.describe("interactions", () => { .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("border-width"), ); - await expect(borderWidth).toBe("2px"); + expect(borderWidth).toBe("2px"); }); test("when dragging a file off the document, the component border returns to the original thickness", async ({ @@ -616,7 +616,7 @@ test.describe("interactions", () => { .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("border-width"), ); - await expect(borderWidth).toBe("1px"); + expect(borderWidth).toBe("1px"); }); test("after dropping a file, the component border returns to the original thickness", async ({ @@ -647,7 +647,7 @@ test.describe("interactions", () => { .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("border-width"), ); - await expect(borderWidth).toBe("1px"); + expect(borderWidth).toBe("1px"); }); test("while dragging a file with the component in the error state, the border color changes", async ({ @@ -671,7 +671,7 @@ test.describe("interactions", () => { .getPropertyValue("border-color"), ); // TODO: should check token value (--colorsSemanticNegative600), rewrite this when we have the equivalent playwright util merged in - await expect(borderColor).toBe("rgb(162, 44, 59)"); + expect(borderColor).toBe("rgb(162, 44, 59)"); }); test("while dragging a file over the component, the background color changes", async ({ @@ -694,7 +694,7 @@ test.describe("interactions", () => { .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("background-color"), ); - await expect(backgroundColor).toBe("rgb(204, 214, 219)"); + expect(backgroundColor).toBe("rgb(204, 214, 219)"); }); }); diff --git a/src/components/heading/heading.pw.tsx b/src/components/heading/heading.pw.tsx index 6d08619ebc..9c851617a0 100644 --- a/src/components/heading/heading.pw.tsx +++ b/src/components/heading/heading.pw.tsx @@ -127,8 +127,8 @@ test.describe("Heading component", () => { }) => { await mount(); - const linkWrapper = await link(page); - const backLinkAnchor = await linkWrapper.locator("a"); + const linkWrapper = link(page); + const backLinkAnchor = linkWrapper.locator("a"); await backLinkAnchor.focus(); await expect(backLinkAnchor).toHaveCSS( "box-shadow", diff --git a/src/components/hr/hr.pw.tsx b/src/components/hr/hr.pw.tsx index 6b3567e40e..4540ddd9de 100644 --- a/src/components/hr/hr.pw.tsx +++ b/src/components/hr/hr.pw.tsx @@ -31,7 +31,7 @@ test.describe("Hr component", () => { mount, page, }) => { - await await mount( + await mount( { await dataComponentButtonByText(page, "Go to second page").click(); const classAttribute = await pageComponent.getAttribute("class"); - await expect(classAttribute).toContain(transition); + expect(classAttribute).toContain(transition); }); }); diff --git a/src/components/popover-container/popover-container.pw.tsx b/src/components/popover-container/popover-container.pw.tsx index 1021f0e5ce..ad5f3144e4 100644 --- a/src/components/popover-container/popover-container.pw.tsx +++ b/src/components/popover-container/popover-container.pw.tsx @@ -279,9 +279,9 @@ test.describe("Check props of Popover Container component", () => { ); const positionY = await getYValue(popoverContainerContentElement); - await expect(positionBottom).toBeLessThan(bottomValueMin); - await expect(positionTop).toBeLessThan(yAndTopValueMin); - await expect(positionY).toBeLessThan(yAndTopValueMin); + expect(positionBottom).toBeLessThan(bottomValueMin); + expect(positionTop).toBeLessThan(yAndTopValueMin); + expect(positionY).toBeLessThan(yAndTopValueMin); }); }); @@ -400,7 +400,7 @@ test.describe("Check props of Popover Container component", () => { const popoverSettingsIconElement = popoverSettingsIcon(page); await popoverSettingsIconElement.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); keysToTrigger.forEach((key) => { @@ -420,7 +420,7 @@ test.describe("Check props of Popover Container component", () => { const popoverSettingsIconElement = popoverSettingsIcon(page); await popoverSettingsIconElement.press(key); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -441,7 +441,7 @@ test.describe("Check props of Popover Container component", () => { const popoverCloseIconElement = popoverCloseIcon(page); await popoverCloseIconElement.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); keysToTrigger.forEach((key) => { @@ -462,7 +462,7 @@ test.describe("Check props of Popover Container component", () => { const popoverCloseIconElement = popoverCloseIcon(page); await popoverCloseIconElement.press(key); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -483,7 +483,7 @@ test.describe("Check props of Popover Container component", () => { const popoverContainerElement = popoverContainerComponent(page); await popoverContainerElement.press("Escape"); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onClose callback when a click event is triggered outside the container", async ({ @@ -502,7 +502,7 @@ test.describe("Check props of Popover Container component", () => { await page.locator("body").click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should not call onClose callback when a click event is triggered outside the container and the container is closed", async ({ @@ -521,7 +521,7 @@ test.describe("Check props of Popover Container component", () => { await page.locator("body").click(); - await expect(callbackCount).toBe(0); + expect(callbackCount).toBe(0); }); test("should focus the next element after the open button when user tabs and last element in the container is focused", async ({ diff --git a/src/components/radio-button/radio-button.pw.tsx b/src/components/radio-button/radio-button.pw.tsx index 89b4426efe..f96cd078df 100644 --- a/src/components/radio-button/radio-button.pw.tsx +++ b/src/components/radio-button/radio-button.pw.tsx @@ -57,7 +57,7 @@ const labelContainerWidth = 40; test.describe("should render RadioButton component", () => { test("should render with data-component", async ({ mount, page }) => { await mount(); - const component = await getComponent(page, CHARACTERS.STANDARD); + const component = getComponent(page, CHARACTERS.STANDARD); await expect(component).toHaveAttribute( "data-component", CHARACTERS.STANDARD, @@ -66,7 +66,7 @@ test.describe("should render RadioButton component", () => { test("should render with data-element", async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonComponent(page); + const radiobuttonElement = radiobuttonComponent(page); await expect(radiobuttonElement).toHaveAttribute( "data-element", CHARACTERS.STANDARD, @@ -75,7 +75,7 @@ test.describe("should render RadioButton component", () => { test("should render with data-role", async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonComponent(page); + const radiobuttonElement = radiobuttonComponent(page); await expect(radiobuttonElement).toHaveAttribute( "data-role", CHARACTERS.STANDARD, @@ -88,7 +88,7 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); if (booleanValue) { await expect(radiobuttonElement).toBeChecked(); } else { @@ -100,7 +100,7 @@ test.describe("should render RadioButton component", () => { testData.forEach((label) => { test(`should render with ${label} as a label`, async ({ mount, page }) => { await mount(); - const labelElement = await radiobuttonLabel(page); + const labelElement = radiobuttonLabel(page); await expect(labelElement).toHaveText(label); }); }); @@ -111,7 +111,7 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const fieldHelpElement = await fieldHelpPreview(page); + const fieldHelpElement = fieldHelpPreview(page); await expect(fieldHelpElement).toHaveText(fieldHelp); }); }); @@ -120,7 +120,7 @@ test.describe("should render RadioButton component", () => { await mount( , ); - const fieldHelpElement = await radiobuttonInlineFieldHelp(page); + const fieldHelpElement = radiobuttonInlineFieldHelp(page); await expect(fieldHelpElement).toHaveText("Inline fieldhelp"); }); @@ -130,7 +130,7 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); if (booleanValue) { await expect(radiobuttonElement).toBeDisabled(); } else { @@ -141,13 +141,13 @@ test.describe("should render RadioButton component", () => { test("should render with id", async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await expect(radiobuttonElement).toHaveAttribute("id", CHARACTERS.STANDARD); }); test("should render with name", async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await expect(radiobuttonElement).toHaveAttribute( "name", "radiobutton name", @@ -156,7 +156,7 @@ test.describe("should render RadioButton component", () => { test("should render with value prop", async ({ mount, page }) => { await mount(); - const radiobuttonRoleElement = await radiobuttonRole(page); + const radiobuttonRoleElement = radiobuttonRole(page); await expect(radiobuttonRoleElement).toHaveAttribute( "value", "radiobuttonvalue", @@ -171,7 +171,7 @@ test.describe("should render RadioButton component", () => { ).forEach(([size, heightAndWidth]) => { test(`should render with size set to ${size}`, async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await assertCssValueIsApproximately( radiobuttonElement, "height", @@ -196,13 +196,13 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const radiobuttonLabelElement = await radiobuttonLabel(page); + const radiobuttonLabelElement = radiobuttonLabel(page); const cssPaddingLeft = await radiobuttonLabelElement.evaluate((el) => window .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("padding-left"), ); - await expect(cssPaddingLeft).toBe(padding); + expect(cssPaddingLeft).toBe(padding); }); }); @@ -224,13 +224,13 @@ test.describe("should render RadioButton component", () => { labelWidth === 100 ? radioContainerWidth - radioInputWidth : radioContainerWidth * (labelWidth / 100); - const radiobuttonLabelElement = await radiobuttonLabel(page); + const radiobuttonLabelElement = radiobuttonLabel(page); const cssWidth = await radiobuttonLabelElement.evaluate((el) => window .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("width"), ); - await expect(cssWidth).toBe(`${parentWidth}px`); + expect(cssWidth).toBe(`${parentWidth}px`); }); }); @@ -252,25 +252,25 @@ test.describe("should render RadioButton component", () => { inputWidth === 100 ? radioContainerWidth - labelContainerWidth : radioContainerWidth * (inputWidth / 100); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); const cssWidth = await radiobuttonElement.evaluate((el) => window .getComputedStyle(el.parentElement as HTMLElement) .getPropertyValue("width"), ); - await expect(cssWidth).toBe(`${parentWidth}px`); + expect(cssWidth).toBe(`${parentWidth}px`); }); }); test("should render with autoFocus", async ({ mount, page }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await expect(radiobuttonElement).toBeFocused(); }); test("should render with error", async ({ mount, page }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page); + const radiobuttonSvgElement = radiobuttonSvg(page); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.ERROR, @@ -279,7 +279,7 @@ test.describe("should render RadioButton component", () => { test("should render with warning", async ({ mount, page }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page); + const radiobuttonSvgElement = radiobuttonSvg(page); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.WARNING, @@ -288,7 +288,7 @@ test.describe("should render RadioButton component", () => { test("should render with info", async ({ mount, page }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page); + const radiobuttonSvgElement = radiobuttonSvg(page); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.INFO, @@ -297,13 +297,13 @@ test.describe("should render RadioButton component", () => { test("should render with error message", async ({ mount, page }) => { await mount(); - const radiobuttonErrorIcon = await radiobuttonIcon(page); + const radiobuttonErrorIcon = radiobuttonIcon(page); await expect(radiobuttonErrorIcon).toHaveAttribute("data-element", "error"); }); test("should render with warning message", async ({ mount, page }) => { await mount(); - const radiobuttonWarningIcon = await radiobuttonIcon(page); + const radiobuttonWarningIcon = radiobuttonIcon(page); await expect(radiobuttonWarningIcon).toHaveAttribute( "data-element", "warning", @@ -312,7 +312,7 @@ test.describe("should render RadioButton component", () => { test("should render with info message", async ({ mount, page }) => { await mount(); - const radiobuttonInfoIcon = await radiobuttonIcon(page); + const radiobuttonInfoIcon = radiobuttonIcon(page); await expect(radiobuttonInfoIcon).toHaveAttribute("data-element", "info"); }); @@ -332,7 +332,7 @@ test.describe("should render RadioButton component", () => { reverse={reverseValue} />, ); - const expectedLabelChild = await radiobuttonComponent(page) + const expectedLabelChild = radiobuttonComponent(page) .locator("div > div > div > div:not(input + div)") .nth(position); await expect(expectedLabelChild).toHaveText("Radiobutton Label"); @@ -350,9 +350,9 @@ test.describe("should render RadioButton component", () => { tooltipPosition={position} />, ); - const radiobuttonIconElement = await radiobuttonIcon(page); + const radiobuttonIconElement = radiobuttonIcon(page); await radiobuttonIconElement.hover(); - const tooltipElement = await tooltipPreview(page); + const tooltipElement = tooltipPreview(page); await expect(tooltipElement).toHaveText("Tooltip info"); await expect(tooltipElement).toHaveAttribute("data-placement", position); }); @@ -363,7 +363,7 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await expect(radiobuttonElement).toBeChecked(); await expect(radiobuttonElement).toHaveCSS("color", COLOR.BLACK); }); @@ -373,7 +373,7 @@ test.describe("should render RadioButton component", () => { page, }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page); + const radiobuttonSvgElement = radiobuttonSvg(page); await expect(radiobuttonSvgElement).toHaveCSS("border-radius", "50%"); }); }); @@ -388,10 +388,10 @@ test.describe("should render RadioButton component and check events", () => { callbackCount += 1; }; await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await radiobuttonElement.focus(); await radiobuttonElement.blur(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onChange callback when a check event is triggered", async ({ @@ -403,9 +403,9 @@ test.describe("should render RadioButton component and check events", () => { callbackCount += 1; }; await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await radiobuttonElement.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onFocus callback when a focus event is triggered", async ({ @@ -417,9 +417,9 @@ test.describe("should render RadioButton component and check events", () => { callbackCount += 1; }; await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await radiobuttonElement.focus(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onClick callback when a click event is triggered", async ({ @@ -431,9 +431,9 @@ test.describe("should render RadioButton component and check events", () => { callbackCount += 1; }; await mount(); - const radiobuttonElement = await radiobuttonRole(page); + const radiobuttonElement = radiobuttonRole(page); await radiobuttonElement.click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -444,7 +444,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page); + const radiobuttonGroupLegendElement = radiobuttonGroupLegend(page); await expect(radiobuttonGroupLegendElement).toHaveText(legendValue); }); }); @@ -454,7 +454,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page).first(); + const radiobuttonSvgElement = radiobuttonSvg(page).first(); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.ERROR, @@ -466,7 +466,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page).first(); + const radiobuttonSvgElement = radiobuttonSvg(page).first(); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.WARNING, @@ -478,7 +478,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonSvgElement = await radiobuttonSvg(page).first(); + const radiobuttonSvgElement = radiobuttonSvg(page).first(); await expect(radiobuttonSvgElement).toHaveCSS( "border-bottom-color", VALIDATION.INFO, @@ -490,7 +490,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonGroupErrorIcon = await radiobuttonGroupIcon(page); + const radiobuttonGroupErrorIcon = radiobuttonGroupIcon(page); await expect(radiobuttonGroupErrorIcon).toHaveAttribute( "data-element", "error", @@ -502,7 +502,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonGroupWarningIcon = await radiobuttonGroupIcon(page); + const radiobuttonGroupWarningIcon = radiobuttonGroupIcon(page); await expect(radiobuttonGroupWarningIcon).toHaveAttribute( "data-element", "warning", @@ -514,7 +514,7 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const radiobuttonGroupInfoIcon = await radiobuttonGroupIcon(page); + const radiobuttonGroupInfoIcon = radiobuttonGroupIcon(page); await expect(radiobuttonGroupInfoIcon).toHaveAttribute( "data-element", "info", @@ -538,7 +538,7 @@ test.describe("Testing RadioButtonGroup component", () => { legendInline />, ); - const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page); + const radiobuttonGroupLegendElement = radiobuttonGroupLegend(page); await expect(radiobuttonGroupLegendElement).toHaveCSS( "justify-content", `flex-${assertion}`, @@ -554,7 +554,7 @@ test.describe("Testing RadioButtonGroup component", () => { await mount( , ); - const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page); + const radiobuttonGroupLegendElement = radiobuttonGroupLegend(page); await expect(radiobuttonGroupLegendElement).toHaveAttribute( "width", String(width), @@ -571,7 +571,7 @@ test.describe("Testing RadioButtonGroup component", () => { , ); - const radiobuttonGroupElement = await radiobuttonGroup(page); + const radiobuttonGroupElement = radiobuttonGroup(page); await expect(radiobuttonGroupElement).toContainText("Don't Know"); }); @@ -592,7 +592,7 @@ test.describe("Testing RadioButtonGroup component", () => { legendInline />, ); - const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page); + const radiobuttonGroupLegendElement = radiobuttonGroupLegend(page); await expect(radiobuttonGroupLegendElement).toHaveCSS( "padding-right", padding, @@ -611,9 +611,9 @@ test.describe("Testing RadioButtonGroup component", () => { tooltipPosition={position} />, ); - const radiobuttonGroupIconElement = await radiobuttonGroupIcon(page); + const radiobuttonGroupIconElement = radiobuttonGroupIcon(page); await radiobuttonGroupIconElement.hover(); - const tooltipPreviewElement = await tooltipPreview(page); + const tooltipPreviewElement = tooltipPreview(page); await expect(tooltipPreviewElement).toHaveText("Something is wrong"); await expect(tooltipPreviewElement).toHaveAttribute( "data-placement", @@ -635,15 +635,15 @@ test.describe("Testing RadioButtonGroup component", () => { page, }) => { await mount(); - const firstRadiobuttonElement = await radiobutton(page, 0); + const firstRadiobuttonElement = radiobutton(page, 0); await expect(firstRadiobuttonElement).toHaveCSS("margin-bottom", "12px"); await expect(firstRadiobuttonElement).toHaveCSS("margin-left", "0px"); - const secondRadiobuttonElement = await radiobutton(page, 1); + const secondRadiobuttonElement = radiobutton(page, 1); await expect(secondRadiobuttonElement).toHaveCSS("margin-bottom", "12px"); await expect(secondRadiobuttonElement).toHaveCSS("margin-left", "32px"); - const thirdRadiobuttonElement = await radiobutton(page, 2); + const thirdRadiobuttonElement = radiobutton(page, 2); await expect(thirdRadiobuttonElement).toHaveCSS("margin-bottom", "0px"); await expect(thirdRadiobuttonElement).toHaveCSS("margin-left", "32px"); }); @@ -666,7 +666,7 @@ test.describe("Testing RadioButtonGroup component", () => { adaptiveSpacingBreakpoint={breakpoint} />, ); - const radiobuttonGroupLegendElement = await radiobuttonGroupLegend(page); + const radiobuttonGroupLegendElement = radiobuttonGroupLegend(page); await expect(radiobuttonGroupLegendElement).toHaveCSS("float", float); }); }); diff --git a/src/components/search/search.pw.tsx b/src/components/search/search.pw.tsx index 904785f66a..ba18c58fae 100644 --- a/src/components/search/search.pw.tsx +++ b/src/components/search/search.pw.tsx @@ -539,7 +539,7 @@ test.describe("Event tests for Search component", () => { const searchButtonElement = searchButton(page); await searchButtonElement.click(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); test("should call onChange callback when a type event is triggered", async ({ @@ -558,7 +558,7 @@ test.describe("Event tests for Search component", () => { const searchDefaultInputElement = searchDefaultInput(page); await searchDefaultInputElement.fill("1"); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); test("should call onFocus callback when a focus event is triggered", async ({ @@ -577,7 +577,7 @@ test.describe("Event tests for Search component", () => { const searchDefaultInputElement = searchDefaultInput(page); await searchDefaultInputElement.focus(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); test("should call onBlur callback when a blur event is triggered", async ({ @@ -597,7 +597,7 @@ test.describe("Event tests for Search component", () => { await searchDefaultInputElement.focus(); await searchDefaultInputElement.blur(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); ([keysToTrigger[0], keysToTrigger[1]] as const).forEach((key) => { @@ -617,7 +617,7 @@ test.describe("Event tests for Search component", () => { const searchDefaultInputElement = searchDefaultInput(page); await searchDefaultInputElement.press(key); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); }); }); diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx index 1193fe6d81..ec10b56d92 100644 --- a/src/components/select/filterable-select/filterable-select.pw.tsx +++ b/src/components/select/filterable-select/filterable-select.pw.tsx @@ -650,7 +650,7 @@ test.describe("FilterableSelect component", () => { await Promise.all( [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible()), ); - await expect(await selectOptionByText(page, option)).toBeVisible(); + await expect(selectOptionByText(page, option)).toBeVisible(); }); test("the list should not change scroll position when the lazy-loaded options appear", async ({ @@ -680,7 +680,7 @@ test.describe("FilterableSelect component", () => { const scrollPositionAfterLoad = await scrollableWrapper.evaluate( (element) => element.scrollTop, ); - await expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad); + expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad); }); test("should list options when value is set and select list is opened again", async ({ @@ -735,7 +735,7 @@ test.describe("FilterableSelect component", () => { const wrapperElement = selectListWrapper(page); const inputElement = commonDataElementInputPreview(page); - const selectInputElement = await selectInput(page); + const selectInputElement = selectInput(page); await inputElement.focus(); await expect(selectInputElement).toHaveAttribute("aria-expanded", "true"); await expect(wrapperElement).toBeVisible(); @@ -1074,8 +1074,8 @@ test.describe("FilterableSelect component", () => { window.getComputedStyle(wrapperElement).getPropertyValue("height"), ), ); - await expect(selectListHeight).toBeGreaterThan(220); - await expect(selectListHeight).toBeLessThan(250); + expect(selectListHeight).toBeGreaterThan(220); + expect(selectListHeight).toBeLessThan(250); }); test("when navigating with the keyboard, the selected option is not hidden behind an action button", async ({ @@ -1249,7 +1249,7 @@ test.describe("Check events for FilterableSelect component", () => { await mount(); await dropdownButton(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onFocus when input is focused", async ({ mount, page }) => { @@ -1260,7 +1260,7 @@ test.describe("Check events for FilterableSelect component", () => { await mount(); await commonDataElementInputPreview(page).focus(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 @@ -1277,7 +1277,7 @@ test.describe("Check events for FilterableSelect component", () => { await commonDataElementInputPreview(page).focus(); // this waitFor call seems to be needed for the test to consistently pass await commonDataElementInputPreview(page).waitFor(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onOpen when FilterableSelect is opened by clicking on Icon", async ({ @@ -1291,7 +1291,7 @@ test.describe("Check events for FilterableSelect component", () => { await mount(); await dropdownButton(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onBlur event when the list is closed", async ({ @@ -1306,7 +1306,7 @@ test.describe("Check events for FilterableSelect component", () => { await dropdownButton(page).click(); await commonDataElementInputPreview(page).blur(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onChange event when a list option is selected", async ({ @@ -1326,8 +1326,8 @@ test.describe("Check events for FilterableSelect component", () => { const option = "1"; await dropdownButton(page).click(); await selectOption(page, positionOfElement(position)).click(); - await expect(callbackArguments.length).toBe(1); - await expect(callbackArguments[0]).toMatchObject({ + expect(callbackArguments.length).toBe(1); + expect(callbackArguments[0]).toMatchObject({ target: { value: option }, selectionConfirmed: true, }); @@ -1347,7 +1347,7 @@ test.describe("Check events for FilterableSelect component", () => { const inputElement = commonDataElementInputPreview(page); await inputElement.focus(); await inputElement.press(key); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -1370,8 +1370,8 @@ test.describe("Check events for FilterableSelect component", () => { const inputElement = commonDataElementInputPreview(page); await inputElement.focus(); await inputElement.type(text); - await expect(callbackArguments.length).toBe(1); - await expect(callbackArguments[0]).toBe(text); + expect(callbackArguments.length).toBe(1); + expect(callbackArguments[0]).toBe(text); }); test("should call onListAction event when the Action Button is clicked", async ({ @@ -1388,7 +1388,7 @@ test.describe("Check events for FilterableSelect component", () => { await dropdownButton(page).click(); await filterableSelectAddElementButton(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onListScrollBottom event when the list is scrolled to the bottom", async ({ @@ -1406,7 +1406,7 @@ test.describe("Check events for FilterableSelect component", () => { wrapper.scrollBy(0, 500), ); await page.waitForTimeout(250); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should not call onListScrollBottom callback when an option is clicked", async ({ @@ -1697,7 +1697,7 @@ test.describe("Selection confirmed", () => { // note: need to check count rather than visibility here - when the test fails and selectionConfirmed is set, // the span with the data-element prop exists but has size 0 due to having no text content - which Playwright // counts as not being visible - await expect( + expect( await page.locator('[data-element^="confirmed-selection-"]').count(), ).toBe(0); }); diff --git a/src/components/select/multi-select/multi-select.pw.tsx b/src/components/select/multi-select/multi-select.pw.tsx index 7e8272cb05..0bd1db6703 100644 --- a/src/components/select/multi-select/multi-select.pw.tsx +++ b/src/components/select/multi-select/multi-select.pw.tsx @@ -677,7 +677,7 @@ test.describe("MultiSelect component", () => { await Promise.all( [0, 1, 2].map((i) => expect(loader(page, i)).not.toBeVisible()), ); - await expect(await selectOptionByText(page, option)).toBeVisible(); + await expect(selectOptionByText(page, option)).toBeVisible(); }); test("the list should not change scroll position when the lazy-loaded options appear", async ({ @@ -704,7 +704,7 @@ test.describe("MultiSelect component", () => { const scrollPositionAfterLoad = await scrollableWrapper.evaluate( (element) => element.scrollTop, ); - await expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad); + expect(scrollPositionAfterLoad).toBe(scrollPositionBeforeLoad); }); test("should list options when value is set and select list is opened again", async ({ @@ -715,7 +715,7 @@ test.describe("MultiSelect component", () => { const count = 11; const dropdownButtonElement = dropdownButton(page); - const wrapperElement = await selectListWrapper(page); + const wrapperElement = selectListWrapper(page); await dropdownButtonElement.click(); await selectOptionByText(page, listOption).click(); await expect(multiSelectPill(page)).toHaveAttribute("title", listOption); @@ -1035,7 +1035,7 @@ test.describe("MultiSelect component", () => { await expect(selectInput(page)).toHaveAttribute("aria-expanded", "true"); const wrapperElement = selectListWrapper(page); await expect(wrapperElement).toBeVisible(); - const inputElement = await commonDataElementInputPreview(page); + const inputElement = commonDataElementInputPreview(page); await inputElement.press("Backspace"); await expect(multiSelectPillByText(page, option2)).toHaveCount(0); await expect(wrapperElement).toBeVisible(); @@ -1191,7 +1191,7 @@ test.describe("Check events for MultiSelect component", () => { await mount(); await commonDataElementInputPreview(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onFocus when MultiSelect is brought into focus", async ({ @@ -1205,7 +1205,7 @@ test.describe("Check events for MultiSelect component", () => { await mount(); await commonDataElementInputPreview(page).focus(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onOpen when MultiSelect is opened", async ({ @@ -1219,7 +1219,7 @@ test.describe("Check events for MultiSelect component", () => { await mount(); await dropdownButton(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onChange event once when a list option is selected", async ({ @@ -1239,8 +1239,8 @@ test.describe("Check events for MultiSelect component", () => { const option = ["1"]; await dropdownButton(page).click(); await selectOption(page, positionOfElement(position)).click(); - await expect(callbackArguments.length).toBe(1); - await expect(callbackArguments[0]).toMatchObject({ + expect(callbackArguments.length).toBe(1); + expect(callbackArguments[0]).toMatchObject({ target: { value: option }, selectionConfirmed: true, }); @@ -1266,7 +1266,7 @@ test.describe("Check events for MultiSelect component", () => { const inputElement = commonDataElementInputPreview(page); await inputElement.focus(); await inputElement.press(key); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -1289,8 +1289,8 @@ test.describe("Check events for MultiSelect component", () => { const inputElement = commonDataElementInputPreview(page); await inputElement.focus(); await inputElement.type(text); - await expect(callbackArguments.length).toBe(1); - await expect(callbackArguments[0]).toBe(text); + expect(callbackArguments.length).toBe(1); + expect(callbackArguments[0]).toBe(text); }); test("should call onListScrollBottom event when the list is scrolled to the bottom", async ({ @@ -1308,7 +1308,7 @@ test.describe("Check events for MultiSelect component", () => { wrapper.scrollBy(0, 500), ); await page.waitForTimeout(250); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should not call onListScrollBottom callback when an option is clicked", async ({ diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx index f1268dc298..593d7d236b 100644 --- a/src/components/select/simple-select/simple-select.pw.tsx +++ b/src/components/select/simple-select/simple-select.pw.tsx @@ -1166,7 +1166,7 @@ test.describe("Check events for SimpleSelect component", () => { const position = "first"; await selectText(page).click(); await selectOption(page, positionOfElement(position)).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onBlur event when the list is closed", async ({ @@ -1181,7 +1181,7 @@ test.describe("Check events for SimpleSelect component", () => { await selectText(page).click(); await commonDataElementInputPreview(page).blur(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onClick event when mouse is clicked on text input", async ({ @@ -1198,7 +1198,7 @@ test.describe("Check events for SimpleSelect component", () => { // [not clear if this onClick is even needed since a user isn't able to click, but leaving the test in pending // pending discussion/investigation] await commonDataElementInputPreview(page).click({ force: true }); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onOpen when select list is opened", async ({ @@ -1212,7 +1212,7 @@ test.describe("Check events for SimpleSelect component", () => { await mount(); await commonDataElementInputPreview(page).click({ force: true }); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onFocus when SimpleSelect is brought into focus", async ({ @@ -1226,7 +1226,7 @@ test.describe("Check events for SimpleSelect component", () => { await mount(); await commonDataElementInputPreview(page).focus(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); keyToTrigger.slice(0, 2).forEach((key) => { @@ -1243,7 +1243,7 @@ test.describe("Check events for SimpleSelect component", () => { const inputElement = commonDataElementInputPreview(page); await inputElement.focus(); await inputElement.press(key); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); }); diff --git a/src/components/sidebar/sidebar.pw.tsx b/src/components/sidebar/sidebar.pw.tsx index 4ea8552461..2000ed0445 100644 --- a/src/components/sidebar/sidebar.pw.tsx +++ b/src/components/sidebar/sidebar.pw.tsx @@ -372,7 +372,7 @@ test.describe("Prop tests for Sidebar component", () => { const closeIconButtonElement = closeIconButton(page); await closeIconButtonElement.click(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); // TODO: Skipped due to flaky focus behaviour. To review in FE-6428 diff --git a/src/components/simple-color-picker/simple-color-picker.pw.tsx b/src/components/simple-color-picker/simple-color-picker.pw.tsx index 88854926d8..b38ea14354 100644 --- a/src/components/simple-color-picker/simple-color-picker.pw.tsx +++ b/src/components/simple-color-picker/simple-color-picker.pw.tsx @@ -95,7 +95,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await mount(); const testColor = async (index: number) => { - const colorInput = await simpleColorPickerInput(page, index); + const colorInput = simpleColorPickerInput(page, index); await expect(colorInput).toHaveAttribute("value", colors[index].color); await expect(colorInput).toHaveAttribute( @@ -247,12 +247,12 @@ test.describe("Check functionality for SimpleColorPicker component", () => { const { top, bottom, left } = await colorCell.evaluate((element) => element.getBoundingClientRect(), ); - await expect(bottom).toBeLessThan(bottomLess + additionVal); - await expect(bottom).toBeGreaterThan(bottomLess); - await expect(top).toBeLessThan(topLess + additionVal); - await expect(top).toBeGreaterThan(topLess); - await expect(left).toBeLessThan(leftLess + additionVal); - await expect(left).toBeGreaterThan(leftLess); + expect(bottom).toBeLessThan(bottomLess + additionVal); + expect(bottom).toBeGreaterThan(bottomLess); + expect(top).toBeLessThan(topLess + additionVal); + expect(top).toBeGreaterThan(topLess); + expect(left).toBeLessThan(leftLess + additionVal); + expect(left).toBeGreaterThan(leftLess); }); }); @@ -288,7 +288,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await expect( simpleColorDiv(page, 0).locator("..").locator(".."), ).toHaveCSS("outline-color", color); - await expect( + expect( await getStyle(getDataElementByValue(page, type), "color", "before"), ).toBe(color); }); @@ -324,7 +324,7 @@ test.describe("Check functionality for SimpleColorPicker component", () => { await expect( simpleColorDiv(page, 0).locator("..").locator(".."), ).toHaveCSS("outline-color", color); - await expect( + expect( await getStyle(getDataElementByValue(page, type), "color", "before"), ).toBe(color); }); @@ -368,7 +368,7 @@ test.describe("Check events for SimpleColorPicker component", () => { await mount(); await simpleColorPickerInput(page, 5).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onChange callback and focus the correct item when the right arrow key is pressed", async ({ @@ -394,7 +394,7 @@ test.describe("Check events for SimpleColorPicker component", () => { // eslint-disable-next-line no-await-in-loop await expect(nextColor).toHaveAttribute("value", colors[next].color); // eslint-disable-next-line no-await-in-loop - await expect(callbackCount).toBe(expectedCount); + expect(callbackCount).toBe(expectedCount); } }); @@ -421,7 +421,7 @@ test.describe("Check events for SimpleColorPicker component", () => { // eslint-disable-next-line no-await-in-loop await expect(nextColor).toHaveAttribute("value", colors[next].color); // eslint-disable-next-line no-await-in-loop - await expect(callbackCount).toBe(expectedCount); + expect(callbackCount).toBe(expectedCount); } }); @@ -448,7 +448,7 @@ test.describe("Check events for SimpleColorPicker component", () => { "value", colors[focusedIndex].color, ); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -477,7 +477,7 @@ test.describe("Check events for SimpleColorPicker component", () => { "value", colors[focusedIndex].color, ); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); @@ -494,7 +494,7 @@ test.describe("Check events for SimpleColorPicker component", () => { const colorInput = simpleColorPickerInput(page, 5); await colorInput.focus(); await page.locator("body").click({ position: { x: 0, y: 0 } }); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should not call onBlur callback when a blur event is triggered on a color", async ({ @@ -510,7 +510,7 @@ test.describe("Check events for SimpleColorPicker component", () => { const colorInput = simpleColorPickerInput(page, 5); await colorInput.focus(); await colorInput.blur(); - await expect(callbackCount).toBe(0); + expect(callbackCount).toBe(0); }); test("should not call onBlur callback when a blur event is triggered and isBlurBlocked prop is true", async ({ @@ -526,7 +526,7 @@ test.describe("Check events for SimpleColorPicker component", () => { const colorInput = simpleColorPickerInput(page, 5); await colorInput.focus(); await colorInput.blur(); - await expect(callbackCount).toBe(0); + expect(callbackCount).toBe(0); }); }); @@ -586,7 +586,7 @@ test.describe("Check events for SimpleColor component", () => { await mount(); await simpleColor(page, 1).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onBlur callback when a blur event is triggered", async ({ @@ -601,7 +601,7 @@ test.describe("Check events for SimpleColor component", () => { await simpleColor(page, 1).click(); await page.locator("*:focus").blur(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); test("should call onMouseDown callback when a click event is triggered", async ({ @@ -615,7 +615,7 @@ test.describe("Check events for SimpleColor component", () => { await mount(); await simpleColor(page, 1).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); }); }); diff --git a/src/components/tile-select/tile-select.pw.tsx b/src/components/tile-select/tile-select.pw.tsx index f8794a3487..cb7f5c9511 100644 --- a/src/components/tile-select/tile-select.pw.tsx +++ b/src/components/tile-select/tile-select.pw.tsx @@ -452,7 +452,7 @@ test.describe("should render TileSelect component and check events", () => { const onFocusElement = inputElement(page); await onFocusElement.focus(); - await expect(callbackCount).toEqual(1); + expect(callbackCount).toEqual(1); }); test("should call onChange callback when a click event is triggered for TileSelect component", async ({ diff --git a/src/components/tile/tile.pw.tsx b/src/components/tile/tile.pw.tsx index 12a46cb091..2051b289c5 100644 --- a/src/components/tile/tile.pw.tsx +++ b/src/components/tile/tile.pw.tsx @@ -420,7 +420,7 @@ test.describe("Tile component", () => { await mount( content, ); - const containerElement = await getDataComponentByValue( + const containerElement = getDataComponentByValue( page, "flex-tile-container", ); diff --git a/src/components/vertical-menu/vertical-menu.pw.tsx b/src/components/vertical-menu/vertical-menu.pw.tsx index 1839f21be0..4003e9f415 100644 --- a/src/components/vertical-menu/vertical-menu.pw.tsx +++ b/src/components/vertical-menu/vertical-menu.pw.tsx @@ -602,7 +602,7 @@ test.describe("Events test", () => { await closeIconButton(page).click(); - await expect(callbackCount).toBe(1); + expect(callbackCount).toBe(1); const dialogText = page.getByText("Do you want to leave before saving?"); await expect(dialogText).toBeInViewport();