diff --git a/e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js b/e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js index 0cc3222f74..9397748e74 100644 --- a/e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js +++ b/e2e/components/Tearsheet/TearsheetNarrow-test.avt.e2e.js @@ -12,7 +12,7 @@ import { visitStory } from '../../test-utils/storybook'; import { carbon, pkg } from '../../../packages/ibm-products/src/settings'; const bc = `${pkg.prefix}--tearsheet`; - +test.setTimeout(6000); test.describe('TearsheetNarrow @avt', () => { test('@avt-default-state', async ({ page }) => { await visitStory(page, { @@ -23,13 +23,6 @@ test.describe('TearsheetNarrow @avt', () => { }, }); - const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); - await page.getByText('Open Tearsheet').click(); - await modalElement.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); await expect(page).toHaveNoACViolations('Tearsheet @avt-default-state'); }); @@ -43,29 +36,17 @@ test.describe('TearsheetNarrow @avt', () => { }); const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); - - // Pressing 'Tab' key to focus on the "Open Tearsheet" button in the Storybook - await page.keyboard.press('Tab'); - // Pressing 'Enter' key to open the Tearsheet - await page.keyboard.press('Enter'); - - await modalElement.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); - + // Default opened in story // Pressing 'Escape' key to close the Tearsheet await page.keyboard.press('Escape'); - - await page - .locator(`.${carbon.prefix}--modal`) - .evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + await page.screenshot({ animations: 'disabled' }); await expect(modalElement).not.toBeInViewport(); + + // Opening the Tearsheet + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.screenshot({ animations: 'disabled' }); + await expect(modalElement).toBeInViewport(); }); test('@avt-default-state focus trap', async ({ page }) => { @@ -83,16 +64,8 @@ test.describe('TearsheetNarrow @avt', () => { const closeButton = page.getByRole('button', { name: 'Close' }); const cancelButton = page.getByText('Cancel'); - // Pressing 'Tab' key to focus on the "Open Tearsheet" button in the Storybook - await page.keyboard.press('Tab'); - // Pressing 'Enter' key to open the Tearsheet - await page.keyboard.press('Enter'); - - await modalElement.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + // Default opened in story + await page.screenshot({ animations: 'disabled' }); await expect(modalElement).toBeInViewport(); // Now the focus on the input field in the Tearsheet await expect(inputField).toBeFocused(); @@ -133,14 +106,7 @@ test.describe('TearsheetNarrow @avt', () => { await expect(inputField).toBeFocused(); // Pressing 'Escape' to close the Tearsheet await page.keyboard.press('Escape'); - - await page - .locator(`.${carbon.prefix}--modal`) - .evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + await page.screenshot({ animations: 'disabled' }); await expect(modalElement).not.toBeInViewport(); }); @@ -155,16 +121,7 @@ test.describe('TearsheetNarrow @avt', () => { const modalElement = page.locator(`.${carbon.prefix}--modal.is-visible`); - // Pressing 'Tab' key to focus on the "Open Tearsheet" button in the Storybook - await page.keyboard.press('Tab'); - // Pressing 'Enter' key to open the Tearsheet - await page.keyboard.press('Enter'); - - await modalElement.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + await page.screenshot({ animations: 'disabled' }); await expect(page).toHaveNoACViolations( 'TearsheetNarrow @avt-all-header-items' ); @@ -210,14 +167,7 @@ test.describe('TearsheetNarrow @avt', () => { // Closing the Tearsheet by pressing 'Esc' key await page.keyboard.press('Escape'); - - await page - .locator(`.${carbon.prefix}--modal`) - .evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + await page.screenshot({ animations: 'disabled' }); await expect(modalElement).not.toBeInViewport(); }); @@ -230,46 +180,38 @@ test.describe('TearsheetNarrow @avt', () => { }, }); + // press escape thrice to close all pre open tearsheets + await page.keyboard.press('Escape'); + await page.screenshot({ animations: 'disabled' }); + await page.keyboard.press('Escape'); + await page.screenshot({ animations: 'disabled' }); + await page.keyboard.press('Escape'); + await page.screenshot({ animations: 'disabled' }); + // Open tearsheet one await page.getByText('Toggle #1').click(); - - const ts1 = page.locator(`.${carbon.prefix}--modal.is-visible`); - - await ts1.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + await page.screenshot({ animations: 'disabled' }); await expect(page).toHaveNoACViolations('Tearsheet @avt-stacking'); - // Open second tearsheet - await page.getByText('Toggle #2').click(); - const ts2 = page.locator( `[class*="${bc}--stacked-${2}-of-${2}"].is-visible` ); - await ts2.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); + // Open second tearsheet + await page.getByText('Toggle #2').click(); + await page.screenshot({ animations: 'disabled' }); + // Tearsheet 2 is now open await expect(ts2).toBeInViewport(); await expect(ts2).toHaveAttribute('aria-hidden', 'false'); // Open third tearsheet await page.getByText('Toggle #3').click(); - + await page.screenshot({ animations: 'disabled' }); const ts3 = page.locator( `[class*="${bc}--stacked-${3}-of-${3}"].is-visible` ); - await ts3.evaluate((element) => - Promise.all( - element.getAnimations().map((animation) => animation.finished) - ) - ); // Tearsheet 3 is now open await expect(ts3).toBeInViewport(); await expect(ts3).toHaveAttribute('aria-hidden', 'false');