From 516ba530f06f62887d0b96c33deb731941c7c25d Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 14 Sep 2021 16:18:14 +0200 Subject: [PATCH] Setup integration tests (#5466) * setup integration tests * fix rgb color syntax * ensure integration tests always exit If for any reason the integration tests fail, then it will run forever on CI (~2hours or something). The `--forceExit` is not ideal but it will prevent long running processes. * fix incorrect test We were never properly waiting for the command to finish. * handle AbortError properly In CI, when an AbortController gets aborted an error is thrown (AbortError). If we don't catch it properly then it will "leak" and the test will fail. * improve IO functions * quit integration tests after 10seconds * only test a few integrations * test all integrations using matrix This will cancel other builds when one fails, it will also separate the output per integration which can be useful especially now that we are still figuring things out. * rename `build` to `test` * add --verbose flag to receive output in the console * when reading stdout or stderr, wait a certain about to ensure stability Debouncing for 200ms means that if another message comes in within those 200ms we delay the execution of the callback. * simplify workflow * use terminal output instead of disk events * cache node_modules for integrations * empty commit, to test cache hits --- .github/workflows/integration-tests.yml | 59 +++++++++ integrations/execute.js | 23 +++- integrations/io.js | 54 ++++---- integrations/package-lock.json | 1 + integrations/package.json | 2 +- integrations/parcel/package-lock.json | 1 + integrations/parcel/package.json | 3 +- integrations/parcel/tests/integration.test.js | 4 +- integrations/postcss-cli/package-lock.json | 1 + integrations/postcss-cli/package.json | 5 +- .../postcss-cli/tests/integration.test.js | 107 ++++++++-------- integrations/rollup/package.json | 7 +- integrations/rollup/tests/integration.test.js | 103 +++++++-------- .../tailwindcss-cli/package-lock.json | 1 + integrations/tailwindcss-cli/package.json | 3 +- .../tailwindcss-cli/tests/cli.test.js | 4 +- .../tailwindcss-cli/tests/integration.test.js | 119 ++++++++---------- integrations/vite/package-lock.json | 1 + integrations/vite/package.json | 3 +- integrations/vite/tests/integration.test.js | 4 +- integrations/webpack-4/package-lock.json | 1 + integrations/webpack-4/package.json | 3 +- .../webpack-4/tests/integration.test.js | 4 +- integrations/webpack-5/package-lock.json | 1 + integrations/webpack-5/package.json | 3 +- .../webpack-5/tests/integration.test.js | 8 +- 26 files changed, 298 insertions(+), 227 deletions(-) create mode 100644 .github/workflows/integration-tests.yml diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml new file mode 100644 index 000000000..7e314924b --- /dev/null +++ b/.github/workflows/integration-tests.yml @@ -0,0 +1,59 @@ +name: Integration Tests + +on: + push: + branches: [master] + pull_request: + branches: [master] + +jobs: + test: + runs-on: ubuntu-latest + + strategy: + matrix: + integration: [parcel, postcss-cli, rollup, tailwindcss-cli, vite, webpack-4, webpack-5] + node-version: [16] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + + - name: Use cached node_modules (tailwindcss) + id: cache-tailwindcss + uses: actions/cache@v2 + with: + path: node_modules + key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-tailwindcss + restore-keys: | + nodeModules- + + - name: Install dependencies + if: steps.cache-tailwindcss.outputs.cache-hit != 'true' + run: npm install + env: + CI: true + + - name: Build Tailwind CSS + run: npm run prepublishOnly + + - name: Use cached node_modules (integrations) + id: cache-integrations + uses: actions/cache@v2 + with: + path: ./integrations/**/node_modules + key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }}-${{ matrix.integration }}-integrations + restore-keys: | + nodeModules- + + - name: Install shared dependencies + if: steps.cache-integrations.outputs.cache-hit != 'true' + run: npm run install:integrations + env: + CI: true + + - name: Test ${{ matrix.integration }} + run: npm test --prefix ./integrations/${{ matrix.integration }} diff --git a/integrations/execute.js b/integrations/execute.js index fccabcdda..bab80b4ba 100644 --- a/integrations/execute.js +++ b/integrations/execute.js @@ -8,6 +8,15 @@ afterEach(() => { runningProcessess.splice(0).forEach((runningProcess) => runningProcess.stop()) }) +function debounce(fn, ms) { + let state = { timer: undefined } + + return (...args) => { + if (state.timer) clearTimeout(state.timer) + state.timer = setTimeout(() => fn(...args), ms) + } +} + module.exports = function $(command, options = {}) { let abortController = new AbortController() let cwd = resolveToolRoot() @@ -37,13 +46,13 @@ module.exports = function $(command, options = {}) { } } - function notifyNextStdoutActor() { + let notifyNextStdoutActor = debounce(() => { return notifyNext(stdoutActors, stdoutMessages) - } + }, 200) - function notifyNextStderrActor() { + let notifyNextStderrActor = debounce(() => { return notifyNext(stderrActors, stderrMessages) - } + }, 200) let runningProcess = new Promise((resolve, reject) => { let child = spawn(command, args, { @@ -74,6 +83,12 @@ module.exports = function $(command, options = {}) { combined += data }) + child.on('error', (err) => { + if (err.name !== 'AbortError') { + throw err + } + }) + child.on('close', (code, signal) => { ;(signal === 'SIGTERM' ? resolve : code === 0 ? resolve : reject)({ code, diff --git a/integrations/io.js b/integrations/io.js index f1a406ec7..383776838 100644 --- a/integrations/io.js +++ b/integrations/io.js @@ -6,6 +6,17 @@ let chokidar = require('chokidar') let resolveToolRoot = require('./resolve-tool-root') +function getWatcherOptions() { + return { + usePolling: true, + interval: 200, + awaitWriteFinish: { + stabilityThreshold: 1500, + pollInterval: 50, + }, + } +} + module.exports = function ({ /** Output directory, relative to the tool. */ output = 'dist', @@ -95,6 +106,10 @@ module.exports = function ({ file = await resolveFile(file, absoluteOutputFolder) return fs.readFile(path.resolve(absoluteOutputFolder, file), 'utf8') }, + async readInputFile(file) { + file = await resolveFile(file, absoluteInputFolder) + return fs.readFile(path.resolve(absoluteInputFolder, file), 'utf8') + }, async appendToInputFile(file, contents) { let filePath = path.resolve(absoluteInputFolder, file) if (!fileCache[filePath]) { @@ -122,48 +137,41 @@ module.exports = function ({ async waitForOutputFileCreation(file) { if (file instanceof RegExp) { let r = file - let watcher = chokidar.watch(absoluteOutputFolder) + let watcher = chokidar.watch(absoluteOutputFolder, getWatcherOptions()) return new Promise((resolve) => { watcher.on('add', (file) => { if (r.test(file)) { - watcher.close() - resolve() + watcher.close().then(() => resolve()) } }) }) } else { let filePath = path.resolve(absoluteOutputFolder, file) - let watcher = chokidar.watch(filePath) - let watcherPromise = new Promise((resolve) => { - watcher.once('add', () => { - watcher.close() - resolve() + return new Promise((resolve) => { + let watcher = chokidar.watch(absoluteOutputFolder, getWatcherOptions()) + + watcher.on('add', (addedFile) => { + if (addedFile !== filePath) return + return watcher.close().finally(resolve) }) }) - - if (existsSync(filePath)) { - watcher.close() - return Promise.resolve() - } - - return watcherPromise } }, async waitForOutputFileChange(file, cb = () => {}) { file = await resolveFile(file, absoluteOutputFolder) - let filePath = path.resolve(absoluteOutputFolder, file) - let watcher = chokidar.watch(filePath) return new Promise((resolve) => { - let chain = Promise.resolve() - watcher.once('change', () => { - watcher.close() - chain.then(() => resolve()) - }) - chain.then(() => cb()) + let watcher = chokidar.watch(absoluteOutputFolder, getWatcherOptions()) + + watcher + .on('change', (changedFile) => { + if (changedFile !== filePath) return + return watcher.close().finally(resolve) + }) + .on('ready', cb) }) }, } diff --git a/integrations/package-lock.json b/integrations/package-lock.json index 2534f2994..6824c194d 100644 --- a/integrations/package-lock.json +++ b/integrations/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "integrations", "version": "0.0.0", "devDependencies": { "isomorphic-fetch": "^3.0.0", diff --git a/integrations/package.json b/integrations/package.json index ba070a6d0..20eed5b0f 100644 --- a/integrations/package.json +++ b/integrations/package.json @@ -3,7 +3,7 @@ "private": true, "version": "0.0.0", "scripts": { - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { "testTimeout": 30000, diff --git a/integrations/parcel/package-lock.json b/integrations/parcel/package-lock.json index ef7f647e6..e49a18924 100644 --- a/integrations/parcel/package-lock.json +++ b/integrations/parcel/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "parcel", "version": "0.0.0", "devDependencies": { "parcel": "nightly" diff --git a/integrations/parcel/package.json b/integrations/parcel/package.json index 1bd163406..e4e88bd56 100644 --- a/integrations/parcel/package.json +++ b/integrations/parcel/package.json @@ -5,9 +5,10 @@ "scripts": { "build": "parcel build ./src/index.html --no-cache", "dev": "parcel watch ./src/index.html --no-cache", - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "parcel", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js index f61536df7..cece481b5 100644 --- a/integrations/parcel/tests/integration.test.js +++ b/integrations/parcel/tests/integration.test.js @@ -80,7 +80,7 @@ describe.skip('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -240,7 +240,7 @@ describe.skip('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/postcss-cli/package-lock.json b/integrations/postcss-cli/package-lock.json index 038384aea..27fafd5c5 100644 --- a/integrations/postcss-cli/package-lock.json +++ b/integrations/postcss-cli/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "postcss-cli", "version": "0.0.0", "devDependencies": { "postcss": "^8.2.15", diff --git a/integrations/postcss-cli/package.json b/integrations/postcss-cli/package.json index bed103c0c..6ad9adf03 100644 --- a/integrations/postcss-cli/package.json +++ b/integrations/postcss-cli/package.json @@ -3,10 +3,11 @@ "private": true, "version": "0.0.0", "scripts": { - "build": "NODE_ENV=production postcss ./src/index.css -o ./dist/main.css", - "test": "jest --runInBand" + "build": "NODE_ENV=production postcss ./src/index.css -o ./dist/main.css --verbose", + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "PostCSS CLI", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index 15681e3e9..5f5cac960 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -1,13 +1,14 @@ let $ = require('../../execute') let { css, html, javascript } = require('../../syntax') -let { - readOutputFile, - appendToInputFile, - writeInputFile, - waitForOutputFileCreation, - waitForOutputFileChange, -} = require('../../io')({ output: 'dist', input: 'src' }) +let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({ + output: 'dist', + input: 'src', +}) + +function ready(message) { + return message.includes('Finished') +} describe('static build', () => { it('should be possible to generate tailwind output', async () => { @@ -31,11 +32,10 @@ describe('watcher', () => { test('classes are generated when the html file changes', async () => { await writeInputFile('index.html', html`
`) - let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', { + let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w --verbose', { env: { TAILWIND_MODE: 'watch' }, }) - - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -45,9 +45,8 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -60,15 +59,14 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -85,11 +83,11 @@ describe('watcher', () => { test('classes are generated when the tailwind.config.js file changes', async () => { await writeInputFile('index.html', html`
`) - let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', { + let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w --verbose', { env: { TAILWIND_MODE: 'watch' }, }) - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -104,10 +102,9 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - '../tailwind.config.js', - javascript` + await writeInputFile( + '../tailwind.config.js', + javascript` module.exports = { content: ['./src/index.html'], theme: { @@ -126,8 +123,8 @@ describe('watcher', () => { plugins: [], } ` - ) - }) + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -148,11 +145,11 @@ describe('watcher', () => { test('classes are generated when the index.css file changes', async () => { await writeInputFile('index.html', html`
`) - let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w', { + let runningProcess = $('postcss ./src/index.css -o ./dist/main.css -w --verbose', { env: { TAILWIND_MODE: 'watch' }, }) - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -162,22 +159,21 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded; - } + @layer components { + .btn { + @apply px-2 py-1 rounded; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -194,29 +190,28 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded bg-red-500; - } + @layer components { + .btn { + @apply px-2 py-1 rounded bg-red-500; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/rollup/package.json b/integrations/rollup/package.json index 9cfbcd1ff..7234f08b5 100644 --- a/integrations/rollup/package.json +++ b/integrations/rollup/package.json @@ -4,13 +4,12 @@ "version": "0.0.0", "scripts": { "build": "rollup -c", - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "rollup.js", - "setupFilesAfterEnv": [ - "/../../jest/customMatchers.js" - ] + "setupFilesAfterEnv": ["/../../jest/customMatchers.js"] }, "devDependencies": { "rollup": "^2.48.0", diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index ab17a5d54..0e52a2ec1 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -1,13 +1,14 @@ let $ = require('../../execute') let { css, html, javascript } = require('../../syntax') -let { - readOutputFile, - appendToInputFile, - writeInputFile, - waitForOutputFileCreation, - waitForOutputFileChange, -} = require('../../io')({ output: 'dist', input: 'src' }) +let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({ + output: 'dist', + input: 'src', +}) + +function ready(message) { + return message.includes('created') +} describe('static build', () => { it('should be possible to generate tailwind output', async () => { @@ -32,8 +33,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch await writeInputFile('index.html', html`
`) let runningProcess = $('rollup -c --watch', { env }) - - await waitForOutputFileCreation('index.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -43,9 +43,8 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch ` ) - await waitForOutputFileChange('index.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -58,15 +57,14 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch ` ) - await waitForOutputFileChange('index.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -84,8 +82,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch await writeInputFile('index.html', html`
`) let runningProcess = $('rollup -c --watch', { env }) - - await waitForOutputFileCreation('index.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -100,10 +97,9 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch ` ) - await waitForOutputFileChange('index.css', async () => { - await writeInputFile( - '../tailwind.config.js', - javascript` + await writeInputFile( + '../tailwind.config.js', + javascript` module.exports = { content: ['./src/index.html'], theme: { @@ -122,8 +118,8 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch plugins: [], } ` - ) - }) + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -145,8 +141,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch await writeInputFile('index.html', html`
`) let runningProcess = $('rollup -c --watch', { env }) - - await waitForOutputFileCreation('index.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -156,22 +151,21 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch ` ) - await waitForOutputFileChange('index.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded; - } + @layer components { + .btn { + @apply px-2 py-1 rounded; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` @@ -188,29 +182,28 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch ` ) - await waitForOutputFileChange('index.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded bg-red-500; - } + @layer components { + .btn { + @apply px-2 py-1 rounded bg-red-500; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('index.css')).toIncludeCss( css` .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/tailwindcss-cli/package-lock.json b/integrations/tailwindcss-cli/package-lock.json index 7b7a3814b..c121da5a6 100644 --- a/integrations/tailwindcss-cli/package-lock.json +++ b/integrations/tailwindcss-cli/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "tailwindcss-cli", "version": "0.0.0" } } diff --git a/integrations/tailwindcss-cli/package.json b/integrations/tailwindcss-cli/package.json index 882e30b46..0ed3dc1fe 100644 --- a/integrations/tailwindcss-cli/package.json +++ b/integrations/tailwindcss-cli/package.json @@ -4,9 +4,10 @@ "version": "0.0.0", "scripts": { "build": "NODE_ENV=production node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css", - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "Tailwind CSS CLI", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index b73fc61e0..fb39c9448 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -187,7 +187,7 @@ describe('Build command', () => { .btn-after { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; @@ -238,7 +238,7 @@ describe('Build command', () => { .btn-after { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index c08080579..72c803782 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -1,13 +1,14 @@ let $ = require('../../execute') let { css, html, javascript } = require('../../syntax') -let { - readOutputFile, - appendToInputFile, - writeInputFile, - waitForOutputFileCreation, - waitForOutputFileChange, -} = require('../../io')({ output: 'dist', input: 'src' }) +let { readOutputFile, appendToInputFile, writeInputFile } = require('../../io')({ + output: 'dist', + input: 'src', +}) + +function ready(message) { + return message.includes('Done in') +} describe('static build', () => { it('should be possible to generate tailwind output', async () => { @@ -48,22 +49,20 @@ describe('static build', () => { ` ) - $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', { + await $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css', { env: { NODE_ENV: 'production' }, }) - await waitForOutputFileCreation('main.css') - expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .bg-red-600 { --tw-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--tw-bg-opacity)); + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } .font-bold { @@ -79,8 +78,7 @@ describe('watcher', () => { await writeInputFile('index.html', html`
`) let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') - - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -90,9 +88,8 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -105,15 +102,14 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -145,8 +141,7 @@ describe('watcher', () => { ) let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') - - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -156,9 +151,8 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await appendToInputFile('index.html', html`
`) - }) + await appendToInputFile('index.html', html`
`) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).not.toIncludeCss(css` @layer base { @@ -186,8 +180,7 @@ describe('watcher', () => { await writeInputFile('index.html', html`
`) let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') - - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -202,10 +195,9 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - '../tailwind.config.js', - javascript` + await writeInputFile( + '../tailwind.config.js', + javascript` module.exports = { content: ['./src/index.html'], theme: { @@ -224,8 +216,8 @@ describe('watcher', () => { plugins: [], } ` - ) - }) + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -247,8 +239,7 @@ describe('watcher', () => { await writeInputFile('index.html', html`
`) let runningProcess = $('node ../../lib/cli.js -i ./src/index.css -o ./dist/main.css -w') - - await waitForOutputFileCreation('main.css') + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -258,22 +249,21 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded; - } + @layer components { + .btn { + @apply px-2 py-1 rounded; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` @@ -290,29 +280,28 @@ describe('watcher', () => { ` ) - await waitForOutputFileChange('main.css', async () => { - await writeInputFile( - 'index.css', - css` - @tailwind base; - @tailwind components; - @tailwind utilities; + await writeInputFile( + 'index.css', + css` + @tailwind base; + @tailwind components; + @tailwind utilities; - @layer components { - .btn { - @apply px-2 py-1 rounded bg-red-500; - } + @layer components { + .btn { + @apply px-2 py-1 rounded bg-red-500; } - ` - ) - }) + } + ` + ) + await runningProcess.onStderr(ready) expect(await readOutputFile('main.css')).toIncludeCss( css` .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/vite/package-lock.json b/integrations/vite/package-lock.json index dc99469ef..3d1b0c248 100644 --- a/integrations/vite/package-lock.json +++ b/integrations/vite/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "vite", "version": "0.0.0", "devDependencies": { "vite": "^2.3.3" diff --git a/integrations/vite/package.json b/integrations/vite/package.json index 9734a834c..91fb48706 100644 --- a/integrations/vite/package.json +++ b/integrations/vite/package.json @@ -6,9 +6,10 @@ "browser": "./src/index.js", "scripts": { "build": "vite build", - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "vite", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index 18ff59c79..17a5ebb6b 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -87,7 +87,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -242,7 +242,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/webpack-4/package-lock.json b/integrations/webpack-4/package-lock.json index 002e4190e..ddb12373c 100644 --- a/integrations/webpack-4/package-lock.json +++ b/integrations/webpack-4/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "webpack-4", "version": "0.0.0", "devDependencies": { "css-loader": "^5.2.4", diff --git a/integrations/webpack-4/package.json b/integrations/webpack-4/package.json index 32d665c4f..352229f4b 100644 --- a/integrations/webpack-4/package.json +++ b/integrations/webpack-4/package.json @@ -7,9 +7,10 @@ "scripts": { "build": "webpack --mode=production", "dev": "webpack --mode=development --watch", - "test": "jest --runInBand" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "webpack 4", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index ce1d5dba0..929a8bd74 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -64,7 +64,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -208,7 +208,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/webpack-5/package-lock.json b/integrations/webpack-5/package-lock.json index 6960b0ee5..1ef026ce1 100644 --- a/integrations/webpack-5/package-lock.json +++ b/integrations/webpack-5/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "webpack-5", "version": "0.0.0", "devDependencies": { "css-loader": "^5.2.4", diff --git a/integrations/webpack-5/package.json b/integrations/webpack-5/package.json index 061aab2ba..8d88bbf1a 100644 --- a/integrations/webpack-5/package.json +++ b/integrations/webpack-5/package.json @@ -7,9 +7,10 @@ "scripts": { "build": "webpack --mode=production", "dev": "webpack --mode=development", - "test": "jest" + "test": "jest --runInBand --forceExit" }, "jest": { + "testTimeout": 10000, "displayName": "webpack 5", "setupFilesAfterEnv": [ "/../../jest/customMatchers.js" diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js index 6112b7bf0..b6f654522 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -64,7 +64,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .font-bold { font-weight: 700; @@ -208,7 +208,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; @@ -253,12 +253,12 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .bg-red-600 { --tw-bg-opacity: 1; - background-color: rgba(220, 38, 38, var(--tw-bg-opacity)); + background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } .font-bold {