chai-jquery is an extension to the chai assertion library that provides a set of jQuery-specific assertions.

Include chai-jquery.js in your test file, after chai.js (version 0.3.3 or later):

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

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

Assert that the first element of the selection has the given attribute, using .attr(). Optionally, assert a particular value as well. The return value is available for chaining.

$('#header').should.have.attr('foo');
expect($('body')).to.have.attr('foo', 'bar');
expect($('body')).to.have.attr('foo').match(/bar/);

Assert that the first element of the selection has the given data value, using .data(). Optionally, assert a particular value as well. The return value is available for chaining.

$('#header').should.have.data('foo');
expect($('body')).to.have.data('foo', 'bar');
expect($('body')).to.have.data('foo').match(/bar/);

Assert that the first element of the selection has the given class, using .hasClass().

$('#header').should.have.class('foo');
expect($('body')).to.have.class('foo');

Assert that the first element of the selection has the given id, using .attr('id').

$('.header').should.have.id('#main');
expect($('body')).to.have.id('foo');

Assert that the first element of the selection has the given html, using .html().

$('.name').should.have.html('<em>John Doe</em>');
expect($('#title')).to.have.html('Chai Tea');

Assert that the first element of the selection has the given text, using .text().

$('.name').should.have.text('John Doe');
expect($('#title')).to.have.text('Chai Tea');

Assert that the first element of the selection has the given value, using .val().

$('.name').should.have.value('John Doe');
expect($('.year')).to.have.value('2012');

Assert that the first element of the selection is visible, using .is(':visible').

$('.name').should.be.visible;
expect($('.year')).to.be.visible;

Assert that the first element of the selection is hidden, using .is(':hidden').

$('.name').should.be.hidden;
expect($('.year')).to.be.hidden;

Assert that the first element of the selection is selected, using .is(':selected').

$('option').should.be.selected;
expect($('option')).not.to.be.selected;

Assert that the first element of the selection is checked, using .is(':checked').

$('.checked').should.be.checked;
expect($('input')).not.to.be.checked;

Assert that the first element of the selection is disabled, using .is(':disabled').

$('.disabled').should.be.disabled;
expect($('input')).not.to.be.disabled;

Assert that the selection is not empty. Note that this overrides the built-in chai assertion. If the object asserted against is not a jQuery object, the original implementation will be called.

$('#exists').should.exist;
expect($('#nonexistent')).not.to.exist;

Assert that the selection matches a given selector, using .is(). Note that the built-in behavior of the match function and be property is preserved -- if the object asserted against is not a jQuery object, or if be is not called as a function, the original implementation will be called. Otherwise, match and be are synonyms -- use whichever one reads better.

$('input').should.match('#foo');
expect($('#empty')).to.be(':empty');

Assert that the selection contains at least one instance of the given selector, using .find(). If the object asserted against is not a jQuery object, the original implementation will be called.

$('body').should.contain('h1');
expect($('#content')).to.contain('section');

Copyright (c) 2012 John Firebaugh

MIT License (see the LICENSE file)