router/e2e/react-start/basic-test-suite/src/navigation.spec.ts at 4c484391ae0f9e1c2de965c162aeb82e510b9b8e · beaussan/router · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import { expect } from '@playwright/test'

import { test } from '@tanstack/router-e2e-utils'

test.use({
  whitelistErrors: [
    'Failed to load resource: the server responded with a status of 404',
  ],
})
test('Navigating to post', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')

  await page.getByRole('link', { name: 'Posts' }).click()
  await page.getByRole('link', { name: 'sunt aut facere repe' }).click()
  await page.getByRole('link', { name: 'Deep View' }).click()
  await expect(page.getByRole('heading')).toContainText('sunt aut facere')
})

test('Navigating to user', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')
  await page.getByRole('link', { name: 'Users' }).click()
  await page.getByRole('link', { name: 'Leanne Graham' }).click()
  await expect(page.getByRole('heading')).toContainText('Leanne Graham')
})

test('Navigating nested layouts', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')

  await page.getByRole('link', { name: 'Layout', exact: true }).click()

  await expect(page.locator('body')).toContainText("I'm a layout")
  await expect(page.locator('body')).toContainText("I'm a nested layout")

  await page.getByRole('link', { name: 'Layout A' }).click()
  await expect(page.locator('body')).toContainText("I'm layout A!")

  await page.getByRole('link', { name: 'Layout B' }).click()
  await expect(page.locator('body')).toContainText("I'm layout B!")
})

test('client side navigating to a route with scripts', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')
  await page.getByRole('link', { name: 'Scripts', exact: true }).click()
  await expect(page.getByTestId('scripts-test-heading')).toBeInViewport()
  expect(await page.evaluate('window.SCRIPT_1')).toBe(true)
  expect(await page.evaluate('window.SCRIPT_2')).toBe(undefined)
})

test('directly going to a route with scripts', async ({ page }) => {
  await page.goto('/scripts')
  await page.waitForURL('/scripts')
  await page.waitForLoadState('networkidle')
  expect(await page.evaluate('window.SCRIPT_1')).toBe(true)
  expect(await page.evaluate('window.SCRIPT_2')).toBe(undefined)
})

test('Navigating to a not-found route', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')

  await page.getByRole('link', { name: 'This Route Does Not Exist' }).click()
  await page.getByRole('link', { name: 'Start Over' }).click()
  await expect(page.getByRole('heading')).toContainText('Welcome Home!')
})

test('Should change title on client side navigation', async ({ page }) => {
  await page.goto('/')
  await page.waitForURL('/')

  await page.getByRole('link', { name: 'Posts' }).click()

  await expect(page).toHaveTitle('Posts page')
})