GulpでJavaScriptテスト

GulpベースでJavaScriptのテスト構成について書く。
以下のツールを使用する。

• Gulp
  • お馴染みタスクランナー
• Jasmine
  • JavaScriptユニットテスティングフレームワーク
• Karma
  • テストランナー
  • カバレッジレポートなども出力可能
• PhantomJS
  • ブラウザレスJavaScriptエンジン
  • JavaScriptユニットテストのときにブラウザなしで実行できる
• Sinon.JS
  • スパイ
    • 関数がどのように呼び出されたかを記録する
  • スタブ
    • 関数の戻り値をあらかじめ設定し、その結果でテストを行う
  • モック
    • 実行前に関数の実行回数など期待する結果を指定しておく
  • フェイク
    • 問い合わせるDBやサーバ処理などを単純な実装に置き換える

テストプロジェクト作成手順

（１）Node.jsをインストール
https://nodejs.org/en/

（２）下記のコマンドを実行

$ mkdir js-test-sample
$ cd js-test-sample
$ npm install -g gulp karma
$ npm install gulp gulp-util karma gulp-karma jasmine sinon phantomjs karma-jasmine karma-sinon phantomjs-prebuilt karma-phantomjs-launcher --save-dev
$ npm install karma-spec-reporter karma-coverage --save-dev
$ npm init
  > all Enter
$ karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next quest
ion.
> PhantomJS
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "C:\workspace\js-test-sample\karma.conf.js".

（３）gulpfile.jsを作成

• gulpfile.js

var gulp = require('gulp');
var karma = require('gulp-karma');
 
gulp.task('karma', function () {
  gulp.src([
    'app/js/app.js',
    'app/spec/appSpec.js'
    // add Libs if necessary
  ]).pipe(karma({
    configFile: 'karma.conf.js',
    action: 'run'
    })
  );
});

（４）テスト対象のサンプルコードを作成

• app/js/app.js

var calc = {
  add: function(x, y) {
    return x + y;
  }
}

（５）テストコードを作成

• app/spec/appSpec.js

describe('test for add function', function() {

    it('1 + 1 = 2', function() {
        expect(calc.add(1, 1)).toBe(2);
    });

    it('1 + 4 = 5', function() {
        expect(calc.add(1, 4)).toBe(5);
    });

    it('1 + 4 = 10 with Sinon Stub', function() {
        var calcStub = sinon.stub(calc, "add");
        calcStub.returns(10);
        
        expect(calc.add(1, 4)).toBe(10);
    });
    
});

（６）karma.conf.jsを編集

• karma.conf.js

// Karma configuration

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', 'sinon'],


    // list of files / patterns to load in the browser
    files: [
      'app/js/**/*.js',
      'app/spec/**/*.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: {
      'app/js/**/*.js': ['coverage']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['spec', 'coverage'],
    
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },


    // 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'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

（７）gulpコマンドを実行

$ gulp karma

コマンドラインにJasmineのテストレポートが出力され、「coverage」ディレクトリ配下にカバレッジレポートが出力される。

参考

Jasmine使い方メモ
JavaScriptでスパイ、スタブ、モックなどのテストダブルを行う（※sinonの参考）
javascriptのテストのはなし：Sinon.JS(その1)
javascriptのテストのはなし：Sinon.JS(その2)