Menu

Custom Chai Assertions API

Browse the custom Chai assertions that were created specifically for integration tests of Mobify sites.

Custom Assertion Methods

The plugin extends Chai with these methods. Use either the assert or expect styles.

Expect Since Chai's API supports only the expect style, we implemented these methods for the expect style first and then for the assert style as a wrapper.

Best Practice: Use the Expect Library The Chai expect library uses language chains that make assertions more readable. For example, expect(title).to.be.a(‘string’) is a self-explanatory command.


Custom Assertions

Custom Assertions

count(exp, num, [message])

The count assertion checks that the expression has a length of num. This can be chained with elements to assert that a jQuery/Zepto object has a specified length.

Input
Parameter Name Parameter Type Description
exp Object The expression to run the assertion on.
num Number The number of items expected in the expression. Use whole numbers.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

//Asserts that there are 3 items in the array.
var items = [1,2,3];
expect(items).to.have.count(3);
expect(items).to.have.count(5, 'my custom failure message');

// Asserts that a jQuery/Zepto object has a specified length
var $images = $('img');
expect($images).to.have.elements.count(24);

        <p><hr width="90%"></p>

    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="elements">elements(exp, [message])</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      This assertion is chainable. On its own and when chained with <code>present</code> or <code>count</code>, the  <code>elements</code> assertion verifies that the given expression is a Zepto/jQuery object. Alias: <code>element</code>
                <p></p>
            </td></tr>
    <tr><td>
      <p></p>
      <table border="1" width="90%" align="center">
        <caption><b>Input</b><br></caption>
        <tr bgcolor="#C0C0C0">
          <th>Parameter Name</th>
          <th>Parameter Type</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>exp</td>
          <td>Zepto/JQuery Object</td>
          <td>The expression to run the assertion on.</td>
        </tr>
        <tr>
          <td>message</td>
          <td>String</td>
          <td><i>optional</i> The message to output in case of test failure.</td>
        </tr>
      </table>
      <p></p>
    </td></tr>
    <tr><td><p><b>Code Sample:</b><br></p>

In the expect style:

// Asserts that it is a Zepto/jQuery element.
expect($paymentOptions).to.be.an.element;

// Takes an optional error message that is displayed on failure.
// Default error message is "Must be a Zepto/jQuery object"
expect($paymentOptions).to.be.elements('failure: it is not a Zepto/jQuery object');

// Can be chained with .present
expect($paymentOptions).to.have.elements.present;

// Can be chained with .count
expect($images).to.have.elements.count(24);


    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="elementsEqual">elementsEqual(exp, num, [message])</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      <b>This assertion is deprecated.</b> Use <code>elements.count</code> instead.

The elementsEqual assertion checks that there are exactly num number of elements present.

Input
Parameter Name Parameter Type Description
exp Zepto/JQuery Object The expression to run the assertion on.
num Number The number of items expected in the expression. Use whole numbers.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

//Asserts that there are exactly 3 images.
expect($images).to.have.elementsEqual(3);

// Asserts that there is one title.
// If the assertion fails, output the custom message.
expect($title).to.have.elementsEqual(1, 'Length should be 1.');

In the assert style:

// Asserts that there are exactly 3 images.
assert.elementsEqual($images, 3);

// Asserts that there is one title.
// If the assertion fails, output the custom message.
assert.elementsEqual($title, 1, 'Length should be 1.');


    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="elementsNotEqual">elementsNotEqual(exp, num, [message])</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      <b>This assertion is deprecated.</b> Use <code>elements.count</code> instead.

The elementsNotEqual assertion checks whether the element does not appear num number of times. Use this to check if you expect exactly that number of elements to appear on the page to see if the check fails.

Input
Parameter Name Parameter Type Description
exp Zepto/JQuery Object The expression to run the assertion on.
num Number The number of items expected in the expression. Use whole numbers.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

expect($images).to.have.elementsNotEqual(3);

In the assert style:

assert.elementsNotEqual($images, 3);


    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="elementsNotPresent">elementsNotPresent(exp, [message])</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      <b>This assertion is deprecated.</b> Use <code>elements.not.present</code> instead.

