chai-dom


chai-dom is an extension to the chai assertion library that
provides a set of assertions when working with the DOM (specifically [HTMLElement][] and [NodeList][])

Forked from chai-jquery to use for those of us freed of jQuery's baggage.

Assertions

$3

$3

Assert that the [HTMLElement][] has the given attribute, using getAttribute.
Optionally, assert a particular value as well. The return value is available for chaining.

``js
document.getElementById('header').should.have.attr('foo')
expect(document.querySelector('main article')).to.have.attribute('foo', 'bar')
expect(document.querySelector('main article')).to.have.attr('foo').match(/bar/)
`

$3


Assert that the [HTMLElement][] has the given class, using classList.

`js
document.getElementsByName('bar').should.have.class('foo')
expect(document.querySelector('main article')).to.have.class('foo')
`

Also accepts regex as argument.

`js
document.getElementsByName('bar').should.have.class(/foo/)
expect(document.querySelector('main article')).to.have.class(/foo/)
`

$3

Assert that the [HTMLElement][] has the given id.

`js
document.querySelector('section').should.have.id('#main')
expect(document.querySelector('section')).to.have.id('foo')
`

$3

Assert that the html of the [HTMLElement][] is equal to or contains the given html.

`js
document.querySelector('.name').should.have.html('John Doe')
expect(document.querySelector('#title')).to.have.html('Chai Tea')
`
`js
document.querySelector('.name').should.contain.html('Doe')
expect(document.querySelector('#title')).to.contain.html('Tea')
`

$3


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
document.querySelector('.name').should.have.text('John Doe')
expect(document.querySelector('#title')).to.have.text('Chai Tea')
document.querySelectorAll('ul li').should.have.text('JohnJaneJessie')
document.querySelector('h1').should.have.trimmed.text('chai-tests')
expect(document.querySelector('article')).to.have.rendered.text('Chai Tea is great')
`

`js
document.querySelector('.name').should.contain.text('John')
expect(document.querySelector('#title')).to.contain.text('Chai')
document.querySelectorAll('ul li').should.contain.text('Jane')
`

$3


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][].

`js
document.querySelectorAll('.name').should.have.text(['John Doe', 'Jane'])
expect(document.querySelectorAll('ul li')).to.have.text(['John', 'Jane', 'Jessie'])
`

`js
document.querySelectorAll('.name').should.contain.text(['John Doe'])
expect(document.querySelectorAll('ul li')).to.contain.text(['John', 'Jessie'])
`

$3

Assert that the [HTMLElement][] has the given value

`js
document.querySelector('.name').should.have.value('John Doe')
expect(document.querySelector('input.year')).to.have.value('2012')
`

$3

Assert that the [HTMLElement][] or [NodeList][] has no child nodes. If the object asserted against is neither of those, the original implementation will be called.

`js
document.querySelector('.empty').should.be.empty
expect(document.querySelector('section')).not.to.be.empty
`

$3


Assert that the [HTMLElement][] or [NodeList][] has exactly n child nodes. If the object asserted against is neither of those, the original implementation will be called.

`js
document.querySelector('ul').should.have.length(2)
document.querySelector('li').should.have.length(2)
expect(document.querySelector('ul')).not.to.have.length(3)
`

$3

Assert that the [NodeList][] is not empty. If the object asserted
against is not a [NodeList][], the original implementation will be called.

`js
document.querySelectorAll('dl dd').should.exist
expect(document.querySelectorAll('.nonexistent')).not.to.exist
`

$3


Assert that the selection matches an [HTMLElement][] or all elements in a [NodeList][], using matches. If the object asserted against is neither of those, the original implementation will be called.

Note matches is DOM Level 4, so you may need a polyfill for it.

`js
document.querySelectorAll('input').should.match('[name="bar"]')
expect(document.getElementById('empty')).to.match('.disabled')
`

$3


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.

`js
document.querySelector('section').should.contain('ul.items')
document.querySelector('section').should.contain(document.querySelector('section div'))
expect(document.querySelector('#content')).to.contain('p')
`

$3


Same as contain but changes the assertion subject to the matched element.

`js
document.querySelector('section').should.have.descendant('ul').and.have.class('items')
document.querySelector('section').should.have.descendant(document.querySelector('section div'))
expect(document.querySelector('#content')).to.have.descendant('p')
`

$3


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.descendants('ul li').and.have.length(3)
`

$3


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; otherwise it will look at the inline display attribute.

`js
document.querySelector('dl dd').should.be.displayed
expect(document.querySelector('.hidden')).not.to.be.displayed
`

$3


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

$3

Assert that the [HTMLElement][] has the given tagName.

`js
document.querySelector('.container').should.have.tagName('div')
expect(document.querySelector('.container')).not.to.have.tagName('span')
`

$3

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')
`

$3

Assert that the [HTMLElement][] has set focus.

`js
document.querySelector('input').should.have.focus
expect(document.querySelector('.container')).not.to.have.focus
`

$3

Assert that the [HTMLElement][] is an [HTMLInputElement][] with type of "checkbox" or "radio", and that its checked state is true or false.

`js
document.querySelector('input').should.be.checked
expect(document.querySelector('.checkbox')).not.to.be.checked
`

Installation

$3

`
npm install chai-dom
`

$3

`
bower install chai-dom
`

Usage

$3

`javascript
var chai = require('chai')
chai.use(require('chai-dom'))
`

$3

`javascript
require(['chai', 'chai-dom'], function(chai, chaiDom) {
chai.use(chaiDom)
})
`

$3

`html


`

Use the assertions with chai's expect or should assertions.

Contributing

To run the test suite, run npm install (requires
Node.js to be installed on your system), and run npm test or open
test/index.html` in your web browser.

License

MIT License (see the LICENSE file)

[HTMLElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
[NodeList]: https://developer.mozilla.org/en-US/docs/Web/API/NodeList
[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