Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Usage
3.
Assertions
3.1.
attr(name[, value])
3.2.
prop(name[, value])
3.3.
css(name[, value])
3.4.
data(name[, value])
3.5.
class(className)
3.6.
id(id)
3.7.
html(html)
3.8.
text(text)
3.9.
value(value)
3.10.
visible
3.11.
hidden
3.12.
selected
3.13.
checked
3.14.
enabled
3.15.
disabled
3.16.
empty
3.17.
exist
3.18.
match(selector)
3.19.
contain(text)
3.20.
descendants(selector)
3.21.
focus()
4.
FAQs
5.
Key Takeaways
Last Updated: Mar 27, 2024
Easy

Chai with Jquery

Author Anjali
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this article, we will be discussing a crucial concept related to testing with chai-jquery. It is an extension to the Chai assertion library. It provides a set of JQuery-specific assertions (for DOM testing). This blog will explain different assertions of chai-jquery with syntax and examples.

Usage

Include jquery.js and chai.js in the test file. Then include chai-jquery.js in your test file.

<script src="jquery.js"></script>
<script src="chai.js"></script>                             
<script src="chai-jquery.js"></script>
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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!

Previous article
Chai Assert Methods
Next article
Plugin Utilities
Live masterclass