何かと面倒なクライアントサイドのテストを Karma で行う手順をまとめます。ついでに TypeScript と AngularJS を組み合わせてみます。

必要な知識

• NodeJS / npm
• bower
• TypeScript
• tsd

必要なものをインストールする

依存モジュールなどを入れていきます。TypeScript 、 bower 、 tsd などがなければ先に入れておきましょう。

karma-cli で karma コマンドが入ります。

$ npm install -g karma-cli
$ npm install karma karma-typescript-preprocessor
$ bower install assert angular angular-mocks
$ tsd query angular angular-mocks assert mocha -rosa install

モージュールを用意する

例として頭に nice とつけるだけの filter を作成します。

///<reference path="typings/tsd.d.ts" />

angular.module('niceModule', []).filter('niceFilter', () => {
return (s: string): string => 'nice ' + s;
});

テストの準備する

テストコードを書いて、適当な名前で保存しておきます。

///<reference path="typings/tsd.d.ts" />

describe('niceModule - niceFilter', () => {

beforeEach(module('niceModule'));

it('should return nice string', inject(($filter) => {
    var niceFilter = $filter('niceFilter');
    assert.strictEqual(niceFilter('person'), 'nice person');
}));

});

次に Karma の設定ファイルや依存モジュールを用意するために karma init を実行します。いろいろ聞かれるので答えていきましょう。すると karma.conf.js というファイルが作られるはずです。

更に preprocessors に TypeScript 用の設定などを追加していきます。

module.exports = function(config) {
config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
        'bower_components/angular/angular.js',
        'bower_components/angular-mocks/angular-mocks.js',
        'bower_components/assert/assert.js',
        '*.ts'
    ],
    exclude: [],
    preprocessors: {
        '**/*.ts': ['typescript'] // TypeScript 用の設定
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['Chrome'],
    singleRun: true
});
};

こんな感じに編集すればOKです。

テストを実行する

以下のコマンドを実行すればテストが実行されます。Chrome のウィンドウが開き、実際のテストはそこで行われます。

$ karma start

問題がなければ SUCCESS と表示されるはずです。

もし問題があればターミナルにエラーメッセージと一緒に FAILED と表示されます。モジュールの 'nice ' を 'mice ' に書き換えるなどするとわかります。

まとめ

• $ npm install -g karma-cli で karma コマンドが入る
• $ karma init で設定ファイル、依存関係を準備する
• $ karma start でテストを実行