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

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? メンバー

は？

自動化は？

自分達の開発スタイルを決めよう！！

当たり前だけどこれ重要

プロダクト自体や開発の

持続性・継続性を支える

ものという意識を持って

選ぶ

で、最後は・・・

書いてて心地良いので

いいんじゃね？

ご清聴

ありがとうございました