chai-dom - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

chai-dom.js

@@ -17,3 +17,6 @@ (function(chaiDom) {
     if (isNodeList(el)) {
-      if (el.length === 0) return 'empty NodeList'
+      if (el.length === 0) {
+        return 'empty NodeList'
+      }
+
       desc = Array.prototype.slice.call(el, 0, 5).map(elToString).join(', ')
@@ -124,8 +127,13 @@ return el.length > 5 ? desc + '... (+' + (el.length - 5) + ' more)' : desc
 
+  chai.Assertion.addProperty('rendered', function() {
+    flag(this, 'rendered-text', true)
+  })
+
   chai.Assertion.addMethod('text', function(text) {
     var obj = flag(this, 'object'), contains = flag(this, 'contains'),
         trim = flag(this, 'trim-text'), actual, result
+    var property = flag(this, 'rendered-text') ? 'innerText' : 'textContent'
 
     if (isNodeList(obj)) {
-      actual = Array.prototype.map.call(obj, function(el) { return trim ? el.textContent.trim() : el.textContent })
+      actual = Array.prototype.map.call(obj, function(el) { return trim ? el[property].trim() : el[property] })
       if (Array.isArray(text)) {
@@ -135,3 +143,3 @@ result = contains ?
             return Array.prototype.some.call(obj, function(el) {
-              return (trim ? el.textContent.trim() : el.textContent) === t
+              return (trim ? el[property].trim() : el[property]) === t
             })
@@ -149,7 +157,17 @@ })
     } else {
-      actual = trim ? obj.textContent.trim() : obj.textContent
+      actual = trim ? obj[property].trim() : obj[property]
       result = contains ? actual.indexOf(text) >= 0 : actual === text
     }
 
-    var objDesc = elToString(obj), textMsg = trim ? 'trimmed text' : 'text'
+    var objDesc = elToString(obj)
+    var textMsg = ''
+
+    if (trim) {
+      textMsg += 'trimmed '
+    }
+    if (flag(this, 'rendered-text')) {
+      textMsg += 'rendered '
+    }
+    textMsg += 'text'
+
     if (contains) {
@@ -362,2 +380,15 @@ this.assert(
   })
+
+  chai.Assertion.addMethod('style', function (styleProp, styleValue) {
+    var el = flag(this, 'object'),
+        style = window.getComputedStyle(el),
+        actual = style[styleProp];
+
+    this.assert(
+      actual === styleValue
+      , 'expected ' + elToString(el) + ' to have style property ' + styleProp + ' equal to ' + styleValue + ', but it was equal to ' + actual
+      , 'expected ' + elToString(el) + ' to not have style property ' + styleProp + ' equal to ' + styleValue + ', but it was equal to ' + actual
+      , actual
+    )
+  })
 }));

package.json

@@ -16,3 +16,3 @@ {
   ],
-  "version": "1.8.2",
+  "version": "1.9.0",
   "license": "MIT",
@@ -27,3 +27,5 @@ "repository": {
   "scripts": {
-    "test": "phantomjs ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html"
+    "test": "npm run lint && npm run test:unit",
+    "test:unit": "testem ci",
+    "lint": "eslint ."
   },
@@ -37,6 +39,10 @@ "main": "./chai-dom",
     "dom4": "^1.4.6",
-    "mocha": "^2.3.2",
-    "mocha-phantomjs-core": "^2.1.2",
-    "phantomjs-prebuilt": "^2.1.16"
+    "eslint": "^7.20.0",
+    "mocha": "^8.0.0",
+    "testem": "^3.2.0"
+  },
+  "peerDependencies": {
+    "chai": ">= 3",
+    "mocha": ">= 2"
   }
 }

README.md

@@ -53,4 +53,7 @@ # chai-dom
 ### `text(text)`
