Menu

3. Write a DOM Test

Write a simple DOM test to check the existence of an element.

The Adaptive.js integration tests allow you to test not only context properties but the adapted DOM as well. When the integration tests run, they perform a full adaptation of the view that you are testing. The resulting HTML document is bound to the $ parameter that is passed into the test functions. Using the $ parameter, you can query into the adapted DOM just like any other view or UI script. This allows you to verify the existence and structure of elements within that DOM.

Write your first DOM Test

Write a simple DOM test to check for the existence of the t-category__title element in the DOM.

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

Look at the DOM test section in the homeTest.js file for an example of how to write one of these tests.

2. Go to your categoryTest.js file and add a new test function under the category view DOM test block.

3. Inside the test function, write a test that asserts the existence of the element with the t-category__title class.

When you finish, your completed categoryTest.js file looks 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');
        },

        '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, {
        'Title content element is present': function($) {
            var $title = $('.t-category__title');

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

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

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

cd path/to/project/directory

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

grunt test

To test your understanding, add a DOM test for the t-category__category-listing listing element. Remember to append a comma to the end of the category view DOM title code block before you do!

Edit in GitHub