npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

chai-dom

v1.12.0

Published

DOM assertions for the Chai assertion library using vanilla JavaScript

Downloads

283,247

Readme

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

Also accepts regex as argument.

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

focus

Assert that the HTMLElement has set focus.

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

checked

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

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

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)