Setup integration tests (tailwindlabs#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

Author: RobinMalfait

.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 }}

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,

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)
       })
     },
   }

integrations/package-lock.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "test": "jest --runInBand"
+    "test": "jest --runInBand --forceExit"
   },
   "jest": {
     "testTimeout": 30000,

integrations/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": [
       "<rootDir>/../../jest/customMatchers.js"

integrations/parcel/package-lock.json

@@ -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;

integrations/parcel/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": [
       "<rootDir>/../../jest/customMatchers.js"