[pigment] Improve testing of fixtures (#41389)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>

.eslintignore

@@ -23,7 +23,7 @@
 /packages/pigment-react/processors/
 /packages/pigment-react/exports/
 /packages/pigment-react/theme/
-/packages/pigment-react/tests/fixtures/
+/packages/pigment-react/tests/**/fixtures
 /packages/pigment-nextjs-plugin/loader.js
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*

packages/pigment-react/package.json

@@ -26,6 +26,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 ."
   },
@@ -53,12 +54,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/README.md

@@ -1,3 +1,35 @@
-# Adding new fixtures
+# Pigment CSS testing
 
-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.
+## Folder structure
+
+- `tests` is the root folder for all tests
+  - `fixtures` contains all the fixtures for the tests
+    - `*.input.js` are the input files created manually
+    - `*.output.*` are the expected output files created by running the tests
+  - `*.test.js` are the test files that run the fixtures
+
+## Running tests
+
+At the root project terminal:
+
+```bash
+pnpm nx run @pigment-css/react:test
+```
+
+To update the output fixtures:
+
+```bash
+pnpm nx run @pigment-css/react:test:update
+```
+
+## Adding new tests
+
+Each folder inside `tests` is a Pigment CSS feature. To add a new test, create a new folder with the feature name and add a new test file with the `.test.js` extension. Inside the test file, import the fixtures and run the tests.
+
+## Adding new fixtures
+
+Create a new file name with `[name].input.js` and add `styled`, `css` or other Pigment CSS calls into the file.
+
+The first time you run the tests, the output files will be created automatically. Then check the output files to make sure they are correct.
+
+For any implementation changes after that, if you want to update the output files, run the tests with the `test:update` script.

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

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import { runTransformation, expect } from '../testUtils';
+
+const theme = {
+  palette: {
+    primary: {
+      main: 'red',
+    },
+  },
+  size: {
+    font: {
+      h1: '3rem',
+    },
+  },
+  components: {
+    MuiSlider: {
+      styleOverrides: {
+        rail: {
+          fontSize: '3rem',
+        },
+      },
+    },
+  },
+};
+
+describe('Pigment CSS - css', () => {
+  it('basics', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/css.input.js'),
+      {
+        themeArgs: {
+          theme,
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+});

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

@@ -0,0 +1,6 @@
+import { css } from '@pigment-css/react';
+
+const cls1 = css`
+  color: ${({ theme }) => theme.palette.primary.main};
+  font-size: ${({ theme }) => theme.size.font.h1};
+`;

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

@@ -0,0 +1,4 @@
+.c1wr0t7p {
+  color: red;
+  font-size: 3rem;
+}

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

@@ -0,0 +1 @@
+const cls1 = 'c1wr0t7p';

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

@@ -0,0 +1,10 @@
+import { keyframes } from '@pigment-css/react';
+
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'rotate(360deg)',
+  },
+  to: {
+    transform: 'rotate(0deg)',
+  },
+});

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

@@ -0,0 +1,8 @@
+@keyframes r14c1bqo {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}

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

@@ -0,0 +1 @@
+const rotateKeyframe = 'r14c1bqo';

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

@@ -0,0 +1,13 @@
+import path from 'node:path';
+import { runTransformation, expect } from '../testUtils';
+
+describe('Pigment CSS - keyframes', () => {
+  it('basics', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/keyframes.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+});

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

@@ -1,4 +1,4 @@
-import { styled, keyframes, css } from '@pigment-css/react';
+import { styled, keyframes } from '@pigment-css/react';
 
 const rotateKeyframe = keyframes({
   from: {
@@ -14,16 +14,11 @@ const Component = styled.div(({ theme }) => ({
   animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
 }));
 
-const cls1 = css`
-  color: ${({ theme }) => theme.palette.primary.main};
-  font-size: ${({ theme }) => theme.size.font.h1};
-`;
-
 const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
 })`
-  display: block;
+  display: none;
   position: absolute;
   border-radius: inherit;
   background-color: currentColor;

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

@@ -0,0 +1,28 @@
+@keyframes r1419f2q {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+.c1vtarpi {
+  color: red;
+  animation: r1419f2q 2s ease-out 0s infinite;
+}
+.s1sjy0ja {
+  display: none;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+  font-size: 3rem;
+}
+.s1sjy0ja-1 {
+  font-size: 3rem;
+}
+.s6hrafw {
+  display: block;
+  opacity: 0.38;
+  font-size: 3rem;
+}

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

@@ -0,0 +1,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: ['c1vtarpi'],
+});
+const SliderRail = /*#__PURE__*/ _styled2('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  classes: ['s1sjy0ja', 's1sjy0ja-1'],
+});
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: ['s6hrafw'],
+});

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

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import { runTransformation, expect } from '../testUtils';
+
+const theme = {
+  palette: {
+    primary: {
+      main: 'red',
+    },
+  },
+  size: {
+    font: {
+      h1: '3rem',
+    },
+  },
+  components: {
+    MuiSlider: {
+      styleOverrides: {
+        rail: {
+          fontSize: '3rem',
+        },
+      },
+    },
+  },
+};
+
+describe('Pigment CSS - styled', () => {
+  it('basics', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled.input.js'),
+      {
+        themeArgs: {
+          theme,
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+});