next.js/test/e2e/app-dir/gesture-transitions/gesture-transitions.test.ts
gesture-transitions.test.ts58 lines2.1 KB
/**
 * Tests for experimental_gesturePush, which enables gesture-driven navigation
 * via React's Gesture Transitions feature.
 *
 * The test simulates a gesture by using two buttons:
 * - "Start Gesture" calls experimental_gesturePush and begins an async
 *   transition that doesn't complete until "End Gesture" is clicked
 * - "End Gesture" resolves the pending promise and triggers the canonical
 *   router.push
 *
 * This allows us to observe the intermediate gesture state before the
 * canonical navigation completes.
 */
import { nextTestSetup } from 'e2e-utils'

describe('gesture-transitions', () => {
  const { next } = nextTestSetup({
    files: __dirname,
  })

  it('shows optimistic state during gesture, then canonical state after', async () => {
    const browser = await next.browser('/')

    // Verify we're on the home page
    expect(
      await browser.elementByCss('[data-testid="home-page"]').text()
    ).toContain('Home')

    // Click "Start Gesture" to begin the optimistic navigation
    await browser.elementByCss('[data-testid="start-gesture"]').click()

    // The target page content should be visible (optimistic state)
    const targetPage = await browser.elementByCss('[data-testid="target-page"]')
    expect(await targetPage.text()).toContain('Target Page')

    // Static content should be visible
    expect(
      await browser.elementByCss('[data-testid="static-content"]').text()
    ).toBe('This is static content')

    // The URL should have updated to /target-page
    expect(await browser.url()).toContain('/target-page')

    // Click "End Gesture" to complete the canonical navigation
    await browser.elementByCss('[data-testid="end-gesture"]').click()

    // After the gesture ends, we should still be on the target page
    // with the canonical state (dynamic content fully loaded)
    const dynamicContent = await browser.elementByCss(
      '[data-testid="dynamic-content"]'
    )
    expect(await dynamicContent.text()).toBe('Dynamic content')

    // URL should still be /target-page
    expect(await browser.url()).toContain('/target-page')
  })
})
Quest for Codev2.0.0
/
SIGN IN