styleguide.js

/*global require, casper, phantom, fs, console */
"use strict";

// INSTRUCTION: call via Gulp (see task there) or in the "visual-regression" folder as:
// casperjs --ignore-ssl-errors=yes --ssl-protocol=any --target=[local|remote] test instructions/styleguide.js 2>&1 | grep -v "CoreText performance note"

// var phantomcss = require("phantomcss/phantomcss");
var phantomcss = require('./../node_modules/phantomcss/phantomcss.js');

var _IS_REMOTE = (casper.cli.has("target") && casper.cli.get("target")==="remote"),
    _TARGET_URL = _IS_REMOTE ? "https://website.com" : "http://website.dev:8000",
    _TARGET_DIR = _IS_REMOTE ? "remote" : "local";

casper.echo('STARTED CASPER FOR: ' + _TARGET_URL + ' (' + _TARGET_DIR + ')');

phantomcss.init({

    // phantomcss library folder (relative to this file) - Notice: if you are using NPM, this will be './node_modules/phantomcss'
    libraryRoot: './node_modules/phantomcss',

    // folder with GIT-staged comparison baseline images
    screenshotRoot: './screenshots_' + _TARGET_DIR + '/baseline',

    // folder for test failures (by default, failure images are put in the './failures' folder; if failedComparisonsRoot is set to false a separate folder will not be created but failure images can still be found alongside the original and new images)
    failedComparisonsRoot: './screenshots_' + _TARGET_DIR + '/failures',

    // folder for temporary test results (You might want to keep master/baseline images in a completely different folder to the diffs/failures.  Useful when working with version control systems. By default this resolves to the screenshotRoot folder.
    comparisonResultRoot: './screenshots_' + _TARGET_DIR + '/results',

    // remove results directory tree after run (use in conjunction with failedComparisonsRoot to see failed comparisons)
    cleanupComparisonImages: false, // true,

    // don't add label to generated failure image
    addLabelToFailedImage: false,

    // mismatch tolerance defaults to 0.05%. Increasing this value will decrease test coverage
    mismatchTolerance: 0.05,

    // callbacks for your specific integration
    onPass: function(test){ casper.echo('PhantomCSS passed on ' + test.filename, 'INFO'); },
    onFail: function(test){ casper.echo('PhantomCSS failed on ' + test.filename + ' (' + test.mismatch + ')', 'ERROR'); },
    onTimeout: function(test){ casper.echo('PhantomCSS timed out for ' + test.filename, 'WARNING'); },

    // Change the output screenshot filenames for your specific integration
    fileNameGetter: function(root,filename){
        // globally override output filename (files must exist under root and use the .diff convention)
        var name = root+'/'+filename.toLowerCase().replace(/ /g,'_');
        if(fs.isFile(name+'.png')){
            return name+'.diff.png';
        } else {
            return name+'.png';
        }
    },

    // Output styles for image failure outputs genrated by Resemble.js
    outputSettings: {
        errorColor: {
            red: 255,
            green: 0,
            blue: 255
        },
        errorType: 'movement',
        transparency: 0.3
    }

});


// ===== INIT =====

casper.start(_TARGET_URL + '/styleguide/');
casper.viewport(1280, 1024); // set browser size
phantomcss.turnOffAnimations(); // turn off CSS transitions and jQuery animations (call it ONLY after casper.start)


// ===== STYLEGUIDE > WEBSITE =====

// CR: the full page is too big, skip it!
// casper.thenOpen(_TARGET_URL + '/styleguide/website/')

