Reorganize tests

Author: adamwathan

package.json

@@ -32,6 +32,11 @@
     "postcss-cli": "^8.3.1",
     "prettier": "^2.2.1"
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/tests/customMatchers.js"
+    ]
+  },
   "browserslist": [
     "> 1%",
     "not edge <= 18",

src/index.test.adding-a-custom-variant.html

@@ -284,7 +284,7 @@ div {
   --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgba(147, 197, 253, 0.5);
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
 }

src/index.test.css tests/01-sanity.test.csssrc/index.test.css renamed to tests/01-sanity.test.css

@@ -1,7 +1,5 @@
-const prettier = require('prettier')
-const diff = require('jest-diff').default
 const postcss = require('postcss')
-const tailwind = require('./index.js')
+const tailwind = require('../src/index.js')
 const fs = require('fs')
 const path = require('path')
 
@@ -12,7 +10,7 @@ function run(input, config = {}) {
 test('it works', () => {
   let config = {
     darkMode: 'class',
-    purge: [path.resolve(__dirname, './index.test.html')],
+    purge: [path.resolve(__dirname, './01-sanity.test.html')],
     corePlugins: { preflight: false },
     theme: {
       extend: {
@@ -151,62 +149,9 @@ test('it works', () => {
 `
 
   return run(css, config).then((result) => {
-    let expectedPath = path.resolve(__dirname, './index.test.css')
+    let expectedPath = path.resolve(__dirname, './01-sanity.test.css')
     let expected = fs.readFileSync(expectedPath, 'utf8')
 
     expect(result.css).toMatchCss(expected)
   })
 })
-
-function format(input) {
-  return prettier.format(input, {
-    parser: 'css',
-    printWidth: 100,
-  })
-}
-
-expect.extend({
-  // Compare two CSS strings with all whitespace removed
-  // This is probably naive but it's fast and works well enough.
-  toMatchCss(received, argument) {
-    const options = {
-      comment: 'stripped(received) === stripped(argument)',
-      isNot: this.isNot,
-      promise: this.promise,
-    }
-
-    let formattedReceived = format(received)
-    let formattedArgument = format(argument)
-
-    const pass = formattedReceived === formattedArgument
-
-    const message = pass
-      ? () => {
-          return (
-            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
-            '\n\n' +
-            `Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
-            `Received: ${this.utils.printReceived(formattedArgument)}`
-          )
-        }
-      : () => {
-          const actual = formattedReceived
-          const expected = formattedArgument
-
-          const diffString = diff(expected, actual, {
-            expand: this.expand,
-          })
-
-          return (
-            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
-            '\n\n' +
-            (diffString && diffString.includes('- Expect')
-              ? `Difference:\n\n${diffString}`
-              : `Expected: ${this.utils.printExpected(expected)}\n` +
-                `Received: ${this.utils.printReceived(actual)}`)
-          )
-        }
-
-    return { actual: received, message, pass }
-  },
-})

src/index.test.html tests/01-sanity.test.htmlsrc/index.test.html renamed to tests/01-sanity.test.html

@@ -0,0 +1,55 @@
+const prettier = require('prettier')
+const diff = require('jest-diff').default
+
+function format(input) {
+  return prettier.format(input, {
+    parser: 'css',
+    printWidth: 100,
+  })
+}
+
+expect.extend({
+  // Compare two CSS strings with all whitespace removed
+  // This is probably naive but it's fast and works well enough.
+  toMatchCss(received, argument) {
+    const options = {
+      comment: 'stripped(received) === stripped(argument)',
+      isNot: this.isNot,
+      promise: this.promise,
+    }
+
+    let formattedReceived = format(received)
+    let formattedArgument = format(argument)
+
+    const pass = formattedReceived === formattedArgument
+
+    const message = pass
+      ? () => {
+          return (
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            `Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
+            `Received: ${this.utils.printReceived(formattedArgument)}`
+          )
+        }
+      : () => {
+          const actual = formattedReceived
+          const expected = formattedArgument
+
+          const diffString = diff(expected, actual, {
+            expand: this.expand,
+          })
+
+          return (
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            (diffString && diffString.includes('- Expect')
+              ? `Difference:\n\n${diffString}`
+              : `Expected: ${this.utils.printExpected(expected)}\n` +
+                `Received: ${this.utils.printReceived(actual)}`)
+          )
+        }
+
+    return { actual: received, message, pass }
+  },
+})