JavaScriptのテストにKarmaを使ってみた

Unknown 17:09 , 0 件のコメント
JavaScriptのテストにKarmaを使う機会があったので紹介したいと思います。
今回はKarmaを動かすところまでです。


Karmaってなに？


KarmaとはJavaScript用テストランチャーです。
このツールはJasmineやMochaなどのテストフレームワークを使ってテストを行います。
元々、AngularJS用のテストフレームワークとして開発されていたそうです。
GoogleがJavaScriptテストランナー「Testacular」をオープンソース化し、途中でプロジェクト名をKarmaに変えて今に至ります。

Karma、Mocha、Chai、SinonJSを使ってテストを行います。
では実行環境を構築していきましょう。


環境構築


筆者の動作環境です。
  • MacOS X：10.9.4
  • NodeJS：0.10.29
  • npm：1.4.21

プロジェクトルートに下記package.jsonを置いて

$ npm install

を行うと必要なパッケージが揃います。


Karmaの設定


Karmaを設定しましょう。 
プロジェクトルートに下記karma.conf.jsを置いて終了です。


Karmaに用意されているinitコマンドを使用して対話形式で初期設定することも出来ます。


$ ./node_modules/karma/bin/karma init


をして、質問に答えていくとkarma.conf.jsが生成されます。

これでKarmaの設定は完了です。


テストを書いてみる


実際にテストを書いてみましょう。
テストフレームワークにはMocha、アサーションにはChaiを使います。

Mochaとは
ブラウザやNode上で動くJavaScriptのテストフレームワークです。
TDDでもBDDでもかけます。
アサーションなどは別途ライブラリが必要です。
http://visionmedia.github.io/mocha/


BDD


  • descride
    • ネスト管理可能な階層
  • it
    • 検証内容を書く
  • before/beforeEach
    • 前処理
  • after/afterEach
    • 後処理


Chaiとは
アサーションライブラリです。
should形式/expect形式/assert形式から選べます。
http://chaijs.com/



実際の手順です。
まずはテスト対象から作っていきましょう。


1.テスト対象のファイルを作る

テスト対象のファイルはkarma.conf.jsのfilesで管理されている必要があります。
`karma init`時に指定するかkarma.conf.jsに追記しましょう。

テスト対象コード



次にテストコードを書きます。

2.テストファイルを作る

テストコードを作りましょう。
こちらもテスト対象コードと同じく対象ディレクトリ配下にする必要があります。

テストコード


これで準備完了です。
実行してみましょう。


テスト実行


プロジェクトルートで下記を実行します。

$ ./node_modules/karma/bin/karma start

karmaへパスを通しておくといいと思います。


実行結果

INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket bNVYNYiUg7LDT85UO_-u with id 78213263

PhantomJS 1.9.7 (Mac OS X): Executed 1 of 1 SUCCESS (0.009 secs / 0.001 secs)



テストが通りました。

ちなみにブラウザからも見れます。
http://localhost:9876/


はい、簡単ですね。

まとめ


今回はKarmaの実行までを紹介していきました。
もう少し詳しいテストの書き方は、また別の記事で書きたいと思います。
SinonJSの使い方もどこかで書きますよー。


0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )