Chai with Jquery

Assertions

Following are the list of some important assertion.

attr(name[, value])

.attr() asserts that first element of the selection have the given attribute. It can also assert a particular value.

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

prop(name[, value])

.prop() asserts that first element of the selection has the given property.It can also assert a particular value.

$('#header').should.have.prop('disabled');
expect($('body')).to.have.prop('disabled', 'false');
expect($('body')).to.have.prop('value').match(/bar/);

css(name[, value])

.css() asserts that first element of the selection has the given CSS property. It can also assert the computed value.

$('#header').should.have.css('background');
expect($('body')).to.have.css('background-color', 'rgb(0, 0, 0)');
expect($('body')).to.have.css('font-family').match(/sans-serif/);

data(name[, value])

.data() asserts that the first element of the selection has the given data value. It can also assert a particular value .

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

class(className)

.hasClass() asserts that first element of the selection has the given class.

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

id(id)

.attr(‘id’) assert that the first element of the selection has the given id.

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

html(html)

.html() assert that html of the first element of the selection is equal to the given html.

$('.name').should.have.html('<em>Coding Ninjas</em>');
expect($('#title')).to.have.html('Chai with Jquery');

text(text)

.text() asserts that text of the first element of the selection is equal to the given text .

$('.name').should.have.text('<em>Coding Ninjas</em>');
expect($('#title')).to.have.text('Chai with Jquery');

value(value)

.val() asserts that the first element of the selection has the given value.

$('.name').should.have.value('<em>Coding Ninjas</em>');
expect($('.year')).to.have.value('2022');

visible

.is(':visible') asserts that at least one element of the selection is visible.

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

hidden

.is(':hidden') asserts that at least one element of the selection is hidden.

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

selected

.is(':selected') asserts that at least one element of the selection is selected.

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

checked

.is(':checked') asserts that at least one element of the selection is checked.

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

enabled

.is(':enabled') asserts that at least one element of the selection is enabled.

$('.enabled').should.be.enabled;
expect($('enabled')).not.to.be.enabled;

disabled

.is(':disabled') asserts that at least one element of the selection is disabled.

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

empty

.is(':empty') asserts that at least one element of the selection is empty. If the object asserted is not a jQuery object. Then the original implementation will be executed.

$('.empty').should.be.empty;
expect($('body')).not.to.be.empty;

exist

It asserts that selection is not empty. This overrides the built-in chai assertion. If the object asserted is not a jQuery object. Then the original implementation will be executed.

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

match(selector)

.is() asserts that selection matches a given selector. This overrides the built-in chai assertion. If the object asserted is not a jQuery object. Then the original implementation will be executed.

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

contain(text)

:contains() asserts that selection contains given text. If the object asserted is not a jQuery object. Then the original implementation will be executed.

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

descendants(selector)

.has() asserts that the selection contains at least one element which has a descendant matching the given selector.

$('body').should.have.descendants('h1');
expect($('#content')).to.have.descendants('div');

focus()

.is(':focus') asserts that at least one element of the selection is visible. This assertion does not use .is(':focus'). It rather uses $('.element').get(0) === document.activeElement. Because of incompatibility of .is(':focus') in some webkit browsers.

$('#focused').should.have.focus();
expect($('#nonfocused')).not.have.focus();

FAQs

1. How to run a chai test suite?

Ans: To run the test suite, run npm install. First, Node.js is to be installed on your system. Then open test/index.html in your web browser.

 

2. What is the use of the Chai assertion Library?

Ans: It provides functions and methods that help you compare the output of a specific test with its expected value.
 

3. Does Cypress uses Chai?

Ans: Cypress bundles the Chai assertion library and also helpful extensions for Sinon and jQuery, which brings plenty of powerful assertions for free.
 

4. Is Chai a dev dependency?

Ans: Chai and Mocha are both dev dependencies.

Key Takeaways

In this blog, we have discussed how to use chai-jquery. We learned different assertions of chai-jquery. For example, attr, prop, visible, contain, hidden, etc. Learned the assertions with their syntax and uses. Using these assertions, we can write tests with chai-jquery.

 

We hope that this blog helped you enhance your knowledge regarding chai-jquery. You may want to know about jquery. To find an interesting article on jquery, please click here to learn more. 

 

If you would like to learn more, head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more. Do upvote our blog to help other ninjas grow.

 

Happy Coding!