Merge pull request #6400 from Sage/fix-animation-issues-pw

Fix animation issues pw
Sage · Oct 31, 2023 · a05132f · a05132f
2 parents 763f1f2 + 7e46efd
commit a05132f
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 0 deletions.
diff --git a/playwright/support/helper.ts b/playwright/support/helper.ts
@@ -350,3 +350,8 @@ export const continuePressingSHIFTTAB = async (page: Page, count: number) => {
 
   await Promise.all(promises);
 };
+
+export const waitForAnimationEnd = (locator: Locator) =>
+  locator.evaluate((element) =>
+    Promise.all(element.getAnimations().map((animation) => animation.finished))
+  );
diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
@@ -25,6 +25,7 @@ import toastComponent from "../../../playwright/components/toast";
 import {
   checkAccessibility,
   getStyle,
+  waitForAnimationEnd,
 } from "../../../playwright/support/helper";
 import { CHARACTERS, SIZE } from "../../../playwright/support/constants";
 
@@ -374,6 +375,7 @@ test.describe(
       await openToastButton.click();
 
       const toast = toastComponent(page);
+      await waitForAnimationEnd(toast);
       await expect(toast).toBeFocused();
     });
 

diff --git a/src/components/drawer/__snapshots__/drawer.spec.tsx.snap b/src/components/drawer/__snapshots__/drawer.spec.tsx.snap
@@ -55,6 +55,7 @@ exports[`Drawer uncontrolled matches snapshot 1`] = `
   <styled.div
     animationDuration="0.5s"
     className="open"
+    data-element="drawer-content"
     expandedWidth="20%"
   >
     <Styled(Box)

diff --git a/src/components/drawer/drawer.component.tsx b/src/components/drawer/drawer.component.tsx
@@ -213,6 +213,7 @@ export const Drawer = ({
         className={getClassNames()}
         ref={drawerSidebarContentRef}
         backgroundColor={backgroundColor}
+        data-element="drawer-content"
       >
         {stickyHeader && (
           <StyledSidebarHeader isExpanded={isExpanded}>

diff --git a/src/components/drawer/drawer.pw.tsx b/src/components/drawer/drawer.pw.tsx
@@ -17,6 +17,7 @@ import {
   checkAccessibility,
   assertCssValueIsApproximately,
   isInViewport,
+  waitForAnimationEnd,
 } from "../../../playwright/support/helper";
 
 test.describe(
@@ -361,6 +362,10 @@ test.describe("Accessibility tests for Drawer component", () => {
         <DrawerCustom showControls animationDuration={animationDuration} />
       );
 
+      await waitForAnimationEnd(
+        page.locator('[data-element="drawer-content"]')
+      );
+
       const drawerToggleButton = drawerToggle(page);
       await drawerToggleButton.click();
       const sidebar = drawerSidebar(page);