AngularJSを使い始めて１週間になる。なんとなく理解できてきたので、AngularJSを使ってのUnit Testのやり方を書いておく。
- angular-seedよりプロジェクトの元をダウンロードする。GithubなのでクローンでもZipでダウンロードでもどちらでもいいです。
- Unit TestのrunnerとしてKarma(名前が変わったようだ。前はTestacularだった。）を使う。node.jsが必要なのでまずインストールする。その後Karmaをインストールする。テスト対象のソースコードが更新されたら自動的にUnit Testが実行される。これは便利だ。
- angular-seedのフォルダ構成は以下の通り。
app/ --> all of the files to be used in production css/ --> css files app.css --> default stylesheet img/ --> image files index.html --> app layout file (the main html template file of the app) index-async.html --> just like index.html, but loads js files asynchronously js/ --> javascript files app.js --> application controllers.js --> application controllers directives.js --> application directives filters.js --> custom angular filters services.js --> custom angular services lib/ --> angular and 3rd party javascript libraries angular/ angular.js --> the latest angular js angular.min.js --> the latest minified angular js angular-*.js --> angular add-on modules version.txt --> version number partials/ --> angular view partials (partial html templates) partial1.html partial2.html config/testacular.conf.js --> config file for running unit tests with Testacular config/testacular-e2e.conf.js --> config file for running e2e tests with Testacular scripts/ --> handy shell/js/ruby scripts e2e-test.sh --> runs end-to-end tests with Testacular (*nix) e2e-test.bat --> runs end-to-end tests with Testacular (windows) test.bat --> autotests unit tests with Testacular (windows) test.sh --> autotests unit tests with Testacular (*nix) web-server.js --> simple development webserver based on node.js test/ --> test source files and libraries e2e/ --> runner.html --> end-to-end test runner (open in your browser to run) scenarios.js --> end-to-end specs lib/ angular/ --> angular testing libraries angular-mocks.js --> mocks that replace certain angular services in tests angular-scenario.js --> angular's scenario (end-to-end) test runner library version.txt --> version file unit/ --> unit level specs/tests controllersSpec.js --> specs for controllers directivessSpec.js --> specs for directives filtersSpec.js --> specs for filters servicesSpec.js --> specs for services
test/unit以下にテストを書いていく。
- Unit TestのフレームワークはJasmineを使っている。Jasmineでなければいけないことはいが、とくにこだわりがないのならJasmineでいいのでは。ControllersSpec.jsはこんな感じになっている。
'use strict';
/* jasmine specs for controllers go here */
describe('MyCtrl1', function(){
var myCtrl1;
beforeEach(function(){
myCtrl1 = new MyCtrl1();
});
it('should ....', function() {
//spec body
});
});
describe('MyCtrl2', function(){
var myCtrl2;
beforeEach(function(){
myCtrl2 = new MyCtrl2();
});
it('should ....', function() {
//spec body
});
});
- テスト実行はコマンドラインから行う。script直下のtest.shを起動する。
npm config set https-proxy http://10.10.40.99:8080 ./scripts/test.sh
すると新しいUnit Test用のchromeが起動され、自動的にテストが実行される。すでにchromeを起動している場合は２つ目のchromeが起動される。テスト用chromeはバックランドで動いていればいいだけなので、小さくしてもいいし、隠してもいいので邪魔にならないところにおいておく。
test.shを起動したターミナルに結果が表示される。
Starting Testacular Server (http://vojtajina.github.com/testacular) ------------------------------------------------------------------- INFO [testacular]: Testacular server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 25.0 (Mac)]: Connected on socket id kOH8yR-070Vtb5m8pwXt Chrome 25.0 (Mac): Executed 5 of 5 SUCCESS (0.13 secs / 0.022 secs)
こんな感じで５件のテストが成功したと教えてくれる。
TDDで開発するならここからがスタートとなる。こんな感じでの開発開始となる。JavascriptのUnit Testは初めてだったが、使いだすと必須だ。やっぱり自動テストは書かないといかんでしょう。