Asial Blog

Recruit! Asialで一緒に働きませんか?

準備が簡単。JavaScriptテストツール「Testacular」

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
こんにちは、中川です。

今回は、JavaScriptテストツールであるTestacularをご紹介します。
「Testacular」はAngularJS( http://angularjs.org/ )で使われ、注目され始めています。

■Testacular


http://vojtajina.github.com/testacular/

Testacularは、AngularJSのためのより良いテストフレームワークとして作られたそうです。
現時点のTestacular@0.4.0では、Jasmine と Mochaをサポートしています。

日本語紹介記事:http://node.ws/translate/2012/11/03/testacular/
原文:http://dailyjs.com/2012/10/18/testacular/

■検証環境


Mac OSX 10.7.5
Node@v0.8.14
Testacular@0.4.0

■インストール


  1. $ npm install -g testacular

■初期設定


  1. $ testacular init

各質問に答えていくと設定ファイルができあがります。
今回はテストフレームワークはjasmine、
ブラウザはChrome、Firefox、Safariとしています。
※各質問の選択肢はタブで切り替えられます。


Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine

Do you want to capture a browser automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
> Firefox
> Safari
>

Which files do you want to test ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/*.js

Any files you want to exclude ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Testacular to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "/path/to/project/testacular.conf.js".


これで、testacular.conf.jsが作成されました。
v0.4.0ではbasePathの値が怪しいので設定を修正します。

testacular.conf.js (一部)
  1. // カレントディレクトリに変更
  2. basePath = '.';

■実行



適当なテストファイルを作成して実行してみましょう。

test/sampleSpec.js
  1. describe('sample', function() {
  2.   it('test1', function() {
  3.     expect(true).toBe(true);
  4.   });
  5. });

これで準備が整いましたので、テストを実行します。

  1. $ testacular start
  2. info: Testacular server started at http://localhost:8080/
  3. info (launcher): Starting browser Chrome
  4. info (launcher): Starting browser Firefox
  5. info (launcher): Starting browser Safari
  6. info (Firefox 16.0): Connected on socket id heVo8V5eU1iZci7B3IUJ
  7. info (Safari 6.0): Connected on socket id Al7xUG-kLEIL70nl3IUL
  8. info (Chrome 23.0): Connected on socket id 93HJZyeR6AKcvl4J3IUK
  9. Firefox 16.0: Executed 1 of 1 SUCCESS (0.104 secs / 0.01 secs)
  10. Safari 6.0: Executed 1 of 1 SUCCESS (0.062 secs / 0.003 secs)
  11. Chrome 23.0: Executed 1 of 1 SUCCESS (0.133 secs / 0.003 secs)
  12. TOTAL: 3 SUCCESS

指定したブラウザが次々に起動しテストを実行し結果をコンソールに表示してくれます。



設定ファイルに指定したブラウザ以外でも、
http://localhost:8080/ にアクセスすれば対象に追加することができます。

既定ブラウザ以外の設定ファイルへの指定方法はドキュメントを確認ください。
参考:https://github.com/vojtajina/testacular/blob/master/docs/user/browsers.rst

また、ファイル監視のオプションをyes ( autoWatch = true; )にしておくと、
Testacular起動中は、ファイルを保存(更新)する度に、テストを実行してくれます。
※デフォルトでyesになっています。

さらに、JUnitのXML形式でテスト結果を出力する機能もありますので、CI環境への組み込みも可能です。
参考:https://github.com/vojtajina/testacular/blob/master/docs/user/jenkins.rst

「Testacular」を使うと、このようにとても簡単にテストを始めることができます。
JavaScriptのテスト環境もどんどん発展してきているので、複数ブラウザでのテストも捗りますね。