router/e2e/solid-start/basic/tests/transition.spec.ts at 06c31276f1db39a0f61a72eeaba28dcf4597a7cc · TanStack/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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import { expect, test } from '@playwright/test'

test('transitions/count/create-resource should keep old values visible during navigation', async ({
  page,
}) => {
  const burstClicks = async (count: number) => {
    await page
      .getByTestId('increase-button')
      .evaluate((element, clickCount) => {
        for (let index = 0; index < clickCount; index++) {
          ;(element as HTMLAnchorElement).click()
        }
      }, count)
  }

  await page.goto('/transition/count/create-resource')

  await expect(page.getByTestId('n-value')).toContainText('n: 1')
  await expect(page.getByTestId('double-value')).toContainText('double: 2')

  const bodyTexts: Array<string> = []

  const pollInterval = setInterval(async () => {
    const text = await page
      .locator('body')
      .textContent()
      .catch(() => '')
    if (text) bodyTexts.push(text)
  }, 50)

  // 1 click

  await burstClicks(1)

  await expect(page.getByTestId('n-value')).toContainText('n: 1', {
    timeout: 2_000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 2', {
    timeout: 2_000,
  })

  await page.waitForTimeout(200)

  await expect(page.getByTestId('n-value')).toContainText('n: 2', {
    timeout: 2000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 4', {
    timeout: 2000,
  })

  // 2 clicks

  await burstClicks(2)

  await expect(page.getByTestId('n-value')).toContainText('n: 2', {
    timeout: 2000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 4', {
    timeout: 2000,
  })

  await page.waitForTimeout(200)

  await expect(page.getByTestId('n-value')).toContainText('n: 4', {
    timeout: 2000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 8', {
    timeout: 2000,
  })

  // 3 clicks

  await burstClicks(3)

  await expect(page.getByTestId('n-value')).toContainText('n: 4', {
    timeout: 2000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 8', {
    timeout: 2000,
  })

  await page.waitForTimeout(200)

  await expect(page.getByTestId('n-value')).toContainText('n: 7', {
    timeout: 2000,
  })
  await expect(page.getByTestId('double-value')).toContainText('double: 14', {
    timeout: 2000,
  })

  clearInterval(pollInterval)

  // With proper transitions, old values should remain visible until new ones arrive
  const hasLoadingText = bodyTexts.some((text) => text.includes('Loading...'))

  if (hasLoadingText) {
    throw new Error(
      'FAILED: "Loading..." appeared during navigation. ' +
        'Solid Router should use transitions to keep old values visible.',
    )
  }
})