Merge pull request #29 from smhxx/assert-visible

Feature: Add 'visible' assertion for testing visibility !== hidden or collapse

README.md

@@ -156,6 +156,14 @@ document.querySelector('dl dd').should.be.displayed
 expect(document.querySelector('.hidden')).not.to.be.displayed
 ```
 
+### `visible`
+Assert that the [HTMLElement][] is visible (that visibility is not equal to "hidden" or "collapse"). 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 visibility attribute.
+
+```js
+document.querySelector('dl dd').should.be.visible
+expect(document.querySelector('.invisible')).not.to.be.visible
+```
+
 ## Installation
 
 ### npm

chai-dom.js

@@ -323,4 +323,16 @@
       , actual
     )
   })
+
+  chai.Assertion.addProperty('visible', function() {
+    var el = flag(this, 'object'),
+        actual = document.body.contains(el) ? window.getComputedStyle(el).visibility : el.style.visibility
+
+    this.assert(
+      actual !== 'hidden' && actual !== 'collapse'
+      , 'expected ' + elToString(el) + ' to be visible, but it was ' + (actual === 'hidden' ? 'hidden' : 'collapsed')
+      , 'expected ' + elToString(el) + ' to not be visible, but it was'
+      , actual
+    )
+  })
 }));

test/tests.js

@@ -794,6 +794,68 @@ describe('DOM assertions', function() {
     })
   })
 
+  describe('visible', function() {
+    var div = document.createElement('div'),
+        hiddenViaStyle = parse('<div style="visibility: hidden"></div>'),
+        collapsedViaStyle = parse('<div style="visibility: collapse"></div>'),
+        hiddenViaCSS = parse('<div class="invisible"></div>'),
+        collapsedViaCSS = parse('<div class="collapsed"></div>')
+
+    before(function() {
+      document.styleSheets[0].insertRule('.invisible { visibility: hidden }', 1);
+      document.styleSheets[0].insertRule('.collapsed { visibility: collapse }', 1);
+      document.body.appendChild(hiddenViaCSS)
+      document.body.appendChild(collapsedViaCSS)
+      document.body.appendChild(div)
+    })
+    after(function() {
+      document.body.removeChild(hiddenViaCSS)
+      document.body.removeChild(collapsedViaCSS)
+      document.body.removeChild(div)
+    })
+
+    it('passes when visible (any visibility value but hidden or collapse)', function() {
+      div.should.be.visible
+    })
+
+    it('passes negated when the elment has display set to "hidden" or "collapse"', function() {
+      hiddenViaStyle.should.not.be.visible
+      collapsedViaStyle.should.not.be.visible
+      hiddenViaCSS.should.not.be.visible
+      collapsedViaCSS.should.not.be.visible
+    })
+
+    it('fails when the element has visibility: hidden', function() {
+      (function() {
+        hiddenViaStyle.should.be.visible
+      }).should.fail('expected div[style="visibility: hidden"] to be visible, but it was hidden')
+
+      ;(function() {
+        hiddenViaCSS.should.be.visible
+      }).should.fail('expected div.invisible to be visible, but it was hidden')
+    })
+
+    it('fails when the element has visibility: collapse', function() {
+      (function() {
+        collapsedViaStyle.should.be.visible
+      }).should.fail('expected div[style="visibility: collapse"] to be visible, but it was collapsed')
+
+      ;(function() {
+        collapsedViaCSS.should.be.visible
+      }).should.fail('expected div.collapsed to be visible, but it was collapsed')
+    })
+
+    it('fails negated when the element is visible', function() {
+      (function() {
+        div.should.not.be.visible
+      }).should.fail('expected div to not be visible, but it was')
+    })
+
+    it('should be chainable', function() {
+      div.should.be.visible.and.exist.and.be.ok
+    })
+  })
+
   describe('util.elToString', function() {
     it('should give a friendly name for a HTMLElement', function() {
       chai.util.elToString(parse('<span class="foo" bar="baz"></span>')).should.equal('span.foo[bar="baz"]')