Fix routing during animation

This commit is contained in:
2026-07-21 15:31:43 +10:00
parent ee25b9a94d
commit d2d82ae6ae
10 changed files with 157 additions and 69 deletions

View File

@@ -77,6 +77,41 @@ test('uses route order for tab direction and does not animate the active tab', a
await expect(page).toHaveURL(/\/inbox$/)
})
test('interrupts an active tab animation when another tab is tapped', async ({ page }) => {
await page.goto('/inbox')
const routerView = page.locator('.nvr-router-view')
await page.getByRole('link', { name: /Stories/ }).click()
await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
const firstTransaction = await routerView.getAttribute('data-native-transaction')
expect(firstTransaction).not.toBeNull()
await page.getByRole('link', { name: /You/ }).click()
await expect(routerView).not.toHaveAttribute('data-native-transaction', firstTransaction!, { timeout: 250 })
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/stories')
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/profile')
await expect(page).toHaveURL(/\/profile$/)
})
test('interrupts a settling push animation with an edge-back gesture', async ({ page }) => {
await page.goto('/inbox')
await page.getByText('Maya Chen').last().click()
await expect(page).toHaveURL(/\/chat\/maya$/)
const routerView = page.locator('.nvr-router-view')
await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
const pushTransaction = await routerView.getAttribute('data-native-transaction')
const frame = await page.locator('.app-frame').boundingBox()
if (!frame) throw new Error('App frame did not render')
await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
await page.mouse.down()
await page.mouse.move(frame.x + frame.width * 0.34, frame.y + frame.height * 0.5, { steps: 16 })
await expect(routerView).not.toHaveAttribute('data-native-transaction', pushTransaction!, { timeout: 250 })
await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/chat/maya')
await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/inbox')
await page.mouse.up()
})
test('moves sibling screens edge-to-edge at one-to-one drag progress', async ({ page }) => {
await page.goto('/stories')
const routerView = page.locator('.nvr-router-view')