vite-plugin-react/packages/plugin-rsc/e2e/custom-server-function.test.ts at 7637970d8d8aa05db8dc80c0f2f44ffca71c71cc · 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
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()

    // 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()
  }
}