From 84471c539ec734a611368a461d6f4b3f720d2ce3 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Thu, 7 Mar 2024 11:29:05 +0530 Subject: [PATCH 01/10] [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 21780ca073c0f6..f82fe99d7c1855 100644 --- a/packages/pigment-react/package.json +++ b/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": { 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 From 67841f3144f874b96e13c61cbd837dcbf19415db Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 11:45:04 +0700 Subject: [PATCH 02/10] split tests --- .../keyframes/fixtures/keyframes.input.js | 13 +++ .../tests/keyframes/keyframes.test.ts | 14 ++++ .../tests/{pigment.test.ts => pigment.ts} | 13 ++- .../tests/styled/fixtures/styled.input.js | 38 +++++++++ .../pigment-react/tests/styled/styled.test.ts | 40 +++++++++ packages/pigment-react/tests/testUtils.ts | 84 +++++++++++++++++++ wyw-in-js/success/styled.input.js | 49 +++++++++++ 7 files changed, 243 insertions(+), 8 deletions(-) create mode 100644 packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js create mode 100644 packages/pigment-react/tests/keyframes/keyframes.test.ts rename packages/pigment-react/tests/{pigment.test.ts => pigment.ts} (90%) create mode 100644 packages/pigment-react/tests/styled/fixtures/styled.input.js create mode 100644 packages/pigment-react/tests/styled/styled.test.ts create mode 100644 packages/pigment-react/tests/testUtils.ts create mode 100644 wyw-in-js/success/styled.input.js diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js new file mode 100644 index 00000000000000..57ce9170bdc49c --- /dev/null +++ b/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js @@ -0,0 +1,13 @@ +import * as React from 'react'; +import { keyframes } from '@pigment-css/react'; + +const rotateKeyframe = keyframes({ + from: { + transform: 'rotate(360deg)', + }, + to: { + transform: 'rotate(0deg)', + }, +}); + +
; diff --git a/packages/pigment-react/tests/keyframes/keyframes.test.ts b/packages/pigment-react/tests/keyframes/keyframes.test.ts new file mode 100644 index 00000000000000..bef1bbc7677da1 --- /dev/null +++ b/packages/pigment-react/tests/keyframes/keyframes.test.ts @@ -0,0 +1,14 @@ +import { expect } from 'chai'; +import { runTransformation } from '../testUtils'; + +const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + +describe('Pigment CSS - keyframes', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation('./fixtures/keyframes.input.js'); + + expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); + expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-react/tests/pigment.test.ts b/packages/pigment-react/tests/pigment.ts similarity index 90% rename from packages/pigment-react/tests/pigment.test.ts rename to packages/pigment-react/tests/pigment.ts index 93ba3233a2e507..5791bef78912da 100644 --- a/packages/pigment-react/tests/pigment.test.ts +++ b/packages/pigment-react/tests/pigment.ts @@ -35,8 +35,6 @@ 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.')) { @@ -85,27 +83,26 @@ describe('zero-runtime', () => { asyncResolveFallback, ); - const config = - prettierConfig ?? - prettier.resolveConfig(path.join(__dirname, '../../../', 'prettier.config.js')); + const prettierConfig = await prettier.resolveConfig( + path.join(__dirname, '../../../', 'prettier.config.js'), + ); const formattedJs = await prettier.format(result.code, { - ...config, + ...prettierConfig, 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 ?? '', { + ...prettierConfig, 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/tests/styled/fixtures/styled.input.js b/packages/pigment-react/tests/styled/fixtures/styled.input.js new file mode 100644 index 00000000000000..bcfc17d99059ab --- /dev/null +++ b/packages/pigment-react/tests/styled/fixtures/styled.input.js @@ -0,0 +1,38 @@ +import { styled, keyframes, css } from '@pigment-css/react'; + +const rotateKeyframe = keyframes({ + from: { + transform: 'rotate(360deg)', + }, + to: { + transform: 'rotate(0deg)', + }, +}); + +const Component = styled.div(({ theme }) => ({ + color: theme.palette.primary.main, + 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: none; + position: absolute; + border-radius: inherit; + background-color: currentColor; + opacity: 0.38; + font-size: ${({ theme }) => theme.size.font.h1}; +`; + +const SliderRail2 = styled.span` + display: block; + opacity: 0.38; + font-size: ${({ theme }) => theme.size.font.h1}; +`; diff --git a/packages/pigment-react/tests/styled/styled.test.ts b/packages/pigment-react/tests/styled/styled.test.ts new file mode 100644 index 00000000000000..814e2cd323edef --- /dev/null +++ b/packages/pigment-react/tests/styled/styled.test.ts @@ -0,0 +1,40 @@ +import { expect } from 'chai'; +import { runTransformation } from '../testUtils'; + +const theme = { + palette: { + primary: { + main: 'red', + }, + }, + size: { + font: { + h1: '3rem', + }, + }, + components: { + MuiSlider: { + styleOverrides: { + rail: { + fontSize: '3rem', + }, + }, + }, + }, +}; + +const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + +describe('Pigment CSS - styled', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation('./fixtures/keyframes.input.js', { + themeArgs: { + theme, + }, + }); + + expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); + expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-react/tests/testUtils.ts b/packages/pigment-react/tests/testUtils.ts new file mode 100644 index 00000000000000..39bf94f73c8d53 --- /dev/null +++ b/packages/pigment-react/tests/testUtils.ts @@ -0,0 +1,84 @@ +import * as fs from 'node:fs'; +import * as path from 'node:path'; +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'; + +export async function runTransformation( + relativePath: string, + options?: { themeArgs?: { theme?: any } }, +) { + const cache = new TransformCacheCollection(); + const { emitter: eventEmitter } = createFileReporter(false); + const inputFilePath = path.join(__dirname, relativePath); + const outputFilePath = path.join(__dirname, relativePath.replace('.input.', '.output.')); + const outputCssFilePath = path.join(__dirname, relativePath.replace('.input.js', '.output.css')); + + const inputContent = fs.readFileSync(inputFilePath, 'utf8'); + let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : ''; + let outputCssContent = fs.existsSync(outputCssFilePath) + ? fs.readFileSync(outputCssFilePath, 'utf8') + : ''; + + const pluginOptions = { + themeArgs: { + theme: options?.themeArgs?.theme, + }, + babelOptions: { + configFile: false, + babelrc: false, + }, + tagResolver(_source: string, tag: string) { + return require.resolve(`../exports/${tag}`); + }, + }; + const result = await transform( + { + options: { + filename: inputFilePath, + preprocessor, + pluginOptions, + }, + cache, + eventEmitter, + }, + inputContent, + asyncResolveFallback, + ); + + const prettierConfig = await prettier.resolveConfig( + path.join(process.cwd(), 'prettier.config.js'), + ); + const formattedJs = await prettier.format(result.code, { + ...prettierConfig, + parser: 'babel', + }); + const formattedCss = await prettier.format(result.cssText ?? '', { + ...prettierConfig, + parser: 'css', + }); + + if (!outputContent || shouldUpdateOutput) { + fs.writeFileSync(outputFilePath, formattedJs, 'utf-8'); + outputContent = formattedJs; + } + + if (!outputCssContent || shouldUpdateOutput) { + fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8'); + outputCssContent = formattedCss; + } + + return { + output: { + js: formattedJs, + css: formattedCss, + }, + fixture: { + js: outputContent, + css: outputCssContent, + }, + }; +} diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js new file mode 100644 index 00000000000000..09b1dd08802c32 --- /dev/null +++ b/wyw-in-js/success/styled.input.js @@ -0,0 +1,49 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + from: { + transform: "rotate(360deg)" + }, + to: { + transform: "rotate(0deg)" + } +}); +const _exp2 = /*#__PURE__*/() => ({ + theme +}) => ({ + color: theme.palette.primary.main, + animation: `${"r1ub6j9g"} 2s ease-out 0s infinite` +}); +const Component = "c1y26wbb"; +const _exp3 = /*#__PURE__*/() => ({ + theme +}) => theme.palette.primary.main; +const _exp4 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const cls1 = "ct00dwm"; +const _exp5 = /*#__PURE__*/() => ({ + name: "MuiSlider", + slot: "Rail" +}); +const _exp6 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const SliderRail = "soujkwr"; +const _exp7 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const SliderRail2 = "s14dtw5g"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp, + _exp2: _exp2, + _exp3: _exp3, + _exp4: _exp4, + _exp5: _exp5, + _exp6: _exp6, + _exp7: _exp7 +}; \ No newline at end of file From 8fa9b12c19da9455cb42534e2fddc8013796f798 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 11:53:56 +0700 Subject: [PATCH 03/10] run test and remove old fixtures --- .eslintignore | 2 +- .../tests/fixtures/styled.input.js | 38 ------ .../tests/fixtures/styled.output.js | 17 --- .../keyframes/fixtures/keyframes.input.js | 3 - .../keyframes/fixtures/keyframes.output.css | 8 ++ .../keyframes/fixtures/keyframes.output.js | 1 + .../tests/keyframes/keyframes.test.ts | 5 +- packages/pigment-react/tests/pigment.ts | 111 ------------------ .../{ => styled}/fixtures/styled.output.css | 14 +-- .../tests/styled/fixtures/styled.output.js | 17 +++ .../pigment-react/tests/styled/styled.test.ts | 12 +- packages/pigment-react/tests/testUtils.ts | 8 +- wyw-in-js/success/keyframes.input.js | 18 +++ wyw-in-js/success/styled.input.js | 10 +- 14 files changed, 73 insertions(+), 191 deletions(-) delete mode 100644 packages/pigment-react/tests/fixtures/styled.input.js delete mode 100644 packages/pigment-react/tests/fixtures/styled.output.js create mode 100644 packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css create mode 100644 packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js delete mode 100644 packages/pigment-react/tests/pigment.ts rename packages/pigment-react/tests/{ => styled}/fixtures/styled.output.css (73%) create mode 100644 packages/pigment-react/tests/styled/fixtures/styled.output.js create mode 100644 wyw-in-js/success/keyframes.input.js diff --git a/.eslintignore b/.eslintignore index 40b0fcc4a9fce1..5043b4bb97f494 100644 --- a/.eslintignore +++ b/.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/*/* diff --git a/packages/pigment-react/tests/fixtures/styled.input.js b/packages/pigment-react/tests/fixtures/styled.input.js deleted file mode 100644 index bcfc17d99059ab..00000000000000 --- a/packages/pigment-react/tests/fixtures/styled.input.js +++ /dev/null @@ -1,38 +0,0 @@ -import { styled, keyframes, css } from '@pigment-css/react'; - -const rotateKeyframe = keyframes({ - from: { - transform: 'rotate(360deg)', - }, - to: { - transform: 'rotate(0deg)', - }, -}); - -const Component = styled.div(({ theme }) => ({ - color: theme.palette.primary.main, - 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: none; - position: absolute; - border-radius: inherit; - background-color: currentColor; - opacity: 0.38; - font-size: ${({ theme }) => theme.size.font.h1}; -`; - -const SliderRail2 = styled.span` - display: block; - opacity: 0.38; - font-size: ${({ theme }) => theme.size.font.h1}; -`; diff --git a/packages/pigment-react/tests/fixtures/styled.output.js b/packages/pigment-react/tests/fixtures/styled.output.js deleted file mode 100644 index ed422edaf001c0..00000000000000 --- a/packages/pigment-react/tests/fixtures/styled.output.js +++ /dev/null @@ -1,17 +0,0 @@ -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 cls1 = "ct00dwm"; -const SliderRail = /*#__PURE__*/ _styled2("span", { - name: "MuiSlider", - slot: "Rail", -})({ - classes: ["soujkwr", "soujkwr-1"], -}); -const SliderRail2 = /*#__PURE__*/ _styled3("span")({ - classes: ["s14dtw5g"], -}); diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js b/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js index 57ce9170bdc49c..8ff26f9d247b2b 100644 --- a/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js +++ b/packages/pigment-react/tests/keyframes/fixtures/keyframes.input.js @@ -1,4 +1,3 @@ -import * as React from 'react'; import { keyframes } from '@pigment-css/react'; const rotateKeyframe = keyframes({ @@ -9,5 +8,3 @@ const rotateKeyframe = keyframes({ transform: 'rotate(0deg)', }, }); - -
; diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css b/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css new file mode 100644 index 00000000000000..43ac2b3341e9fb --- /dev/null +++ b/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.css @@ -0,0 +1,8 @@ +@keyframes r14c1bqo { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js b/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js new file mode 100644 index 00000000000000..2df1df78892cc8 --- /dev/null +++ b/packages/pigment-react/tests/keyframes/fixtures/keyframes.output.js @@ -0,0 +1 @@ +const rotateKeyframe = 'r14c1bqo'; diff --git a/packages/pigment-react/tests/keyframes/keyframes.test.ts b/packages/pigment-react/tests/keyframes/keyframes.test.ts index bef1bbc7677da1..e0d69cc6a4c09b 100644 --- a/packages/pigment-react/tests/keyframes/keyframes.test.ts +++ b/packages/pigment-react/tests/keyframes/keyframes.test.ts @@ -1,3 +1,4 @@ +import path from 'node:path'; import { expect } from 'chai'; import { runTransformation } from '../testUtils'; @@ -6,7 +7,9 @@ const CUSTOM_ERROR = describe('Pigment CSS - keyframes', () => { it('basics', async () => { - const { output, fixture } = await runTransformation('./fixtures/keyframes.input.js'); + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/keyframes.input.js'), + ); expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); diff --git a/packages/pigment-react/tests/pigment.ts b/packages/pigment-react/tests/pigment.ts deleted file mode 100644 index 5791bef78912da..00000000000000 --- a/packages/pigment-react/tests/pigment.ts +++ /dev/null @@ -1,111 +0,0 @@ -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'; -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 = { - palette: { - primary: { - main: 'red', - }, - }, - size: { - font: { - h1: '3rem', - }, - }, - components: { - MuiSlider: { - styleOverrides: { - rail: { - fontSize: '3rem', - }, - }, - }, - }, -}; - -const CUSTOM_ERROR = - 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; - -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.existsSync(outputFilePath) - ? fs.readFileSync(outputFilePath, 'utf8') - : ''; - const outputCssContent = fs.existsSync(outputCssFilePath) - ? fs.readFileSync(outputCssFilePath, 'utf8') - : ''; - - const pluginOptions = { - themeArgs: { - theme, - }, - babelOptions: { - configFile: false, - babelrc: false, - }, - tagResolver(_source: string, tag: string) { - return require.resolve(`../exports/${tag}`); - }, - }; - const result = await transform( - { - options: { - filename: inputFilePath, - preprocessor, - pluginOptions, - }, - cache, - eventEmitter, - }, - inputContent, - asyncResolveFallback, - ); - - const prettierConfig = await prettier.resolveConfig( - path.join(__dirname, '../../../', 'prettier.config.js'), - ); - const formattedJs = await prettier.format(result.code, { - ...prettierConfig, - parser: 'babel', - }); - - if (!outputContent || shouldUpdateOutput) { - fs.writeFileSync(outputFilePath, formattedJs, 'utf-8'); - } else { - expect(formattedJs, CUSTOM_ERROR).to.equal(outputContent); - } - - const formattedCss = await prettier.format(result.cssText ?? '', { - ...prettierConfig, - parser: 'css', - }); - if (!outputCssContent || shouldUpdateOutput) { - fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8'); - } else { - expect(formattedCss, CUSTOM_ERROR).to.equal(outputCssContent); - } - }); - }); -}); diff --git a/packages/pigment-react/tests/fixtures/styled.output.css b/packages/pigment-react/tests/styled/fixtures/styled.output.css similarity index 73% rename from packages/pigment-react/tests/fixtures/styled.output.css rename to packages/pigment-react/tests/styled/fixtures/styled.output.css index 5dc0a36a336efa..2f0ef62dd0a497 100644 --- a/packages/pigment-react/tests/fixtures/styled.output.css +++ b/packages/pigment-react/tests/styled/fixtures/styled.output.css @@ -1,4 +1,4 @@ -@keyframes r1ub6j9g { +@keyframes r1419f2q { from { transform: rotate(360deg); } @@ -6,15 +6,15 @@ transform: rotate(0deg); } } -.c1y26wbb { +.c1vtarpi { color: red; - animation: r1ub6j9g 2s ease-out 0s infinite; + animation: r1419f2q 2s ease-out 0s infinite; } -.ct00dwm { +.c1sjy0ja { color: red; font-size: 3rem; } -.soujkwr { +.s6hrafw { display: none; position: absolute; border-radius: inherit; @@ -22,10 +22,10 @@ opacity: 0.38; font-size: 3rem; } -.soujkwr-1 { +.s6hrafw-1 { font-size: 3rem; } -.s14dtw5g { +.s1nn157y { display: block; opacity: 0.38; font-size: 3rem; diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.js b/packages/pigment-react/tests/styled/fixtures/styled.output.js new file mode 100644 index 00000000000000..9e185ed55ac35c --- /dev/null +++ b/packages/pigment-react/tests/styled/fixtures/styled.output.js @@ -0,0 +1,17 @@ +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 cls1 = 'c1sjy0ja'; +const SliderRail = /*#__PURE__*/ _styled2('span', { + name: 'MuiSlider', + slot: 'Rail', +})({ + classes: ['s6hrafw', 's6hrafw-1'], +}); +const SliderRail2 = /*#__PURE__*/ _styled3('span')({ + classes: ['s1nn157y'], +}); diff --git a/packages/pigment-react/tests/styled/styled.test.ts b/packages/pigment-react/tests/styled/styled.test.ts index 814e2cd323edef..59062ae87ba4b1 100644 --- a/packages/pigment-react/tests/styled/styled.test.ts +++ b/packages/pigment-react/tests/styled/styled.test.ts @@ -1,3 +1,4 @@ +import path from 'node:path'; import { expect } from 'chai'; import { runTransformation } from '../testUtils'; @@ -28,11 +29,14 @@ const CUSTOM_ERROR = describe('Pigment CSS - styled', () => { it('basics', async () => { - const { output, fixture } = await runTransformation('./fixtures/keyframes.input.js', { - themeArgs: { - theme, + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/styled.input.js'), + { + themeArgs: { + theme, + }, }, - }); + ); expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); diff --git a/packages/pigment-react/tests/testUtils.ts b/packages/pigment-react/tests/testUtils.ts index 39bf94f73c8d53..61b7f1c90f4096 100644 --- a/packages/pigment-react/tests/testUtils.ts +++ b/packages/pigment-react/tests/testUtils.ts @@ -8,14 +8,14 @@ import * as prettier from 'prettier'; const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true'; export async function runTransformation( - relativePath: string, + absolutePath: string, options?: { themeArgs?: { theme?: any } }, ) { const cache = new TransformCacheCollection(); const { emitter: eventEmitter } = createFileReporter(false); - const inputFilePath = path.join(__dirname, relativePath); - const outputFilePath = path.join(__dirname, relativePath.replace('.input.', '.output.')); - const outputCssFilePath = path.join(__dirname, relativePath.replace('.input.js', '.output.css')); + const inputFilePath = absolutePath; + const outputFilePath = absolutePath.replace('.input.', '.output.'); + const outputCssFilePath = absolutePath.replace('.input.js', '.output.css'); const inputContent = fs.readFileSync(inputFilePath, 'utf8'); let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : ''; diff --git a/wyw-in-js/success/keyframes.input.js b/wyw-in-js/success/keyframes.input.js new file mode 100644 index 00000000000000..2ad337167b8a1c --- /dev/null +++ b/wyw-in-js/success/keyframes.input.js @@ -0,0 +1,18 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + from: { + transform: "rotate(360deg)" + }, + to: { + transform: "rotate(0deg)" + } +}); +const rotateKeyframe = "r14c1bqo"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp +}; \ No newline at end of file diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js index 09b1dd08802c32..7b08ccf07c9e01 100644 --- a/wyw-in-js/success/styled.input.js +++ b/wyw-in-js/success/styled.input.js @@ -16,16 +16,16 @@ const _exp2 = /*#__PURE__*/() => ({ theme }) => ({ color: theme.palette.primary.main, - animation: `${"r1ub6j9g"} 2s ease-out 0s infinite` + animation: `${"r1419f2q"} 2s ease-out 0s infinite` }); -const Component = "c1y26wbb"; +const Component = "c1vtarpi"; const _exp3 = /*#__PURE__*/() => ({ theme }) => theme.palette.primary.main; const _exp4 = /*#__PURE__*/() => ({ theme }) => theme.size.font.h1; -const cls1 = "ct00dwm"; +const cls1 = "c1sjy0ja"; const _exp5 = /*#__PURE__*/() => ({ name: "MuiSlider", slot: "Rail" @@ -33,11 +33,11 @@ const _exp5 = /*#__PURE__*/() => ({ const _exp6 = /*#__PURE__*/() => ({ theme }) => theme.size.font.h1; -const SliderRail = "soujkwr"; +const SliderRail = "s6hrafw"; const _exp7 = /*#__PURE__*/() => ({ theme }) => theme.size.font.h1; -const SliderRail2 = "s14dtw5g"; +const SliderRail2 = "s1nn157y"; const __wywPreval = exports.__wywPreval = { _exp: _exp, _exp2: _exp2, From b8221dd2cb2dedbe5db0a95ce18dd8a6a3619608 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 12:01:40 +0700 Subject: [PATCH 04/10] update README --- packages/pigment-react/tests/README.md | 34 ++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/packages/pigment-react/tests/README.md b/packages/pigment-react/tests/README.md index 3508b94a7ac824..c4f45b156affd9 100644 --- a/packages/pigment-react/tests/README.md +++ b/packages/pigment-react/tests/README.md @@ -1,3 +1,33 @@ -# Adding new fixtures +## Folder structure -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. +- `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 --filter @pigment-css/react run test +``` + +To update the output fixtures: + +```bash +pnpm --filter @pigment-css/react run 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. From 3bb46387ddfd5133692c27524269ad307d387488 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 12:08:56 +0700 Subject: [PATCH 05/10] split css --- packages/pigment-react/tests/css/css.test.ts | 44 +++++++++++++++++++ .../tests/css/fixtures/css.input.js | 6 +++ .../tests/css/fixtures/css.output.css | 4 ++ .../tests/css/fixtures/css.output.js | 1 + .../tests/styled/fixtures/styled.input.js | 7 +-- .../tests/styled/fixtures/styled.output.css | 10 ++--- .../tests/styled/fixtures/styled.output.js | 5 +-- wyw-in-js/success/css.input.js | 17 +++++++ wyw-in-js/success/styled.input.js | 19 +++----- 9 files changed, 83 insertions(+), 30 deletions(-) create mode 100644 packages/pigment-react/tests/css/css.test.ts create mode 100644 packages/pigment-react/tests/css/fixtures/css.input.js create mode 100644 packages/pigment-react/tests/css/fixtures/css.output.css create mode 100644 packages/pigment-react/tests/css/fixtures/css.output.js create mode 100644 wyw-in-js/success/css.input.js diff --git a/packages/pigment-react/tests/css/css.test.ts b/packages/pigment-react/tests/css/css.test.ts new file mode 100644 index 00000000000000..bb6c6ddd727d3e --- /dev/null +++ b/packages/pigment-react/tests/css/css.test.ts @@ -0,0 +1,44 @@ +import path from 'node:path'; +import { expect } from 'chai'; +import { runTransformation } from '../testUtils'; + +const theme = { + palette: { + primary: { + main: 'red', + }, + }, + size: { + font: { + h1: '3rem', + }, + }, + components: { + MuiSlider: { + styleOverrides: { + rail: { + fontSize: '3rem', + }, + }, + }, + }, +}; + +const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + +describe('Pigment CSS - css', () => { + it('basics', async () => { + const { output, fixture } = await runTransformation( + path.join(__dirname, 'fixtures/css.input.js'), + { + themeArgs: { + theme, + }, + }, + ); + + expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); + expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + }); +}); diff --git a/packages/pigment-react/tests/css/fixtures/css.input.js b/packages/pigment-react/tests/css/fixtures/css.input.js new file mode 100644 index 00000000000000..24519d991b09ac --- /dev/null +++ b/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}; +`; diff --git a/packages/pigment-react/tests/css/fixtures/css.output.css b/packages/pigment-react/tests/css/fixtures/css.output.css new file mode 100644 index 00000000000000..e34d404861da6d --- /dev/null +++ b/packages/pigment-react/tests/css/fixtures/css.output.css @@ -0,0 +1,4 @@ +.c1wr0t7p { + color: red; + font-size: 3rem; +} diff --git a/packages/pigment-react/tests/css/fixtures/css.output.js b/packages/pigment-react/tests/css/fixtures/css.output.js new file mode 100644 index 00000000000000..afbe5dcc772db6 --- /dev/null +++ b/packages/pigment-react/tests/css/fixtures/css.output.js @@ -0,0 +1 @@ +const cls1 = 'c1wr0t7p'; diff --git a/packages/pigment-react/tests/styled/fixtures/styled.input.js b/packages/pigment-react/tests/styled/fixtures/styled.input.js index bcfc17d99059ab..8e2c133a04dacd 100644 --- a/packages/pigment-react/tests/styled/fixtures/styled.input.js +++ b/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,11 +14,6 @@ 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', diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.css b/packages/pigment-react/tests/styled/fixtures/styled.output.css index 2f0ef62dd0a497..79471464008abb 100644 --- a/packages/pigment-react/tests/styled/fixtures/styled.output.css +++ b/packages/pigment-react/tests/styled/fixtures/styled.output.css @@ -10,11 +10,7 @@ color: red; animation: r1419f2q 2s ease-out 0s infinite; } -.c1sjy0ja { - color: red; - font-size: 3rem; -} -.s6hrafw { +.s1sjy0ja { display: none; position: absolute; border-radius: inherit; @@ -22,10 +18,10 @@ opacity: 0.38; font-size: 3rem; } -.s6hrafw-1 { +.s1sjy0ja-1 { font-size: 3rem; } -.s1nn157y { +.s6hrafw { display: block; opacity: 0.38; font-size: 3rem; diff --git a/packages/pigment-react/tests/styled/fixtures/styled.output.js b/packages/pigment-react/tests/styled/fixtures/styled.output.js index 9e185ed55ac35c..d5519e6a7a196b 100644 --- a/packages/pigment-react/tests/styled/fixtures/styled.output.js +++ b/packages/pigment-react/tests/styled/fixtures/styled.output.js @@ -5,13 +5,12 @@ import _theme from '@pigment-css/react/theme'; const Component = /*#__PURE__*/ _styled('div')({ classes: ['c1vtarpi'], }); -const cls1 = 'c1sjy0ja'; const SliderRail = /*#__PURE__*/ _styled2('span', { name: 'MuiSlider', slot: 'Rail', })({ - classes: ['s6hrafw', 's6hrafw-1'], + classes: ['s1sjy0ja', 's1sjy0ja-1'], }); const SliderRail2 = /*#__PURE__*/ _styled3('span')({ - classes: ['s1nn157y'], + classes: ['s6hrafw'], }); diff --git a/wyw-in-js/success/css.input.js b/wyw-in-js/success/css.input.js new file mode 100644 index 00000000000000..009dd10696ea48 --- /dev/null +++ b/wyw-in-js/success/css.input.js @@ -0,0 +1,17 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + theme +}) => theme.palette.primary.main; +const _exp2 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const cls1 = "c1wr0t7p"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp, + _exp2: _exp2 +}; \ No newline at end of file diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js index 7b08ccf07c9e01..d61590aa881ed9 100644 --- a/wyw-in-js/success/styled.input.js +++ b/wyw-in-js/success/styled.input.js @@ -20,30 +20,21 @@ const _exp2 = /*#__PURE__*/() => ({ }); const Component = "c1vtarpi"; const _exp3 = /*#__PURE__*/() => ({ - theme -}) => theme.palette.primary.main; -const _exp4 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const cls1 = "c1sjy0ja"; -const _exp5 = /*#__PURE__*/() => ({ name: "MuiSlider", slot: "Rail" }); -const _exp6 = /*#__PURE__*/() => ({ +const _exp4 = /*#__PURE__*/() => ({ theme }) => theme.size.font.h1; -const SliderRail = "s6hrafw"; -const _exp7 = /*#__PURE__*/() => ({ +const SliderRail = "s1sjy0ja"; +const _exp5 = /*#__PURE__*/() => ({ theme }) => theme.size.font.h1; -const SliderRail2 = "s1nn157y"; +const SliderRail2 = "s6hrafw"; const __wywPreval = exports.__wywPreval = { _exp: _exp, _exp2: _exp2, _exp3: _exp3, _exp4: _exp4, - _exp5: _exp5, - _exp6: _exp6, - _exp7: _exp7 + _exp5: _exp5 }; \ No newline at end of file From ea3bf39014d914a874496dd3b4b6e2e477bcf1bf Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 12:10:33 +0700 Subject: [PATCH 06/10] mistakenly added degbuggin files --- wyw-in-js/success/css.input.js | 17 ------------ wyw-in-js/success/keyframes.input.js | 18 ------------- wyw-in-js/success/styled.input.js | 40 ---------------------------- 3 files changed, 75 deletions(-) delete mode 100644 wyw-in-js/success/css.input.js delete mode 100644 wyw-in-js/success/keyframes.input.js delete mode 100644 wyw-in-js/success/styled.input.js diff --git a/wyw-in-js/success/css.input.js b/wyw-in-js/success/css.input.js deleted file mode 100644 index 009dd10696ea48..00000000000000 --- a/wyw-in-js/success/css.input.js +++ /dev/null @@ -1,17 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - theme -}) => theme.palette.primary.main; -const _exp2 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const cls1 = "c1wr0t7p"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp, - _exp2: _exp2 -}; \ No newline at end of file diff --git a/wyw-in-js/success/keyframes.input.js b/wyw-in-js/success/keyframes.input.js deleted file mode 100644 index 2ad337167b8a1c..00000000000000 --- a/wyw-in-js/success/keyframes.input.js +++ /dev/null @@ -1,18 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - from: { - transform: "rotate(360deg)" - }, - to: { - transform: "rotate(0deg)" - } -}); -const rotateKeyframe = "r14c1bqo"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp -}; \ No newline at end of file diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js deleted file mode 100644 index d61590aa881ed9..00000000000000 --- a/wyw-in-js/success/styled.input.js +++ /dev/null @@ -1,40 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - from: { - transform: "rotate(360deg)" - }, - to: { - transform: "rotate(0deg)" - } -}); -const _exp2 = /*#__PURE__*/() => ({ - theme -}) => ({ - color: theme.palette.primary.main, - animation: `${"r1419f2q"} 2s ease-out 0s infinite` -}); -const Component = "c1vtarpi"; -const _exp3 = /*#__PURE__*/() => ({ - name: "MuiSlider", - slot: "Rail" -}); -const _exp4 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const SliderRail = "s1sjy0ja"; -const _exp5 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const SliderRail2 = "s6hrafw"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp, - _exp2: _exp2, - _exp3: _exp3, - _exp4: _exp4, - _exp5: _exp5 -}; \ No newline at end of file From bc4c37c37904b950179ce6087b778863c5610d7b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 12:47:03 +0700 Subject: [PATCH 07/10] add h1 --- packages/pigment-react/tests/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/pigment-react/tests/README.md b/packages/pigment-react/tests/README.md index c4f45b156affd9..0247cae28f9ece 100644 --- a/packages/pigment-react/tests/README.md +++ b/packages/pigment-react/tests/README.md @@ -1,3 +1,5 @@ +# Pigment CSS testing + ## Folder structure - `tests` is the root folder for all tests From ab5fe55a199491b0a80603d302b572d732ba572a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 13:06:44 +0700 Subject: [PATCH 08/10] wrap expect --- packages/pigment-react/tests/css/css.test.ts | 10 ++--- .../tests/keyframes/keyframes.test.ts | 10 ++--- .../pigment-react/tests/styled/styled.test.ts | 10 ++--- packages/pigment-react/tests/testUtils.ts | 7 ++++ wyw-in-js/success/css.input.js | 17 ++++++++ wyw-in-js/success/keyframes.input.js | 18 +++++++++ wyw-in-js/success/styled.input.js | 40 +++++++++++++++++++ 7 files changed, 91 insertions(+), 21 deletions(-) create mode 100644 wyw-in-js/success/css.input.js create mode 100644 wyw-in-js/success/keyframes.input.js create mode 100644 wyw-in-js/success/styled.input.js diff --git a/packages/pigment-react/tests/css/css.test.ts b/packages/pigment-react/tests/css/css.test.ts index bb6c6ddd727d3e..d926f6de9a4162 100644 --- a/packages/pigment-react/tests/css/css.test.ts +++ b/packages/pigment-react/tests/css/css.test.ts @@ -1,6 +1,5 @@ import path from 'node:path'; -import { expect } from 'chai'; -import { runTransformation } from '../testUtils'; +import { runTransformation, expect } from '../testUtils'; const theme = { palette: { @@ -24,9 +23,6 @@ const theme = { }, }; -const CUSTOM_ERROR = - 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; - describe('Pigment CSS - css', () => { it('basics', async () => { const { output, fixture } = await runTransformation( @@ -38,7 +34,7 @@ describe('Pigment CSS - css', () => { }, ); - expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); - expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); }); }); diff --git a/packages/pigment-react/tests/keyframes/keyframes.test.ts b/packages/pigment-react/tests/keyframes/keyframes.test.ts index e0d69cc6a4c09b..337dedbaf76fdb 100644 --- a/packages/pigment-react/tests/keyframes/keyframes.test.ts +++ b/packages/pigment-react/tests/keyframes/keyframes.test.ts @@ -1,9 +1,5 @@ import path from 'node:path'; -import { expect } from 'chai'; -import { runTransformation } from '../testUtils'; - -const CUSTOM_ERROR = - 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; +import { runTransformation, expect } from '../testUtils'; describe('Pigment CSS - keyframes', () => { it('basics', async () => { @@ -11,7 +7,7 @@ describe('Pigment CSS - keyframes', () => { path.join(__dirname, 'fixtures/keyframes.input.js'), ); - expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); - expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); }); }); diff --git a/packages/pigment-react/tests/styled/styled.test.ts b/packages/pigment-react/tests/styled/styled.test.ts index 59062ae87ba4b1..4827244fa29ca9 100644 --- a/packages/pigment-react/tests/styled/styled.test.ts +++ b/packages/pigment-react/tests/styled/styled.test.ts @@ -1,6 +1,5 @@ import path from 'node:path'; -import { expect } from 'chai'; -import { runTransformation } from '../testUtils'; +import { runTransformation, expect } from '../testUtils'; const theme = { palette: { @@ -24,9 +23,6 @@ const theme = { }, }; -const CUSTOM_ERROR = - 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; - describe('Pigment CSS - styled', () => { it('basics', async () => { const { output, fixture } = await runTransformation( @@ -38,7 +34,7 @@ describe('Pigment CSS - styled', () => { }, ); - expect(output.js, CUSTOM_ERROR).to.equal(fixture.js); - expect(output.css, CUSTOM_ERROR).to.equal(fixture.css); + expect(output.js).to.equal(fixture.js); + expect(output.css).to.equal(fixture.css); }); }); diff --git a/packages/pigment-react/tests/testUtils.ts b/packages/pigment-react/tests/testUtils.ts index 61b7f1c90f4096..88ff6ab98a3c38 100644 --- a/packages/pigment-react/tests/testUtils.ts +++ b/packages/pigment-react/tests/testUtils.ts @@ -1,5 +1,6 @@ import * as fs from 'node:fs'; import * as path from 'node:path'; +import { expect as chaiExpect } 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'; @@ -82,3 +83,9 @@ export async function runTransformation( }, }; } + +export function expect(val: any): ReturnType { + const CUSTOM_ERROR = + 'The file contents have changed. Run "test:update" command to update the file if this is expected.'; + return chaiExpect(val, CUSTOM_ERROR); +} diff --git a/wyw-in-js/success/css.input.js b/wyw-in-js/success/css.input.js new file mode 100644 index 00000000000000..009dd10696ea48 --- /dev/null +++ b/wyw-in-js/success/css.input.js @@ -0,0 +1,17 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + theme +}) => theme.palette.primary.main; +const _exp2 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const cls1 = "c1wr0t7p"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp, + _exp2: _exp2 +}; \ No newline at end of file diff --git a/wyw-in-js/success/keyframes.input.js b/wyw-in-js/success/keyframes.input.js new file mode 100644 index 00000000000000..2ad337167b8a1c --- /dev/null +++ b/wyw-in-js/success/keyframes.input.js @@ -0,0 +1,18 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + from: { + transform: "rotate(360deg)" + }, + to: { + transform: "rotate(0deg)" + } +}); +const rotateKeyframe = "r14c1bqo"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp +}; \ No newline at end of file diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js new file mode 100644 index 00000000000000..d61590aa881ed9 --- /dev/null +++ b/wyw-in-js/success/styled.input.js @@ -0,0 +1,40 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.__wywPreval = void 0; +const _exp = /*#__PURE__*/() => ({ + from: { + transform: "rotate(360deg)" + }, + to: { + transform: "rotate(0deg)" + } +}); +const _exp2 = /*#__PURE__*/() => ({ + theme +}) => ({ + color: theme.palette.primary.main, + animation: `${"r1419f2q"} 2s ease-out 0s infinite` +}); +const Component = "c1vtarpi"; +const _exp3 = /*#__PURE__*/() => ({ + name: "MuiSlider", + slot: "Rail" +}); +const _exp4 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const SliderRail = "s1sjy0ja"; +const _exp5 = /*#__PURE__*/() => ({ + theme +}) => theme.size.font.h1; +const SliderRail2 = "s6hrafw"; +const __wywPreval = exports.__wywPreval = { + _exp: _exp, + _exp2: _exp2, + _exp3: _exp3, + _exp4: _exp4, + _exp5: _exp5 +}; \ No newline at end of file From 5ca792abda3f172dc9f24832894d0bae0959a5d7 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 8 Mar 2024 13:36:17 +0700 Subject: [PATCH 09/10] remove unwanted files --- wyw-in-js/success/css.input.js | 17 ------------ wyw-in-js/success/keyframes.input.js | 18 ------------- wyw-in-js/success/styled.input.js | 40 ---------------------------- 3 files changed, 75 deletions(-) delete mode 100644 wyw-in-js/success/css.input.js delete mode 100644 wyw-in-js/success/keyframes.input.js delete mode 100644 wyw-in-js/success/styled.input.js diff --git a/wyw-in-js/success/css.input.js b/wyw-in-js/success/css.input.js deleted file mode 100644 index 009dd10696ea48..00000000000000 --- a/wyw-in-js/success/css.input.js +++ /dev/null @@ -1,17 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - theme -}) => theme.palette.primary.main; -const _exp2 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const cls1 = "c1wr0t7p"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp, - _exp2: _exp2 -}; \ No newline at end of file diff --git a/wyw-in-js/success/keyframes.input.js b/wyw-in-js/success/keyframes.input.js deleted file mode 100644 index 2ad337167b8a1c..00000000000000 --- a/wyw-in-js/success/keyframes.input.js +++ /dev/null @@ -1,18 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - from: { - transform: "rotate(360deg)" - }, - to: { - transform: "rotate(0deg)" - } -}); -const rotateKeyframe = "r14c1bqo"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp -}; \ No newline at end of file diff --git a/wyw-in-js/success/styled.input.js b/wyw-in-js/success/styled.input.js deleted file mode 100644 index d61590aa881ed9..00000000000000 --- a/wyw-in-js/success/styled.input.js +++ /dev/null @@ -1,40 +0,0 @@ -"use strict"; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.__wywPreval = void 0; -const _exp = /*#__PURE__*/() => ({ - from: { - transform: "rotate(360deg)" - }, - to: { - transform: "rotate(0deg)" - } -}); -const _exp2 = /*#__PURE__*/() => ({ - theme -}) => ({ - color: theme.palette.primary.main, - animation: `${"r1419f2q"} 2s ease-out 0s infinite` -}); -const Component = "c1vtarpi"; -const _exp3 = /*#__PURE__*/() => ({ - name: "MuiSlider", - slot: "Rail" -}); -const _exp4 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const SliderRail = "s1sjy0ja"; -const _exp5 = /*#__PURE__*/() => ({ - theme -}) => theme.size.font.h1; -const SliderRail2 = "s6hrafw"; -const __wywPreval = exports.__wywPreval = { - _exp: _exp, - _exp2: _exp2, - _exp3: _exp3, - _exp4: _exp4, - _exp5: _exp5 -}; \ No newline at end of file From 540871b3b80c962dc702f7c4185b7b0108797d93 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 8 Mar 2024 12:46:07 +0530 Subject: [PATCH 10/10] Update test command in README --- packages/pigment-react/tests/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/pigment-react/tests/README.md b/packages/pigment-react/tests/README.md index 0247cae28f9ece..5da4275ebf7d59 100644 --- a/packages/pigment-react/tests/README.md +++ b/packages/pigment-react/tests/README.md @@ -13,13 +13,13 @@ At the root project terminal: ```bash -pnpm --filter @pigment-css/react run test +pnpm nx run @pigment-css/react:test ``` To update the output fixtures: ```bash -pnpm --filter @pigment-css/react run test:update +pnpm nx run @pigment-css/react:test:update ``` ## Adding new tests