SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

AngularJSを使い始めて１週間になる。なんとなく理解できてきたので、AngularJSを使ってのUnit Testのやり方を書いておく。

• angular-seedよりプロジェクトの元をダウンロードする。GithubなのでクローンでもZipでダウンロードでもどちらでもいいです。

• Unit TestのrunnerとしてKarma(名前が変わったようだ。前はTestacularだった。）を使う。node.jsが必要なのでまずインストールする。その後Karmaをインストールする。テスト対象のソースコードが更新されたら自動的にUnit Testが実行される。これは便利だ。

angular-seedのフォルダ構成は以下の通り。

app/–>allofthefilestobeusedinproductioncss/–>cssfilesapp.css–>defaultstylesheetimg/–>imagefilesindex.html–>applayoutfile(themainhtmltemplatefileoftheapp)index-async.html–>justlikeindex.html,butloadsjsfilesasynchronouslyjs/–>javascriptfilesapp.js–>applicationcontrollers.js–>applicationcontrollersdirectives.js–>applicationdirectivesfilters.js–>customangularfiltersservices.js–>customangularserviceslib/–>angularand3rdpartyjavascriptlibrariesangular/angular.js–>thelatestangularjsangular.min.js–>thelatestminifiedangularjsangular-.js–>angularadd-onmodulesversion.txt–>versionnumberpartials/–>angularviewpartials(partialhtmltemplates)partial1.htmlpartial2.htmlconfig/testacular.conf.js–>configfileforrunningunittestswithTestacularconfig/testacular-e2e.conf.js–>configfileforrunninge2etestswithTestacularscripts/–>handyshell/js/rubyscriptse2e-test.sh–>runsend-to-endtestswithTestacular(nix)e2e-test.bat–>runsend-to-endtestswithTestacular(windows)test.bat–>autotestsunittestswithTestacular(windows)test.sh–>autotestsunittestswithTestacular(*nix)web-server.js–>simpledevelopmentwebserverbasedonnode.jstest/–>testsourcefilesandlibrariese2e/–>runner.html–>end-to-endtestrunner(openinyourbrowsertorun)scenarios.js–>end-to-endspecslib/angular/–>angulartestinglibrariesangular-mocks.js–>mocksthatreplacecertainangularservicesintestsangular-scenario.js–>angular’sscenario(end-to-end)testrunnerlibraryversion.txt–>versionfileunit/–>unitlevelspecs/testscontrollersSpec.js–>specsforcontrollersdirectivessSpec.js–>specsfordirectivesfiltersSpec.js–>specsforfiltersservicesSpec.js–>specsforservices

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は初めてだったが、使いだすと必須だ。やっぱり自動テストは書かないといかんでしょう。