Java script testing framework for around html5 studies-

JavaScript
テストフレームワーク
を諸々眺めてみる

みなさんの心の声・・・
お前は誰だ

ということで自己紹介
佐伯純
・TIS株式会社というところから来ました
・R&Dとか、新規事業創りとか
・かれこれ業界11年
・Java＋C++→Ruby(Rails) 最近はモバイルとか
・Agileで育てられました
　 @sobeit

出展：＠IT HTML5+UXhttp://www.atmarkit.co.jp/ait/kw/jstest.html

出展：＠IT Smart&Socialhttp://www.atmarkit.co.jp/fsmart/index/armobile.html

出展：＠IT Smart&Socialhttp://www.atmarkit.co.jp/ait/kw/android_o2o.html

http://tech-sketch.jp/

ということで本編
なのですが・・・

正直悩みました・・・
このメンバーの中で何話せばよいのよ、、、

JavaScriptのテスト
どうしてますか？

フレームワーク使ってる？使ってない？
■うちわの話になってしまうと・・・
　まだ
　　　
　　　「何それ美味しいの？」
　　　　　　　　　　　　　　　　　状態

今日話すこと・話さないこと
※基本、「何それ美味しいの？」と言っている人向け
■話すこと
　・各フレームワークの簡単な特徴（ざらっと）
　・自分達が導入を決める時に考えていること
■話さないこと
　・各フレームワークの「深い」中身の話
　・細かい使い方
　・超絶テクニック的な何か
・・・

フレームワーク使ったほうがよいのは？
■JavaScriptのテストに限ったことではないですが
　−テストを繰返し実行できる
　−自動化できるようになる
　−安心してバグフィックス、リファクタリング
　−テストから仕様が見通せる（要メンテ）
　−クロスブラウザチェックとかも楽になるかも
　　　　　　　　　　　　　　　　・・・etc.

導入しましょう！！
としてどれ使う？

出展：Wikipedia 「ユニットテスト・フレームワーク一覧」
意外にいっぱいあります
+α
+α

いくつかのテストフレーワーク
（とか）の比較をしてみる

単独のフレームワーク

QUnit
出自
・もともとはjQuery用のテストフレームワーク
・現在はJavaScript汎用になっている
特徴
・xUnit系に近い書式
・同期/非同期サポート
・APIによる外部ツール連携が可能
・Pluginによる機能拡張が可能
・ブラウザ＆Nodeなどサーバサイド

QUnit
■コード（例
module("sync");
test("syncFuncTest", 1, function(){
equal("hello, world!", syncFunc(), "return to expected data");
});
module("async");
test("asyncFuncTest", function(){
expect(2);
stop();
asyncFunc(function(message){
start();
ok(true, "call to callback function");
equal("hello, world!", message, "return to expected data");
});
});
←非同期のテストの場合
←start関数が呼ばれるまでランナーを停止
←ランナーを再開

QUnit
■外部ツール連携
Callbackを利用する
　Callback 例）
　　・Qunit.begin();
　　・Qunit.done();
　　・Qunit.log();
　　　　　　　・・・
　使い方はaddons下の各実装
　を参照のこと
　　phantomjsなど
■Plugin
公式サイトに載っている例
　・Canvas
　・JUnit Logger
　・Qunit for Rails
　・JsTestDriver
　　　　　　　　　・・・
t-wadaさん作 QUnit-TAPとかも
有名

Jasmine
出自
・Pivotal Labsが作成
特徴
・BDDフレームワーク
・RSpec（Ruby）ライクな書式
・spy、clock mock、非同期系サポート
等のテストを容易にする多数の機能
・クライアント＆Nodeなどサーバサイド

Mocha
出自
・Expressの作者TJ Holowaychukにより作成
特徴
・非同期系のテストをサポート
・assertion libraryを選択して利用（Chaiなど）
・TDD、BDD、exports、QUnitの書式選択可能
・レポート形式が豊富
・Node&ブラウザ

Mocha
■デフォルトはBDDスタイル
describe('calc', function() {
describe('add some num', function(){
it('1+2', function(){
...
});
});
});
■実行時指定でTDDスタイルにもできる（mocha --ui tdd 〜）
suite('calc', function(){
suite('add some num', function(){
test('1+2', function(){
assert.equal(・・・);
});
});
});

Mocha
■非同期
describe('async test', function(){
it('count exec', function(done){
myobj.tenTdsCount(function(count){
assert.equal(10000,count);
done();←doneが呼ばれるまで止まる
});
});
it(・・・)
});
hook系のメソッド（before,after,beforeEach,
afterEach）と組み合わせると、より細かい実行
制御もできる
■レポート形式
リポート形式はとても豊富で実行時に指定可
　・Dot Matrix
　・Spec
　・TAP
　・Landing Strip
　・List
　・Progress
　・nyan

JsTestDriver+α
出自
・Googleで作成
特徴
・１つ以上のブラウザにコマンドラインテスト実行可
・単体でもxUnit系スタイルでテスト記述可能
・QUnit,Jasmineとも簡単に連携できる
・要Java

（公式サイトより引用）
JsTestDriver
※詳しくは@IT連載をごらんください

Karma+α
出自
・Angular.jsチームが作成（元testacular）
特徴
・Test Runnerなのでフレームワークは選択
　(adapter:Jasmine,Mocha,QUnit）
・IDE対応（WebStrom,Cloud9）
・主要なCIツールとの統合が容易
・変更監視によるテストの自動実行
・要Node

番外：Capybara-webkit+Cucumber
Capybara-webkit
・Capybaraユーザのブラウザ操作をエミュレートするツール
・Capybara-webkitはドライバとしてwebkitを利用
Cubumber
・受入テスト向けに作られたツール
・ユーザ操作のfeatureを平易な言葉で記述することができる
・日本語での記述も可能

番外：Capybara-webkit+Cucumber
■feature,stepの例
feature
#language:ja
機能：ユーザー名を入力して APIから利用の可否を取得し表示する
シナリオ: ユーザー名を入力して確認を押下し NGであることを確認
前提： "http://localhost:8080/"を表示
もし "ユーザ名を入力"
かつ確認ボタンを押下
ならばメッセージ"利用できません"が表示される
step
前提 /"(.+)"を表示/ do |url|
visit(url)
end
もし /"(.+)"を入力/ do |name|
fill_in('user', :with => name)
end
・・・ ※詳しくは@IT連載を（ｒｙ

その他（手まわりませんでした、ごめんなさい）
・Vows
・Buster.js
・・・
　Busterとか気になりますよね

どうやって選びましょう？

選択時に考えるポイント
作るものはどんなもの？
何を使って作る？
どうやって作る？
・・・
TDD?
BDD? メンバー
は？
自動化は？
自分達の開発スタイルを決めよう！！
当たり前だけどこれ重要
プロダクト自体や開発の
持続性・継続性を支える
ものという意識を持って
選ぶ

で、最後は・・・
書いてて心地良いので
いいんじゃね？

ご清聴
ありがとうございました

Java script testing framework for around html5 studies-

More Related Content

What's hot

Java script testing framework for around html5 studies-