Continuous Integrationfor front-end JavaScriptLars ThorupZeaLake Software ConsultingApril, 2013
Who is Lars Thorup?●   Software developer/architect     ●   JavaScript, C#     ●   Test Driven Development     ●   Continu...
Continuous Integration Code                       CI-server                     Results function createBoard() {   ... }  ...
GruntJS●   Command line             ●   Good support for     ●   NodeJS                   ●   RequireJS                   ...
src/test/code.test.js describe(durationInEnglish, function () {       it(should return "now" when duration is 0, function ...
src/js/code.js function durationInEnglish(milliseconds) {     var seconds = milliseconds / 1000;     if(seconds === 0) {  ...
package.json {     "name": "gruntdemo",     "version": "0.1.1-1",     "devDependencies": {         "grunt-cli": "0.1.6",  ...
Gruntfile.js module.exports = function (grunt) {     var gruntConfig = {};      // task definitions      ...      // grunt...
Gruntfile.js - jshint grunt.loadNpmTasks(grunt-contrib-jshint); gruntConfig.jshint = {     all: [         *.js,         sr...
Gruntfile.js - jasmine grunt.loadNpmTasks(grunt-contrib-jasmine); gruntConfig.jasmine = {     src: {         src: [       ...
Gruntfile.js - istanbulgruntConfig.jasmine.istanbul = {    src: gruntConfig.jasmine.src.src,    options: {        specs: g...
Coverage report
Coverage details
Jenkins job
Jenkins report
Upcoming SlideShare
Loading in...5
×

Continuous Integration for front-end JavaScript

3,182

Published on

Simple demo on setting up continuous integration with GruntJS and PhantomJS of your front-end JavaScript code and Jasmine tests running on Jenkins

Continuous Integration for front-end JavaScript

  1. 1. Continuous Integrationfor front-end JavaScriptLars ThorupZeaLake Software ConsultingApril, 2013
  2. 2. 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
  3. 3. Continuous Integration Code CI-server Results function createBoard() { ... } static analysis errors test runner Tests test(createBoard, { ... coverage coverage analysis }); minification distributables
  4. 4. GruntJS● Command line ● Good support for ● NodeJS ● RequireJS ● CoffeeScript● Static analysis ● JSHint ● Lots of other plugins● Run tests in PhantomJS ● Popular and actively ● QUnit developed ● Jasmine ● and others● Code Coverage ● Istanbul ● Blanket
  5. 5. 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); }) });
  6. 6. 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; } }
  7. 7. 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
  8. 8. Gruntfile.js module.exports = function (grunt) { var gruntConfig = {}; // task definitions ... // grunt grunt.initConfig(gruntConfig); };
  9. 9. Gruntfile.js - jshint grunt.loadNpmTasks(grunt-contrib-jshint); gruntConfig.jshint = { all: [ *.js, src/**/*.js ] }; >grunt jshint Running "jshint:all" (jshint) task >> 3 files lint free.
  10. 10. 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:src }; Running "jasmine:src" (jasmine) task Testing jasmine specs via phantom .. 2 specs in 0.109s. >> 0 failures
  11. 11. Gruntfile.js - istanbulgruntConfig.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:istanbul Running "jasmine:istanbul" (jasmine) task } Testing jasmine specs via phantom}; .. ========== Coverage summary =========== Statements : 85.71% ( 6/7 ) Branches : 75% ( 3/4 ) Functions : 100% ( 1/1 ) Lines : 85.71% ( 6/7 ) =======================================
  12. 12. Coverage report
  13. 13. Coverage details
  14. 14. Jenkins job
  15. 15. Jenkins report
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×