Javascript Continuous Integration

We'll see how to setup javascript continuous intergration environment using jenknin, git, gerrit.

1. Add PhantomJS to  package.json

PhantomJS can execute javascript without browser. Need to add PhantomJS to run test-case upon PhantomJS


npm install phantomjs --save-dev
npm install karma-phantomjs-launcher --save-dev
npm install karma-junit-reporter --save-dev

2. Create separated karma config file

We'll create separate karma config file for jenkins. Let's create "jenkins-ci-conf.js" like followings. Set browser to phantomjs like line [line 63].

	// Karma configuration
	// Generated on Sat Aug 15 2015 13:40:49 GMT+0900 (KST)
	module.exports = function(config) {
	config.set({
	// base path that will be used to resolve all patterns (eg. files, exclude)
	basePath: '',
	// frameworks to use
	// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
	frameworks: ['jasmine'],
	// list of files / patterns to load in the browser
	files: [
	'test/*.js',
	'src/*.js'
	],
	// list of files to exclude
	exclude: [
	],
	// preprocess matching files before serving them to the browser
	// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
	preprocessors: {
	},
	// test results reporter to use
	// possible values: 'dots', 'progress'
	// available reporters: https://npmjs.org/browse/keyword/karma-reporter
	reporters: ['progress', 'junit'],
	junitReporter: {
	outputDir: 'test-junit-output',
	outputFile: 'test-results.xml'
	},
	// web server port
	port: 9876,
	// enable / disable colors in the output (reporters and logs)
	colors: true,
	// level of logging
	// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
	logLevel: config.LOG_INFO,
	// enable / disable watching file and executing tests whenever any file changes
	autoWatch: true,
	// start these browsers
	// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
	// browsers: ['PhantomJS'],
	browsers: ['PhantomJS'],
	// Continuous Integration mode
	// if true, Karma captures browsers, runs the tests and exits
	singleRun: true
	})
	}

view raw ci-jenkins-conf.js hosted with ❤ by GitHub

3. Create grunt task for jenkins CI

Create grunt task for Jenkins. In this example, I create "continuous" task. Look at [line 23 ~ 26] closely. Change karma config file to "jenkins-ci-conf.js". We have to use "singleRun". The "singleRun" options means that Continuous Integration mode. You can exectue the task like following command,

	module.exports = function(grunt) {
	grunt.initConfig({
	pkg: grunt.file.readJSON('package.json'),
	jshint : {
	files : [ 'Gruntfile.js', 'src/**/*.js', 'test/**/*.js' ],
	options : {
	moz : true,
	globals : {
	}
	}
	},
	watch : {
	files : [ '<%= jshint.files %>' ],
	tasks : [ 'jshint' ]
	},
	karma : {
	unit : {
	configFile : 'my.conf.js',
	},
	continuous: {
	configFile: 'jenkins-ci.conf.js',
	singleRun: true
	},
	}
	});
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-karma');
	grunt.registerTask('default', [ 'jshint' ]);
	};

view raw Gruntfile2.js hosted with ❤ by GitHub

grunt karma:continuous

4. Build PhantomJS [If jenkins is installed linux]

If you jenkins is installed to linux, you need to build it. But you use other environment, you don't need to build. Refer PhantomJS in detail.

5. Install jenkins plugins [If jenkins is installed linux]

Install Environment Injector Plugin. It is useful to configure PhantomJS path.

6. Job configuration

Let's see job configuration. I used git as a source code management.

Source code management

build trigger

gerrit trigger

Build environment
set phantomJS path in script content

Build
There are two steps in build script. The first one is install dependents module using npm install. The second one is execute grunt task like "grunt karma:continuous"

Action after build
Set path to generate test result report

7. execute result.