gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-10-25 13:11:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(e2e): read the launcher morph after the transition settles (#1971)

Browse Source 
The hamburger bars move through a 150ms CSS transition (clamped only under
Reduced motion). The test read the closed computed style immediately after an
Escape, which could land inside the close transition and capture the open
values; reopening then produced an identical read and the morph assertion
failed intermittently depending on the suite account's motion preference.

Capture the closed style while the bar is at rest before any toggle, and poll
the open style instead of sampling once. The assertion still proves the bar
moves between the closed and open states.
This commit is contained in:
Anso
2026-09-23 21:56:33 -04:00
committed by GitHub
parent 38de9b6d36
commit 199013197e
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/desktop-navigation.spec.ts
+12 -4
View File
@@ -197,10 +197,6 @@ test.describe('Desktop navigation styles', () => {
test('the launcher hamburger morphs open/closed and does not animate under Reduced motion', async ({ page }) => {
const trigger = page.getByRole('button', { name: 'Open navigation launcher' });
await expect(trigger).toHaveAttribute('data-state', 'closed');
await trigger.click();
await expect(trigger).toHaveAttribute('data-state', 'open');
await page.keyboard.press('Escape');
await expect(trigger).toHaveAttribute('data-state', 'closed');
// The bar actually moves open vs. closed, not just a duration-clamp check.
// Read translate and rotate alongside transform: Tailwind v4 compiles these
@@ -212,9 +208,21 @@ test.describe('Desktop navigation styles', () => {
const s = getComputedStyle(el);
return `${s.translate}|${s.rotate}|${s.transform}`;
};
// Read the closed bar while it is at rest, before anything has animated.
const closedMorph = await bar.evaluate(morphState);
await trigger.click();
await expect(trigger).toHaveAttribute('data-state', 'open');
await page.keyboard.press('Escape');
await expect(trigger).toHaveAttribute('data-state', 'closed');
await trigger.click();
await expect(trigger).toHaveAttribute('data-state', 'open');
// The bars move through a CSS transition (150ms, clamped under Reduced
// motion), so a computed-style read right after the data-state flip can
// land before the transition settles and report the closed values. Poll
// until the morph differs instead of sampling once.
await expect.poll(() => bar.evaluate(morphState), { timeout: 5_000 }).not.toBe(closedMorph);
const openMorph = await bar.evaluate(morphState);
expect(openMorph).not.toBe(closedMorph);
await page.keyboard.press('Escape');