chore: add E2E test for Vite (#16)

Anber · Jan 9, 2024 · f986670 · f986670
1 parent b98eae3
commit f986670
Show file tree

Hide file tree

Showing 15 changed files with 621 additions and 512 deletions.
diff --git a/configs/ts/aliases.json b/configs/ts/aliases.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "@wyw-in-js/object-syntax": ["./examples/object-syntax/src/index.ts"],
+      "@wyw-in-js/processor-utils": ["./packages/processor-utils/src/index.ts"],
+      "@wyw-in-js/shared": ["./packages/shared/src/index.ts"],
+      "@wyw-in-js/transform": ["./packages/transform/src/index.ts"],
+      "@wyw-in-js/template-tag-syntax": [
+        "./examples/template-tag-syntax/src/index.ts"
+      ],
+      "@wyw-in-js/webpack-loader": ["./packages/webpack-loader/src/index.ts"],
+      "@wyw-in-js/vite": ["./packages/vite/src/index.ts"]
+    }
+  },
+  "display": "Aliases configuration"
+}
diff --git a/configs/ts/base.json b/configs/ts/base.json
@@ -1,6 +1,9 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
+    "rootDir": "../..",
+    "baseUrl": "../..",
+
     "allowSyntheticDefaultImports": true,
     "declaration": true,
     "esModuleInterop": true,
@@ -25,5 +28,5 @@
   },
   "exclude": ["node_modules"],
   "display": "Base config",
-  "extends": "../../tsconfig.aliases.json"
+  "extends": "./aliases.json"
 }
diff --git a/e2e/vite/fixture.css b/e2e/vite/fixture.css
@@ -0,0 +1,4 @@
+.c2tf5um {
+  color: red;
+  background: green;
+}
diff --git a/e2e/vite/index.html b/e2e/vite/index.html
@@ -0,0 +1,5 @@
+<html>
+  <body>
+    <script src="./src/index.ts" type="module"></script>
+  </body>
+</html>
diff --git a/e2e/vite/package.json b/e2e/vite/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@wyw-in-js/e2e-vite",
+  "version": "0.1.1",
+  "dependencies": {
+    "@wyw-in-js/template-tag-syntax": "workspace:*"
+  },
+  "devDependencies": {
+    "@wyw-in-js/ts-config": "workspace:*",
+    "@wyw-in-js/vite": "workspace:*",
+    "picocolors": "^1.0.0",
+    "tsconfig-paths": "^4.2.0",
+    "ts-node": "^10.2.9",
+    "vite": "^5.0.9"
+  },
+  "private": true,
+  "scripts": {
+    "test": "node -r ts-node/register ./scripts/test.cjs"
+  }
+}
diff --git a/e2e/vite/scripts/test.cjs b/e2e/vite/scripts/test.cjs
@@ -0,0 +1,89 @@
+// @ts-check
+
+const fs = require('node:fs/promises');
+const path = require('node:path');
+const colors = require('picocolors');
+const prettier = require('prettier');
+const { build } = require('vite');
+const wyw = require('@wyw-in-js/vite');
+
+const PKG_DIR = path.resolve(__dirname, '..');
+const DIST_DIR = path.resolve(PKG_DIR, 'dist');
+
+/**
+ * @param {string} value
+ * @returns {string}
+ */
+function normalizeLineEndings(value) {
+  return value.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+async function buildArtefact() {
+  await build({
+    build: {
+      manifest: true,
+      outDir: DIST_DIR,
+    },
+    configFile: false,
+    plugins: [wyw.default()],
+  });
+}
+
+async function getCSSFromManifest() {
+  const manifestPath = path.resolve(DIST_DIR, '.vite', 'manifest.json');
+  const manifest = require(manifestPath);
+
+  if (!manifest['index.html']) {
+    throw new Error('No index.html in manifest');
+  }
+
+  if (!manifest['index.html'].css) {
+    throw new Error('No CSS in manifest');
+  }
+
+  if (manifest['index.html'].css.length !== 1) {
+    throw new Error('More than one CSS in manifest');
+  }
+
+  const cssFilePath = path.resolve(DIST_DIR, manifest['index.html'].css[0]);
+  const cssSnapshot = await fs.readFile(cssFilePath, 'utf-8');
+
+  return prettier.format(cssSnapshot, {
+    parser: 'css',
+  });
+}
+
+async function main() {
+  console.log(colors.blue('Package directory:'), PKG_DIR);
+
+  try {
+    await fs.rm(DIST_DIR, { recursive: true });
+  } catch (err) {}
+
+  await buildArtefact();
+
+  const cssOutput = normalizeLineEndings(await getCSSFromManifest());
+  const cssFixture = normalizeLineEndings(
+    await fs.readFile(path.resolve(PKG_DIR, 'fixture.css'), 'utf-8')
+  );
+
+  if (cssOutput !== cssFixture) {
+    console.log(colors.red('Output CSS:'));
+    console.log(cssOutput);
+    console.log(colors.red('Expected CSS:'));
+    console.log(cssFixture);
+
+    throw new Error('CSS output does not match fixture');
+  }
+}
+
+main().then(
+  () => {
+    console.log(colors.green('✅ Vite E2E test passed'));
+    process.exit(0);
+  },
+  (error) => {
+    console.error(colors.red('Error:'), error);
+    process.exit(1);
+  }
+);
diff --git a/e2e/vite/src/index.ts b/e2e/vite/src/index.ts
@@ -0,0 +1,8 @@
+import { css } from '@wyw-in-js/template-tag-syntax';
+
+const classA = css`
+  color: red;
+  background: green;
+`;
+
+export { classA };
diff --git a/e2e/vite/tsconfig.json b/e2e/vite/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@wyw-in-js/ts-config/node.json",
+  "files": [],
+  "compilerOptions": {
+    "allowJs": true,
+    "rootDir": "../..",
+    "baseUrl": "../.."
+  },
+  "include": ["./src/*", "./scripts/*"],
+  "ts-node": {
+    "transpileOnly": true,
+    "require": ["tsconfig-paths/register"]
+  }
+}
diff --git a/examples/object-syntax/package.json b/examples/object-syntax/package.json
@@ -20,6 +20,7 @@
     "@wyw-in-js/ts-config": "workspace:*",
     "dedent": "^1.5.1"
   },
