fix: separate desktop wheel and mobile pinch zoom

This commit is contained in:
2026-08-14 15:45:03 +02:00
parent 45c7c6a292
commit a51b508118
6 changed files with 81 additions and 22 deletions
+22 -7
View File
@@ -24,7 +24,7 @@ async function waitForSave(page: Page, action: () => Promise<void>) {
await response
}
test('move, folder expansion, hand pan, pinch zoom, and reload persistence', async ({ page }) => {
test('move, folder expansion, hand pan, desktop wheel zoom, mobile pinch, and reload persistence', async ({ page }) => {
await page.goto('/?level=e2e-level&edit=1')
await expect(page.getByRole('heading', { name: 'Browser Safety Test' })).toBeVisible()
@@ -78,14 +78,29 @@ test('move, folder expansion, hand pan, pinch zoom, and reload persistence', asy
await expect(folder).toBeVisible()
expect(await board.getAttribute('style')).toEqual(transformAfterPan)
const transformBeforePinch = await board.getAttribute('style')
const browserMetricsBeforePinch = await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))
await page.keyboard.down('Control')
const transformBeforeWheel = await board.getAttribute('style')
const browserMetricsBeforeWheel = await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))
await page.mouse.move(viewportBox.x + 400, viewportBox.y + 260)
await page.mouse.wheel(0, -20)
await page.mouse.wheel(0, -80)
await expect.poll(() => board.getAttribute('style')).not.toEqual(transformBeforeWheel)
expect(await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))).toEqual(browserMetricsBeforeWheel)
const transformBeforeDesktopPinch = await board.getAttribute('style')
await page.keyboard.down('Control')
await page.mouse.wheel(0, -80)
await page.keyboard.up('Control')
await expect.poll(() => board.getAttribute('style')).not.toEqual(transformBeforePinch)
expect(await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))).toEqual(browserMetricsBeforePinch)
await page.waitForTimeout(100)
expect(await board.getAttribute('style')).toEqual(transformBeforeDesktopPinch)
expect(await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))).toEqual(browserMetricsBeforeWheel)
const transformBeforeTouchPinch = await board.getAttribute('style')
const touchOrigin = { x: viewportBox.x + 350, y: viewportBox.y + 240 }
await boardViewport.dispatchEvent('pointerdown', { pointerId: 41, pointerType: 'touch', isPrimary: true, button: 0, clientX: touchOrigin.x, clientY: touchOrigin.y })
await boardViewport.dispatchEvent('pointerdown', { pointerId: 42, pointerType: 'touch', isPrimary: false, button: 0, clientX: touchOrigin.x + 100, clientY: touchOrigin.y })
await boardViewport.dispatchEvent('pointermove', { pointerId: 42, pointerType: 'touch', isPrimary: false, button: 0, clientX: touchOrigin.x + 150, clientY: touchOrigin.y })
await expect.poll(() => board.getAttribute('style')).not.toEqual(transformBeforeTouchPinch)
await boardViewport.dispatchEvent('pointerup', { pointerId: 42, pointerType: 'touch', isPrimary: false, button: 0, clientX: touchOrigin.x + 150, clientY: touchOrigin.y })
await boardViewport.dispatchEvent('pointerup', { pointerId: 41, pointerType: 'touch', isPrimary: true, button: 0, clientX: touchOrigin.x, clientY: touchOrigin.y })
await page.getByRole('button', { name: 'BRIEF', exact: true }).click()
await expect(page.locator('.brief-panel')).toContainText('Ada Lovelace')