$expect
A DOM assertion library built on top of jQuery and based on LearnBoost's expect.js
Running tests
git clone https://github.com/Codecademy/jquery-expect.git
cd jquery-expect
npm install
Running in phantom.js
make test
Running in browser
make test-browser
Navigate your browser to http://localhost:8080/test
API
For all API methods the last argument passed will override the default assertion error message.
exist
Check the existence by asserting that there is at least one element in the jQuery collection.
to;to;
Error message
As mentioned above, $expect ships with default error messages for each of the assertion API
available. But also gives the user the ability to override these error messages.
The argument following the last formal argument of any assertion method would be considered
as the error message overriding argument.
You could either pass in a simple string or a function that should return a string to override
the default message.
The passed in function could act as a cleanup function before throwing the assertion error.
It would be passed a boolean stating whether the assertion would throw or not.
to;
items / elements / length
Asserts the .length
property.
tohave;
above / greaterThan
Asserts that the .length
property is greater than a given number.
tobeabove4;
below / lessThan
Asserts that the .length
property is less than a given number.
tobe;
be / a / an
Asserts that each element in a jQuery collection matches the passed in selector.
to;to;tobe;tobe;
Internally calls $().is
so it can be passed either a selector, a function, a jQuery object, or an element.
For more info check out the jQuery docs.
to;
eql / equal
Asserts that one jQuery collection has the exact same elements as another.
Can accept a jQuery collection or simply a selector
tobe;tobe;
attr
Asserts the existence of an attribute and its equality if a value was passed in.
tohave;tohave;
text
Asserts that an element has the exact same text.
If a number is passed in then the length of the text would be checked.
If a RegExp is passed in then it will be matched against the text.
tohavetext10;tohavetext/code/i;tohavetext'Codecademy';tohavetext'Google' 'Why not?';
match
Asserts that the visible text of an element matches the given RegExp. An alias for .text(RegExp).
to;
contain
Asserts that an element contains a certain text.
By default punctuation, whitespace, and case would be ignored. Pass in a second true
argument to ensure a strict check.
to;to;to;
Dimension check
Asserts the width
, innerWidth
, outerWidth
, height
, innerHeight
,
outerHeight
, scrollTop
, and scrollTop
of an element.
Can either pass in a number or a string with the operation prepended to it.
tohavewidth250;tohaveinnerWidth'>= 50' andtohaveinnerWidth'<= 250';
value / val
Asserts that an input element has a certain value. Calls $().val
.
tohave;
html
Asserts that an element has an html string. Calls $().html
.
tohave;
htmlMatch
Asserts that the html content of an element matches the given RegExp.
to;
Traversing
Asserts the existence of element in different directions of the DOM tree.
Relies on jQuery's traversal methods.
tohave;tohave;
$().find
is aliased to $().have
to;
any
Asserts that any element of a collection passes the given expectation callback.
tohavethat
class
Asserts the existence of a class or multiple space separated classes on each element of a collection.
tohave;
Shorthand attributes
Convenience methods for checking the following attributes and selectors:
visible
, hidden
, selected
, checked
, disabled
, empty
.
tobe;nottobe;nottobe;
Chaining
You can chain assertions on an object just like you can chain methods in jQuery.
And
Chains assertions on the original object.
toandnotbeandtohavewidth'>= 250';
that / which
Chains assertions on different elements after calling any of the traversal methods.
to andtohavethathas; andhas;
When chaining on traveresed elements just as in jQuery you can always call .end
to get
the original object back.
tohavethathas to;
License
MIT License. Copyright (c) 2012 Amjad Masad <amjad@codecademy.com> Ryzac, Inc.