Chai-jQ
chai-jq
is an alternate plugin for the Chai assertion
library to provide jQuery-specific assertions.
Usage
You can install chai-jq
with the following package managers:
The integration notes discuss how to properly patch Chai with
the plugin in different environments (browser, AMD, Node.js). The
API documentation is a good starting point to learn how to use
chai-jq
assertions in your tests.
The site's own test suites also provide a decent introduction to the API:
Assertions
Integration
chai-jq
works in your browser, with AMD/RequireJS, and in Node.js with
JsDom.
Standard Browser: To use in a standard HTML page, include chai-jq.js
after Chai.
AMD Browser: To use in a RequireJS/AMD page, require in chai-jq
and
inject it into Chai before your test imports / runners begin:
;
Node.js / JsDom: To use in Node.js/JsDom, require in chai-jq
and
inject it into Chai before your test imports / runners begin:
var chai = ;var plugin = ; // Inject plugin.chai; // Rest of test code here...
Object Context Changes
One slight difference from how assertions in chai-jq
work from Chai and other
plugins is the switching of object context for certain assertions, currently:
$attr
$prop
In general usage, the object under test (e.g., the thing wrapped in an
expect()
) remains the current context, so you can do something like:
var $elem = ; // Assertion object is `$elem` tohaveand // Assertion object is still `$elem` tocontain;
In the above example, the jQuery object $elem
remains the object under
assertion for both $attr
calls. However, in the special case for one of the
enumerated assertions above where:
- There is no expected assertion value given; and,
- There are no negations (e.g.,
not
) used in a chain.
Then, the object under assertion switches to the value of the effective
method called. So, taking our example again, and calling $attr()
without
an expected value, we would have:
var $elem = ; // Assertion object is `$elem` tohaveand // Assertion object now changed to `$attr()` value: `"bar time"` toand toand tonothavelength2;
In the above example here, the object under assertion becomes the string
"bar time"
immediately after the call to $attr("foo")
with no expected
value.
Plugin API
$visible
$hidden
$val(expected, [message])
$class(expected, [message])
$attr(name, [expected], [message])
$data(name, [expected], [message])
$prop(name, [expected], [message])
$html(expected, [message])
$text(expected, [message])
$css(expected, [message])
$visible
Asserts that the element is visible.
Node.js/JsDom Note: JsDom does not currently infer zero-sized or hidden parent elements as hidden / visible appropriately.
tobe$visible;
See: http://api.jquery.com/visible-selector/
$hidden
Asserts that the element is hidden.
Node.js/JsDom Note: JsDom does not currently infer zero-sized or hidden parent elements as hidden / visible appropriately.
tobe$hidden;
See: http://api.jquery.com/hidden-selector/
$val(expected, [message])
- expected (
String|RegExp
) value - message (
String
) failure message (optional)
Asserts that the element value matches a string or regular expression.
tohaveand tohave;
See: http://api.jquery.com/val/
$class(expected, [message])
- expected (
String
) class name - message (
String
) failure message (optional)
Asserts that the element has a class match.
tohaveand tohave;
See: http://api.jquery.com/hasClass/
$attr(name, [expected], [message])
- name (
String
) attribute name - expected (
String
) attribute content (optional) - message (
String
) failure message (optional) - returns current object or attribute string value
Asserts that the target has exactly the given named attribute, or
asserts the target contains a subset of the attribute when using the
include
or contain
modifiers.
tohaveand tocontain;
Changes context to attribute string value when no expected value is provided:
tohaveand toand to;
See: http://api.jquery.com/attr/
$data(name, [expected], [message])
- name (
String
) data-attribute name - expected (
String
) data-attribute content (optional) - message (
String
) failure message (optional) - returns current object or attribute string value
Asserts that the target has exactly the given named
data-attribute, or asserts the target contains a subset
of the data-attribute when using the
include
or contain
modifiers.
tohaveand tocontain;
Changes context to data-attribute string value when no expected value is provided:
tohaveand toand to;
See: http://api.jquery.com/data/
$prop(name, [expected], [message])
- name (
String
) property name - expected (
Object
) property value (optional) - message (
String
) failure message (optional) - returns current object or property string value
Asserts that the target has exactly the given named property.
tohaveand tohave;
Changes context to property string value when no expected value is provided:
tohaveand toand to;
See: http://api.jquery.com/prop/
$html(expected, [message])
- expected (
String
) HTML content - message (
String
) failure message (optional)
Asserts that the target has exactly the given HTML, or
asserts the target contains a subset of the HTML when using the
include
or contain
modifiers.
tohaveand tocontain;
See: http://api.jquery.com/html/
$text(expected, [message])
- expected (
String
) text content - message (
String
) failure message (optional)
Asserts that the target has exactly the given text, or
asserts the target contains a subset of the text when using the
include
or contain
modifiers.
tohaveand tocontain;
See: http://api.jquery.com/text/
$css(expected, [message])
- expected (
String
) CSS property content - message (
String
) failure message (optional)
Asserts that the target has exactly the given CSS property, or
asserts the target contains a subset of the CSS when using the
include
or contain
modifiers.
Node.js/JsDom Note: Computed CSS properties are not correctly inferred as of JsDom v0.8.8. Explicit ones should get matched exactly.
Browser Note: Explicit CSS properties are sometimes not matched
(in contrast to Node.js), so the plugin performs an extra check against
explicit style
properties for a match. May still have other wonky
corner cases.
PhantomJS Note: PhantomJS also is fairly wonky and unpredictable with
respect to CSS / styles, especially those that come from CSS classes
and not explicity style
attributes.
tohaveand tohave;
See: http://api.jquery.com/css/
Contributions
Please see the Contributions Guide for how to help out with the plugin.
We test all changes with Travis CI, report internal test coverage with Coveralls and check complexity / static analysis with Code Climate. Here is the status for our build, coverage, and complexity:
We also do multi-browser testing of the frontend code using Sauce Labs. Here's our build matrix:
Licenses
All code not otherwise specified is Copyright 2013 Ryan Roemer. Released under the MIT License.
This repository contains various libraries from other folks, and are licensed as follows:
-
jQuery is Copyright jQuery Foundation and licensed under the MIT license.
-
Mocha is Copyright TJ Holowaychuk and licensed under the MIT license.
-
Chai is Copyright Jake Luer and licensed under the BSD license.
-
Sinon.JS is Copyright Christian Johansen and licensed under the BSD license.
-
Mocha-PhantomJS is Copyright Ken Collins and licensed under the MIT license.
-
Pure is Copyright Yahoo! and licensed under the MIT license.