Skip to content

Commit e71da84

Browse files
hi-ogawahi-ogawa
authored
test(rsc): organize css tests (#778)
1 parent 4c4879b commit e71da84

File tree

8 files changed

+283
-140
lines changed

8 files changed

+283
-140
lines changed

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

Lines changed: 88 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -567,6 +567,15 @@ function defineTest(f: Fixture) {
567567
test('css @js', async ({ page }) => {
568568
await page.goto(f.url())
569569
await waitForHydration(page)
570+
await testCssBasic(page)
571+
})
572+
573+
testNoJs('css @nojs', async ({ page }) => {
574+
await page.goto(f.url())
575+
await testCss(page)
576+
})
577+
578+
async function testCssBasic(page: Page) {
570579
await testCss(page)
571580
await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
572581
'color',
@@ -576,20 +585,23 @@ function defineTest(f: Fixture) {
576585
'color',
577586
'rgb(255, 165, 0)',
578587
)
579-
})
580-
581-
testNoJs('css @nojs', async ({ page }) => {
582-
await page.goto(f.url())
583-
await testCss(page)
584-
await expect(page.locator('.test-dep-css-in-server')).toHaveCSS(
588+
await expect(page.getByTestId('css-module-client')).toHaveCSS(
585589
'color',
586590
'rgb(255, 165, 0)',
587591
)
588-
await expect(page.locator('.test-style-server-manual')).toHaveCSS(
592+
await expect(page.getByTestId('css-module-server')).toHaveCSS(
589593
'color',
590594
'rgb(255, 165, 0)',
591595
)
592-
})
596+
await expect(page.locator('.test-style-url-client')).toHaveCSS(
597+
'color',
598+
'rgb(255, 165, 0)',
599+
)
600+
await expect(page.locator('.test-style-url-server')).toHaveCSS(
601+
'color',
602+
'rgb(255, 165, 0)',
603+
)
604+
}
593605

594606
async function testCss(page: Page, color = 'rgb(255, 165, 0)') {
595607
await expect(page.locator('.test-style-client')).toHaveCSS('color', color)
@@ -783,128 +795,84 @@ function defineTest(f: Fixture) {
783795
)
784796
}).toPass()
785797
}
786-
})
787798

788-
test('css client no ssr', async ({ page }) => {
789-
await page.goto(f.url())
790-
await waitForHydration(page)
791-
await using _ = await expectNoReload(page)
792-
await page.locator("a[href='?test-client-style-no-ssr']").click()
793-
await expect(page.locator('.test-style-client-no-ssr')).toHaveCSS(
794-
'color',
795-
'rgb(0, 200, 100)',
796-
)
797-
})
798-
799-
test('css module client @js', async ({ page }) => {
800-
await page.goto(f.url())
801-
await waitForHydration(page)
802-
await expect(page.getByTestId('css-module-client')).toHaveCSS(
803-
'color',
804-
'rgb(255, 165, 0)',
805-
)
806-
807-
if (f.mode !== 'dev') return
808-
809-
// test client css module HMR
810-
await using _ = await expectNoReload(page)
811-
const editor = f.createEditor('src/routes/style-client/client.module.css')
812-
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
813-
await expect(page.getByTestId('css-module-client')).toHaveCSS(
814-
'color',
815-
'rgb(0, 165, 255)',
816-
)
817-
editor.reset()
818-
await expect(page.getByTestId('css-module-client')).toHaveCSS(
819-
'color',
820-
'rgb(255, 165, 0)',
821-
)
822-
})
823-
824-
test('css module server @js', async ({ page }) => {
825-
await page.goto(f.url())
826-
await waitForHydration(page)
827-
await expect(page.getByTestId('css-module-server')).toHaveCSS(
828-
'color',
829-
'rgb(255, 165, 0)',
830-
)
831-
832-
if (f.mode !== 'dev') return
833-
834-
// test server css module HMR
835-
await using _ = await expectNoReload(page)
836-
const editor = f.createEditor('src/routes/style-server/server.module.css')
837-
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
838-
await expect(page.getByTestId('css-module-server')).toHaveCSS(
839-
'color',
840-
'rgb(0, 165, 255)',
841-
)
842-
editor.reset()
843-
await expect(page.getByTestId('css-module-server')).toHaveCSS(
844-
'color',
845-
'rgb(255, 165, 0)',
846-
)
847-
})
848-
849-
testNoJs('css module @nojs', async ({ page }) => {
850-
await page.goto(f.url())
851-
await expect(page.getByTestId('css-module-client')).toHaveCSS(
852-
'color',
853-
'rgb(255, 165, 0)',
854-
)
855-
await expect(page.getByTestId('css-module-server')).toHaveCSS(
856-
'color',
857-
'rgb(255, 165, 0)',
858-
)
859-
})
799+
test('css module client hmr', async ({ page }) => {
800+
await page.goto(f.url())
801+
await waitForHydration(page)
802+
await using _ = await expectNoReload(page)
803+
const editor = f.createEditor('src/routes/style-client/client.module.css')
804+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
805+
await expect(page.getByTestId('css-module-client')).toHaveCSS(
806+
'color',
807+
'rgb(0, 165, 255)',
808+
)
809+
editor.reset()
810+
await expect(page.getByTestId('css-module-client')).toHaveCSS(
811+
'color',
812+
'rgb(255, 165, 0)',
813+
)
814+
})
860815

