[pigment] Improve testing of fixtures

Now, no need to manually create and write to files.
If the output files don't exist, they'll be created
with the expected content.
If the contents itself change, use "test:update"
command to automatically update the fixtures.

packages/pigment-react/package.json

@@ -27,6 +27,7 @@
     "copy-license": "node ../../scripts/pigment-license.mjs",
     "build": "tsup",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'",
+    "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'",
     "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-react mocha 'packages/pigment-react/**/*.test.{js,ts,tsx}'",
     "typecheck": "tsc --noEmit -p ."
   },
@@ -54,12 +55,14 @@
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__helper-plugin-utils": "^7.10.3",
+    "@types/chai": "^4.3.12",
     "@types/cssesc": "^3.0.2",
     "@types/lodash": "^4.14.202",
     "@types/node": "^18.19.21",
     "@types/react": "^18.2.55",
     "@types/stylis": "^4.2.5",
     "chai": "^4.4.1",
+    "prettier": "^3.2.5",
     "react": "^18.2.0"
   },
   "peerDependencies": {

packages/pigment-react/tests/fixtures/styled.input.js

@@ -23,7 +23,7 @@ const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
 })`
-  display: block;
+  display: none;
   position: absolute;
   border-radius: inherit;
   background-color: currentColor;

packages/pigment-react/tests/fixtures/styled.output.css

@@ -1,6 +1,32 @@
-@keyframes r1ub6j9g{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
-.c1y26wbb{color:red;animation:r1ub6j9g 2s ease-out 0s infinite;}
-.ct00dwm{color:red;font-size:3rem;}
-.soujkwr{display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;font-size:3rem;}
-.soujkwr-1{font-size:3rem;}
-.s14dtw5g{display:block;opacity:0.38;font-size:3rem;}
+@keyframes r1ub6j9g {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+.c1y26wbb {
+  color: red;
+  animation: r1ub6j9g 2s ease-out 0s infinite;
+}
+.ct00dwm {
+  color: red;
+  font-size: 3rem;
+}
+.soujkwr {
+  display: none;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+  font-size: 3rem;
+}
+.soujkwr-1 {
+  font-size: 3rem;
+}
+.s14dtw5g {
+  display: block;
+  opacity: 0.38;
+  font-size: 3rem;
+}

packages/pigment-react/tests/fixtures/styled.output.js

@@ -2,16 +2,16 @@ import { styled as _styled3 } from "@pigment-css/react";
 import { styled as _styled2 } from "@pigment-css/react";
 import { styled as _styled } from "@pigment-css/react";
 import _theme from "@pigment-css/react/theme";
-const Component = /*#__PURE__*/_styled("div")({
-  classes: ["c1y26wbb"]
+const Component = /*#__PURE__*/ _styled("div")({
+  classes: ["c1y26wbb"],
 });
 const cls1 = "ct00dwm";
-const SliderRail = /*#__PURE__*/_styled2("span", {
-  name: 'MuiSlider',
-  slot: 'Rail'
+const SliderRail = /*#__PURE__*/ _styled2("span", {
+  name: "MuiSlider",
+  slot: "Rail",
 })({
-  classes: ["soujkwr", "soujkwr-1"]
+  classes: ["soujkwr", "soujkwr-1"],
 });
-const SliderRail2 = /*#__PURE__*/_styled3("span")({
-  classes: ["s14dtw5g"]
+const SliderRail2 = /*#__PURE__*/ _styled3("span")({
+  classes: ["s14dtw5g"],
 });

packages/pigment-react/tests/pigment.test.ts

@@ -4,7 +4,9 @@ import { expect } from 'chai';
 import { asyncResolveFallback } from '@wyw-in-js/shared';
 import { TransformCacheCollection, transform, createFileReporter } from '@wyw-in-js/transform';
 import { preprocessor } from '@pigment-css/react/utils';
+import * as prettier from 'prettier';
 
+const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true';
 const files = fs.readdirSync(path.join(__dirname, 'fixtures'));
 
 const theme = {
@@ -29,7 +31,12 @@ const theme = {
   },
 };
 
+const CUSTOM_ERROR =
+  'The file contents have changed. Run "test:update" command to update the file if this is expected.';
+
 describe('zero-runtime', () => {
+  let prettierConfig: Exclude<Awaited<ReturnType<typeof prettier.resolveConfig>>, null>;
+
   files.forEach((file) => {
     it(`test input file ${file}`, async () => {
       if (file.includes('.output.')) {
@@ -45,8 +52,12 @@ describe('zero-runtime', () => {
         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 outputContent = fs.existsSync(outputFilePath)
+        ? fs.readFileSync(outputFilePath, 'utf8')
+        : '';
+      const outputCssContent = fs.existsSync(outputCssFilePath)
+        ? fs.readFileSync(outputCssFilePath, 'utf8')
+        : '';
 
       const pluginOptions = {
         themeArgs: {
@@ -74,8 +85,30 @@ describe('zero-runtime', () => {
         asyncResolveFallback,
       );
 
-      expect(result.cssText).to.equal(outputCssContent);
-      expect(result.code.trim()).to.equal(outputContent.trim());
+      const config =
+        prettierConfig ??
+        prettier.resolveConfig(path.join(__dirname, '../../../', 'prettier.config.js'));
+      const formattedJs = await prettier.format(result.code, {
+        ...config,
+        parser: 'babel',
+      });
+
+      if (!outputContent || shouldUpdateOutput) {
+        fs.writeFileSync(outputFilePath, formattedJs, 'utf-8');
+        expect(true).to.equal(true);
+      } else {
+        expect(formattedJs, CUSTOM_ERROR).to.equal(outputContent);
+      }
+
+      const formattedCss = await prettier.format(result.cssText ?? '', {
+        parser: 'css',
+      });
+      if (!outputCssContent || shouldUpdateOutput) {
+        fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8');
+        expect(true).to.equal(true);
+      } else {
+        expect(formattedCss, CUSTOM_ERROR).to.equal(outputCssContent);
+      }
     });
   });
 });

packages/pigment-react/tsconfig.json

@@ -12,7 +12,8 @@
       "@mui/system/*": ["./packages/mui-system/src/*"],
       "@mui/utils": ["./packages/mui-utils/src"],
       "@mui/utils/*": ["./packages/mui-utils/src/*"]
-    }
+    },
+    "types": ["node", "mocha"]
   },
   "include": ["src/**/*.ts"],
   "exclude": ["./tsup.config.ts"]