Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[pigment] Improve testing of fixtures
Browse files Browse the repository at this point in the history
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.
brijeshb42 committed Mar 7, 2024

Verified

This commit was signed with the committer’s verified signature.
hediet Henning Dieterichs
1 parent a8ae789 commit a6df0ba
Showing 7 changed files with 89 additions and 20 deletions.
3 changes: 3 additions & 0 deletions packages/pigment-react/package.json
Original file line number Diff line number Diff line change
@@ -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": {
2 changes: 1 addition & 1 deletion packages/pigment-react/tests/fixtures/styled.input.js
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ const SliderRail = styled('span', {
name: 'MuiSlider',
slot: 'Rail',
})`
display: block;
display: none;
position: absolute;
border-radius: inherit;
background-color: currentColor;
38 changes: 32 additions & 6 deletions packages/pigment-react/tests/fixtures/styled.output.css
Original file line number Diff line number Diff line change
@@ -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;
}
16 changes: 8 additions & 8 deletions packages/pigment-react/tests/fixtures/styled.output.js
Original file line number Diff line number Diff line change
@@ -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"],
});
41 changes: 37 additions & 4 deletions packages/pigment-react/tests/pigment.test.ts
Original file line number Diff line number Diff line change
@@ -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);
}
});
});
});
3 changes: 2 additions & 1 deletion packages/pigment-react/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
6 changes: 6 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a6df0ba

Please sign in to comment.