861-
test('css url client @js', async ({ page }) => {
862-
await page.goto(f.url())
863-
await waitForHydration(page)
864-
await expect(page.locator('.test-style-url-client')).toHaveCSS(
865-
'color',
866-
'rgb(255, 165, 0)',
867-
)
816+
test('css module server hmr', async ({ page }) => {
817+
await page.goto(f.url())
818+
await waitForHydration(page)
819+
await using _ = await expectNoReload(page)
820+
const editor = f.createEditor('src/routes/style-server/server.module.css')
821+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
822+
await expect(page.getByTestId('css-module-server')).toHaveCSS(
823+
'color',
824+
'rgb(0, 165, 255)',
825+
)
826+
editor.reset()
827+
await expect(page.getByTestId('css-module-server')).toHaveCSS(
828+
'color',
829+
'rgb(255, 165, 0)',
830+
)
831+
})
868832

869-
if (f.mode !== 'dev') return
833+
test('css url client hmr', async ({ page }) => {
834+
await page.goto(f.url())
835+
await waitForHydration(page)
836+
await using _ = await expectNoReload(page)
837+
const editor = f.createEditor('src/routes/style-client/client-url.css')
838+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
839+
await expect(page.locator('.test-style-url-client')).toHaveCSS(
840+
'color',
841+
'rgb(0, 165, 255)',
842+
)
843+
editor.reset()
844+
await expect(page.locator('.test-style-url-client')).toHaveCSS(
845+
'color',
846+
'rgb(255, 165, 0)',
847+
)
848+
})
870849

871-
// test client css url HMR
872-
await using _ = await expectNoReload(page)
873-
const editor = f.createEditor('src/routes/style-client/client-url.css')
874-
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
875-
await expect(page.locator('.test-style-url-client')).toHaveCSS(
876-
'color',
877-
'rgb(0, 165, 255)',
878-
)
879-
editor.reset()
880-
await expect(page.locator('.test-style-url-client')).toHaveCSS(
881-
'color',
882-
'rgb(255, 165, 0)',
883-
)
850+
test('css url server hmr', async ({ page }) => {
851+
await page.goto(f.url())
852+
await waitForHydration(page)
853+
await using _ = await expectNoReload(page)
854+
const editor = f.createEditor('src/routes/style-server/server-url.css')
855+
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
856+
await expect(page.locator('.test-style-url-server')).toHaveCSS(
857+
'color',
858+
'rgb(0, 165, 255)',
859+
)
860+
editor.reset()
861+
await expect(page.locator('.test-style-url-server')).toHaveCSS(
862+
'color',
863+
'rgb(255, 165, 0)',
864+
)
865+
})
884866
})
885867

