vite-plugin-react/packages/plugin-rsc/e2e/custom-server-function.test.ts at ae12407bc4be85adb83f6db9fd65f33072d5d061 · vitejs/vite-plugin-react · 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
128
129
130
131
132
133
134
import { expect, test, type Page } from '@playwright/test'
import { useFixture } from './fixture'
import {
  expectNoPageError,
  expectNoReload,
  testNoJs,
  waitForHydration,
} from './helper'

test.describe('dev-custom-server-function', () => {
  const f = useFixture({
    root: 'examples/custom-server-function',
    mode: 'dev',
  })
  defineTest(f)

  test('moves an action between custom and built-in ownership', async ({
    page,
  }) => {
    using _ = expectNoPageError(page)
    await page.goto(f.url())
    await waitForHydration(page)
    await using _noReload = await expectNoReload(page)

    const editor = f.createEditor('src/features/mixed-directives/actions.ts')
    // Switch one export from the custom plugin to the built-in plugin. HMR
    // must remove the custom claim while preserving the module's other claims.
    editor.edit((source) =>
      source
        .replace(`'use custom-server'`, `'use server'`)
        .replace(
          `customLabel = 'Custom'`,
          `customLabel = 'Custom changed to built-in'`,
        )
        .replace('customCount++', 'customCount += 10'),
    )

    await expect(
      page.getByRole('button', { name: 'Custom changed to built-in: 0' }),
    ).toBeVisible()
    await page.getByRole('button', { name: 'Built-in: 0', exact: true }).click()
    await expect(
      page.getByRole('button', { name: 'Built-in: 1', exact: true }),
    ).toBeVisible()
    await page
      .getByRole('button', { name: 'Custom changed to built-in: 0' })
      .click()
    await expect(
      page.getByRole('button', { name: 'Custom changed to built-in: 10' }),
    ).toBeVisible()

    // Switch the export back and verify neither owner retained stale state.
    editor.reset()
    await expect(page.getByRole('button', { name: 'Custom: 0' })).toBeVisible()
    await page.getByRole('button', { name: 'Built-in: 0', exact: true }).click()
    await expect(
      page.getByRole('button', { name: 'Built-in: 1', exact: true }),
    ).toBeVisible()
    await page.getByRole('button', { name: 'Custom: 0' }).click()
    await expect(page.getByRole('button', { name: 'Custom: 1' })).toBeVisible()
  })
})

test.describe('build-custom-server-function', () => {
  const f = useFixture({
    root: 'examples/custom-server-function',
    mode: 'build',
  })
  defineTest(f)
})

function defineTest(f: ReturnType<typeof useFixture>) {
  test('built-in and custom server functions', async ({ page }) => {
    using _ = expectNoPageError(page)
    await page.goto(f.url())
    await waitForHydration(page)
    await testActions(page)
  })

  testNoJs('progressive forms', async ({ page }) => {
    await page.goto(f.url())
    await testActions(page)
  })

  async function testActions(page: Page) {
    // The first two actions are inline functions in one RSC-reachable module.
    await page.getByRole('button', { name: 'Built-in: 0' }).click()
    await expect(
      page.getByRole('button', { name: 'Built-in: 1' }),
    ).toBeVisible()

    await page.getByRole('button', { name: 'Custom: 0' }).click()
    await expect(page.getByRole('button', { name: 'Custom: 1' })).toBeVisible()

    await page
      .getByRole('button', { name: 'Server file, custom inline: 0' })
      .click()
    await expect(
      page.getByRole('button', { name: 'Server file, custom inline: 1' }),
    ).toBeVisible()

    await page
      .getByRole('button', { name: 'Custom server file, server inline: 0' })
      .click()
    await expect(
      page.getByRole('button', {
        name: 'Custom server file, server inline: 1',
      }),
    ).toBeVisible()

    // This module is only imported by a Client Component, so its implementation
    // reaches the RSC build through the aggregated server reference manifest.
    await page.getByRole('button', { name: 'From client: 0' }).click()
    await expect(
      page.getByRole('button', { name: 'From client: 1' }),
    ).toBeVisible()

    await page.getByRole('button', { name: 'Reset' }).click()
    await expect(
      page.getByRole('button', { name: 'Built-in: 0' }),
    ).toBeVisible()
    await expect(page.getByRole('button', { name: 'Custom: 0' })).toBeVisible()

    await page.getByRole('button', { name: 'Reset composition' }).click()
    await expect(
      page.getByRole('button', { name: 'Server file, custom inline: 0' }),
    ).toBeVisible()
    await expect(
      page.getByRole('button', {
        name: 'Custom server file, server inline: 0',
      }),
    ).toBeVisible()
  }
}