エンジニア、デザイナどちらにも知っててほしい。Karmaを使ったjavascriptのテスト駆動開発（javascript編）入門

今では、使っていないサイトの方が珍しいと思えるくらい当たり前の技術になったjavascript

エンジニアだけではなく、デザイナも書ける必要がある分野

では、どれだけの人がちゃんとテストをしているのでしょう。。

意外と少ないのではないかなとおもいます。（個人的見解です( ｰ`дｰ´)ｷﾘｯ

なので、とりあえず入門編という感じでまとめてみました

（Qiitaというサイトに投稿した内容と同じですが）

Karmaって何？

簡単に言うとnode.jsで作成された、テスト実行環境
間違ってたら(m´・ω・｀)m ｺﾞﾒﾝ…

Jasmineって何？

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

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

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

ではでは

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

Bash

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

カレントディレクトリにkarmaをインストール

Bash

$ npm install karma

karma初期化

Bash

$ 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ってファイルが出来ました。

修正します。

Bash

$ vim karma.conf.js

karma.conf.js

 10 files = [
 11   JASMINE,
-- 12   JASMINE_ADAPTER
++ 12   JASMINE_ADAPTER,
++ 13   'spec/*.js'
 14 ];

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

Bash

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

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

Bash

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

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

Bash

$ 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を実行したターミナルを見ると

Bash

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/

Qiita
http://qiita.com/shinofara@github/items/b3677ffdfc0c7e45e8d4