[zero] Setup basic testing framework (#40986)

.eslintignore

@@ -23,6 +23,7 @@
 /packages/zero-runtime/processors/
 /packages/zero-runtime/exports/
 /packages/zero-runtime/theme/
+/packages/zero-runtime/tests/fixtures/
 /packages/zero-next-plugin/loader.js
 # Ignore fixtures
 /packages/typescript-to-proptypes/test/*/*

package.json

@@ -51,8 +51,9 @@
     "test": "node scripts/test.mjs",
     "tc": "node test/cli.js",
     "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage",
-    "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
-    "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
+    "test:zero-runtime:ci": "pnpm nx run @mui/zero-runtime:test:ci",
+    "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime",
+    "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime:ci",
     "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'",
     "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"",
     "test:e2e:build": "webpack --config test/e2e/webpack.config.js",

packages/zero-runtime/package.json

@@ -6,9 +6,11 @@
   "types": "build/index.d.ts",
   "private": true,
   "scripts": {
-    "clean": "rimraf build types",
+    "clean": "rimraf build types processors utils",
     "watch": "tsup --watch --clean false",
     "build": "tsup",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
+    "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/zero mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
     "typecheck": "tsc --noEmit -p ."
   },
   "dependencies": {
@@ -38,6 +40,7 @@
     "@types/node": "^18.19.15",
     "@types/react": "^18.2.55",
     "@types/stylis": "^4.2.5",
+    "chai": "^4.4.1",
     "react": "^18.2.0"
   },
   "peerDependencies": {
@@ -106,5 +109,21 @@
     "./exports/createUseThemeProps": {
       "default": "./exports/createUseThemeProps.js"
     }
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:ci": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
   }
 }

packages/zero-runtime/tests/README.md

@@ -0,0 +1,3 @@
+# Adding new fixtures
+
+Create a new file name with `[name].input.js` and add `styled`, `css` or other zero-runtime calls into the file. Also add equivalent `[name].output.js` and `[name].output.css` and run the test. After the new test fails, get the results from the received output and add it to the equivalent js and css files. This is equivalent to snapshot testing and will make sure any change in internal css generation logic does not fail any other existing tests.

packages/zero-runtime/tests/fixtures/styled.input.js

@@ -0,0 +1,5 @@
+import { styled } from '@mui/zero-runtime';
+
+const Component = styled.div(({ theme }) => ({
+  color: theme.palette.primary.main,
+}));

packages/zero-runtime/tests/fixtures/styled.output.css

@@ -0,0 +1 @@
+.c1yjyf7p{color:red;}

packages/zero-runtime/tests/fixtures/styled.output.js

@@ -0,0 +1,5 @@
+import { styled as _styled } from "@mui/zero-runtime";
+import _theme from "@mui/zero-runtime/theme";
+const Component = /*#__PURE__*/_styled("div")({
+  classes: ["c1yjyf7p"]
+});

packages/zero-runtime/tests/zero-runtime.test.js

@@ -0,0 +1,64 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { expect } from 'chai';
+import { asyncResolveFallback } from '@wyw-in-js/shared';
+import { TransformCacheCollection, transform, createFileReporter } from '@wyw-in-js/transform';
+
+const files = fs.readdirSync(path.join(__dirname, 'fixtures'));
+
+const theme = {
+  palette: {
+    primary: {
+      main: 'red',
+    },
+  },
+};
+
+describe('zero-runtime', () => {
+  files.forEach((file) => {
+    it(`test input file ${file}`, async () => {
+      if (file.includes('.output.')) {
+        return;
+      }
+      const cache = new TransformCacheCollection();
+      const { emitter: eventEmitter } = createFileReporter(false);
+      const inputFilePath = path.join(__dirname, 'fixtures', file);
+      const outputFilePath = path.join(__dirname, 'fixtures', file.replace('.input.', '.output.'));
+      const outputCssFilePath = path.join(
+        __dirname,
+        'fixtures',
+        file.replace('.input.js', '.output.css'),
+      );
+      const inputContent = fs.readFileSync(inputFilePath, 'utf8');
+      const outputContent = fs.readFileSync(outputFilePath, 'utf8');
+      const outputCssContent = fs.readFileSync(outputCssFilePath, 'utf8');
+
+      const result = await transform(
+        {
+          options: {
+            filename: inputFilePath,
+            pluginOptions: {
+              themeArgs: {
+                theme,
+              },
+              babelOptions: {
+                configFile: false,
+                babelrc: false,
+              },
+              tagResolver(_source, tag) {
+                return require.resolve(`../exports/${tag}`);
+              },
+            },
+          },
+          cache,
+          eventEmitter,
+        },
+        inputContent,
+        asyncResolveFallback,
+      );
+
+      expect(result.code.trim()).to.equal(outputContent.trim());
+      expect(result.cssText).to.equal(outputCssContent);
+    });
+  });
+});