Notify President Madagascar
    Wondering what’s next for npm?Check out our public roadmap! »

    chai-dom
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/chai-dom package

    1.9.0 • Public • Published

    chai-dom

    Build Status

    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

    attr(name[, value])

    attribute(name[, value])

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

    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)

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

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

    id(id)

    Assert that the HTMLElement has the given id.

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

    html(html)

    Assert that the html of the HTMLElement is equal to or contains the given 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)

    Assert that the text of the HTMLElement or combined text of the NodeList is equal to or contains the given text, using textContent. Chaining flags:

    trimmed - will trim the text before comparing
    rendered - will use innerText when comparing

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

    Assert that the 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)

    Assert that the HTMLElement has the given value

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

    empty

    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.

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

    length(n)

    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.

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

    exist

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

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

    match(selector)

    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.

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

    contain(selector or element)

    Assert that the HTMLElement contains the given element, using 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.

    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)

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

    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)

    Same as descendant but uses querySelectorAll instead of querySelector to change the assertion subject to a NodeList instead of a single element.

    document.querySelector('section').should.have.descendants('ul li').and.have.length(3)

    displayed

    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.

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

    document.querySelector('dl dd').should.be.visible
    expect(document.querySelector('.invisible')).not.to.be.visible

    tagName(name)

    Assert that the HTMLElement has the given tagName.

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

    style(styleProp, styleValue)

    Assert that the HTMLElement has the given style prop name value equal to a given value.

    document.querySelector('.container').should.have.style('color', 'rgb(55, 66, 77)')
    expect(document.querySelector('.container')).not.to.have.style('borderWidth', '3px')

    Installation

    npm

    npm install chai-dom
    

    bower

    bower install chai-dom
    

    Usage

    CommonJS

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

    AMD

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

    Global

    <script src="chai.js"></script>
    <script src="chai-dom.js"></script>

    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)

    Install

    npm i chai-dom

    DownloadsWeekly Downloads

    39,271

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    61.3 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar