Skip to content

Commit 7a597d9

Browse files
Hajime-sanHajime-san
committed
enhance test
1 parent 493f81a commit 7a597d9

8 files changed

Lines changed: 158 additions & 14 deletions

File tree

‎packages/plugin-vite/demo/components/CssModuleNonIsland4.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import styles from "./CssModulesNonIsland4.module.css";
2+
3+
export function CssModulesNonIsland4() {
4+
return (
5+
<div class="orange">
6+
<h1 class={styles.root}>orange text</h1>
7+
</div>
8+
);
9+
}

‎packages/plugin-vite/demo/components/CssModulesNonIsland4.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.root {
2+
color: orange;
3+
}

‎packages/plugin-vite/src/plugins/server_snapshot.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@ import * as path from "@std/path";
2525
import { getBuildId } from "./build_id.ts";
2626

2727
const CSS_LANG_REG = /\.(css|less|sass|scss)(\?.*)?$/;
28+
export const FRESH_CSS_PLACEHOLDER = `["__FRESH_CSS_PLACEHOLDER__"]`;
29+
30+
export function replaceFreshCssPlaceholders(
31+
content: string,
32+
css: string[] | undefined,
33+
): string {
34+
return content.replaceAll(
35+
FRESH_CSS_PLACEHOLDER,
36+
css ? JSON.stringify(css.map((href) => `/${href}`)) : "null",
37+
);
38+
}
2839

2940
export function serverSnapshot(options: ResolvedFreshViteConfig): Plugin[] {
3041
const modName = "fresh:server-snapshot";
@@ -530,15 +541,10 @@ export default ${JSON.stringify(route.css)}
530541

531542
const filePath = path.join(serverOutDir, info.file);
532543
const content = await Deno.readTextFile(filePath);
533-
if (!content.includes(`["__FRESH_CSS_PLACEHOLDER__"]`)) continue;
544+
if (!content.includes(FRESH_CSS_PLACEHOLDER)) continue;
534545

535546
// Replace all placeholders in the file with the CSS
536-
const replaced = content.replaceAll(
537-
`["__FRESH_CSS_PLACEHOLDER__"]`,
538-
info.css
539-
? JSON.stringify(info.css.map((css) => `/${css}`))
540-
: "null",
541-
);
547+
const replaced = replaceFreshCssPlaceholders(content, info.css);
542548

543549
await Deno.writeTextFile(filePath, replaced);
544550
}

‎packages/plugin-vite/src/plugins/server_snapshot_test.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { expect } from "@std/expect/expect";
2+
import {
3+
FRESH_CSS_PLACEHOLDER,
4+
replaceFreshCssPlaceholders,
5+
} from "./server_snapshot.ts";
6+
7+
Deno.test("server snapshot - replaceFreshCssPlaceholders with no css", () => {
8+
const output = replaceFreshCssPlaceholders(
9+
`export default ${FRESH_CSS_PLACEHOLDER};`,
10+
undefined,
11+
);
12+
13+
expect(output).toEqual("export default null;");
14+
});
15+
16+
Deno.test("server snapshot - replaceFreshCssPlaceholders once", () => {
17+
const output = replaceFreshCssPlaceholders(
18+
`const css = ${FRESH_CSS_PLACEHOLDER};`,
19+
["assets/server-entry.css"],
20+
);
21+
22+
expect(output).toEqual(`const css = ["/assets/server-entry.css"];`);
23+
});
24+
25+
Deno.test("server snapshot - replaceFreshCssPlaceholders multiple times", () => {
26+
const output = replaceFreshCssPlaceholders(
27+
[
28+
`const appCss = ${FRESH_CSS_PLACEHOLDER};`,
29+
`const layoutCss = ${FRESH_CSS_PLACEHOLDER};`,
30+
`const errorCss = ${FRESH_CSS_PLACEHOLDER};`,
31+
].join("\n"),
32+
["assets/server-entry.css"],
33+
);
34+
35+
expect(output).toEqual([
36+
`const appCss = ["/assets/server-entry.css"];`,
37+
`const layoutCss = ["/assets/server-entry.css"];`,
38+
`const errorCss = ["/assets/server-entry.css"];`,
39+
].join("\n"));
40+
});

