ViewjazzleJS provides a mechanism for running Jasmine tests for multiple web UI screen sizes using PhantomJS.

• Defines a parameterised input to PhantomJS
• Provides a configuration module to define the viewport sizes (responsive modes) and additional parameters.
• Option to render image of failed tests.
• Option to provide configuration of Jasmine Console Reporter - default set to console.

You will need to write a custom reporter that can group tests in a similar way to the custom TeamCity reporter if you want to use ViewjazzleJS with any other build tool.

Named parameters can be combined in any order, and will override any viewjazzle.config settings.

-cookies "cookie-name,cookie-value,cookie-name,cookie-value" (string array-like values)
-render true/false
-reporter console/teamcity
-spec jasmine-spec-file-path.js
-url http://domain/page
-viewports [[1024,768][768,1024]] (array of viewports, the convention is [width,height])
-userAgent firefox

You may specify a string of name-value pairs for any cookies you need to set for the page you are going to run viewjazzle tests against.

All cookies are cleared by default for each of the viewport tests.

You may specify an array of viewport arrays to define each of the viewports you want to tests. The viewport array uses the convention [width,height].

This will run the viewjazzle tests at just the landscape window size of 1024px wide x 768px high.

phantomjs viewjazzle.js -spec jasmine-spec-file-path.js -url http://domain/page
phantomjs viewjazzle.js -spec jasmine-spec-file-path.js -url http://domain/page -reporter console
phantomjs viewjazzle.js -spec jasmine-spec-file-path.js -url http://domain/page -viewports [[1024,768][768,1024]]
phantomjs viewjazzle.js -spec jasmine-spec-file-path.js -url http://domain/page -cookies "cookie-name,cookie-value,cookie-name,cookie-value"
phantomjs viewjazzle.js -viewports [[1024,768]] -url http://domain/page -spec jasmine-spec-file-path.js

The viewjazzle.config file allows you to set global defaults for all the viewjazzle tests. You can specify named parameters to override these in the command line call. Typically, set all your globals here, then just override as needed for specific test cases.

/*global exports */
/* define your viewjazzle configuration */
exports.reporter = 'teamcity';
exports.ignoreMessages = ['jasmineDone', 'minimal-ui'];
exports.jsLibraryPath = '';
exports.jasminePath = 'lib/jasmine-2.1.0/';
exports.render = false;
exports.timeout = 60000;
exports.viewports = [{ width: 1400, height: 768 }, { width: 1024, height: 768 }, { width: 768, height: 1024 }, { width: 320, height: 640 }];

Name of the reporter you want to use - this can be either 'console' or 'teamcity'.

An array of string values representing console messages that might be raised by PhantomJS but that you want to ignore.

When you require jQuery or any other JS library to be loaded into the web page under test.

Jasmine test library path.

Render failed tests to file.

Duration in ms before exiting viewjazzle if something goes wrong.

Array of viewport sizes to test. Tells PhantomJS what size page to use when running tests. The suite of tests are run entirely for each viewport.

Write your Jasmine tests as usual. However, there are some specific points to be aware of. Firstly, PhantomJS iterates over each test case at each of the viewport sizes (your tests will run N number of times for the number of viewport sizes you define in your config module). Secondly, we are using jQuery to do the DOM selection as well as define the viewport size within the tests. You may wish to use your own native selectors or JS library, in which case, simply write your spec file accordingly.

Within the Jasmine spec file we get the screen size (width and height) so we can run tests against these values. We output the viewport variable as part of the test name so we can see this in the console reporter.

/*global window, describe, it, expect */
(function (window, $) {

    'use strict';

    var screen = {
            width: $(window).width(),
            height: $(window).height()
        },
        viewport = screen.width + 'x' + screen.height;

    describe('Viewport tests ' + viewport, function () {
        it('Content is visible at different screen sizes', function () {

            if (screen.width < 768) { // small
                expect($('.small-screen').css('display')).toBe('block');
                expect($('.medium-screen').css('display')).toBe('none');
                expect($('.large-screen').css('display')).toBe('none');
            } else if (screen.width <= 768) { // medium
                expect($('.small-screen').css('display')).toBe('none');
                expect($('.medium-screen').css('display')).toBe('block');
                expect($('.large-screen').css('display')).toBe('none');
            } else if (screen.width >= 1024) { // large
                expect($('.small-screen').css('display')).toBe('none');
                expect($('.medium-screen').css('display')).toBe('none');
                expect($('.large-screen').css('display')).toBe('block');
            }
        });
    });
}(this, this.jQuery || this.$));

I created a basic console reporter included in the repo in the \lib folder. This provides a human-readable output on the command-line.

I created a TeamCity specific reporterincluded in the repo in the \lib folder. This provides suitable output for Teamcity to report on in a build step within your Pipeline.

You should be able to create your own reporter based on these customisations, feel free to write your own.

PhantomJS https://github.com/ariya/phantomjs/wiki/API-Reference-WebPage

Jasmine http://jasmine.github.io/ standalone https://github.com/pivotal/jasmine