Menu

1. Set Up your Project for Integration Testing

Ensure that your project has a view that is ready for integration testing.

The Adaptive.js generator includes a sub-generator which is a generator that allows you to scaffold a small sub-set of a project. The Adaptive.js sub-generator generates view files, which include the view file itself, the dust template, and a view test file.

For example, we use the category view for a sample product page.

1. Generate the category View

If your project folder does not already have a view, create a new category view for test purposes.


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

2. To generate the view with the Yeoman generator, enter the following command on the command line:

yo adaptivejs:view

3. When the generator prompts you for the name of the view, enter category.

4. When the generator prompts you for the view to extend from, select baseView with the arrow keys on your keyboard and hit the Enter key.

Ignore the message about adding the new view files configurations to the project. You do this manually in the next step.

2. Add your category View to the Runner

Now that you have a sample view, let's configure the test runner to include the generated test file. The test runner is what mocha, the Mobify Integration Testing framework, runs its tests with. Specify which files to include when you run the test with the grunt test command.


1. In your project directory, from the tests/runner/ folder, open the testRunner.js file.

Here, you configure the test runner file with the new category view test file.

2. In the testRunner.js file, inside the tests array, add the tests/integration/categoryTest statement. Your code looks similar to the following snippet:

...
    function(require, chai, customAssertions, mocha){

        var tests = [
            'tests/integration/homeTest',
              'tests/integration/categoryTest'
        ];
...

3. To ensure that the project is correctly configured, enter the following command on the command line:

grunt test

3. Save a Fixture of your Desktop Site

The Adaptive.js integration tests run with the help of a page from the desktop site that is saved locally in your project folder. This saved page is known as a fixture.

Fixtures Read more about fixtures in our Integration Testing Overview.

Fixtures allow you to run the tests quickly without the need to connect to the real website. They also provide stability for your testing: changes to the desktop won't affect your tests.

This section continues with the category view example.


In your project directory, in the tests/fixtures folder, there is a default category.html fixture. Populate this fixture with the correct desktop version of your product page.

  1. In your web browser, go to the product listing page of your desktop site. For example, the Merlin's Potions category page at http://www.merlinspotions.com/potions/ is a sample product listing.

  2. To save your product page, right click your mouse on the page and select the "Save Page as" menu option. Save the HTML file in your project directory in the tests/fixtures/ folder as category.html.

  3. To execute the tests against the new fixtures, enter the following command on the command line:

grunt test

If there are any absolute paths in the desktop page that reference any resources, remove them from the HTML. If you do not remove these absolute paths, the grunt test command outputs the "Error loading resource" message. However, you can simply ignore these errors also.


Now that you have set up your project for integration testing, Write a Context Test.

Edit in GitHub