Skip to content

Commit bb42093

Browse files
hi-ogawacodex
hi-ogawa
and
codex
authored
test(rsc): add starter-extra and enhance css tests (#1202)
Co-authored-by: Codex <noreply@openai.com>
1 parent 152e549 commit bb42093

55 files changed

Lines changed: 352 additions & 150 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/plugin-rsc/e2e/base.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test.describe(() => {
77

88
test.beforeAll(async () => {
99
await setupInlineFixture({
10-
src: 'examples/starter',
10+
src: 'examples/starter-extra',
1111
dest: root,
1212
files: {
1313
'vite.config.base.ts': { cp: 'vite.config.ts' },

‎packages/plugin-rsc/e2e/basic.test.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1021,6 +1021,16 @@ function defineTest(f: Fixture) {
10211021
'color',
10221022
'rgb(0, 165, 255)',
10231023
)
1024+
editor.edit((s) =>
1025+
s.replaceAll(
1026+
'color: rgb(0, 165, 255);',
1027+
'/* color: rgb(0, 165, 255); */',
1028+
),
1029+
)
1030+
await expect(page.getByTestId('css-module-client')).toHaveCSS(
1031+
'color',
1032+
'rgb(0, 0, 0)',
1033+
)
10241034
editor.reset()
10251035
await expect(page.getByTestId('css-module-client')).toHaveCSS(
10261036
'color',
@@ -1038,13 +1048,81 @@ function defineTest(f: Fixture) {
10381048
'color',
10391049
'rgb(0, 165, 255)',
10401050
)
1051+
editor.edit((s) =>
1052+
s.replaceAll(
1053+
'color: rgb(0, 165, 255);',
1054+
'/* color: rgb(0, 165, 255); */',
1055+
),
1056+
)
1057+
await expect(page.getByTestId('css-module-server')).toHaveCSS(
1058+
'color',
1059+
'rgb(0, 0, 0)',
1060+
)
10411061
editor.reset()
10421062
await expect(page.getByTestId('css-module-server')).toHaveCSS(
10431063
'color',
10441064
'rgb(255, 165, 0)',
10451065
)
10461066
})
10471067

1068+
test('css shared hmr', async ({ page }) => {
1069+
await page.goto(f.url())
1070+
await waitForHydration(page)
1071+
await using _ = await expectNoReload(page)
1072+
const server = page.getByTestId('style-shared-server')
1073+
const client = page.getByTestId('style-shared-client')
1074+
await expect(server).toHaveCSS('color', 'rgb(255, 165, 0)')
1075+
await expect(client).toHaveCSS('color', 'rgb(255, 165, 0)')
1076+
1077+
const editor = f.createEditor('src/routes/style-shared/shared.css')
1078+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
1079+
await expect(server).toHaveCSS('color', 'rgb(0, 165, 255)')
1080+
await expect(client).toHaveCSS('color', 'rgb(0, 165, 255)')
1081+
1082+
// TODO: cover rule removal. After a prior server CSS HMR update, shared
1083+
// CSS can keep a stale client-side style rule here.
1084+
// editor.edit((s) =>
1085+
// s.replaceAll(
1086+
// 'color: rgb(0, 165, 255);',
1087+
// '/* color: rgb(0, 165, 255); */',
1088+
// ),
1089+
// )
1090+
// await expect(server).toHaveCSS('color', 'rgb(0, 0, 0)')
1091+
// await expect(client).toHaveCSS('color', 'rgb(0, 0, 0)')
1092+
1093+
// editor.reset()
1094+
// await expect(server).toHaveCSS('color', 'rgb(255, 165, 0)')
1095+
// await expect(client).toHaveCSS('color', 'rgb(255, 165, 0)')
1096+
})
1097+
1098+
test('css module shared hmr', async ({ page }) => {
1099+
await page.goto(f.url())
1100+
await waitForHydration(page)
1101+
await using _ = await expectNoReload(page)
1102+
const serverCard = page.getByTestId('css-module-shared-server')
1103+
const clientCard = page.getByTestId('css-module-shared-client')
1104+
await expect(serverCard).toHaveCSS('color', 'rgb(255, 165, 0)')
1105+
await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)')
1106+
1107+
const editor = f.createEditor('src/routes/style-shared/shared.module.css')
1108+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
1109+
await expect(serverCard).toHaveCSS('color', 'rgb(0, 165, 255)')
1110+
await expect(clientCard).toHaveCSS('color', 'rgb(0, 165, 255)')
1111+
1112+
editor.edit((s) =>
1113+
s.replaceAll(
1114+
'color: rgb(0, 165, 255);',
1115+
'/* color: rgb(0, 165, 255); */',
1116+
),
1117+
)
1118+
await expect(serverCard).toHaveCSS('color', 'rgb(0, 0, 0)')
1119+
await expect(clientCard).toHaveCSS('color', 'rgb(0, 0, 0)')
1120+
1121+
editor.reset()
1122+
await expect(serverCard).toHaveCSS('color', 'rgb(255, 165, 0)')
1123+
await expect(clientCard).toHaveCSS('color', 'rgb(255, 165, 0)')
1124+
})
1125+
10481126
test('css url client hmr', async ({ page }) => {
10491127
await page.goto(f.url())
10501128
await waitForHydration(page)

‎packages/plugin-rsc/e2e/browser-mode.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ test.skip(({ browserName }) => browserName === 'webkit')
88

99
test.describe('dev-browser-mode', () => {
1010
const f = useFixture({ root: 'examples/browser-mode', mode: 'dev' })
11-
defineStarterTest(f, 'browser-mode')
11+
defineStarterTest(f, { variant: 'browser-mode' })
1212
defineBrowserModeTest(f)
1313
})
1414

1515
test.describe('build-browser-mode', () => {
1616
const f = useFixture({ root: 'examples/browser-mode', mode: 'build' })
17-
defineStarterTest(f, 'browser-mode')
17+
defineStarterTest(f, { variant: 'browser-mode' })
1818
defineBrowserModeTest(f)
1919
})
2020

‎packages/plugin-rsc/e2e/browser.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ test.skip(({ browserName }) => browserName === 'webkit')
88

99
test.describe('dev-browser', () => {
1010
const f = useFixture({ root: 'examples/browser', mode: 'dev' })
11-
defineStarterTest(f, 'no-ssr')
11+
defineStarterTest(f, { variant: 'no-ssr' })
1212
})
1313

1414
test.describe('build-browser', () => {
1515
const f = useFixture({ root: 'examples/browser', mode: 'build' })
16-
defineStarterTest(f, 'no-ssr')
16+
defineStarterTest(f, { variant: 'no-ssr' })
1717
})

‎packages/plugin-rsc/e2e/build-app.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test.describe('buildApp hook', () => {
77
const root = 'examples/e2e/temp/buildApp'
88
test.beforeAll(async () => {
99
await setupInlineFixture({
10-
src: 'examples/starter',
10+
src: 'examples/starter-extra',
1111
dest: root,
1212
files: {
1313
'vite.config.base.ts': { cp: 'vite.config.ts' },

‎packages/plugin-rsc/e2e/cloudflare.test.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,20 @@ import { useFixture } from './fixture'
33
import { defineStarterTest } from './starter'
44

55
test.describe('dev-cloudflare', () => {
6-
const f = useFixture({ root: 'examples/starter-cf-single', mode: 'dev' })
6+
const f = useFixture({
7+
root: 'examples/starter-extra',
8+
mode: 'dev',
9+
command: 'pnpm cf:dev',
10+
})
711
defineStarterTest(f)
812
})
913

1014
test.describe('build-cloudflare', () => {
11-
const f = useFixture({ root: 'examples/starter-cf-single', mode: 'build' })
15+
const f = useFixture({
16+
root: 'examples/starter-extra',
17+
mode: 'build',
18+
buildCommand: 'pnpm cf:build',
19+
command: 'pnpm cf:preview',
20+
})
1221
defineStarterTest(f)
1322
})

‎packages/plugin-rsc/e2e/css-code-split.test.ts‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test.describe('cssCodeSplit-false', () => {
77

88
test.beforeAll(async () => {
99
await setupInlineFixture({
10-
src: 'examples/starter',
10+
src: 'examples/starter-extra',
1111
dest: root,
1212
files: {
1313
'vite.config.base.ts': { cp: 'vite.config.ts' },
@@ -23,33 +23,6 @@ test.describe('cssCodeSplit-false', () => {
2323
2424
export default mergeConfig(baseConfig, overrideConfig)
2525
`,
26-
// test server css module too
27-
// (starter example already tests normal server css)
28-
'src/server-only.module.css': /* css */ `
29-
.serverOnly {
30-
color: rgb(123, 45, 67);
31-
}
32-
`,
33-
'src/server-only.tsx': /* js */ `
34-
import styles from './server-only.module.css'
35-
export function ServerOnly() {
36-
return (
37-
<button data-testid="server-only" className={styles.serverOnly}>
38-
server-only
39-
</button>
40-
)
41-
}
42-
`,
43-
'src/root.tsx': {
44-
edit: (s) =>
45-
s
46-
.replace(
47-
`import { ClientCounter } from './client.tsx'`,
48-
`import { ClientCounter } from './client.tsx';
49-
import { ServerOnly } from './server-only.tsx'`,
50-
)
51-
.replace(`<ClientCounter />`, `<ClientCounter /><ServerOnly />`),
52-
},
5326
},
5427
})
5528
})
@@ -60,10 +33,9 @@ test.describe('cssCodeSplit-false', () => {
6033

6134
test('server css module', async ({ page }) => {
6235
await page.goto(f.url())
63-
await expect(page.getByTestId('server-only')).toHaveCSS(
64-
'color',
65-
'rgb(123, 45, 67)',
66-
)
36+
await expect(
37+
page.getByTestId('starter-extra-server-css-module'),
38+
).toHaveCSS('color', 'rgb(123, 45, 67)')
6739
})
6840
})
6941
})

‎packages/plugin-rsc/e2e/css-link-precedence.test.ts‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import { expect, test } from '@playwright/test'
1+
import { test } from '@playwright/test'
22
import { setupInlineFixture, useFixture } from './fixture'
3-
import { expectNoReload, waitForHydration } from './helper'
43
import { defineStarterTest } from './starter'
54

65
test.describe('cssLinkPrecedence-false', () => {
76
const root = 'examples/e2e/temp/cssLinkPrecedence-false'
87

98
test.beforeAll(async () => {
109
await setupInlineFixture({
11-
src: 'examples/starter',
10+
src: 'examples/starter-extra',
1211
dest: root,
1312
files: {
1413
'vite.config.base.ts': { cp: 'vite.config.ts' },
@@ -31,26 +30,6 @@ test.describe('cssLinkPrecedence-false', () => {
3130
test.describe('dev', () => {
3231
const f = useFixture({ root, mode: 'dev' })
3332
defineStarterTest(f)
34-
35-
// TODO: move css hmr test to `starter.ts`
36-
test('css hmr', async ({ page }) => {
37-
await page.goto(f.url())
38-
await waitForHydration(page)
39-
const card = page.locator('.card').nth(0)
40-
41-
await using _ = await expectNoReload(page)
42-
const editor = f.createEditor('src/index.css')
43-
editor.edit((s) =>
44-
s.replace(
45-
'.card {\n padding: 1rem;',
46-
`.card {\n padding: 1rem; background-color: rgb(255, 0, 200);`,
47-
),
48-
)
49-
await expect(card).toHaveCSS('background-color', 'rgb(255, 0, 200)')
50-
51-
editor.reset()
52-
await expect(card).not.toHaveCSS('background-color', 'rgb(255, 0, 200)')
53-
})
5433
})
5534

5635
test.describe('build', () => {

‎packages/plugin-rsc/e2e/error.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test.describe('invalid directives', () => {
77
const root = 'examples/e2e/temp/use-server-in-use-client'
88
test.beforeAll(async () => {
99
await setupInlineFixture({
10-
src: 'examples/starter',
10+
src: 'examples/starter-extra',
1111
dest: root,
1212
files: {
1313
'src/client.tsx': /* tsx */ `

‎packages/plugin-rsc/e2e/import-environment.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ test.describe('viteRsc.import', () => {
66
const root = 'examples/e2e/temp/import-environment'
77
test.beforeAll(async () => {
88
await setupInlineFixture({
9-
src: 'examples/starter',
9+
src: 'examples/starter-extra',
1010
dest: root,
1111
files: {
1212
'src/framework/entry.rsc.tsx': {

0 commit comments

Comments
 (0)