AngularJSでUnit Testを行う

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