[pull] main from chakra-ui:main

e2e/drawer.e2e.ts

@@ -1,3 +1,3 @@
 import { expect, test } from "@playwright/test"
 import { DrawerModel } from "./models/drawer.model"
 
@@ -189,11 +189,8 @@
     await I.seeContent()
     await I.waitForOpenState()
 
-    let currentHeight = await I.getContentVisibleHeight()
-
-    // Calculate expected heights based on actual content height
-    // First, drag to 100% to get the full height
-    await I.dragGrabber("up", 600)
+    // First, measure full height at the 100% snap point.
+    await I.dragGrabber("up", 800)
     await I.waitForSnapComplete()
 
     const fullHeight = await I.getContentVisibleHeight()
@@ -203,35 +200,29 @@
     // Close and reopen to test default snap point
     await I.pressKey("Escape")
     await I.dontSeeContent()
-
-    // Small delay to ensure state is fully reset
-    await I.wait(100)
+    await I.waitForClosedState()
 
     await I.clickTrigger()
     await I.seeContent()
     await I.waitForOpenState()
 
-    currentHeight = await I.getContentVisibleHeight()
-
     // Should open at default snap point (25%)
-    expect(currentHeight).toBeCloseTo(lowerHeight, 0)
+    await I.waitForVisibleHeightNear(lowerHeight, 6)
 
-    // Drag up to reach 250px snap point
-    await I.dragGrabber("up", 100)
+    // Drag up to reach 250px snap point using distance from measured default height.
+    const dragTo250 = Math.max(80, Math.ceil(250 - lowerHeight + 40))
+    await I.dragGrabber("up", dragTo250)
     await I.waitForSnapComplete()
 
-    currentHeight = await I.getContentVisibleHeight()
-
     // Should have snapped to 250px fixed snap point
-    expect(currentHeight).toBeCloseTo(250, 0)
+    await I.waitForVisibleHeightNear(250, 6)
 
-    // Drag up more to reach full height (100%)
-    await I.dragGrabber("up", 500)
+    // Drag up to reach full height (100%) from the 250px snap point.
+    const dragToFull = Math.max(100, Math.ceil(fullHeight - 250 + 40))
+    await I.dragGrabber("up", dragToFull)
     await I.waitForSnapComplete()
 
-    currentHeight = await I.getContentVisibleHeight()
-
     // Should be at maximum height (100% snap point)
-    expect(currentHeight).toBeCloseTo(fullHeight, 0)
+    await I.waitForVisibleHeightNear(fullHeight, 6)
   })
 })

e2e/models/drawer.model.ts

@@ -96,7 +96,7 @@
 
     const translateY = await this.content.evaluate((el) => getComputedStyle(el).getPropertyValue("--drawer-translate"))
 
-    const parsedTranslateY = parseInt(translateY, 10)
+    const parsedTranslateY = parseFloat(translateY)
     return initialHeight - (isNaN(parsedTranslateY) ? 0 : parsedTranslateY)
   }
 
@@ -114,18 +114,18 @@
   }
 
   async isScrollableAtTop() {
     const scrollTop = await this.scrollable.evaluate((el) => el.scrollTop)
     return scrollTop === 0
   }
 
   clickOutsideSheet() {
     return this.page.locator("main").click({ position: { x: 5, y: 5 } })
   }
 
   async waitForOpenState() {
     // Wait for element to be visible and animations to complete
     await expect(this.content).toBeVisible()
-    await this.content.evaluate((el) => Promise.all(el.getAnimations().map((animation) => animation.finished)))
+    await this.content.evaluate((el) => Promise.allSettled(el.getAnimations().map((animation) => animation.finished)))
   }
 
   waitForClosedState() {
@@ -134,6 +134,14 @@
 
   async waitForSnapComplete() {
     // Wait for snap animation/transition to complete after drag
-    await this.content.evaluate((el) => Promise.all([...el.getAnimations()].map((animation) => animation.finished)))
+    await this.content.evaluate((el) =>
+      Promise.allSettled([...el.getAnimations()].map((animation) => animation.finished)),
+    )
+  }
+
+  async waitForVisibleHeightNear(targetHeight: number, tolerance = 4, timeout = 2000) {
+    await expect
+      .poll(async () => Math.abs((await this.getContentVisibleHeight()) - targetHeight), { timeout })
+      .toBeLessThanOrEqual(tolerance)
   }
 }