‎packages/plugin-vite/tests/build_test.ts‎

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { expect } from "@std/expect";
2+
import { walk } from "@std/fs/walk";
23
import {
34
waitFor,
45
waitForText,
@@ -13,8 +14,13 @@ import {
1314
usingEnv,
1415
} from "./test_utils.ts";
1516
import * as path from "@std/path";
17+
import { FRESH_CSS_PLACEHOLDER } from "../src/plugins/server_snapshot.ts";
1618

1719
const viteResult = await buildVite(DEMO_DIR);
20+
const NON_ISLAND_CSS_MODULES_FIXTURE = path.join(
21+
FIXTURE_DIR,
22+
"non_island_css_modules",
23+
);
1824

1925
integrationTest("vite build - launches", async () => {
2026
await launchProd(
@@ -391,8 +397,7 @@ integrationTest(
391397
integrationTest(
392398
"vite build - css modules in _app/_layout/_error non-island component are injected",
393399
async () => {
394-
const fixture = path.join(FIXTURE_DIR, "non_island_css_modules");
395-
await using res = await buildVite(fixture);
400+
await using res = await buildVite(NON_ISLAND_CSS_MODULES_FIXTURE);
396401

397402
await launchProd(
398403
{ cwd: res.tmp },
@@ -417,7 +422,7 @@ integrationTest(
417422

418423
{
419424
// check _app/_layout/_error
420-
await page.goto(`${address}/non_existent`, {
425+
await page.goto(`${address}/boom`, {
421426
waitUntil: "networkidle2",
422427
});
423428

@@ -436,6 +441,28 @@ integrationTest(
436441
.evaluate((el) => window.getComputedStyle(el).color);
437442
expect(_error).toEqual("rgb(0, 0, 255)");
438443
}
444+
445+
{
446+
// check _app/_layout/_404
447+
await page.goto(`${address}/non_existent`, {
448+
waitUntil: "networkidle2",
449+
});
450+
451+
const _app = await page
452+
.locator<HTMLHeadingElement>(".green > h1")
453+
.evaluate((el) => window.getComputedStyle(el).color);
454+
expect(_app).toEqual("rgb(0, 128, 0)");
455+
456+
const _layout = await page
457+
.locator<HTMLHeadingElement>(".red > h1")
458+
.evaluate((el) => window.getComputedStyle(el).color);
459+
expect(_layout).toEqual("rgb(255, 0, 0)");
460+
461+
const _404 = await page
462+
.locator<HTMLHeadingElement>(".orange > h1")
463+
.evaluate((el) => window.getComputedStyle(el).color);
464+
expect(_404).toEqual("rgb(255, 165, 0)");
465+
}
439466
});
440467
},
441468
);
@@ -465,15 +492,41 @@ integrationTest("vite build - route css import", async () => {
465492
});
466493

467494
integrationTest(
468-
"vite build - __FRESH_CSS_PLACEHOLDER__ has been replaced",
495+
"vite build - __FRESH_CSS_PLACEHOLDER__ has been replaced in all server chunks",
496+
async () => {
497+
await using res = await buildVite(NON_ISLAND_CSS_MODULES_FIXTURE, {
498+
base: "/my-app/",
499+
});
500+
501+
const serverDir = path.join(res.tmp, "_fresh", "server");
502+
const inspected: string[] = [];
503+
for await (
504+
const entry of walk(serverDir, {
505+
exts: [".mjs"],
506+
includeDirs: false,
507+
})
508+
) {
509+
const content = await Deno.readTextFile(entry.path);
510+
inspected.push(path.relative(serverDir, entry.path));
511+
expect(content).not.toContain(FRESH_CSS_PLACEHOLDER);
512+
}
513+
514+
expect(inspected.length).toBeGreaterThan(0);
515+
},
516+
);
517+
518+
integrationTest(
519+
"vite build - shared server chunk keeps utility css references after replacement",
469520
async () => {
470-
await using res = await buildVite(DEMO_DIR, { base: "/my-app/" });
521+
await using res = await buildVite(NON_ISLAND_CSS_MODULES_FIXTURE);
471522

472523
const serverEntryJs = await Deno.readTextFile(
473524
path.join(res.tmp, "_fresh", "server", "server-entry.mjs"),
474525
);
475526

476-
expect(serverEntryJs).not.toContain("__FRESH_CSS_PLACEHOLDER__");
527+
const cssRefs = serverEntryJs.match(/"\/assets\/server-entry-.*?\.css"/g) ??
528+
[];
529+
expect(cssRefs.length).toBeGreaterThanOrEqual(4);
477530
},
478531
);
479532

‎packages/plugin-vite/tests/dev_server_test.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ integrationTest(
307307

308308
{
309309
// check _app/_layout/_error
310-
await page.goto(`${address}/non_existent`, {
310+
await page.goto(`${address}/boom`, {
311311
waitUntil: "networkidle2",
312312
});
313313

@@ -326,6 +326,28 @@ integrationTest(
326326
.evaluate((el) => window.getComputedStyle(el).color);
327327
expect(_error).toEqual("rgb(0, 0, 255)");
328328
}
329+
330+
{
331+
// check _app/_layout/_404
332+
await page.goto(`${address}/non_existent`, {
333+
waitUntil: "networkidle2",
334+
});
335+
336+
const _app = await page
337+
.locator<HTMLHeadingElement>(".green > h1")
338+
.evaluate((el) => window.getComputedStyle(el).color);
339+
expect(_app).toEqual("rgb(0, 128, 0)");
340+
341+
const _layout = await page
342+
.locator<HTMLHeadingElement>(".red > h1")
343+
.evaluate((el) => window.getComputedStyle(el).color);
344+
expect(_layout).toEqual("rgb(255, 0, 0)");
345+
346+
const _404 = await page
347+
.locator<HTMLHeadingElement>(".orange > h1")
348+
.evaluate((el) => window.getComputedStyle(el).color);
349+
expect(_404).toEqual("rgb(255, 165, 0)");
350+
}
329351
});
330352
});
331353
},

‎packages/plugin-vite/tests/fixtures/non_island_css_modules/routes/_404.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { CssModulesNonIsland4 } from "../../../../demo/components/CssModuleNonIsland4.tsx";
2+
import { define } from "../utils.ts";
3+
4+
export default define.page(() => {
5+
return <CssModulesNonIsland4 />;
6+
});

‎packages/plugin-vite/tests/fixtures/non_island_css_modules/routes/boom.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { define } from "../utils.ts";
2+
3+
export default define.page(() => {
4+
throw new Error("boom");
5+
});

0 commit comments

Comments
 (0)