Add test for rebuilds after config change

thecrypticace · thecrypticace · commit f02ff4b2ecef · 2021-03-28T17:26:49.000-04:00
diff --git a/tests/rebuild.worker.js b/tests/rebuild.worker.js
@@ -0,0 +1,71 @@
+const fs = require("fs")
+const path = require("path")
+const postcss = require("postcss")
+const tailwind = require("../src/index.js")
+const configPath = path.resolve(__dirname, './rebuilds.tailwind.config.js')
+
+function run(input, config = {}, from = null) {
+  from = from || path.resolve(__filename)
+
+  return postcss([tailwind(config)]).process(input, { from })
+}
+
+async function runTest() {
+  let messages = []
+  let config1 = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './rebuilds.test.html')],
+    corePlugins: { preflight: false },
+    theme: {
+      colors: { plorange: 'orange' },
+    },
+    plugins: [],
+  }
+
+  let config2 = {
+    ...config1,
+    theme: {
+      colors: { plorange: 'purple' },
+    },
+  }
+
+  let from = path.resolve(__filename)
+  let css = `
+    @tailwind utilities;
+    body { @apply bg-plorange; }
+  `
+
+  fs.writeFileSync(configPath, `module.exports = ${JSON.stringify(config1)};`)
+
+  let results = [
+    await run(css, configPath, `${from}?id=1`),
+    await run(css, configPath, `${from}?id=2`),
+  ]
+
+  results.forEach(result => {
+    messages.push({
+      css: result.css,
+    })
+  })
+
+  await new Promise(resolve => setTimeout(resolve, 100))
+
+  fs.writeFileSync(configPath, `module.exports = ${JSON.stringify(config2)};`)
+
+  results = [
+    await run(css, configPath, `${from}?id=1`),
+    await run(css, configPath, `${from}?id=2`),
+  ]
+
+  results.forEach(result => {
+    messages.push({
+      css: result.css,
+    })
+  })
+
+  process.stdout.write(JSON.stringify(messages))
+}
+
+runTest().finally(() => {
+  fs.unlinkSync(configPath)
+})
diff --git a/tests/rebuilds.test.html b/tests/rebuilds.test.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body></body>
+</html>
diff --git a/tests/rebuilds.test.js b/tests/rebuilds.test.js
@@ -0,0 +1,36 @@
+const path = require('path')
+const process = require('child_process')
+const { promisify } = require('util')
+const exec = promisify(process.exec)
+
+test('builds with multiple sources handle config file changes', async () => {
+  const filepath = path.resolve(__dirname, './rebuild.worker.js')
+
+  const { stdout } = await exec(`node ${filepath}`)
+
+  const results = JSON.parse(stdout.trim())
+  expect(results[0].css).toMatchCss(`
+    body {
+      --tw-bg-opacity: 1;
+      background-color: rgba(255, 165, 0, var(--tw-bg-opacity));
+    }
+  `)
+  expect(results[1].css).toMatchCss(`
+    body {
+      --tw-bg-opacity: 1;
+      background-color: rgba(255, 165, 0, var(--tw-bg-opacity));
+    }
+  `)
+  expect(results[2].css).toMatchCss(`
+    body {
+      --tw-bg-opacity: 1;
+      background-color: rgba(128, 0, 128, var(--tw-bg-opacity));
+    }
+  `)
+  expect(results[3].css).toMatchCss(`
+    body {
+      --tw-bg-opacity: 1;
+      background-color: rgba(128, 0, 128, var(--tw-bg-opacity));
+    }
+  `)
+})
