From e95af7bd20407737ecac03dfd7bdd655460e617e Mon Sep 17 00:00:00 2001 From: Cody Coljee-Gray Date: Thu, 3 Nov 2022 17:58:49 -0700 Subject: [PATCH 1/4] Add support for multiple matching blocks --- src/index.ts | 8 +++++--- test/scss/assert/_output.scss | 20 ++++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index ce2550d..8b3da1a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -219,10 +219,10 @@ const contains = function (output: string, expected: string) { const expectedBlocks = createSelectorsRulesPairs(expected); const results = expectedBlocks.map((block) => { - const outputBlock = outputBlocks.find( + const matchingOutputBlocks = outputBlocks.filter( (element) => element.selector === block.selector, ); - if (outputBlock) { + if (matchingOutputBlocks.length) { // Turns a css string into an array of property-value pairs. const expectedProperties = block.output .split(';') @@ -231,7 +231,9 @@ const contains = function (output: string, expected: string) { // This is the assertion itself! return expectedProperties.every((property) => - outputBlock.output.includes(property), + matchingOutputBlocks.some((outputBlock) => + outputBlock.output.includes(property) + ), ); } return false; diff --git a/test/scss/assert/_output.scss b/test/scss/assert/_output.scss index 82b9c74..f8f18f8 100644 --- a/test/scss/assert/_output.scss +++ b/test/scss/assert/_output.scss @@ -243,4 +243,24 @@ } } } + + @include it('Can assert with multiple identical selector') { + @include assert { + @include output { + .selector { + width: 10px; + } + .selector { + min-height: 5px; + max-height: 20px; + } + } + + @include contains { + .selector { + width: 10px; + } + } + } + } } From 17003e596a8cf8bad6b012ae9c547e9b49e74260 Mon Sep 17 00:00:00 2001 From: Cody Coljee-Gray Date: Fri, 4 Nov 2022 09:47:54 -0700 Subject: [PATCH 2/4] Update _output.scss update test to make sure it checks the second block --- test/scss/assert/_output.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/scss/assert/_output.scss b/test/scss/assert/_output.scss index f8f18f8..a0858c8 100644 --- a/test/scss/assert/_output.scss +++ b/test/scss/assert/_output.scss @@ -244,7 +244,7 @@ } } - @include it('Can assert with multiple identical selector') { + @include it('Can assert with multiple matching selector') { @include assert { @include output { .selector { @@ -258,7 +258,7 @@ @include contains { .selector { - width: 10px; + min-height: 5px; } } } From 51403524d532d53d1284e57a6426498663aa2480 Mon Sep 17 00:00:00 2001 From: Cody Coljee-Gray Date: Fri, 4 Nov 2022 10:44:25 -0700 Subject: [PATCH 3/4] Add support for multiple matching blocks Add support for `contians` when multiple matching selectors exists --- CHANGELOG.md | 2 ++ src/index.ts | 2 +- test/scss/assert/_output.scss | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 564fa9f..bb9954d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ path (or string), 3) optional Sass options - BREAKING: Require `sass` as a peer-dependency, removing True `sass` option - BREAKING: Drop support for node < 14.15.0 +- FEATURE: Check for contains across multiple block with matching styles. + [#243](https://github.com/oddbird/true/pull/243) - INTERNAL: Use both Jest and Mocha for internal testing - INTERNAL: Update dependencies diff --git a/src/index.ts b/src/index.ts index 8b3da1a..74d3271 100644 --- a/src/index.ts +++ b/src/index.ts @@ -232,7 +232,7 @@ const contains = function (output: string, expected: string) { // This is the assertion itself! return expectedProperties.every((property) => matchingOutputBlocks.some((outputBlock) => - outputBlock.output.includes(property) + outputBlock.output.includes(property), ), ); } diff --git a/test/scss/assert/_output.scss b/test/scss/assert/_output.scss index a0858c8..272e72c 100644 --- a/test/scss/assert/_output.scss +++ b/test/scss/assert/_output.scss @@ -258,6 +258,7 @@ @include contains { .selector { + width: 10px; min-height: 5px; } } From bd1d59f1555011ffc33e7a9a65c1e2a90480845d Mon Sep 17 00:00:00 2001 From: Cody Coljee-Gray Date: Fri, 4 Nov 2022 17:47:50 -0700 Subject: [PATCH 4/4] Add support for multiple matching selector - Update changelog message - ran `yarn commit` --- CHANGELOG.md | 2 +- test/css/test.css | 29 +++++++++++++++++++++++++---- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bb9954d..f76d674 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ path (or string), 3) optional Sass options - BREAKING: Require `sass` as a peer-dependency, removing True `sass` option - BREAKING: Drop support for node < 14.15.0 -- FEATURE: Check for contains across multiple block with matching styles. +- FEATURE: `contains()` checks multiple block with matching selectors. [#243](https://github.com/oddbird/true/pull/243) - INTERNAL: Use both Jest and Mocha for internal testing - INTERNAL: Update dependencies diff --git a/test/css/test.css b/test/css/test.css index 5a6e6f7..ef82aa9 100644 --- a/test/css/test.css +++ b/test/css/test.css @@ -620,6 +620,27 @@ max-height: 20px; } +/* END_CONTAINED */ +/* END_ASSERT */ +/* */ +/* Test: Can assert with multiple matching selector */ +/* ASSERT: */ +/* OUTPUT */ +.test-output .selector { + width: 10px; +} +.test-output .selector { + min-height: 5px; + max-height: 20px; +} + +/* END_OUTPUT */ +/* CONTAINED */ +.test-output .selector { + width: 10px; + min-height: 5px; +} + /* END_CONTAINED */ /* END_ASSERT */ /* */ @@ -814,14 +835,14 @@ /* */ /* */ /* # SUMMARY ---------- */ -/* 101 Tests: */ +/* 102 Tests: */ /* - 84 Passed */ /* - 0 Failed */ -/* - 17 Output to CSS */ +/* - 18 Output to CSS */ /* Stats: */ /* - 39 Modules */ -/* - 101 Tests */ -/* - 129 Assertions */ +/* - 102 Tests */ +/* - 130 Assertions */ /* -------------------- */ /*# sourceMappingURL=test.css.map */