chai-dom
chai-domは、chaiアサーションライブラリの拡張機能であり、DOM（具体的にはHTMLElementとNodeList）を扱う際に使用できるアサーションのセットを提供します。
jQueryのしがらみから解放された人々のために、chai-jqueryからフォークされました。
アサーション
attr(name[, value])
attribute(name[, value])
HTMLElementがgetAttributeを使用して、指定された属性を持つことをアサートします。オプションで、特定の値もアサートします。戻り値は、メソッドチェーンに使用できます。
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/)
class(className)
HTMLElementがclassListを使用して、指定されたクラスを持つことをアサートします。
document.getElementsByName('bar').should.have.class('foo')
expect(document.querySelector('main article')).to.have.class('foo')
引数として正規表現も受け付けます。
document.getElementsByName('bar').should.have.class(/foo/)
expect(document.querySelector('main article')).to.have.class(/foo/)
id(id)
HTMLElementが指定されたIDを持つことをアサートします。
document.querySelector('section').should.have.id('#main')
expect(document.querySelector('section')).to.have.id('foo')
html(html)
HTMLElementのHTMLが、指定されたHTMLと等しいか、それを含むことをアサートします。
document.querySelector('.name').should.have.html('<em>John Doe</em>')
expect(document.querySelector('#title')).to.have.html('Chai Tea')
document.querySelector('.name').should.contain.html('<span>Doe</span>')
expect(document.querySelector('#title')).to.contain.html('<em>Tea</em>')
text(text)
HTMLElementまたはNodeListの結合されたテキストが、textContentを使用して、指定されたテキストと等しいか、それを含むことをアサートします。チェーンフラグ
trimmed - 比較前にテキストをトリムします
rendered - 比較時にinnerTextを使用します
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')
document.querySelector('.name').should.contain.text('John')
expect(document.querySelector('#title')).to.contain.text('Chai')
document.querySelectorAll('ul li').should.contain.text('Jane')
text(text[])
textContent of NodeListの子要素が、指定されたテキストと完全に一致するか、またはcontainsフラグを使用した場合、すべてのテキスト項目がNodeList内のどこかにあることをアサートします。
document.querySelectorAll('.name').should.have.text(['John Doe', 'Jane'])
expect(document.querySelectorAll('ul li')).to.have.text(['John', 'Jane', 'Jessie'])
document.querySelectorAll('.name').should.contain.text(['John Doe'])
expect(document.querySelectorAll('ul li')).to.contain.text(['John', 'Jessie'])
value(value)
HTMLElementが指定された値を持つことをアサートします。
document.querySelector('.name').should.have.value('John Doe')
expect(document.querySelector('input.year')).to.have.value('2012')
empty
HTMLElementまたはNodeListが子ノードを持たないことをアサートします。アサート対象のオブジェクトがどちらでもない場合、元の実装が呼び出されます。
document.querySelector('.empty').should.be.empty
expect(document.querySelector('section')).not.to.be.empty
length(n)
HTMLElementまたはNodeListが、正確にn個の子ノードを持つことをアサートします。アサート対象のオブジェクトがどちらでもない場合、元の実装が呼び出されます。
document.querySelector('ul').should.have.length(2)
document.querySelector('li').should.have.length(2)
expect(document.querySelector('ul')).not.to.have.length(3)
exist
NodeListが空でないことをアサートします。アサート対象のオブジェクトがNodeListでない場合、元の実装が呼び出されます。
document.querySelectorAll('dl dd').should.exist
expect(document.querySelectorAll('.nonexistent')).not.to.exist
match(selector)
選択がHTMLElementまたはNodeList内のすべての要素と一致することをmatchesを使用してアサートします。アサート対象のオブジェクトがどちらでもない場合、元の実装が呼び出されます。
注：matchesはDOM Level 4なので、ポリフィルが必要な場合があります。
document.querySelectorAll('input').should.match('[name="bar"]')
expect(document.getElementById('empty')).to.match('.disabled')
contain(selector or element)
HTMLElementが、セレクタ文字列の場合はquerySelectorを、要素の場合は[contains][contains]を使用して、指定された要素を含むことをアサートします。アサート対象のオブジェクトがHTMLElementでない場合、またはcontainが関数として呼び出されない場合、元の実装が呼び出されます。
document.querySelector('section').should.contain('ul.items')
document.querySelector('section').should.contain(document.querySelector('section div'))
expect(document.querySelector('#content')).to.contain('p')
descendant(selector or element)
containと同じですが、アサーションの対象を一致した要素に変更します。
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')
descendants(selector)
descendantと同じですが、querySelectorの代わりにquerySelectorAllを使用して、アサーションの対象を単一の要素ではなくNodeListに変更します。
document.querySelector('section').should.have.descendants('ul li').and.have.length(3)
displayed
HTMLElementが表示されている（displayが「none」と等しくない）ことをアサートします。要素がbodyにアタッチされている場合、getComputedStyleを呼び出し、それ以外の場合はインラインdisplay属性を確認します。
document.querySelector('dl dd').should.be.displayed
expect(document.querySelector('.hidden')).not.to.be.displayed
visible
HTMLElementが表示されている（visibilityが「hidden」または「collapse」と等しくない）ことをアサートします。要素がbodyにアタッチされている場合、getComputedStyleを呼び出し、それ以外の場合はインラインvisibility属性を確認します。
document.querySelector('dl dd').should.be.visible
expect(document.querySelector('.invisible')).not.to.be.visible
tagName(name)
HTMLElementが指定されたtagNameを持つことをアサートします。
document.querySelector('.container').should.have.tagName('div')
expect(document.querySelector('.container')).not.to.have.tagName('span')
style(styleProp, styleValue)
HTMLElementが、指定されたスタイルのプロパティ名が、指定された値と等しいことをアサートします。
document.querySelector('.container').should.have.style('color', 'rgb(55, 66, 77)')
expect(document.querySelector('.container')).not.to.have.style('borderWidth', '3px')
focus
HTMLElementにフォーカスが設定されていることをアサートします。
document.querySelector('input').should.have.focus
expect(document.querySelector('.container')).not.to.have.focus
checked
HTMLElementが[HTMLInputElement][]であり、typeが「checkbox」または「radio」で、そのcheckedの状態がtrueまたはfalseであることをアサートします。
document.querySelector('input').should.be.checked
expect(document.querySelector('.checkbox')).not.to.be.checked
インストール
npm
npm install chai-dom
bower
bower install chai-dom
使い方
CommonJS
var chai = require('chai')
chai.use(require('chai-dom'))
AMD
require(['chai', 'chai-dom'], function(chai, chaiDom) {
chai.use(chaiDom)
})
グローバル
<script src="chai.js"></script>
<script src="chai-dom.js"></script>
chaiのexpectまたはshouldアサーションでアサーションを使用します。
貢献
テストスイートを実行するには、npm install（システムにNode.jsがインストールされている必要があります）を実行し、npm testを実行するか、Webブラウザでtest/index.htmlを開きます。
ライセンス
MITライセンス（LICENSEファイルを参照）