Skip to content

Commit de9a173

Browse files
tivactivac
authored
More playwright (#928)
* test: test built vite sites as well * test: validate dynamic import ordering Looks like my hack in https://github.com/tivac/modular-css/blob/4af74248fb2bda844dd8c0a2ef3831e2edd94f26/packages/vite/vite.js#L196-L203 totally does fix the issue described in vitejs/vite#3924 which is exciting and somewhat surprising? * test: simplify via playwright projects * trying again
1 parent 4ba4e33 commit de9a173

17 files changed

+132
-45
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"release": "changeset publish",
1717
"test": "jest",
1818
"test:playwright": "playwright test",
19-
"start:vite": "vite",
2019
"watch": "jest --watch",
2120
"start": "npm start --workspace=@modular-css/www",
2221
"www:build": "npm run build --workspace=@modular-css/www",

‎packages/vite/tests/specimens/a.mcss

-5
This file was deleted.

‎packages/vite/tests/specimens/b.mcss

-5
This file was deleted.

‎packages/vite/tests/specimens/dynamic/a.mcss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.a {
2+
composes: c from "../shared/dynamic-c.mcss";
3+
4+
color: red;
5+
}

‎packages/vite/tests/specimens/dynamic/b.mcss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.b {
2+
composes: c from "../shared/dynamic-c.mcss";
3+
4+
color: white;
5+
}

‎packages/vite/tests/specimens/dynamic/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
3+
<body>
4+
<div id="a">A</div>
5+
6+
<div id="b">B</div>
7+
8+
<script type="module" src="./script.js"></script>
9+
</body>

‎packages/vite/tests/specimens/dynamic/script.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const aEl = document.querySelector("#a");
2+
const bEl = document.querySelector("#b");
3+
4+
(async function() {
5+
const a = await import("./a.mcss");
6+
const b = await import("./b.mcss");
7+
8+
console.log({ a, b });
9+
10+
aEl.className = a.a;
11+
bEl.className = b.b;
12+
}());
13+

‎packages/vite/tests/specimens/index.html

-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +0,0 @@
1-
<!DOCTYPE html>
2-
3-
<body>
4-
<div id="a">A</div>
5-
6-
<div id="b">B</div>
7-
8-
<script type="module" src="./script.js"></script>
9-
</body>

‎packages/vite/tests/specimens/c.mcss renamed to ‎packages/vite/tests/specimens/shared/dynamic-c.mcss

File renamed without changes.

‎packages/vite/tests/specimens/shared/static-c.mcss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.c {
2+
background-color: blue;
3+
4+
width: 100px;
5+
height: 100px;
6+
}

‎packages/vite/tests/specimens/static/a.mcss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.a {
2+
composes: c from "../shared/static-c.mcss";
3+
4+
color: red;
5+
}

‎packages/vite/tests/specimens/static/b.mcss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.b {
2+
composes: c from "../shared/static-c.mcss";
3+
4+
color: white;
5+
}

‎packages/vite/tests/specimens/static/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
3+
<body>
4+
<div id="a">A</div>
5+
6+
<div id="b">B</div>
7+
8+
<script type="module" src="./script.js"></script>
9+
</body>

‎packages/vite/tests/specimens/script.js renamed to ‎packages/vite/tests/specimens/static/script.js

File renamed without changes.

‎packages/vite/tests/vite.spec.mjs

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { test, expect } from "@playwright/test";
1+
import { test as testBase, expect } from "@playwright/test";
22

3-
test.beforeEach(async ({ page }) => {
4-
await page.goto("/");
5-
})
6-
7-
test("a is right", async ({ page }) => {
8-
const el = await page.getByText("A");
9-
10-
await expect(el).toBeVisible();
11-
12-
await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
13-
await expect(el).toHaveCSS("color", "rgb(255, 0, 0)");
14-
await expect(el).toHaveClass("mc_c mc_a");
3+
const test = testBase.extend({
4+
dir : [ "static", { option : true }],
155
});
166

17-
test("b is right", async ({ page }) => {
18-
const el = await page.getByText("B");
7+
test("style ordering", async ({ page, dir }) => {
8+
await page.goto(`/${dir}/`);
9+
10+
const a = await page.getByText("A");
1911

20-
await expect(el).toBeVisible();
12+
await expect(a).toBeVisible();
2113

22-
await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
23-
await expect(el).toHaveCSS("color", "rgb(255, 255, 255)");
24-
await expect(el).toHaveClass("mc_c mc_b");
14+
await expect(a).toHaveCSS("background-color", "rgb(0, 0, 255)");
15+
await expect(a).toHaveCSS("color", "rgb(255, 0, 0)");
16+
await expect(a).toHaveClass("mc_c mc_a");
17+
18+
const b = await page.getByText("B");
19+
20+
await expect(b).toBeVisible();
21+
22+
await expect(b).toHaveCSS("background-color", "rgb(0, 0, 255)");
23+
await expect(b).toHaveCSS("color", "rgb(255, 255, 255)");
24+
await expect(b).toHaveClass("mc_c mc_b");
2525
});

‎playwright.config.js

+43-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/** @type {import("@playwright/test").PlaywrightTestConfig} */
1+
/** @type {import("@playwright/test").PlaywrightTestConfig}<{ dir : string }> */
22
const config = {
33
testDir : "./packages/vite/tests",
4-
// baseURL : "http://127.0.0.1:5173",
54

65
timeout : 30 * 1000,
76

@@ -22,17 +21,55 @@ const config = {
2221
workers : process.env.CI ? 1 : undefined,
2322

2423
use : {
24+
channel : "chromium",
25+
2526
screenshot : "only-on-failure",
2627
trace : "on-first-retry",
2728
video : "on-first-retry",
2829
},
2930

30-
webServer : {
31-
command : "npm run start:vite",
31+
webServer : [{
32+
command : "npx vite",
3233
port : 5173,
3334
timeout : 30 * 1000,
34-
reuseExistingServer : true,
35-
},
35+
reuseExistingServer : !process.env.CI,
36+
}, {
37+
command : "npx vite build && npx vite preview --port=5174",
38+
port : 5174,
39+
timeout : 30 * 1000,
40+
reuseExistingServer : !process.env.CI,
41+
}],
42+
43+
projects : [
44+
{
45+
name : "serve - static",
46+
use : {
47+
baseURL : "http://localhost:5173",
48+
dir : "static",
49+
},
50+
},
51+
{
52+
name : "serve - dynamic",
53+
use : {
54+
baseURL : "http://localhost:5173",
55+
dir : "dynamic",
56+
},
57+
},
58+
{
59+
name : "built - static",
60+
use : {
61+
baseURL : "http://localhost:5174",
62+
dir : "static",
63+
},
64+
},
65+
{
66+
name : "built - dynamic",
67+
use : {
68+
baseURL : "http://localhost:5174",
69+
dir : "dynamic",
70+
},
71+
},
72+
],
3673
};
3774

3875
module.exports = config;

‎vite.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { resolve } from "path";
2+
13
import mcss from "./packages/vite/vite.js";
24

35
/** @type {import('vite').UserConfig} */
@@ -11,4 +13,15 @@ export default {
1113
namer : (file, selector) => `mc_${selector}`,
1214
}),
1315
],
16+
17+
build : {
18+
minify : false,
19+
20+
rollupOptions : {
21+
input : {
22+
static : resolve(__dirname, "./packages/vite/tests/specimens/static/index.html"),
23+
dynamic : resolve(__dirname, "./packages/vite/tests/specimens/dynamic/index.html"),
24+
},
25+
},
26+
},
1427
};

0 commit comments

Comments
 (0)