Continuous Integration for front-end JavaScript
Upcoming SlideShare
Loading in...5
×
 

Continuous Integration for front-end JavaScript

on

  • 2,456 views

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

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

Statistics

Views

Total Views
2,456
Slideshare-icon Views on SlideShare
2,453
Embed Views
3

Actions

Likes
4
Downloads
31
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Continuous Integration for front-end JavaScript Continuous Integration for front-end JavaScript Presentation Transcript

    • Continuous Integrationfor front-end JavaScriptLars ThorupZeaLake Software ConsultingApril, 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 Code CI-server Results function createBoard() { ... } static analysis errors test runner Tests test(createBoard, { ... coverage coverage analysis }); minification distributables
    • 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
    • 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 jshint Running "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:src }; Running "jasmine:src" (jasmine) task Testing jasmine specs via phantom .. 2 specs in 0.109s. >> 0 failures
    • 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 ) =======================================
    • Coverage report
    • Coverage details
    • Jenkins job
    • Jenkins report