AngularJSのユニットテストを書く[環境構築編]


スクリーンショット 2016-05-13 18.23.07

1.使用環境

angular1系+karma+jasmineをここでは扱います。
jasmineは最近だとmochaにするといいらしいですが、一応jasmineが標準構成っぽいのでそのまま使ってみます。

2.必要なnpmパッケージを落としてくる

npm install --save-dev karma karma-jasmine jasmine-core

3.bowerでangularの準備をする

bower install --save angular angular-mocks

angular-mocksはテストコード上でDIコンテナーからインスタンスを取り出したりするのに使います。

4.karma.conf.jsの設定する

karma init

を実行することで、ウィザードにしたがって設問に答えていくとkarma.conf.jsの雛形が出来上がります。
angularとangular-mockを読み込みたいので、filesに記述を追加します

// Karma configuration
// Generated on Thu Apr 21 2016 22:31:29 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: ['jasmine'],


        // list of files / patterns to load in the browser
        files: [
            //bowerからangularライブラリを読み込む
            //開発環境なので、minifyされてないほうを選んだほうがバグトレースなどを考えると得
            'bower_components/angular/angular.js',
            'bower_components/angular-mocks/angular-mocks.js',
            'test/**/*.js'//実行するテストファイルのパスを指定(この指定方法だと、test/以下の.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'],


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


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


5.簡単にテストコードを書いてみる

test/hello_test.js
を作ってみます。
TDD的には、最初は失敗するコードを書くのが定石なので、わざと失敗するテストコードにしてみます。

describe('Testの動作確認', function () {
    it('1は1である', function () {
        expect(1).toEqual(2);// will fail
    })
});

describe('angularが動作している',function () {
   it('angularのメソッドを一つ読み込んでみる',function () {
       expect(angular).toBe(undefined);
       angular.noop();
   })
});

6.karma起動

karma start

7.テストコードを直す

テストコードで1==2であること、angularがundefinedであることを期待しているので当然テストが失敗します。
karmaを立ち上げたまま、テストコードを修正してみます

describe('Testの動作確認', function () {
    it('1は1である', function () {
        expect(1).toEqual(1);
    })
});

describe('angularが動作している',function () {
   it('angularのメソッドを一つ読み込んでみる',function () {
       expect(angular).not.toBe(undefined);
       angular.noop();
   })
});

保存をすると、karmaが自動で変更を検知して再テストをしてくれます。便利!
これでテストがすべて通るはず。

8.package.jsonでコマンドのインタフェースを統一してみる

package.jsonの中に以下を追記します。

  "scripts": {
    "test":"node_modules/karma/bin/karma start"
  },

これで、

npm test

でテストができるようになりました。npmでコマンドのインタフェースを統一しておくと綺麗です。