next.js/test/e2e/link-on-navigate-prop/index.test.ts

import { nextTestSetup } from 'e2e-utils'

describe('<Link /> onNavigate prop', () => {
  const { next } = nextTestSetup({
    files: __dirname,
  })

  const routers = [
    { name: 'App Router', path: '/app-router' },
    { name: 'Pages Router', path: '/pages-router' },
  ]

  routers.forEach(({ name, path }) => {
    describe(name, () => {
      it('should trigger onClick but not onNavigate when using modifier key', async () => {
        const browser = await next.browser(path)

        // Check initial state
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: false'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )

        // Click with modifier key based on OS to open in new window
        const platform = process.platform
        const modifierKey = platform === 'darwin' ? 'Meta' : 'Control'

        // First press down the modifier key
        await browser.keydown(modifierKey)

        // Click the link while the modifier key is pressed
        await browser.elementById('link-to-subpage').click()

        // Release the modifier key
        await browser.keyup(modifierKey)

        await browser.waitForIdleNetwork()

        // Should trigger onClick but not onNavigate
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: true'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )
      })

      it('should trigger both onClick and onNavigate for internal navigation', async () => {
        const browser = await next.browser(path)

        // Check initial state
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: false'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )

        // Click internal link
        await browser.elementById('link-to-subpage').click()
        await browser.waitForIdleNetwork()

        // Should trigger both onClick and onNavigate
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: true'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: true'
        )
      })

      it('should prevent navigation when onNavigate calls preventDefault', async () => {
        const browser = await next.browser(path)

        // Check initial state
        expect(await browser.elementById('is-locked').text()).toBe(
          'isLocked: false'
        )

        // Lock navigation
        await browser.elementById('toggle-lock').click()
        expect(await browser.elementById('is-locked').text()).toBe(
          'isLocked: true'
        )

        // Try to navigate
        await browser.elementById('link-to-subpage').click()
        await browser.waitForIdleNetwork()

        // Should trigger onClick but not navigate or trigger onNavigate
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: true'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )

        // Verify we're still on the same page
        expect(await browser.url()).toContain(path)
      })

      it('should only trigger onClick for external links with target="_blank"', async () => {
        const browser = await next.browser(path)

        // Check initial state
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: false'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )

        // We can't fully test the new window, but we can verify the events are triggered
        await browser.elementById('external-link-with-target').click()
        await browser.waitForIdleNetwork()

        // Should only trigger onClick for external links with target
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: true'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )
      })

      it('should only trigger onClick for download links', async () => {
        const browser = await next.browser(path)

        // Check initial state
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: false'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )

        // Click download link
        await browser.elementById('download-link').click()
        await browser.waitForIdleNetwork()

        // Should trigger both onClick and onNavigate for download links
        expect(await browser.elementById('is-clicked').text()).toBe(
          'isClicked: true'
        )
        expect(await browser.elementById('is-navigated').text()).toBe(
          'isNavigated: false'
        )
      })

      it('should only trigger both onClick for external links', async () => {
        const alerts: string[] = []
        const browser = await next.browser(path, {
          beforePageLoad(page) {
            page.on('dialog', (dialog) => {
              alerts.push(dialog.message())
              dialog.dismiss()
            })
          },
        })

        await browser.elementById('external-link').click()
        await browser.waitForIdleNetwork()

        expect(alerts).toEqual(['onClick'])
      })

      it('should replace history state for external links with replace prop', async () => {
        const browser = await next.browser(path)

        // Get initial history length
        const initialLength = await browser.eval('history.length')

        // Click external link with replace
        await browser.elementById('external-link-with-replace').click()
        await browser.waitForIdleNetwork()

        // Verify history length hasn't changed (replace instead of push)
        const finalLength = await browser.eval('history.length')
        expect(finalLength).toBe(initialLength)
      })
    })
  })
})