Northern Pileated Marmoset

    jquery.expect

    0.2.0 • Public • Published

    $expect Build Status

    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.

    $expect('div').to.exist();
    $expect('div').to.exist('Please add a div to the page!');
     

    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.

    $expect('div').to.exist(function (willThrow) {
      // Some cleanup code.
      return 'Please add a div to the page.'
    });

    items / elements / length

    Asserts the .length property.

    $expect('ol > li').to.have.items(4);

    above / greaterThan

    Asserts that the .length property is greater than a given number.

    $expect('li').to.be.above(4);

    below / lessThan

    Asserts that the .length property is less than a given number.

    $expect('li').to.be.lessThan(5);

    be / a / an

    Asserts that each element in a jQuery collection matches the passed in selector.

    $expect('div').to.be('.widget');
    $expect('input').to.be('[type=text]');
    $expect('.win').to.be.a('div');
    $expect('.list').to.be.an('ol');

    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.

    $expect('h1').to.be($headers);

    eql / equal

    Asserts that one jQuery collection has the exact same elements as another.
    Can accept a jQuery collection or simply a selector

    $expect('li.first').to.be.equal('li:first');
    $expect('div').to.be.equal($('.all-the-divs'));

    attr

    Asserts the existence of an attribute and its equality if a value was passed in.

    $expect('.container').to.have.attr('id', 'content');
    $expect('.some-input').to.have.attr('value');

    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.

    $expect('.link-1').to.have.text(10);
    $expect('.link-1').to.have.text(/code/i);
    $expect('.link-1').to.have.text('Codecademy');
    $expect('.link-2').to.have.text('Google', 'Why not?');

    match

    Asserts that the visible text of an element matches the given RegExp. An alias for .text(RegExp).

    $expect('.link-1').to.match(/code/i);

    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.

    $expect('body').to.contain('author');
    $expect('.links').to.contain('people');
    $expect('.content').to.contain('Amjad', 'My name must exist and be capitalized');

    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.

    $expect('.nav').to.have.width(250);
    $expect('.header').to.have.innerWidth('>= 50')
                  .and.to.have.innerWidth('<= 250');

    value / val

    Asserts that an input element has a certain value. Calls $().val.

    $expect('input.password').to.have.val('PlainText');

    html

    Asserts that an element has an html string. Calls $().html.

    $expect('body').to.have.html('<div>foo</div>');

    htmlMatch

    Asserts that the html content of an element matches the given RegExp.

    $expect('body').to.matchHtml(/<body><h1>Content/);

    Traversing

    Asserts the existence of element in different directions of the DOM tree.
    Relies on jQuery's traversal methods.

    $expect('body').to.have.children('.foos');
    $expect('#so-lonely').to.have.siblings('.party-elements');

    $().find is aliased to $().have

    $expect('body').to.have('input');

    any

    Asserts that any element of a collection passes the given expectation callback.

    $expect('ul').to.have.children('li').that.any(function(li) {
      $expect(li).to.have.text('List Item Content');
    })

    class

    Asserts the existence of a class or multiple space separated classes on each element of a collection.

    $expect('input[type=text]').to.have.class('on field');

    Shorthand attributes

    Convenience methods for checking the following attributes and selectors:
    visible, hidden, selected, checked, disabled, empty.

    $expect('h2').to.be.hidden();
    $expect('input.submit').not.to.be.hidden('Please hide the submit button for now!');
    $expect('body').not.to.be.empty();

    Chaining

    You can chain assertions on an object just like you can chain methods in jQuery.

    And

    Chains assertions on the original object.

    $expect('div.container').to.exist().and.not.be.empty().and.to.have.width('>= 250');

    that / which

    Chains assertions on different elements after calling any of the traversal methods.

    $expect('ul.todos').to.exist()
                   .and.to.have.children('li.items').that.has.css('border', '1px solid red');
                    .and.has.attr('data-id');

    When chaining on traveresed elements just as in jQuery you can always call .end to get
    the original object back.

    $expect('div.container').to.have.siblings('.pane').that.has.css('float', 'left')
                       end().to.be('.loading');

    License

    MIT License. Copyright (c) 2012 Amjad Masad <amjad@codecademy.com> Ryzac, Inc.

    Install

    npm i jquery.expect

    DownloadsWeekly Downloads

    5

    Version

    0.2.0

    License

    none

    Last publish

    Collaborators

    • codecademy
    • amasad