【javascriptを使う人に知って貰いたい(エンジニア、デザイナ問わず)】karmaを使ったテスト駆動開発入門(ついでにJasmineも)

  • 396
    いいね
  • 5
    コメント
この記事は最終更新日から1年以上が経過しています。

Karmaって何?

簡単に言うとnode.jsで作成された、テスト実行環境
間違ってたら(m´・ω・`)m ゴメン…

Jasmineって何?

Karmaはあくまでの実行環境なので
テストの実処理を行うライブラリが必要
それがこれ
他にもmocha + (chai or expect)とかあるけど
とりあえず、今回はJasmine

能書きはいいから、実際の作業をはよ

以下の2つは、インストール済みである事。
* node
* npm

ではでは

作業用ディレクトリ作成&移動

$ mkdir -p karma/spec
$ mkdir -p karma/src
$ cd karma

グローバル領域にkarmaをインストール
※- gがないと動かない事が多いため、修正しました。

$ npm install -g karma

karma初期化

$ 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 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 question.
> 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

karma.conf.jsってファイルが出来ました。

修正します。

$ vim karma.conf.js
karma.conf.js
files: [
  'spec/*.js'
],

簡単なテストケースを作成します。

$ vim spec/HelloSpec.js
spec/HelloSpec.js
/**
 * http://pivotal.github.io/jasmine/
 */
describe("Hello Test", function() {

  it("test", function() {
    var a = 'test1';//actual テストする値
    var e = 'test';//expect 期待値
    expect(a).toEqual(e);
  });
});

別ターミナルで次のコマンドを実行

$ cd work/karma
$ karma start karma.conf.js

するとbrowserが立ち上がり、ターミナルにテスト結果が!!

$ karma start karma.conf.js 
INFO [karma]: Karma server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 27.0 (Mac)]: Connected on socket id FqwLPzInsYRW6baEegdg
Chrome 27.0 (Mac) Hello Test test FAILED
    Expected 'test1' to equal 'test'.
    Error: Expected 'test1' to equal 'test'.
        at null.<anonymous> (work/karma/spec/HelloSpec.js:9:15)
Chrome 27.0 (Mac): Executed 1 of 1 (1 FAILED) (0.107 secs / 0.02 secs)

テスト駆動開発は、まずはerrorを起こすことから始まります。
では、次はテストを成功させてみましょう。
karmaのいいところは、テストファイルを修正して、保存すれば
テストが実行されることです。

監視最高!!!

では、修正

spec/HelloSpec.js
/**
 * http://pivotal.github.io/jasmine/
 */
describe("Hello Test", function() {

  it("test", function() {
    var a = 'test';//actual テストする値
    var e = 'test';//expect 期待値
    expect(a).toEqual(e);
  });
});

今回は、var aの値を変更しました。
これで、a = eとなります。
そして、karmaを実行したターミナルを見ると

INFO [watcher]: Changed file "/work/karma/spec/HelloSpec.js".
Chrome 27.0 (Mac): Executed 1 of 1 SUCCESS (0.293 secs / 0.011 secs)

SUCCESS

Javascriptでのテストをもっと流行らせたいです。J

参考

Karma 公式ページ
http://karma-runner.github.io/0.8/index.html

Jasmine コマンド一覧
http://pivotal.github.io/jasmine/