+  "main": "src/index.ts",
   "private": true,
   "scripts": {
     "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",

diff --git a/examples/object-syntax/processors/makeStyles.js b/examples/object-syntax/processors/makeStyles.js
diff --git a/examples/template-tag-syntax/package.json b/examples/template-tag-syntax/package.json
@@ -19,6 +19,7 @@
     "@wyw-in-js/ts-config": "workspace:*",
     "dedent": "^1.5.1"
   },
+  "main": "src/index.ts",
   "private": true,
   "scripts": {
     "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",

diff --git a/examples/template-tag-syntax/processors/css.js b/examples/template-tag-syntax/processors/css.js
diff --git a/package.json b/package.json
@@ -60,8 +60,8 @@
   "scripts": {
     "build": "turbo run build:esm build:lib build:types",
     "check": "turbo run lint test",
-    "clean": "del 'packages/*/{coverage,dist,esm,lib,types,tsconfig.tsbuildinfo}'",
-    "idea-exclude:artifacts": "idea-exclude artifacts \"{configs,examples,packages}/*/{.turbo,esm,lib,types}\"",
+    "clean": "del '{e2e,examples,packages}/*/{coverage,dist,esm,lib,types,tsconfig.tsbuildinfo}'",
+    "idea-exclude:artifacts": "idea-exclude artifacts \"{configs,e2e,examples,packages}/*/{.turbo,esm,lib,types}\"",
     "idea-exclude:nm": "idea-exclude node_modules \"**/node_modules\"",
     "lint": "eslint --ext .js,.ts,.mjs scripts",
     "release": "pnpm build && pnpm changeset publish",