router/e2e/react-start/streaming-ssr/tests/deferred.spec.ts at 400192c97629f589b1c55f5e2f420e88002dc699 · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import { expect, test, testWithHydration } from './fixtures'
import { expectDeferredRouteToStream } from '../../../streaming-ssr-assertions'

test.describe('Deferred data streaming', () => {
  test('streams the shell before deferred data resolves', async ({
    baseURL,
  }) => {
    await expectDeferredRouteToStream(baseURL, { expectFallback: true })
  })

  test('shows immediate data right away and deferred data after loading', async ({
    page,
  }) => {
    await page.goto('/deferred')

    // Immediate data should be available right away
    await expect(page.getByTestId('immediate-data')).toBeVisible()
    await expect(page.getByTestId('immediate-data')).toContainText(
      'Immediate: Fast User',
    )

    // Verify immediate data came from server
    await expect(page.getByTestId('immediate-source')).toContainText(
      'Immediate source: server',
    )
    await expect(page.getByTestId('loader-source')).toContainText(
      'Loader source: server',
    )

    // Deferred data should eventually appear with server source
    await expect(page.getByTestId('deferred-data')).toContainText(
      'Deferred data loaded!',
      { timeout: 5000 },
    )
    await expect(page.getByTestId('deferred-data')).toContainText(
      'source: server',
      { timeout: 5000 },
    )
    await expect(page.getByTestId('deferred-server-data')).toContainText(
      'Server: Slow User',
      { timeout: 5000 },
    )
    await expect(page.getByTestId('deferred-server-data')).toContainText(
      'source: server',
      { timeout: 5000 },
    )
  })

  test('shows loading states for deferred content', async ({ page }) => {
    // Navigate with cache disabled to ensure fresh load
    await page.goto('/deferred', { waitUntil: 'commit' })

    // Should see loading states initially (may be very brief)
    // We check that deferred content eventually shows
    await expect(page.getByTestId('deferred-data')).toBeVisible({
      timeout: 5000,
    })
    await expect(page.getByTestId('deferred-server-data')).toBeVisible({
      timeout: 5000,
    })
  })

  testWithHydration(
    'hydration works - interactive elements respond',
    async ({ page }) => {
      await page.goto('/deferred')
      await page.waitForLoadState('networkidle')

      // Wait for all deferred content to load
      await expect(page.getByTestId('deferred-data')).toBeVisible({
        timeout: 5000,
      })

      // Verify all data came from server after hydration
      await expect(page.getByTestId('loader-source')).toContainText(
        'Loader source: server',
      )
      await expect(page.getByTestId('deferred-data')).toContainText(
        'source: server',
      )
    },
  )

  test('client-side navigation to deferred route works', async ({ page }) => {
    await page.goto('/')
    await page.waitForLoadState('networkidle')

    // Navigate via client-side routing using nav link
    await page.getByRole('link', { name: 'Deferred' }).first().click()
    await expect(page).toHaveURL('/deferred')

    // Data should load
    await expect(page.getByTestId('immediate-data')).toContainText('Fast User')
    await expect(page.getByTestId('deferred-data')).toContainText(
      'Deferred data loaded!',
      { timeout: 5000 },
    )
  })

  test('all data sources are server - proves SSR streaming works', async ({
    page,
  }) => {
    await page.goto('/deferred')

    // Wait for all deferred content
    await expect(page.getByTestId('deferred-data')).toBeVisible({
      timeout: 5000,
    })
    await expect(page.getByTestId('deferred-server-data')).toBeVisible({
      timeout: 5000,
    })

    // Count all elements showing 'server' source - should be 4:
    // 1. immediate-source
    // 2. loader-source
    // 3. deferred-data (contains "source: server")
    // 4. deferred-server-data (contains "source: server")
    await expect(page.getByTestId('immediate-source')).toContainText('server')
    await expect(page.getByTestId('loader-source')).toContainText('server')
    await expect(page.getByTestId('deferred-data')).toContainText(
      'source: server',
    )
    await expect(page.getByTestId('deferred-server-data')).toContainText(
      'source: server',
    )
  })
})