JavaScript
jasmine
karma

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

More than 5 years have passed since last update.


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/