From f97456483cc84e006b17e03dd416ef5734a8ba8f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 2 Apr 2021 13:51:48 -0400 Subject: [PATCH] Unify test suites --- jest/customMatchers.js | 56 ++++++++++++++++++- jit/tests/_customMatchers.js | 55 ------------------ jit/tests/apply.test.js | 4 +- jit/tests/arbitrary-values.test.js | 4 +- jit/tests/basic-usage.test.js | 4 +- jit/tests/collapse-adjacent-rules.test.js | 4 +- jit/tests/context-reuse.worker.js | 2 +- jit/tests/custom-extractors.test.js | 6 +- jit/tests/custom-separator.test.js | 4 +- jit/tests/import-syntax.test.js | 4 +- jit/tests/important-boolean.test.js | 4 +- jit/tests/important-modifier-prefix.test.js | 4 +- jit/tests/important-modifier.test.js | 4 +- jit/tests/important-selector.test.js | 4 +- jit/tests/kitchen-sink.test.js | 4 +- jit/tests/modify-selectors.test.js | 4 +- jit/tests/mutable.test.js | 4 +- jit/tests/prefix.fn.test.js | 4 +- jit/tests/prefix.test.js | 4 +- .../responsive-and-variants-atrules.test.js | 4 +- jit/tests/svelte-syntax.test.js | 4 +- jit/tests/variants.test.js | 4 +- 22 files changed, 94 insertions(+), 97 deletions(-) delete mode 100644 jit/tests/_customMatchers.js diff --git a/jest/customMatchers.js b/jest/customMatchers.js index e5e5b4348..e89385c17 100644 --- a/jest/customMatchers.js +++ b/jest/customMatchers.js @@ -1,5 +1,5 @@ -import prettier from 'prettier' -import diff from 'jest-diff' +const prettier = require('prettier') +const diff = require('jest-diff').default function format(input) { return prettier.format(input, { @@ -54,3 +54,55 @@ expect.extend({ return { actual: received, message, pass } }, }) + +expect.extend({ + // Compare two CSS strings with all whitespace removed + // This is probably naive but it's fast and works well enough. + toMatchFormattedCss(received, argument) { + function format(input) { + return prettier.format(input, { + parser: 'css', + printWidth: 100, + }) + } + 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 } + }, +}) diff --git a/jit/tests/_customMatchers.js b/jit/tests/_customMatchers.js deleted file mode 100644 index 956d094a2..000000000 --- a/jit/tests/_customMatchers.js +++ /dev/null @@ -1,55 +0,0 @@ -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 } - }, -}) diff --git a/jit/tests/apply.test.js b/jit/tests/apply.test.js index 82ac4600e..aef45ff96 100644 --- a/jit/tests/apply.test.js +++ b/jit/tests/apply.test.js @@ -6,7 +6,7 @@ const path = require('path') function run(input, config = {}) { const { currentTestName } = expect.getState() - return postcss([tailwind(config)]).process(input, { + return postcss(tailwind(config)).process(input, { from: `${path.resolve(__filename)}?test=${currentTestName}`, }) } @@ -139,7 +139,7 @@ test('@apply', () => { let expectedPath = path.resolve(__dirname, './apply.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/arbitrary-values.test.js b/jit/tests/arbitrary-values.test.js index e02280a5d..bb3da9c65 100644 --- a/jit/tests/arbitrary-values.test.js +++ b/jit/tests/arbitrary-values.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('arbitrary values', () => { @@ -25,6 +25,6 @@ test('arbitrary values', () => { let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/basic-usage.test.js b/jit/tests/basic-usage.test.js index 4f778547d..5984b1f4d 100644 --- a/jit/tests/basic-usage.test.js +++ b/jit/tests/basic-usage.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('basic usage', () => { @@ -25,6 +25,6 @@ test('basic usage', () => { let expectedPath = path.resolve(__dirname, './basic-usage.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/collapse-adjacent-rules.test.js b/jit/tests/collapse-adjacent-rules.test.js index 48d73d8f0..455c48d9e 100644 --- a/jit/tests/collapse-adjacent-rules.test.js +++ b/jit/tests/collapse-adjacent-rules.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('collapse adjacent rules', () => { @@ -50,6 +50,6 @@ test('collapse adjacent rules', () => { let expectedPath = path.resolve(__dirname, './collapse-adjacent-rules.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/context-reuse.worker.js b/jit/tests/context-reuse.worker.js index 40299cdb5..dfa468780 100644 --- a/jit/tests/context-reuse.worker.js +++ b/jit/tests/context-reuse.worker.js @@ -8,7 +8,7 @@ const configPath = path.resolve(__dirname, './context-reuse.tailwind.config.js') function run(input, config = {}, from = null) { from = from || path.resolve(__filename) - return postcss([tailwind(config)]).process(input, { from }) + return postcss(tailwind(config)).process(input, { from }) } async function runTest() { diff --git a/jit/tests/custom-extractors.test.js b/jit/tests/custom-extractors.test.js index fbb662b34..f20816423 100644 --- a/jit/tests/custom-extractors.test.js +++ b/jit/tests/custom-extractors.test.js @@ -5,7 +5,7 @@ const path = require('path') function run(input, config = {}) { jest.resetModules() const tailwind = require('../index.js') - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } function customExtractor(content) { @@ -35,7 +35,7 @@ test('defaultExtractor', () => { } return run(css, config).then((result) => { - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) @@ -58,6 +58,6 @@ test('extractors array', () => { } return run(css, config).then((result) => { - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/custom-separator.test.js b/jit/tests/custom-separator.test.js index 4eb2504cc..1ef0caf3b 100644 --- a/jit/tests/custom-separator.test.js +++ b/jit/tests/custom-separator.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('custom separator', () => { @@ -23,6 +23,6 @@ test('custom separator', () => { let expectedPath = path.resolve(__dirname, './custom-separator.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/import-syntax.test.js b/jit/tests/import-syntax.test.js index 2dcf16e54..f48afc2a0 100644 --- a/jit/tests/import-syntax.test.js +++ b/jit/tests/import-syntax.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('using @import instead of @tailwind', () => { @@ -33,6 +33,6 @@ test('using @import instead of @tailwind', () => { let expectedPath = path.resolve(__dirname, './import-syntax.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/important-boolean.test.js b/jit/tests/important-boolean.test.js index 40516128d..f8359c37f 100644 --- a/jit/tests/important-boolean.test.js +++ b/jit/tests/important-boolean.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('important boolean', () => { @@ -65,6 +65,6 @@ test('important boolean', () => { let expectedPath = path.resolve(__dirname, './important-boolean.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/important-modifier-prefix.test.js b/jit/tests/important-modifier-prefix.test.js index 8b147d549..555d520a6 100644 --- a/jit/tests/important-modifier-prefix.test.js +++ b/jit/tests/important-modifier-prefix.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('important modifier with prefix', () => { @@ -28,6 +28,6 @@ test('important modifier with prefix', () => { let expectedPath = path.resolve(__dirname, './important-modifier-prefix.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/important-modifier.test.js b/jit/tests/important-modifier.test.js index 6b0506be3..92b444c66 100644 --- a/jit/tests/important-modifier.test.js +++ b/jit/tests/important-modifier.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('important modifier', () => { @@ -27,6 +27,6 @@ test('important modifier', () => { let expectedPath = path.resolve(__dirname, './important-modifier.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/important-selector.test.js b/jit/tests/important-selector.test.js index 1c736c212..c262df99b 100644 --- a/jit/tests/important-selector.test.js +++ b/jit/tests/important-selector.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('important selector', () => { @@ -65,6 +65,6 @@ test('important selector', () => { let expectedPath = path.resolve(__dirname, './important-selector.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/kitchen-sink.test.js b/jit/tests/kitchen-sink.test.js index 2ea0316fa..2c971a743 100644 --- a/jit/tests/kitchen-sink.test.js +++ b/jit/tests/kitchen-sink.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('it works', () => { @@ -161,6 +161,6 @@ test('it works', () => { let expectedPath = path.resolve(__dirname, './kitchen-sink.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/modify-selectors.test.js b/jit/tests/modify-selectors.test.js index 0f6fc3b94..0d06fab48 100644 --- a/jit/tests/modify-selectors.test.js +++ b/jit/tests/modify-selectors.test.js @@ -5,7 +5,7 @@ const path = require('path') const selectorParser = require('postcss-selector-parser') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('modify selectors', () => { @@ -45,6 +45,6 @@ test('modify selectors', () => { let expectedPath = path.resolve(__dirname, './modify-selectors.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/mutable.test.js b/jit/tests/mutable.test.js index bbb4ae678..cecde6cdf 100644 --- a/jit/tests/mutable.test.js +++ b/jit/tests/mutable.test.js @@ -18,7 +18,7 @@ function pluginThatMutatesRules() { } function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test.only('plugins mutating rules after tailwind doesnt break it', async () => { @@ -38,7 +38,7 @@ test.only('plugins mutating rules after tailwind doesnt break it', async () => { let expectedPath = path.resolve(__dirname, './mutable.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) } // Verify the first run produces the expected result diff --git a/jit/tests/prefix.fn.test.js b/jit/tests/prefix.fn.test.js index 2aded4f8a..8e0b75318 100644 --- a/jit/tests/prefix.fn.test.js +++ b/jit/tests/prefix.fn.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('prefix fn', () => { @@ -29,6 +29,6 @@ test('prefix fn', () => { let expectedPath = path.resolve(__dirname, './prefix.fn.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/prefix.test.js b/jit/tests/prefix.test.js index 408971bdd..2b4a0a5b7 100644 --- a/jit/tests/prefix.test.js +++ b/jit/tests/prefix.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('prefix', () => { @@ -66,6 +66,6 @@ test('prefix', () => { let expectedPath = path.resolve(__dirname, './prefix.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/responsive-and-variants-atrules.test.js b/jit/tests/responsive-and-variants-atrules.test.js index 95aa89f09..b5cbffdd9 100644 --- a/jit/tests/responsive-and-variants-atrules.test.js +++ b/jit/tests/responsive-and-variants-atrules.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('responsive and variants atrules', () => { @@ -83,6 +83,6 @@ test('responsive and variants atrules', () => { let expectedPath = path.resolve(__dirname, './responsive-and-variants-atrules.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/svelte-syntax.test.js b/jit/tests/svelte-syntax.test.js index db85c1108..d510ab6e9 100644 --- a/jit/tests/svelte-syntax.test.js +++ b/jit/tests/svelte-syntax.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('basic usage', () => { @@ -25,6 +25,6 @@ test('basic usage', () => { let expectedPath = path.resolve(__dirname, './svelte-syntax.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) }) diff --git a/jit/tests/variants.test.js b/jit/tests/variants.test.js index ec25fd240..2871b212b 100644 --- a/jit/tests/variants.test.js +++ b/jit/tests/variants.test.js @@ -4,7 +4,7 @@ const fs = require('fs') const path = require('path') function run(input, config = {}) { - return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) }) + return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) }) } test('variants', () => { @@ -26,6 +26,6 @@ test('variants', () => { let expectedPath = path.resolve(__dirname, './variants.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') - expect(result.css).toMatchCss(expected) + expect(result.css).toMatchFormattedCss(expected) }) })