Merge pull request #243 from codr/patch-1

Add support for multiple matching blocks

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: `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
 

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;

test/scss/assert/_output.scss

@@ -243,4 +243,25 @@
       }
     }
   }
+
+  @include it('Can assert with multiple matching selector') {
+    @include assert {
+      @include output {
+        .selector {
+          width: 10px;
+        }
+        .selector {
+          min-height: 5px;
+          max-height: 20px;
+        }
+      }
+
+      @include contains {
+        .selector {
+          width: 10px;
+          min-height: 5px;
+        }
+      }
+    }
+  }
 }