Continuous Integrationfor front-end JavaScriptLars ThorupZeaLake Software Consulting

April, 2013

Who is Lars Thorup?

● Software developer/architect● JavaScript, C#● Test Driven Development● Continuous Integration

● Coach: Teaching agile and automated testing

● Advisor: Assesses software projects and companies

● Founder of ZeaLake

Continuous Integration

function createBoard() { ...}

test('createBoard', { ...});

Code

Tests

CI-server Results

errors

distributables

coverage

static analysis

test runner

coverage analysis

minification

GruntJS● Command line

● NodeJS

● Static analysis● JSHint

● Run tests in PhantomJS● QUnit● Jasmine● and others

● Code Coverage● Istanbul● Blanket

● Good support for● RequireJS● CoffeeScript

● Lots of other plugins

● Popular and actively developed

src/test/code.test.js

describe('durationInEnglish', function () {

it('should return "now" when duration is 0', function () { expect(durationInEnglish(0)).toBe('now'); });

it('should return "x seconds ago" when ...', function () { var now = new Date(2013, 04, 19, 11, 00, 17); var then = new Date(2013, 04, 19, 11, 00, 00); expect(durationInEnglish(now - then)).toBe('17 seconds ago'); })

});

src/js/code.js

function durationInEnglish(milliseconds) { var seconds = milliseconds / 1000; if(seconds === 0) { return 'now'; } else if(seconds < 60) { return seconds + ' seconds ago'; } else { return 'whenever'; }}

package.json

{ "name": "gruntdemo", "version": "0.1.1-1", "devDependencies": { "grunt-cli": "0.1.6", "grunt": "0.4.1", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-jasmine": "0.4.1", "grunt-template-jasmine-istanbul": "0.2.0" }}

>npm install

Gruntfile.js

module.exports = function (grunt) { var gruntConfig = {};

// task definitions...

// grunt grunt.initConfig(gruntConfig);};

Gruntfile.js - jshint

grunt.loadNpmTasks('grunt-contrib-jshint');gruntConfig.jshint = { all: [ '*.js', 'src/**/*.js' ]};

>grunt jshintRunning "jshint:all" (jshint) task>> 3 files lint free.

Gruntfile.js - jasmine

grunt.loadNpmTasks('grunt-contrib-jasmine');gruntConfig.jasmine = { src: { src: [ 'src/js/**/*.js' ], options: { specs: 'src/test/**/*.test.js', junit: { path: 'output/testresults' } } }};

>grunt jasmine:srcRunning "jasmine:src" (jasmine) taskTesting jasmine specs via phantom..2 specs in 0.109s.>> 0 failures

Gruntfile.js - istanbul

gruntConfig.jasmine.istanbul = { src: gruntConfig.jasmine.src.src, options: { specs: gruntConfig.jasmine.src.options.specs, template: require('grunt-template-jasmine-istanbul'), templateOptions: { coverage: 'output/coverage/coverage.json', report: [ {type: 'html', options: {dir: 'output/coverage'}}, {type: 'text-summary'} ] } }};

>grunt jasmine:istanbulRunning "jasmine:istanbul" (jasmine) taskTesting jasmine specs via phantom..========== Coverage summary ===========Statements : 85.71% ( 6/7 )Branches : 75% ( 3/4 )Functions : 100% ( 1/1 )Lines : 85.71% ( 6/7 )=======================================

Coverage report

Coverage details

Jenkins job

Jenkins report