karmaでらくらくJavaScriptをテスト

Testaclarの後継？ことKarmaを使ってみたのでメモ。

※ 現在のカバレッジ取得は
karma で テストしながらカバレッジを取る - tetsunosukeのnotebook を参考にしてください。

Karma(元Testacular)を使って簡単にテストを実行しよう をほぼ参考にしました。

node.js をインストールしているマシンで

c:\> npm install

適切なフォルダで

c:\work> karma init

するといろいろ聞かれる。
テストフレームワークはJasmineを使うことにする。

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 adapter into files.
Press tab to list possible options. Enter to move to the next question.
＞ no

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next quest
ion.
＞ Chrome
＞

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
＞

Any files you want to exclude ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
＞

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

Config file generated at "c:\work\karma.conf.js".

こんな感じで初期設定が終わる。

下記の箇所に、ソースファイルとテストファイルの場所を追加しよう。

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER
];

こんなかんじ。

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'src/*.js',
  'spec/*.js'
];

スクリプトを書いてみる

// src/add.js
function add (a, b) {
    return a + b;
}

// spec/addSpec.js
describe("test add", function() {
    it("1+2=3", function() {
        expect(add(1, 2)).toEqual(3);
    });
})

この状態で

c:\> karma start

すると、下記のようになる。

INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 26.0 (Windows)]: Connected on socket id zdixoohRJSrQcoer04vh
Chrome 26.0 (Windows): Executed 1 of 1 SUCCESS (0.346 secs / 0.002 secs)

テストが起動しっぱなしになっているので、
この状態でテストを失敗させてみたりすると、

// spec/addSpec.js
describe("test add", function() {
    it("1+2=3", function() {
        expect(add(1, 2)).toEqual(30);
    });
});

こんな具合に自動認識される。

INFO [watcher]: Changed file "c:/work/spec/addSpec.js".
Chrome 26.0 (Windows) test add 1+2=3 FAILED
        Expected 3 to equal 30.
        Error: Expected 3 to equal 30.
            at null. (c:/work/spec/addSpec.js:4:27)
Chrome 26.0 (Windows): Executed 1 of 1 (1 FAILED) (0.339 secs / 0.008 secs)

オプションいくつか

karma.conf.js

browsers

['Chrome', 'IE'] のようにすることで複数ブラウザを扱うことができる

singleRun

singleRun = True; にすると、都度コマンドで立ち上げる形になる。CI環境で使う場合はこちら

カバレッジを見る

以下のようにして実行する

preprocessors = {
  'src/*.js': 'coverage'
};
reporters = ['progress', 'coverage'];

coverageReporter = {
  type: 'html',
  dir : 'coverage/'
};

karma start したあとに、coverageフォルダができて、その中のindex.html を開くと下記のようになります。

ファイル単位

Jasmineを入れてから～ とかしなくて良いので初期設定が結構ラクチンでした。