From a6df0bae279f22251075d9f8b53db9cca414d913 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 7 Mar 2024 11:29:05 +0530 Subject: [PATCH] [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 | 3 ++ .../tests/fixtures/styled.input.js | 2 +- .../tests/fixtures/styled.output.css | 38 ++++++++++++++--- .../tests/fixtures/styled.output.js | 16 ++++---- packages/pigment-react/tests/pigment.test.ts | 41 +++++++++++++++++-- packages/pigment-react/tsconfig.json | 3 +- pnpm-lock.yaml | 6 +++ 7 files changed, 89 insertions(+), 20 deletions(-) diff --git a/packages/pigment-react/package.json b/packages/pigment-react/package.json index 0faf9bfb2f31ca..825a89c1195c9c 100644 --- a/packages/pigment-react/package.json +++ b/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": { diff --git a/packages/pigment-react/tests/fixtures/styled.input.js b/packages/pigment-react/tests/fixtures/styled.input.js index 0d08d32f0886b6..bcfc17d99059ab 100644 --- a/packages/pigment-react/tests/fixtures/styled.input.js +++ b/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; diff --git a/packages/pigment-react/tests/fixtures/styled.output.css b/packages/pigment-react/tests/fixtures/styled.output.css index 64f8bb93f42fc4..5dc0a36a336efa 100644 --- a/packages/pigment-react/tests/fixtures/styled.output.css +++ b/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; +} diff --git a/packages/pigment-react/tests/fixtures/styled.output.js b/packages/pigment-react/tests/fixtures/styled.output.js index bfc47724a88307..ed422edaf001c0 100644 --- a/packages/pigment-react/tests/fixtures/styled.output.js +++ b/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"], }); diff --git a/packages/pigment-react/tests/pigment.test.ts b/packages/pigment-react/tests/pigment.test.ts index 34addd06ead91f..93ba3233a2e507 100644 --- a/packages/pigment-react/tests/pigment.test.ts +++ b/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>, 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); + } }); }); }); diff --git a/packages/pigment-react/tsconfig.json b/packages/pigment-react/tsconfig.json index 1e4e9fefe33535..55ad292e876743 100644 --- a/packages/pigment-react/tsconfig.json +++ b/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"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa2fd7b0363311..a12a5fec79085a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2161,6 +2161,9 @@ importers: '@types/babel__helper-plugin-utils': specifier: ^7.10.3 version: 7.10.3 + '@types/chai': + specifier: ^4.3.12 + version: 4.3.12 '@types/cssesc': specifier: ^3.0.2 version: 3.0.2 @@ -2179,6 +2182,9 @@ importers: chai: specifier: ^4.4.1 version: 4.4.1 + prettier: + specifier: ^3.2.5 + version: 3.2.5 react: specifier: ^18.2.0 version: 18.2.0