// -- chunk sections --
casper.thenOpen(_TARGET_URL + '/styleguide/website/chunk/typography/')
    .then(function() {
        phantomcss.screenshot('.styleguide__typography', 1, '.section-title', 'Styleguide/Website/Typography');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/colors/')
    .then(function() {
        phantomcss.screenshot('.styleguide__colors', 1, '.section-title', 'Styleguide/Website/Colours');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/buttons/')
    .then(function() {
        phantomcss.screenshot('.styleguide__buttons', 1, '.section-title', 'Styleguide/Website/Buttons');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/controls/')
    .then(function() {
        phantomcss.screenshot('.styleguide__controls', 1, '.section-title', 'Styleguide/Website/Controls');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/tables/')
    .then(function() {
        phantomcss.screenshot('.styleguide__tables', 1, '.section-title', 'Styleguide/Website/Tables');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/forms/')
    .then(function() {
        phantomcss.screenshot('.styleguide__forms', 1, '.section-title', 'Styleguide/Website/Forms');
    })
    .thenOpen(_TARGET_URL + '/styleguide/website/chunk/dialogs/')
    .then(function() {
        phantomcss.screenshot('.styleguide__dialogs', 1, '.section-title', 'Styleguide/Website/Dialogs');
    })
    ;


// ===== STYLEGUIDE > APPLICATIONS =====

// CR: the full page is too big, skip it!
// casper.thenOpen(_TARGET_URL + '/styleguide/applications/')

// -- chunk sections --
casper.thenOpen(_TARGET_URL + '/styleguide/applications/chunk/colors/')
    .then(function() {
        phantomcss.screenshot('.styleguide__colors', 1, '.section-title', 'Styleguide/Applications/Colours');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/buttons/')
    .then(function() {
        phantomcss.screenshot('.styleguide__buttons', 1, '.section-title', 'Styleguide/Applications/Buttons');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/controls/')
    .then(function() {
        phantomcss.screenshot('.styleguide__controls', 1, '.section-title', 'Styleguide/Applications/Controls');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/blocks/')
    .then(function() {
        phantomcss.screenshot('.styleguide__blocks', 1, '.section-title', 'Styleguide/Applications/Blocks');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/tabs/')
    .then(function() {
        phantomcss.screenshot('.styleguide__tabs', 1, '.section-title', 'Styleguide/Applications/Tabs');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/forms/')
    .then(function() {
        phantomcss.screenshot('.styleguide__forms', 1, '.section-title', 'Styleguide/Applications/Forms');
        // single blocks
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs"]', 1, '', 'Styleguide/Applications/Forms - Inputs');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types1"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types1');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types2"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types2');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types3"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types3');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-types4"]', 1, '', 'Styleguide/Applications/Forms - Inputs Types4');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-status1"]', 1, '', 'Styleguide/Applications/Forms - Inputs Status1');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-status2"]', 1, '', 'Styleguide/Applications/Forms - Inputs Status2');
        phantomcss.screenshot('.styleguide__forms [regression="forms-inputs-validation"]', 1, '', 'Styleguide/Applications/Forms - Inputs Validation');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/modules/')
    .then(function() {
        phantomcss.screenshot('.styleguide__modules', 1, '.section-title', 'Styleguide/Applications/Modules');
        // single blocks
        phantomcss.screenshot('.styleguide__modules [regression="modules-title"]', 1, '', 'Styleguide/Applications/Modules - Title');
        phantomcss.screenshot('.styleguide__modules [regression="modules-data-entry"]', 1, '', 'Styleguide/Applications/Modules - Data Entry');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/messaging/')
    .then(function() {
        phantomcss.screenshot('.styleguide__messaging', 1, '.section-title', 'Styleguide/Applications/Messaging');
        // single blocks
        phantomcss.screenshot('.styleguide__messaging [regression="messaging-pro-profiles"]', 1, '', 'Styleguide/Applications/Messaging - Pro Profiles');
        phantomcss.screenshot('.styleguide__messaging [regression="messaging-customer-profiles"]', 1, '', 'Styleguide/Applications/Messaging - Customer Profiles');
        phantomcss.screenshot('.styleguide__messaging [regression="messaging-bubbles"]', 1, '', 'Styleguide/Applications/Messaging - Bubbles');
        phantomcss.screenshot('.styleguide__messaging [regression="messaging-message-composer"]', 1, '', 'Styleguide/Applications/Messaging - Message Composer');
        phantomcss.screenshot('.styleguide__messaging [regression="messaging-dialog-page"]', 1, '', 'Styleguide/Applications/Messaging - Dialog Page');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/lists/')
    .then(function() {
        phantomcss.screenshot('.styleguide__lists', 1, '.section-title', 'Styleguide/Applications/Lists');
    })
    .thenOpen(_TARGET_URL + '/styleguide/applications/chunk/tables/')
    .then(function() {
        phantomcss.screenshot('.styleguide__tables', 1, '.section-title', 'Styleguide/Applications/Tables');
    })
    ;



// ===== IMAGE COMPARISON =====

casper.then(function() {

    /* CR: possible call methods
    phantomcss.compareAll();
    phantomcss.compareAll('exclude.test'); // string is converted into a Regular expression that matches on full image path
    phantomcss.compareMatched('include.test', 'exclude.test');
    phantomcss.compareMatched( new RegExp('include.test'), new RegExp('exclude.test'));
    phantomcss.compareSession();  // Compare image diffs generated in this test run only
    phantomcss.compareExplicit(['/dialog.diff.png', '/header.diff.png']); // Explicitly define what files you want to compare
    phantomcss.getCreatedDiffFiles(); // Get a list of image diffs generated in this test run
    phantomcss.compareFiles(baseFile, diffFile); phantomcss.waitForTests(); // Compare any two images, and wait for the results to complete
    */

    phantomcss.compareSession();

});


// ===== ALL DONE =====

casper.run(function() {
    casper.test.done();
    console.log("\nTHE END.");
    phantom.exit(phantomcss.getExitStatus());
});