テストを始めるまでのヤク狩り

メモ。
色々言い訳作って JavaScript のテストを書かなかったけど、さすがにマズいので書いてみる。
なお、ここでの JavaScript のテストは Web ブラウザで動く JavaScript。

テストを始めるまでに敷居が異様に高いと感じたのでまとめる。
典型的な yak shaving!

テストフレームワーク

フルスタックな Jasmine か、色々選択できる Mocha か。

アサーションライブラリ

Mocha を選択する場合は chai がよさそう。
理由は chai だと、expects や should や xUnit 風どれでもいけるから。

テストダブル

とりあえず Sinon.js を使っとけという雰囲気。

テストランナー

Grunt.js + Jasmine と Karma + Mocha を試す。

Gurntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    jasmine: {
      myproject: {
        src: 'app/js/src/*.js',
        options: {
          specs: 'specs/*Spec.js',
          helpers: [
            'app/js/libs/jquery/dist/jquery.js',
            'app/js/libs/underscore/underscore.js',
            'app/js/libs/backbone/backbone.js',
            'app/js/src/app.js'
          ]
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jasmine');
};

$ grunt jasmine
Running "jasmine:myproject" (jasmine) task
Testing jasmine specs via PhantomJS

 myproject suite
   &#10003; expect test run

1 spec in 0.004s.
>> 0 failures

Done, without errors.

ブラウザのテストなので、どうやってファイルを require するのか分からなかったけど、
依存関係のあるものを helpers に並べたら動いた。

続いて Karma を試した。
こっちは Karma(テストランナー) + Mocha(テストフレームワーク) + expect(アサーション) + spec(レポーター)
Jasmine みたいにフルスタックじゃないから自分で色々選ぶ。

$ npm install karma-cli -g
$ npm install karma-cli --save-dev
$ npm install karma-spec-reporter --save-dev
$ npm install karma-chai --save-dev

karma.conf.js

// Karma configuration
// Generated on Sat Apr 26 2014 14:48:59 GMT+0900 (JST)

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: ['mocha', 'chai'],


    // list of files / patterns to load in the browser
    files: [
      'app/js/libs/jquery/dist/jquery.js',
      'app/js/libs/underscore/underscore.js',
      'app/js/libs/backbone/backbone.js',
      'app/js/src/*.js',
      'specs/*.js'
    ],


    // list of files to exclude
    exclude: [
      '**/*.swp'
    ],


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


    // 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
  });
};

こっちも依存しているライブラリをどうやって require するのか分からなかったが、files に並べればいける。

$ karma start 
INFO [karma]: Karma v0.12.12 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket dDU7DYAmEEMsT1SQ-nhS with id 13921662

  myproject suite
    &#10003; expect test run

PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.004 secs / 0 secs)

試さなかったもの

Gulp.js, Testem, Power-Assert
RequireJS を絡ませたテスト

方針

とりあえず、Karma + Mocha + chai + spec + Sinon にしてみよう。
Karma があると複数のブラウザでテストしたりとかをやってくれる。
Mocha + chai + spec の部分を Jasmine にも置き換える事ができそう。