Menu

2. Write a Context Test

Write your first context integration test.

Set Up your Project Ensure that you have Set Up your Project for Integration Testing before you proceed with this tutorial.


The integration tests use the Chai assertion library.

Chai API Refer to the official Chai assertion library documentation at http://chaijs.com/api/assert/.

Assertions are performed against context properties. Assertions verify that our expectations of what the properties contain are correct.

Use Mobify's Custom Chai Assertions in your Project Refer to the Custom Chai Assertions API to use these custom commands in your proejcts.


1. Write a Test for the title Context Property

One of the most universal elements to test for is a title.

1. In an editor app, from your project directory, from the tests/integration/ folder, open the categoryTest.js file.

This is the file where you write the test.

2. To refer to the the category context objects, from the app/pages/category/ folder, open the view.js view file.

This file is where you find the title context property.

3. In the categoryTest.js file, write a test against the title context property that is used in the app/pages/category/view.js category view.

Best Practice: Use Descriptive Variables Choose variable names that directly describe the components that they represent.

Use the variable name title to store the title DOM object.

Best Practice: Use the $ Prefix By convention, preface variables that represent a Zepto or a jQuery object with a $ character.

The title property returns a Zepto object, so prefix the variable name with the $ dollar sign character.

var $title = context.title;

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

To test that the property correctly selected the element from the DOM, ensure that its length is 1 with the length function. Follow the Best Practice of testing in the expect style.

expect($title).to.have.length(1);

When you are finished, your code looks like this snippet:

function(test, view, fixture) {
    test('category view context', view, fixture, {
        'context contains the correct template name': function($, context) {
            var templateName = context.templateName;

            expect(templateName).to.equal('category', 'category context has correct template name');
        },

        'Category context properties exist': function($, context) {
            expect(context).to.have.property('title');
            expect(context).to.have.property('listing');
        },

        'context.title property contains title element': function($, context) {
            var $title = context.title;
            expect($title).to.have.length(1);
        },

        ...

Ensure that you append the comma after the Category context properties exist block!

4. Under the properties that exist in the categoryTest.js test, add a comma and add a new test to ensure that there is one title on the page.

Since the title property returns a Zepto object, test that the property correctly selected the element from the DOM.

Use the length property of the Zepto object to check if an element was found. Since you expect 1 element to be returned, build an assertion around that.

Best Practice: One Assertion Per Test Limit the number of assertions to 1 per test, or to 1 property per test.

It is sufficient to assert that the context property's length is equal to 1.

Best Practice: Write Tests that are Sufficient Use your own discretion. Test for expected types, values, and lengths of your context properties.

When you are done, your looks something like the following snippet. It also contains the test that you wrote in the previous step.

function(test, view, fixture) {
    test('category view context', view, fixture, {
        'context contains the correct template name': function($, context) {
            var templateName = context.templateName;
            assert.equal(templateName, 'category', 'category context has correct template name');
        },

        ...

        'context.title property contains tile element': function($, context) {
            var $title = context.title;
            assert.equal($title.length, 1);
        }

    });

    test('category view DOM', view, fixture, {

    });
});

5. Open a new Terminal (Mac) or Command Prompt (Windows).

6. To change to your project directory, enter the following command on the command line:

cd path/to/project/directory

7. To execute your test, enter the following command on the command line:

grunt test

Warning Messages You could see warning messages appended to the output of grunt test that look something like:

Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL...

These warning messages arise out of a bug in the underlying infrastructure of the test runner and have no bearing on the outcome of the test results.

For your reference, the completed categoryTest.js file listing looks similar to this:

define([
    'lib/viewMocker',
    'pages/category/view',
    'text!fixtures/category.html'
],
function(test, view, fixture) {
    test('category view context', view, fixture, {
        'context contains the correct template name': function($, context) {
            var templateName = context.templateName;

            expect(templateName).to.equal('category', 'category context has correct template name');
        },

        'Category context properties exist': function($, context) {
            expect(context).to.have.property('title');
            expect(context).to.have.property('listing');
        },

        'context.title property contains title element': function($, context) {
            var $title = context.title;
            expect($title).to.have.length(1);
        }
    });

    test('category view DOM', view, fixture, {

    });
});

2. Test Another Context Property

To expand the test suite, pick another context property and write another test.


To extend the functionality of Chai, use custom assertions in your tests. The Mobify chai-custom-assertions library simplifies a few of the assertions that are most often used in integration tests.

Custom Chai Assertions API Learn Mobify's Custom Chai Assertions API that are developed especially for common Mobify integration tests.

Find the library in your project directory in the node_modules/mobify-chai-assertions folder. Inside the folder, there is a README.md file with a description of the custom assertions.

Examine the categoryTest.js file and notice that it uses a custom properties assertion. This assertion takes a list of context properties and runs the assert.property assertion on each item.

Another custom assertion, assert.elementsPresent, checks for the existence of an element on a page. It is equivalent to checking that the length of a Zepto/jQuery element is greater than zero.


For example, use the category listing property to include in the test.

1. In your editor app, in your project directory, from the tests/integration/ folder, open the categoryTest.js file.

2. To easily refer to the view context object, from the app/pages/category/ folder, open the view.js view file.

3. Add another test function stub for the listing property similar to what you did in Part A. Copy and paste from another test stub into this file.

4. Use an assertion to verify that property is being populated correctly. Since category.listing returns a Zepto object, it is populated correctly when the length is greater than zero.

Use an assertion that checks the object's length, or use the assert.elementsPresent($listing) custom assertion.

If you're curious, your completed categoryTest.js file listing will look something like this:

define([
    'lib/viewMocker',
    'pages/category/view',
    'text!fixtures/category.html'
],
function(test, view, fixture) {
    test('category view context', view, fixture, {
        'context contains the correct template name': function($, context) {
            var templateName = context.templateName;
            assert.equal(templateName, 'category', 'category context has correct template name');
        },

        'Category context properties exist': function($, context) {
            //Equivalent to asserting existence of each individual property.
            assert.properties(context, 'title', 'listing');
        },

        'context.title property contains tile element': function($, context) {
            var $title = context.title;
            assert.equal($title.length, 1);
        },

        'context.listing property contains listing element': function($, context) {
            var $listing = context.listing;
            assert.equal($listing.length, 1);
        },

        'title context property selects title element': function($, context) {
            var $title = context.title;

            assert.elementsPresent($title);
        },

        'listing context property selects listing element': function($, context) {
            var $listing = context.listing;

            assert.elementsPresent($listing);
        }
    });

    test('category view DOM', view, fixture, {

    });
});

5. Open a new Terminal (Mac) or Command Prompt (Windows).

6. To change to your project directory, enter the following command on the command line:

cd path/to/project/directory

7. To execute your test, enter the following command on the command line:

grunt test

Now that you have a context test, go on to Write a DOM Test.

Edit in GitHub