読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

KarmaとJasmineのJSテストを試してみました

JavaScript

f:id:tyoshikawa1106:20160315143735p:plain

Karma - Installation

Karmaのインストール

Installing Karma and plugins

自分のNodeアプリのプロジェクトに移動して次のコマンドを実行。

# Install Karma:
$ npm install karma --save-dev

# Install plugins that your project needs:
$ npm install karma-jasmine karma-chrome-launcher --save-dev
Run Karma
# Run Karma:
$ ./node_modules/karma/bin/karma start

localhost名が表示されるのでそこにアクセス。次の画面が表示されたら準備完了のはずです。
f:id:tyoshikawa1106:20160315144051p:plain

Commandline Interface

次のコマンドでkarmaコマンドが使えるようになるみたいです。

$ npm install -g karma-cli
実行例
// バージョン確認
$ karma --version
// unit test 開始
$ karma start

Karmaの設定ファイル作成

次のコマンドで設定ファイル(karma.conf.js)を作成できます。各質問はEnterキーでデフォルト値をセットできるみたいです。

$ karma init

ディレクトリ構成例

AngularJSのチュートリアル的にはこんな感じでした。
f:id:tyoshikawa1106:20160315144932p:plain
GitHub - angular/angular-phonecat: Tutorial on building an angular application.

試してみました

実際に動作するものをつくってみました。まずサンプルコードです。


git cloneでダウンロードしたところからはじめます。
f:id:tyoshikawa1106:20160315203411p:plain


まずは次のコマンドを実行します。

$ npm install


これで必要なライブラリがダウンロードされます。
f:id:tyoshikawa1106:20160315203627p:plain


つづいて次のコマンドを実行します。

$ karma start

これで無事にテストが実行されました。
f:id:tyoshikawa1106:20160315203820p:plain


この状態でtest/unitのなかに記載されているテストをエラーになるように変更してみます。
f:id:tyoshikawa1106:20160315203944p:plain


Ctrl + sで保存すると先程のテストがNGになったこと確認できると思います。
f:id:tyoshikawa1106:20160315204040p:plain


元に戻すとテストが正常に通るようになります。このとおりファイル編集後に再起動しなくてもすぐにテストが実行されます。
f:id:tyoshikawa1106:20160315204158p:plain


テスト実行後にcoverageフォルダが自動生成されます。index.htmlを確認するとテストのカバー率を確認できます。
f:id:tyoshikawa1106:20160315204309p:plain


KarmaとJasmineのJSテストの実行方法はこんな感じでした。