-Assert that the text of the [HTMLElement][] or combined text of the [NodeList][] is equal to or contains the given text, using [`textContent`][textContent]. You may optionally also provide a `trimmed` chaining flag that will trim this text.
+Assert that the text of the [HTMLElement][] or combined text of the [NodeList][] is equal to or contains the given text, using [`textContent`][textContent]. Chaining flags:
 
+`trimmed`  - will trim the text before comparing\
+`rendered` - will use [`innerText`][innerText] when comparing
+
 ```js
@@ -61,2 +64,3 @@ document.querySelector('.name').should.have.text('John Doe')
 document.querySelector('h1').should.have.trimmed.text('chai-tests')
+expect(document.querySelector('article')).to.have.rendered.text('Chai Tea is great')
 ```
@@ -177,2 +181,10 @@
 
+### `style(styleProp, styleValue)`
+Assert that the [HTMLElement][] has the given style prop name value equal to a given value.
+
+```js
+document.querySelector('.container').should.have.style('color', 'rgb(55, 66, 77)')
+expect(document.querySelector('.container')).not.to.have.style('borderWidth', '3px')
+```
+
 ## Installation
@@ -231,3 +243,4 @@
 [textContent]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
+[innerText]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
 [querySelector]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
-[querySelectorAll]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
+[querySelectorAll]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

