[zero] Setup basic testing framework

.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/*/*

packages/zero-runtime/package.json

@@ -9,6 +9,7 @@
     "clean": "rimraf build types",
     "watch": "tsup --watch --clean false",
     "build": "tsup",
+    "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'",
     "typecheck": "tsc --noEmit -p ."
   },
   "dependencies": {
@@ -38,6 +39,7 @@
     "@types/node": "^18.19.14",
     "@types/react": "^18.2.55",
     "@types/stylis": "^4.2.5",
+    "chai": "^4.4.1",
     "react": "^18.2.0"
   },
   "peerDependencies": {
@@ -106,5 +108,15 @@
     "./exports/createUseThemeProps": {
       "default": "./exports/createUseThemeProps.js"
     }
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "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);
+    });
+  });
+});