test: test postcss hmr (#635)

hi-ogawa · Aug 31, 2024 · f4d97b3 · f4d97b3
1 parent 51f74ad
commit f4d97b3
Show file tree

Hide file tree

Showing 17 changed files with 395 additions and 1 deletion.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -68,6 +68,9 @@ jobs:
       - run: pnpm -C packages/react-server/examples/custom-out-dir cf-build
       - run: pnpm -C packages/react-server/examples/custom-out-dir test-e2e-cf-preview
       - run: pnpm -C packages/react-server/examples/custom-out-dir vc-build
+      - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e
+      - run: pnpm -C packages/react-server/examples/postcss-tailwind build
+      - run: pnpm -C packages/react-server/examples/postcss-tailwind test-e2e-preview
 
   test-react-server-package:
     runs-on: ubuntu-latest

diff --git a/...server/examples/next/playwright.config.ts → ...erver/examples/next/playwright.config.mts b/...server/examples/next/playwright.config.ts → ...erver/examples/next/playwright.config.mts
diff --git a/packages/react-server/examples/next/tsconfig.json b/packages/react-server/examples/next/tsconfig.json
@@ -22,6 +22,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "*.mts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/packages/react-server/examples/postcss-tailwind/README.md b/packages/react-server/examples/postcss-tailwind/README.md
@@ -0,0 +1 @@
+# postcss-tailwind
diff --git a/packages/react-server/examples/postcss-tailwind/app/_client.tsx b/packages/react-server/examples/postcss-tailwind/app/_client.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import React from "react";
+
+export function TestClient() {
+  const [count, setCount] = React.useState(0);
+
+  return (
+    <button
+      className="p-2 text-blue-500 rounded-xl border flex items-center hover:shadow"
+      onClick={() => setCount(count + 1)}
+    >
+      Test Client: {count}
+    </button>
+  );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/layout.tsx b/packages/react-server/examples/postcss-tailwind/app/layout.tsx
@@ -0,0 +1,10 @@
+import "./styles.css";
+import type React from "react";
+
+export default function Layout(props: React.PropsWithChildren) {
+  return (
+    <html>
+      <body>{props.children}</body>
+    </html>
+  );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/page.tsx b/packages/react-server/examples/postcss-tailwind/app/page.tsx
@@ -0,0 +1,27 @@
+import { TestClient } from "./_client";
+
+export default function Page() {
+  return (
+    <div className="flex flex-col gap-2 p-2 text-xl items-start">
+      <TestServer />
+      <TestClient />
+    </div>
+  );
+}
+
+let serverCount = 0;
+
+function TestServer() {
+  return (
+    <form
+      action={() => {
+        "use server";
+        serverCount += 1;
+      }}
+    >
+      <button className="p-2 text-orange-500 rounded-xl border flex items-center hover:shadow">
+        Test Server: {serverCount}
+      </button>
+    </form>
+  );
+}
diff --git a/packages/react-server/examples/postcss-tailwind/app/styles.css b/packages/react-server/examples/postcss-tailwind/app/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts b/packages/react-server/examples/postcss-tailwind/e2e/basic.test.ts
@@ -0,0 +1,58 @@
+import { type Page, expect, test } from "@playwright/test";
+import {
+  createEditor,
+  createReloadChecker,
+  testNoJs,
+  waitForHydration,
+} from "./helper";
+
+test("basic @js", async ({ page }) => {
+  await page.goto("/");
+  await waitForHydration(page);
+  await testBasic(page);
+});
+
+testNoJs("basic @nojs", async ({ page }) => {
+  await page.goto("/");
+  await testBasic(page);
+});
+
+async function testBasic(page: Page) {
+  await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS(
+    "padding-left",
+    "8px",
+  );
+  await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS(
+    "padding-left",
+    "8px",
+  );
+}
+
+test("server hmr @dev", async ({ page }) => {
+  await page.goto("/");
+  await waitForHydration(page);
+  await using _ = await createReloadChecker(page);
+
+  using file = createEditor("app/page.tsx");
+  file.edit((t) =>
+    t.replace('<button className="p-2 ', '<button className="p-4 '),
+  );
+
+  await expect(page.getByRole("button", { name: "Test Server:" })).toHaveCSS(
+    "padding-left",
+    "16px",
+  );
+});
+
+test("cliet hmr @dev", async ({ page }) => {
+  await page.goto("/");
+  await waitForHydration(page);
+  await using _ = await createReloadChecker(page);
+
+  using file = createEditor("app/_client.tsx");
+  file.edit((t) => t.replace('className="p-2 ', 'className="p-4 '));
+  await expect(page.getByRole("button", { name: "Test Client:" })).toHaveCSS(
+    "padding-left",
+    "16px",
+  );
+});
diff --git a/packages/react-server/examples/postcss-tailwind/e2e/helper.ts b/packages/react-server/examples/postcss-tailwind/e2e/helper.ts
@@ -0,0 +1,44 @@
+import fs from "node:fs";
+import { type Page, expect, test } from "@playwright/test";
+
+export async function waitForHydration(page: Page) {
+  await expect(page.locator("html")).toHaveAttribute(
+    "data-test-state",
+    "hydrated",
+  );
+}
+
+export const testNoJs = test.extend({
+  javaScriptEnabled: ({}, use) => use(false),
+});
+
+export function createEditor(filepath: string) {
+  const init = fs.readFileSync(filepath, "utf-8");
+  let next = init;
+  return {
+    edit(editFn: (data: string) => string) {
+      next = editFn(next);
+      fs.writeFileSync(filepath, next);
+    },
+    [Symbol.dispose]() {
+      fs.writeFileSync(filepath, init);
+    },
+  };
+}
+
+export async function createReloadChecker(page: Page) {
+  await page.evaluate(() => {
+    const el = document.createElement("meta");
+    el.setAttribute("name", "x-reload-check");
+    document.head.append(el);
+  });
+
+  return {
+    async [Symbol.asyncDispose]() {
+      await page.waitForTimeout(300);
+      await expect(page.locator(`meta[name="x-reload-check"]`)).toBeAttached({
+        timeout: 1,
+      });
+    },
+  };
+}
diff --git a/packages/react-server/examples/postcss-tailwind/package.json b/packages/react-server/examples/postcss-tailwind/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@hiogawa/react-server-example-postcss-tailwind",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "test-e2e": "playwright test",
+    "test-e2e-preview": "E2E_PREVIEW=1 playwright test"
+  },
+  "dependencies": {
+    "@hiogawa/react-server": "workspace:*",
+    "next": "link:../../../react-server-next",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-server-dom-webpack": "rc"
+  },
+  "devDependencies": {
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "tailwindcss": "^3.4.10",
+    "vite": "latest"
+  }
+}
diff --git a/packages/react-server/examples/postcss-tailwind/playwright.config.ts b/packages/react-server/examples/postcss-tailwind/playwright.config.ts
@@ -0,0 +1 @@
+export { default } from "../next/playwright.config.mjs";
diff --git a/packages/react-server/examples/postcss-tailwind/postcss.config.mjs b/packages/react-server/examples/postcss-tailwind/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+  },
+};
diff --git a/packages/react-server/examples/postcss-tailwind/tailwind.config.ts b/packages/react-server/examples/postcss-tailwind/tailwind.config.ts
@@ -0,0 +1,9 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config;
diff --git a/packages/react-server/examples/postcss-tailwind/tsconfig.json b/packages/react-server/examples/postcss-tailwind/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "moduleResolution": "Bundler",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "types": ["next"],
+    "jsx": "react-jsx"
+  }
+}
diff --git a/packages/react-server/examples/postcss-tailwind/vite.config.ts b/packages/react-server/examples/postcss-tailwind/vite.config.ts
@@ -0,0 +1,6 @@
+import next from "next/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [next()],
+});