test/tests.js

 describe('DOM assertions', function() {
   var inspect,
-      tempEl = document.createElement('div'),
-      parse = function(str) {
-        tempEl.innerHTML = str
-        return tempEl.children[0]
-      }
+      subject
 
+  function parse(str) {
+    var testEl = document.getElementById('test')
+    testEl.innerHTML = str
+    return testEl.children[0]
+  }
+
   chai.use(function(chai, utils) {
@@ -34,3 +36,5 @@ inspect = utils.objDisplay
   describe('attr', function() {
-    var subject = parse('<div name="foo"></div>')
+    beforeEach(function() {
+      subject = parse('<div name="foo"></div>')
+    });
 
@@ -120,3 +124,5 @@ describe('when only attribute name is provided', function() {
   describe('class', function() {
-    var subject = parse('<div class="foo shazam  baz"></div>')
+    beforeEach(function() {
+      subject = parse('<div class="foo shazam  baz"></div>')
+    });
 
@@ -149,3 +155,5 @@ it('passes when the element has the class', function() {
   describe('id', function() {
-    var subject = parse('<div id="foo" class="yum" required disabled="disabled"></div>')
+    beforeEach(function() {
+      subject = parse('<div id="foo" class="yum" required disabled="disabled"></div>')
+    });
 
@@ -177,3 +185,3 @@ it('passes when the element has the id', function() {
     it('fails when the element does not have an id', function() {
-      var subject = parse('<div></div>');
+      subject = parse('<div></div>');
       (function() {
@@ -186,3 +194,5 @@ subject.should.have.id('foo')
   describe('html', function() {
-    var subject = parse('<section>A <span>span</span></section>')
+    beforeEach(function() {
+      subject = parse('<section>A <span>span</span></section>')
+    });
 
@@ -232,3 +242,5 @@ it('passes when the HTML matches', function() {
     describe('against HTMLElement', function() {
-      var subject = parse('<div> foo </div>')
+      beforeEach(function() {
+        subject = parse('<div> foo </div>')
+      });
 
@@ -294,10 +306,29 @@ it('passes when the text matches', function() {
       })
+
+      it('passes when the rendered test matches', function() {
+        subject.should.have.rendered.text('foo');
+      });
+
+      it('failes negated when the rendered test matches', function() {
+        (function() {
+          subject.should.not.have.rendered.text('foo')
+        }).should.fail('expected div not to have rendered text \'foo\'')
+      });
     })
 
     describe('against NodeList', function() {
-      var subject = parse('<div><span> cherry </span><div>banana</div><span> <p>strawberry</p></span> \n<span> &gt; watermelon</span>pineapple</div>').querySelectorAll('div,span,p'),
-          textNodes = Array.prototype.map.call(subject, function(el) { return el.textContent })
+      var textNodes;
 
+      beforeEach(function() {
+        subject = parse('<div><span> cherry </span><div>banana</div><span> <p>strawberry</p></span> \n<span> &gt; watermelon</span>pineapple</div>').querySelectorAll('div,span,p')
+        textNodes = Array.prototype.map.call(subject, function(el) { return el.textContent })
+      });
+
       describe('given a string', function() {
-        var fullText = textNodes.join('')
+        var fullText
+
+        beforeEach(function() {
+          fullText = textNodes.join('')
+        });
+
         it('passes when the combined text of all child nodes match', function() {
@@ -353,6 +384,21 @@ subject.should.have.text(fullText)
         })
+
+        it('passes when the combined rendered text of all child nodes match', function() {
+          subject.should.have.rendered.text('cherrybananastrawberrystrawberry> watermelon')
+        })
+
+        it('fails when the rendered text doesn\'t match', function() {
+          (function() {
+            subject.should.have.rendered.text('watermelon')
+          }).should.fail("expected span, div, span, p, span to have rendered text 'watermelon', but the rendered text was 'cherrybananastrawberrystrawberry> watermelon'")
+        })
       })
 
       describe('given an array', function() {
-        var joinedText = textNodes.join()
+        var joinedText;
+
+        beforeEach(function() {
+          joinedText = textNodes.join()
+        });
+
         it('passes when the text deeply equals of all child text nodes', function() {
@@ -414,2 +460,12 @@ subject.should.have.text(textNodes)
         })
+
+        it('passes when the combined rendered text of all child nodes match', function() {
+          subject.should.have.rendered.text(Array.prototype.map.call(subject, function(el) { return el.innerText }))
+        })
+
+        it('fails when the rendered text doesn\'t match', function() {
+          (function() {
+            subject.should.have.rendered.text(['strawberry', 'cherry', 'banana', 'watermelon'])
+          }).should.fail("expected span, div, span, p, span to have rendered text 'strawberry,cherry,banana,watermelon', but the rendered text was 'cherry,banana,strawberry,strawberry,> watermelon'")
+        })
       })
@@ -420,3 +476,5 @@ })
   describe('value', function() {
-    var subject = parse('<input value="foo">')
+    beforeEach(function() {
+      subject = parse('<input value="foo">')
+    });
 
@@ -517,3 +575,3 @@ it('passes when the value matches', function() {
     it('supports an HTMLElement', function() {
-      var subject = parse('<ul><li>1</li><li>2</li></ul>');
+      subject = parse('<ul><li>1</li><li>2</li></ul>');
       subject.should.have.length(2);
@@ -532,3 +590,3 @@ subject.should.not.have.length(3);
     it('supports a NodeList', function() {
-      var subject = parse('<ul><li>1</li><li>2</li></ul>').querySelectorAll('li');
+      subject = parse('<ul><li>1</li><li>2</li></ul>').querySelectorAll('li');
       subject.should.have.length(2);
@@ -552,4 +610,5 @@ subject.should.not.have.length(3);
 
-    var subject = parse('<div id="foo"></div>'), subjectList
-    before(function() {
+    var subjectList
+    beforeEach(function() {
+      subject = parse('<div id="foo"></div>')
       subjectList = document.querySelectorAll('body')
@@ -610,3 +669,5 @@ })
     describe('text', function() {
-      var subject = parse('<div><span class="blurb">example text</span><p>lorem ipsum</p></div>')
+      beforeEach(function() {
+        subject = parse('<div><span class="blurb">example text</span><p>lorem ipsum</p></div>')
+      });
 
@@ -639,6 +700,10 @@ it('passes when the element contains the given text via textContent', function() {
     describe('element', function() {
-      var
-        subject = parse('<div><span class="blurb">example text</span><p>lorem ipsum</p></div>'),
-        child = subject.children[0],
+      var child,
+          nonchild
+
+      beforeEach(function() {
+        subject = parse('<div><span class="blurb">example text</span><p>lorem ipsum</p></div>')
+        child = subject.children[0]
         nonchild = document.createElement('dd')
+      });
 
@@ -672,3 +737,5 @@ it('passes when the element contains the given element', function() {
   describe('descendant', function() {
-    var subject = parse('<div><header><span class="blurb">example text</span></header><p>lorem ipsum <em>dolor</em></p></div>')
+    beforeEach(function() {
+      subject = parse('<div><header><span class="blurb">example text</span></header><p>lorem ipsum <em>dolor</em></p></div>')
+    });
 
@@ -703,5 +770,9 @@ describe('text', function() {
     describe('element', function() {
-      var
+      var child,
+          nonchild
+
+      beforeEach(function() {
         child = subject.querySelector('span.blurb'),
         nonchild = document.createElement('dd')
+      });
 
@@ -735,3 +806,5 @@ it('passes when the subject contains the given element', function() {
   describe('descendants', function() {
-    var subject = parse('<div><p>lorem ipsum <em>dolor</em></p><ul><li>one</li><li>two</li><li>three</li></ul></div>')
+    beforeEach(function() {
+      subject = parse('<div><p>lorem ipsum <em>dolor</em></p><ul><li>one</li><li>two</li><li>three</li></ul></div>')
+    });
 
@@ -771,3 +844,3 @@ it('passes when the element contains the given selector', function() {
     before(function() {
-      document.styleSheets[0].insertRule('.hidden { display: none; }', 1);
+      document.styleSheets[1].insertRule('.hidden { display: none; }', 0);
       document.body.appendChild(notDisplayedViaCSS)
@@ -824,4 +897,4 @@ document.body.appendChild(div)
     before(function() {
-      document.styleSheets[0].insertRule('.invisible { visibility: hidden }', 1);
-      document.styleSheets[0].insertRule('.collapsed { visibility: collapse }', 1);
+      document.styleSheets[1].insertRule('.invisible { visibility: hidden }', 0);
+      document.styleSheets[1].insertRule('.collapsed { visibility: collapse }', 0);
       document.body.appendChild(hiddenViaCSS)
@@ -905,2 +978,26 @@ document.body.appendChild(collapsedViaCSS)
 
+  describe('style', function() {
+    var div = parse('<div style="color: red;">test</div>')
+
+    before(function() {
+      document.body.appendChild(div)
+    })
+
+    after(function() {
+      document.body.removeChild(div)
+    })
+
+    it('passes when the style is equal', function() {
+      div.should.have.style('color', 'rgb(255, 0, 0)')
+    })
+
+    it('passes negated', function() {
+      div.should.not.have.style('color', 'rgb(0, 0, 255)')
+    })
+
+    it('should be chainable', function() {
+      div.should.have.style('color', 'rgb(255, 0, 0)').and.exist.and.be.ok
+    })
+  })
+
   describe('util.elToString', function() {
@@ -920,3 +1017,3 @@ it('should give a friendly name for a HTMLElement', function() {
       var div = document.createElement('div')
-      div.innerHTML = [1,2,3,4,5,6,7,8].map(function(n) { return '<p id="nlt' + n + '"></p>' }).join('')
+      div.innerHTML = [1, 2, 3, 4, 5, 6, 7, 8].map(function(n) { return '<p id="nlt' + n + '"></p>' }).join('')
       chai.util.elToString(div.querySelectorAll('p'))
@@ -923,0 +1020,0 @@ .should.equal('p#nlt1, p#nlt2, p#nlt3, p#nlt4, p#nlt5... (+3 more)')

No alert changes

Improved metrics

Total package byte prevSize

61324

increased by8.82%

Number of package files

11

increased by10%

Lines of code

1219

increased by12.14%

Number of lines in readme file

243

increased by6.11%

Worsened metrics

Dependency count

2

increased byInfinity%

No dependency changes