diff --git a/.eslintignore b/.eslintignore index 2933e3842db111..859965ff105a95 100644 --- a/.eslintignore +++ b/.eslintignore @@ -23,6 +23,7 @@ /packages/zero-runtime/processors/ /packages/zero-runtime/exports/ /packages/zero-runtime/theme/ +/packages/zero-runtime/tests/fixtures/ /packages/zero-next-plugin/loader.js # Ignore fixtures /packages/typescript-to-proptypes/test/*/* diff --git a/package.json b/package.json index b231a7ca241f55..3a2114cd2f81f6 100644 --- a/package.json +++ b/package.json @@ -51,8 +51,9 @@ "test": "node scripts/test.mjs", "tc": "node test/cli.js", "test:extended": "pnpm eslint && pnpm typescript && pnpm test:coverage", - "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", - "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", + "test:zero-runtime:ci": "pnpm nx run @mui/zero-runtime:test:ci", + "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime", + "test:coverage:ci": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' --exclude 'packages/zero-runtime/**/*.test.{js,ts,tsx}' && pnpm test:zero-runtime:ci", "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=html mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}'", "test:e2e": "cross-env NODE_ENV=production pnpm test:e2e:build && concurrently --success first --kill-others \"pnpm test:e2e:run\" \"pnpm test:e2e:server\"", "test:e2e:build": "webpack --config test/e2e/webpack.config.js", diff --git a/packages/zero-runtime/package.json b/packages/zero-runtime/package.json index 8471cb1ea2af43..ef5da5dea3e344 100644 --- a/packages/zero-runtime/package.json +++ b/packages/zero-runtime/package.json @@ -6,9 +6,11 @@ "types": "build/index.d.ts", "private": true, "scripts": { - "clean": "rimraf build types", + "clean": "rimraf build types processors utils", "watch": "tsup --watch --clean false", "build": "tsup", + "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'", + "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/zero mocha 'packages/zero-runtime/**/*.test.{js,ts,tsx}'", "typecheck": "tsc --noEmit -p ." }, "dependencies": { @@ -38,6 +40,7 @@ "@types/node": "^18.19.14", "@types/react": "^18.2.55", "@types/stylis": "^4.2.5", + "chai": "^4.4.1", "react": "^18.2.0" }, "peerDependencies": { @@ -106,5 +109,21 @@ "./exports/createUseThemeProps": { "default": "./exports/createUseThemeProps.js" } + }, + "nx": { + "targets": { + "test": { + "cache": false, + "dependsOn": [ + "build" + ] + }, + "test:ci": { + "cache": false, + "dependsOn": [ + "build" + ] + } + } } } diff --git a/packages/zero-runtime/tests/README.md b/packages/zero-runtime/tests/README.md new file mode 100644 index 00000000000000..3508b94a7ac824 --- /dev/null +++ b/packages/zero-runtime/tests/README.md @@ -0,0 +1,3 @@ +# Adding new fixtures + +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. diff --git a/packages/zero-runtime/tests/fixtures/styled.input.js b/packages/zero-runtime/tests/fixtures/styled.input.js new file mode 100644 index 00000000000000..d0e7305c3b597c --- /dev/null +++ b/packages/zero-runtime/tests/fixtures/styled.input.js @@ -0,0 +1,5 @@ +import { styled } from '@mui/zero-runtime'; + +const Component = styled.div(({ theme }) => ({ + color: theme.palette.primary.main, +})); diff --git a/packages/zero-runtime/tests/fixtures/styled.output.css b/packages/zero-runtime/tests/fixtures/styled.output.css new file mode 100644 index 00000000000000..7f416c5e141cba --- /dev/null +++ b/packages/zero-runtime/tests/fixtures/styled.output.css @@ -0,0 +1 @@ +.c1yjyf7p{color:red;} diff --git a/packages/zero-runtime/tests/fixtures/styled.output.js b/packages/zero-runtime/tests/fixtures/styled.output.js new file mode 100644 index 00000000000000..749bfe64df1933 --- /dev/null +++ b/packages/zero-runtime/tests/fixtures/styled.output.js @@ -0,0 +1,5 @@ +import { styled as _styled } from "@mui/zero-runtime"; +import _theme from "@mui/zero-runtime/theme"; +const Component = /*#__PURE__*/_styled("div")({ + classes: ["c1yjyf7p"] +}); diff --git a/packages/zero-runtime/tests/zero-runtime.test.js b/packages/zero-runtime/tests/zero-runtime.test.js new file mode 100644 index 00000000000000..6d976b922bdad6 --- /dev/null +++ b/packages/zero-runtime/tests/zero-runtime.test.js @@ -0,0 +1,64 @@ +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'; + +const files = fs.readdirSync(path.join(__dirname, 'fixtures')); + +const theme = { + palette: { + primary: { + main: 'red', + }, + }, +}; + +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.readFileSync(outputFilePath, 'utf8'); + const outputCssContent = fs.readFileSync(outputCssFilePath, 'utf8'); + + const result = await transform( + { + options: { + filename: inputFilePath, + pluginOptions: { + themeArgs: { + theme, + }, + babelOptions: { + configFile: false, + babelrc: false, + }, + tagResolver(_source, tag) { + return require.resolve(`../exports/${tag}`); + }, + }, + }, + cache, + eventEmitter, + }, + inputContent, + asyncResolveFallback, + ); + + expect(result.code.trim()).to.equal(outputContent.trim()); + expect(result.cssText).to.equal(outputCssContent); + }); + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb2a4efe95bba1..33816272f89270 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2395,6 +2395,9 @@ importers: '@types/stylis': specifier: ^4.2.5 version: 4.2.5 + chai: + specifier: ^4.4.1 + version: 4.4.1 react: specifier: ^18.2.0 version: 18.2.0