java script testing framework for around html5 studies-
TRANSCRIPT
JavaScriptテストフレームワーク
を諸々眺めてみる
みなさんの心の声・・・
お前は誰だ
ということで自己紹介
佐伯 純
・TIS株式会社というところから来ました
・R&Dとか、新規事業創りとか
・かれこれ業界11年・Java+C++→Ruby(Rails) 最近はモバイルとか
・Agileで育てられました
@sobeit
宣伝
出展:@IT HTML5+UX http://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
ということで本編
なのですが・・・
正直悩みました・・・
このメンバーの中で何話せばよいのよ、、、
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で作成特徴 ・1つ以上のブラウザにコマンドラインテスト実行可
・単体でも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連載を(ry
その他(手まわりませんでした、ごめんなさい)
・Vows・Buster.js ・・・
Busterとか気になりますよね
どうやって選びましょう?
選択時に考えるポイント
作るものはどんなもの?
何を使って作る?
どうやって作る?
・・・TDD?BDD? メンバー
は?
自動化は?
自分達の開発スタイルを決めよう!!
当たり前だけどこれ重要
プロダクト自体や開発の
持続性・継続性を支える
ものという意識を持って
選ぶ
で、最後は・・・
書いてて心地良いので
いいんじゃね?
ご清聴
ありがとうございました