886-
test('css url server @js', async ({ page }) => {
868+
test('css client no ssr', async ({ page }) => {
887869
await page.goto(f.url())
888870
await waitForHydration(page)
889-
await expect(page.locator('.test-style-url-server')).toHaveCSS(
890-
'color',
891-
'rgb(255, 165, 0)',
892-
)
893-
894-
if (f.mode !== 'dev') return
895-
896-
// test server css url HMR
897871
await using _ = await expectNoReload(page)
898-
const editor = f.createEditor('src/routes/style-server/server-url.css')
899-
editor.edit((s) => s.replaceAll('rgb(255, 165, 0)', 'rgb(0, 165, 255)'))
900-
await expect(page.locator('.test-style-url-server')).toHaveCSS(
901-
'color',
902-
'rgb(0, 165, 255)',
903-
)
904-
editor.reset()
905-
await expect(page.locator('.test-style-url-server')).toHaveCSS(
872+
await page.locator("a[href='?test-client-style-no-ssr']").click()
873+
await expect(page.locator('.test-style-client-no-ssr')).toHaveCSS(
906874
'color',
907-
'rgb(255, 165, 0)',
875+
'rgb(0, 200, 100)',
908876
)
909877
})
910878

‎packages/plugin-rsc/examples/basic/src/routes/css-queries/client.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export function TestCssQueriesClient(props: {
1515
return (
1616
<div>
1717
<button onClick={() => setEnabled(!enabled)}>test-css-queries</button>
18+
<br />
1819
{enabled && (
1920
<>
2021
<link rel="stylesheet" href={cssUrl} />
@@ -25,9 +26,11 @@ export function TestCssQueriesClient(props: {
2526
<style>{props.serverRaw}</style>
2627
</>
2728
)}
28-
<div className="test-css-url-client">test-css-url-client</div>
29-
<div className="test-css-inline-client">test-css-inline-client</div>
30-
<div className="test-css-raw-client">test-css-raw-client</div>
29+
<span className="test-css-url-client">test-css-url-client</span>
30+
<span>|</span>
31+
<span className="test-css-inline-client">test-css-inline-client</span>
32+
<span>|</span>
33+
<span className="test-css-raw-client">test-css-raw-client</span>
3134
</div>
3235
)
3336
}

‎packages/plugin-rsc/examples/basic/src/routes/css-queries/server.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export function TestCssQueries() {
1111
serverInline={cssInline}
1212
serverRaw={cssRaw}
1313
/>
14-
<div>
15-
<div className="test-css-url-server">test-css-url-server</div>
16-
<div className="test-css-inline-server">test-css-inline-server</div>
17-
<div className="test-css-raw-server">test-css-raw-server</div>
18-
</div>
14+
<span className="test-css-url-server">test-css-url-server</span>
15+
<span>|</span>
16+
<span className="test-css-inline-server">test-css-inline-server</span>
17+
<span>|</span>
18+
<span className="test-css-raw-server">test-css-raw-server</span>
1919
</div>
2020
)
2121
}

‎packages/plugin-rsc/examples/basic/src/routes/root.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ import { TestSerializationServer } from './serialization/server'
2323
import { TestCssClientNoSsr } from './style-client-no-ssr/server'
2424
import { TestStyleClient } from './style-client/client'
2525
import { TestStyleServer } from './style-server/server'
26-
import { TestTailwindClient } from './tailwind/client'
27-
import { TestTailwindServer } from './tailwind/server'
2826
import { TestTemporaryReference } from './temporary-reference/client'
2927
import { TestUseCache } from './use-cache/server'
3028
import { TestReactCache } from './react-cache/server'
@@ -42,6 +40,7 @@ import { TestHmrSwitchServer } from './hmr-switch/server'
4240
import { TestHmrSwitchClient } from './hmr-switch/client'
4341
import { TestTreeShakeServer } from './tree-shake/server'
4442
import { TestClientChunkServer } from './chunk/server'
43+
import { TestTailwind } from './tailwind'
4544

4645
export function Root(props: { url: URL }) {
4746
return (
@@ -61,8 +60,7 @@ export function Root(props: { url: URL }) {
6160
<TestStyleClient />
6261
<TestStyleServer />
6362
<TestCssClientNoSsr url={props.url} />
64-
<TestTailwindClient />
65-
<TestTailwindServer />
63+
<TestTailwind />
6664
<TestDepCssInServer />
6765
<TestHydrationMismatch url={props.url} />
6866
<TestHmrClientDep />

‎packages/plugin-rsc/examples/basic/src/routes/style-client/client.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,21 @@ import styleUrl from './client-url.css?url'
77

88
export function TestStyleClient() {
99
return (
10-
<>
10+
<div style={{ display: 'flex' }}>
1111
<div className="test-style-client">test-style-client</div>
12+
<span>|</span>
1213
<div data-testid="css-module-client" className={styles.client}>
1314
test-css-module-client
1415
</div>
16+
<span>|</span>
1517
<link
1618
rel="stylesheet"
1719
href={styleUrl}
1820
precedence="test-style-manual-link"
1921
/>
2022
<div className="test-style-url-client">test-style-url-client</div>
23+
<span>|</span>
2124
<TestClientDep />
22-
</>
25+
</div>
2326
)
2427
}

‎packages/plugin-rsc/examples/basic/src/routes/style-server/server.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,26 @@ import styleUrl from './server-url.css?url'
44

55
export function TestStyleServer() {
66
return (
7-
<>
7+
<div style={{ display: 'flex' }}>
88
<div className="test-style-server">test-style-server</div>
9+
<span>|</span>
910
<div data-testid="css-module-server" className={styles.server}>
1011
test-css-module-server
1112
</div>
13+
<span>|</span>
1214
<link
1315
rel="stylesheet"
1416
href={styleUrl}
1517
precedence="test-style-manual-link"
1618
/>
1719
<div className="test-style-url-server">test-style-url-server</div>
20+
<span>|</span>
1821
<link
1922
rel="stylesheet"
2023
href="/test-style-server-manual.css"
2124
precedence="test-style-manual-link"
2225
/>
2326
<div className="test-style-server-manual">test-style-server-manual</div>
24-
</>
27+
</div>
2528
)
2629
}

‎packages/plugin-rsc/examples/basic/src/routes/tailwind/index.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { TestTailwindClient } from './client'
2+
import { TestTailwindServer } from './server'
3+
4+
export function TestTailwind() {
5+
return (
6+
<div style={{ display: 'flex' }}>
7+
<TestTailwindClient />
8+
<span>|</span>
9+
<TestTailwindServer />
10+
</div>
11+
)
12+
}

0 commit comments

Comments
 (0)