chai-dom

chai-dom 是 chai 斷言函式庫的擴充，提供了一組在操作 DOM 時（特別是 HTMLElement 和 NodeList）使用的斷言。

從 chai-jquery 分支出來，為了讓那些擺脫 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 the NodeList children deep equal those text, or when using the contains flag, all the text items are somewhere in the 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，所以你可能需要一個 polyfill 來支援它。

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 相同，但使用 querySelectorAll 而不是 querySelector 將斷言的目標更改為 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 具有給定的 style 屬性名稱值等於給定的值。

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 或在您的網路瀏覽器中開啟 test/index.html。

許可證

MIT 許可證 (請參閱 LICENSE 檔案)