chai-dom - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

chai-dom.js

@@ -277,2 +277,33 @@ (function(chaiDom) {
 
+  chai.Assertion.addMethod('descendant', function(subitem) {
+    var obj = flag(this, 'object'), actual = subitem
+
+    if (typeof subitem === 'string') {
+      actual = obj.querySelector(subitem)
+      this.assert(
+        !!actual
+        , 'expected ' + elToString(obj) + ' to have descendant #{exp}'
+        , 'expected ' + elToString(obj) + ' to not have descendant #{exp}'
+        , subitem)
+    } else {
+      this.assert(
+        obj.contains(subitem)
+        , 'expected ' + elToString(obj) + ' to contain ' + elToString(subitem)
+        , 'expected ' + elToString(obj) + ' to not contain ' + elToString(subitem))
+    }
+
+    flag(this, 'object', actual)
+  })
+
+  chai.Assertion.addMethod('descendants', function(selector) {
+    var obj = flag(this, 'object'),
+        actual = obj.querySelectorAll(selector)
+    this.assert(
+      !!actual.length
+      , 'expected ' + elToString(obj) + ' to have descendants #{exp}'
+      , 'expected ' + elToString(obj) + ' to not have descendants #{exp}'
+      , selector)
+    flag(this, 'object', actual)
+  })
+
   chai.Assertion.addProperty('displayed', function() {
@@ -279,0 +310,0 @@ var el = flag(this, 'object'),

package.json

@@ -16,3 +16,3 @@ {
   ],
-  "version": "1.5.0",
+  "version": "1.6.0",
   "repository": {
@@ -26,3 +26,3 @@ "type": "git",
   "scripts": {
-    "test": "mocha-phantomjs test/index.html"
+    "test": "phantomjs ./node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html"
   },
@@ -34,8 +34,8 @@ "main": "./chai-dom",
   "devDependencies": {
-    "chai": "^3.2.0",
+    "chai": ">= 3",
     "dom4": "^1.4.6",
     "mocha": "^2.3.2",
-    "mocha-phantomjs": "^3.6.0",
-    "phantomjs": "1.9.7-15"
+    "mocha-phantomjs-core": "^2.1.2",
+    "phantomjs-prebuilt": "^2.1.16"
   }
 }

README.md

@@ -53,3 +53,3 @@ # 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`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent).
+Assert that the text of the [HTMLElement][] or combined text of the [NodeList][] is equal to or contains the given text, using [`textContent`][textContent].
 
@@ -69,3 +69,3 @@ ```js
 ### `text(text[])`
-Assert that the [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) of the [NodeList][] children deep equal those text, or when using the contains flag, all the text items are somewhere in the [NodeList][].
+Assert that the [`textContent`][textContent] of the [NodeList][] children deep equal those text, or when using the contains flag, all the text items are somewhere in the [NodeList][].
 
@@ -127,3 +127,3 @@ ```js
 ### `contain(selector or element)`
-Assert that the [HTMLElement][] contains the given element, using [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll) for selector strings or using [`contains`](https://developer.mozilla.org/en-US/docs/Web/API/Node/contains) for elements. If the object asserted against is not an [HTMLElement][], or if `contain` is not called as a function, the original
+Assert that the [HTMLElement][] contains the given element, using [`querySelector`][querySelector] for selector strings or using [`contains`][contains] for elements. If the object asserted against is not an [HTMLElement][], or if `contain` is not called as a function, the original
 implementation will be called.
@@ -137,2 +137,18 @@
 
+### `descendant(selector or element)`
+Same as `contain` but changes the assertion subject to the matched element.
+
+```js
+document.querySelector('section').should.have.descedant('ul').and.have.class('items')
+document.querySelector('section').should.have.descedant(document.querySelector('section div'))
+expect(document.querySelector('#content')).to.have.descedant('p')
+```
+
+### `descendants(selector)`
+Same as `descendant` but uses [`querySelectorAll`][querySelectorAll] instead of [`querySelector`][querySelector] to change the assertion subject to a [NodeList][] instead of a single element.
+
+```js
+document.querySelector('section').should.have.descedants('ul li').and.have.length(3)
+```
+
 ### `displayed`
@@ -198,1 +214,4 @@ Assert that the [HTMLElement][] is displayed (that display is not equal to "none"). If the element is attached to the body, it will call [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle); otherwise it will look at the inline display attribute.
 [NodeList]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
+[textContent]: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
+[querySelector]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector
+[querySelectorAll]: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll

test/tests.js

@@ -555,13 +555,13 @@ describe('DOM assertions', function() {
     describe('text', function() {
-      var subject = parse('<div><span class="blurb">example text</span></div>')
+      var subject = parse('<div><span class="blurb">example text</span><p>lorem ipsum</p></div>')
 
-      it('passes when the selection contains the given text', function() {
+      it('passes when the element contains the given text via textContent', function() {
         subject.should.contain('span.blurb')
       })
 
-      it('passes negated when the selection does not contain the given text', function() {
+      it('passes negated when the element does not contain the given text', function() {
         subject.should.not.contain('example')
       })
 
-      it('fails when the selection does not contain the given text', function() {
+      it('fails when the element does not contain the given text', function() {
         (function() {
@@ -572,3 +572,3 @@ subject.should.contain('aside')
 
-      it('fails negated when the selection contains the given text', function() {
+      it('fails negated when the element contains the given text', function() {
         (function() {
@@ -578,2 +578,6 @@ subject.should.not.contain('.blurb')
       })
+
+      it('should not change the assertion subject', function() {
+        subject.should.contain('.blurb').and.contain('p')
+      })
     })
@@ -587,11 +591,11 @@
 
-      it('passes when the selection contains the given element', function() {
+      it('passes when the element contains the given element', function() {
         subject.should.contain(child)
       })
 
-      it('passes negated when the selection does not contain the given element', function() {
+      it('passes negated when the element does not contain the given element', function() {
         subject.should.not.contain(nonchild)
       })
 
-      it('fails when the selection does not contain the given element', function() {
+      it('fails when the element does not contain the given element', function() {
         (function() {
@@ -602,3 +606,3 @@ subject.should.contain(nonchild)
 
-      it('fails negated when the selection contains the given element', function() {
+      it('fails negated when the element contains the given element', function() {
         (function() {
@@ -610,3 +614,3 @@ subject.should.not.contain(child)
       it('should not change the assertion subject', function() {
-        subject.should.contain('.blurb').and.contain('p')
+        subject.should.contain(child).and.contain(subject.children[1])
       })
@@ -616,2 +620,92 @@ })
 
+  describe('descendant', function() {
+    var subject = parse('<div><header><span class="blurb">example text</span></header><p>lorem ipsum <em>dolor</em></p></div>')
+
+    describe('text', function() {
+      it('passes when the element contains the given selector', function() {
+        subject.should.have.descendant('span.blurb')
+      })
+
+      it('passes negated when the element does not contain the given selector', function() {
+        subject.should.not.have.descendant('example')
+      })
+
+      it('fails when the element does not contain the given selector', function() {
+        (function() {
+          subject.should.have.descendant('aside')
+        }).should.fail('expected div to have descendant \'aside\'')
+      })
+
+      it('fails negated when the element does not have the given selector', function() {
+        (function() {
+          subject.should.not.have.descendant('.blurb')
+        }).should.fail('expected div to not have descendant \'.blurb\'')
+      })
+
+      it('should change the assertion context', function() {
+        subject.should.have.descendant('span').and.have.class('blurb')
+        subject.should.have.descendant('header').and.not.contain('lorem ipsum')
+      })
+    })
+
+    describe('element', function() {
+      var
+        child = subject.querySelector('span.blurb'),
+        nonchild = document.createElement('dd')
+
+      it('passes when the subject contains the given element', function() {
+        subject.should.have.descendant(child)
+      })
+
+      it('passes negated when the subject does not contain the given element', function() {
+        subject.should.not.have.descendant(nonchild)
+      })
+
+      it('fails when the subject does not contain the given element', function() {
+        (function() {
+          subject.should.have.descendant(nonchild)
+        }).should.fail('expected div to contain dd')
+      })
+
+      it('fails negated when the subject contains the given element', function() {
+        (function() {
+          subject.should.not.have.descendant(child)
+        }).should.fail('expected div to not contain span.blurb')
+      })
+
+      it('should change the assertion subject', function() {
+        subject.should.contain(child).and.contain(subject.children[1])
+      })
+    })
+  })
+
+  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>')
+
+    it('passes when the element contains the given selector', function() {
+      subject.should.have.descendants('ul li')
+    })
+
+    it('passes negated when the element does not contain the given selector', function() {
+      subject.should.not.have.descendants('p.foo')
+    })
+
+    it('fails when the element does not contain the given selector', function() {
+      (function() {
+        subject.should.have.descendants('aside')
+      }).should.fail('expected div to have descendants \'aside\'')
+    })
+
+    it('fails negated when the element does not have the given selector', function() {
+      (function() {
+        subject.should.not.have.descendants('p')
+      }).should.fail('expected div to not have descendants \'p\'')
+    })
+
+    it('should change the assertion context', function() {
+      subject.should.have.descendants('li').with.length(3)
+      subject.should.have.descendants('em').and.contain.text('dolor')
+    })
+  })
+
   describe('displayed', function() {
@@ -670,3 +764,3 @@ var div = document.createElement('div'),
     it('should give a friendly name for a HTMLElement', function() {
-      chai.util.elToString(parse('<span class="foo" bar="baz"></span>')).should.equl
+      chai.util.elToString(parse('<span class="foo" bar="baz"></span>')).should.equal('span.foo[bar="baz"]')
     })
@@ -673,0 +767,0 @@

No alert changes

Improved metrics

Total package byte prevSize

49213

increased by12.4%

Lines of code

948

increased by12.06%

Number of lines in readme file

212

increased by9.28%

No dependency changes