More playwright (#928)

tivac · web-flow · commit de9a17330c84 · 2023-02-19T10:20:47.000-08:00
* 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
diff --git a/package.json b/package.json
@@ -16,7 +16,6 @@
     "release": "changeset publish",
     "test": "jest",
     "test:playwright": "playwright test",
-    "start:vite": "vite",
     "watch": "jest --watch",
     "start": "npm start --workspace=@modular-css/www",
     "www:build": "npm run build --workspace=@modular-css/www",
diff --git a/packages/vite/tests/specimens/a.mcss b/packages/vite/tests/specimens/a.mcss
diff --git a/packages/vite/tests/specimens/b.mcss b/packages/vite/tests/specimens/b.mcss
diff --git a/packages/vite/tests/specimens/dynamic/a.mcss b/packages/vite/tests/specimens/dynamic/a.mcss
@@ -0,0 +1,5 @@
+.a {
+    composes: c from "../shared/dynamic-c.mcss";
+
+    color: red;
+}
diff --git a/packages/vite/tests/specimens/dynamic/b.mcss b/packages/vite/tests/specimens/dynamic/b.mcss
@@ -0,0 +1,5 @@
+.b {
+    composes: c from "../shared/dynamic-c.mcss";
+
+    color: white;
+}
diff --git a/packages/vite/tests/specimens/dynamic/index.html b/packages/vite/tests/specimens/dynamic/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<body>
+    <div id="a">A</div>
+
+    <div id="b">B</div>
+
+    <script type="module" src="./script.js"></script>
+</body>
diff --git a/packages/vite/tests/specimens/dynamic/script.js b/packages/vite/tests/specimens/dynamic/script.js
@@ -0,0 +1,13 @@
+const aEl = document.querySelector("#a");
+const bEl = document.querySelector("#b");
+
+(async function() {
+    const a = await import("./a.mcss");
+    const b = await import("./b.mcss");
+    
+    console.log({ a, b });
+
+    aEl.className = a.a;
+    bEl.className = b.b;
+}());
+
diff --git a/packages/vite/tests/specimens/index.html b/packages/vite/tests/specimens/index.html
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-
-<body>
-    <div id="a">A</div>
-
-    <div id="b">B</div>
-
-    <script type="module" src="./script.js"></script>
-</body>
diff --git a/packages/vite/tests/specimens/shared/dynamic-c.mcss b/packages/vite/tests/specimens/shared/dynamic-c.mcss
diff --git a/packages/vite/tests/specimens/shared/static-c.mcss b/packages/vite/tests/specimens/shared/static-c.mcss
@@ -0,0 +1,6 @@
+.c {
+    background-color: blue;
+
+    width: 100px;
+    height: 100px;
+}
diff --git a/packages/vite/tests/specimens/static/a.mcss b/packages/vite/tests/specimens/static/a.mcss
@@ -0,0 +1,5 @@
+.a {
+    composes: c from "../shared/static-c.mcss";
+
+    color: red;
+}
diff --git a/packages/vite/tests/specimens/static/b.mcss b/packages/vite/tests/specimens/static/b.mcss
@@ -0,0 +1,5 @@
+.b {
+    composes: c from "../shared/static-c.mcss";
+
+    color: white;
+}
diff --git a/packages/vite/tests/specimens/static/index.html b/packages/vite/tests/specimens/static/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+
+<body>
+    <div id="a">A</div>
+
+    <div id="b">B</div>
+
+    <script type="module" src="./script.js"></script>
+</body>
diff --git a/packages/vite/tests/specimens/static/script.js b/packages/vite/tests/specimens/static/script.js
diff --git a/packages/vite/tests/vite.spec.mjs b/packages/vite/tests/vite.spec.mjs
@@ -1,25 +1,25 @@
-import { test, expect } from "@playwright/test";
+import { test as testBase, expect } from "@playwright/test";
 
-test.beforeEach(async ({ page }) => {
-    await page.goto("/");
-})
-
-test("a is right", async ({ page }) => {
-    const el = await page.getByText("A");
-
-    await expect(el).toBeVisible();
-
-    await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
-    await expect(el).toHaveCSS("color", "rgb(255, 0, 0)");
-    await expect(el).toHaveClass("mc_c mc_a");
+const test = testBase.extend({
+    dir  : [ "static", { option : true }],
 });
 
-test("b is right", async ({ page }) => {
-    const el = await page.getByText("B");
+test("style ordering", async ({ page, dir }) => {
+    await page.goto(`/${dir}/`);
+    
+    const a = await page.getByText("A");
 
-    await expect(el).toBeVisible();
+    await expect(a).toBeVisible();
 
-    await expect(el).toHaveCSS("background-color", "rgb(0, 0, 255)");
-    await expect(el).toHaveCSS("color", "rgb(255, 255, 255)");
-    await expect(el).toHaveClass("mc_c mc_b");
+    await expect(a).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(a).toHaveCSS("color", "rgb(255, 0, 0)");
+    await expect(a).toHaveClass("mc_c mc_a");
+    
+    const b = await page.getByText("B");
+    
+    await expect(b).toBeVisible();
+    
+    await expect(b).toHaveCSS("background-color", "rgb(0, 0, 255)");
+    await expect(b).toHaveCSS("color", "rgb(255, 255, 255)");
+    await expect(b).toHaveClass("mc_c mc_b");
 });
diff --git a/playwright.config.js b/playwright.config.js
@@ -1,7 +1,6 @@
-/** @type {import("@playwright/test").PlaywrightTestConfig} */
+/** @type {import("@playwright/test").PlaywrightTestConfig}<{ dir : string }> */
 const config = {
 	testDir : "./packages/vite/tests",
-    // baseURL : "http://127.0.0.1:5173",
     
 	timeout : 30 * 1000,
 	
@@ -22,17 +21,55 @@ const config = {
 	workers : process.env.CI ? 1 : undefined,
 	
     use : {
+		channel : "chromium",
+
 		screenshot : "only-on-failure",
         trace      : "on-first-retry",
         video      : "on-first-retry",
 	},
 
-    webServer : {
-		command             : "npm run start:vite",
+    webServer : [{
+		command             : "npx vite",
         port                : 5173,
 		timeout             : 30 * 1000,
-		reuseExistingServer : true,
-	},
+		reuseExistingServer : !process.env.CI,
+	}, {
+		command             : "npx vite build && npx vite preview --port=5174",
+        port                : 5174,
+		timeout             : 30 * 1000,
+		reuseExistingServer : !process.env.CI,
+	}],
+
+	projects : [
+		{
+			name : "serve - static",
+			use  : {
+				baseURL : "http://localhost:5173",
+				dir     : "static",
+			},
+		},
+		{
+			name : "serve - dynamic",
+			use  : {
+				baseURL : "http://localhost:5173",
+				dir     : "dynamic",
+			},
+		},
+		{
+			name : "built - static",
+			use  : {
+				baseURL : "http://localhost:5174",
+				dir     : "static",
+			},
+		},
+		{
+			name : "built - dynamic",
+			use  : {
+				baseURL : "http://localhost:5174",
+				dir     : "dynamic",
+			},
+		},
+	],
 };
 
 module.exports = config;
diff --git a/vite.config.js b/vite.config.js
@@ -1,3 +1,5 @@
+import { resolve } from "path";
+
 import mcss from "./packages/vite/vite.js";
 
 /** @type {import('vite').UserConfig} */
@@ -11,4 +13,15 @@ export default {
             namer : (file, selector) => `mc_${selector}`,
         }),
     ],
+
+    build : {
+        minify : false,
+
+        rollupOptions : {
+            input : {
+                static  : resolve(__dirname, "./packages/vite/tests/specimens/static/index.html"),
+                dynamic : resolve(__dirname, "./packages/vite/tests/specimens/dynamic/index.html"),
+            },
+        },
+    },
 };

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