The elementsNotPresent assertion checks that the selected element is not present in the current context. Use this to check that undesired elements do not appear on the current page.

Input
Parameter Name Parameter Type Description
exp Zepto/JQuery Object The expression to run the assertion on.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

expect($images).to.have.elementsNotPresent();

In the assert style:

assert.elementsNotPresent($images);


    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="elementsPresent">elementsPresent(exp, [num], [message])</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      <b>This assertion is deprecated.</b> Use <code>elements.present</code> instead.

The elementsPresent assertion checks that the particular element is present in the current page context. If a num number is specified, the elements must be present more than num number of times.

Input
Parameter Name Parameter Type Description
exp Zepto/JQuery Object The expression to run the assertion on.
num Number optional The number of items that are expected in the expression +1. Use whole numbers.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

expect($emailForm).to.have.elementsPresent();

// Asserts that there are 4 or more such elements. 
expect($links).to.have.elementsPresent(3);

In the assert style:

assert.elementsPresent($emailForm);

// Asserts that there are 4 or more such elements.
assert.elementsPresent($links, 3);


    </td>
</tr>

<tr>
<td>
  <table border="0" width="90%" align="center">
    <tr><td><b><h3><a id="hasItems">hasItems(exp)</a></h3></b></td></tr>
    <tr><td></td></tr>
    <tr><td>
      <p></p>
      <b>This assertion is deprecated.</b> Use <code>have.items</code> instead.
      The <code>hasItems</code> assertion checks that the collection given by the <code>exp</code> parameter is not empty, or that the collection has a <code>length</code> greater than 1.
                <p></p>
            </td></tr>
    <tr><td>
      <p></p>
      <table border="1" width="90%" align="center">
        <caption><b>Input</b><br></caption>
        <tr bgcolor="#C0C0C0">
          <th>Parameter Name</th>
          <th>Parameter Type</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>exp</td>
          <td>Collection</td>
          <td>The collection (Array, List, etc.) on which to run the assertion.</td>
        </tr>
      </table>
      <p></p>
    </td></tr>
    <tr><td><p><b>Code Sample:</b><br></p>

In the expect style:

// Asserts that this collection has at least 1 item in it
expect(list).to.not.be.empty();

In the assert style:

// Asserts that this collection has at least 1 item in it
assert.hasItems(list);


    </td>
</tr>

items(exp, [message])

The items assertion checks that the collection given by the exp parameter is not empty, or that the collection has a length that is greater than 1.

Input
Parameter Name Parameter Type Description
exp Collection The collection (Array, List, etc.) on which to run the assertion.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

// Asserts that this collection (e.g. an array) has at least 1 item in it
expect(lists).to.have.items;
expect(lists).to.have.items('my custom failure message');


present(exp, num, [message])

The present assertion checks that there are at least (>=) num number of elements present. This can be chained with elements to assert that exp is also a Zepto/jQuery object.

Input
Parameter Name Parameter Type Description
exp Object The expression to run the assertion on.
num Number The number of items expected in the expression. Use whole numbers. Default is 1.
message String optional The message to output in case of test failure.

Code Sample:

In the expect style:

// Asserts that the length is at least (>=) than num.
// Default is 1. 
// Can be used with all types of expressions.
expect($paymentOptions).to.be.present;

var items = [1, 2, 3];
expect(items).to.be.present;
expect(items).to.be.present(3);
expect(items).to.be.present(4, 'my custom failure message');

// Can be used in a chain:
// Zepto/jQuery object has length at least 1
expect($paymentOptions).to.have.elements.present;

// Can be negated
// Length is 0
expect($paymentOptions).to.have.elements.not.present;


properties(exp, key1, key2, ...)

The properties assertion checks that the exp object contains the key1, key2, ... keys.

Input
Parameter Name Parameter Type Description
exp Object The object on which to run the assertion.
key1 String The property to find in the object.
key2 String The property to find in the object.

Code Sample:

In the expect style:

// Asserts that the apps object has the keys 'apple' and 'google'
expect(apps).to.have.properties('apple', 'google');

In the assert style:

// Asserts that the apps object has the keys 'apple' and 'google'
assert.properties(apps, 'apple', 'google');

Edit in GitHub