fix(TearsheetNarrow): avt tests

carbon-design-system · Dec 6, 2024 · 5dc8022 · 5dc8022
1 parent c2c7f47
commit 5dc8022
Showing 1 changed file with 28 additions and 86 deletions.
diff --git 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');