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のテストに限ったことではないですが −テストを繰返し実行できる −自動化できるようになる −安心してバグフィックス、リファクタリング −テストから仕様が見通せる(要メンテ) −クロスブラ...
導入しましょう!!としてどれ使う?
出展:Wikipedia 「ユニットテスト・フレームワーク一覧」意外にいっぱいあります+α+α
いくつかのテストフレーワーク(とか)の比較をしてみる
単独のフレームワーク
QUnit出自・もともとはjQuery用のテストフレームワーク・現在はJavaScript汎用になっている特徴・xUnit系に近い書式・同期/非同期サポート・APIによる外部ツール連携が可能・Pluginによる機能拡張が可能・ブラウザ&Node...
QUnit■コード(例module("sync");test("syncFuncTest", 1, function(){equal("hello, world!", syncFunc(), "return to expected data")...
QUnit■外部ツール連携Callbackを利用する Callback 例)  ・Qunit.begin();  ・Qunit.done();  ・Qunit.log();       ・・・ 使い方はaddons下の各実装 を参照のこと  p...
Jasmine出自・Pivotal Labsが作成特徴・BDDフレームワーク・RSpec(Ruby)ライクな書式・spy、clock mock、非同期系サポート等のテストを容易にする多数の機能・クライアント&Nodeなどサーバサイド
割愛!!
Mocha出自・Expressの作者TJ Holowaychukにより作成特徴・非同期系のテストをサポート・assertion libraryを選択して利用(Chaiなど)・TDD、BDD、exports、QUnitの書式選択可能・レポート形式...
Mocha■デフォルトはBDDスタイルdescribe(calc, function() {describe(add some num, function(){it(1+2, function(){...});});});■実行時指定でTDDス...
Mocha■非同期describe(async test, function(){it(count exec, function(done){myobj.tenTdsCount(function(count){assert.equal(1000...
合わせて使う
JsTestDriver+α出自・Googleで作成特徴・1つ以上のブラウザにコマンドラインテスト実行可・単体でもxUnit系スタイルでテスト記述可能・QUnit,Jasmineとも簡単に連携できる・要Java
(公式サイトより引用)JsTestDriver※詳しくは@IT連載をごらんください
Karma+α出自・Angular.jsチームが作成(元testacular)特徴・Test Runnerなのでフレームワークは選択 (adapter:Jasmine,Mocha,QUnit)・IDE対応(WebStrom,Cloud9)・主要...
番外:Capybara-webkit+CucumberCapybara-webkit・Capybaraユーザのブラウザ操作をエミュレートするツール・Capybara-webkitはドライバとしてwebkitを利用Cubumber・受入テスト向け...
番外:Capybara-webkit+Cucumber■feature,stepの例feature#language:ja機能: ユーザー名を入力して APIから利用の可否を取得し表示するシナリオ: ユーザー名を入力して確認を押下し NGである...
その他(手まわりませんでした、ごめんなさい)・Vows・Buster.js・・・ Busterとか気になりますよね
どうやって選びましょう?
選択時に考えるポイント作るものはどんなもの?何を使って作る?どうやって作る?・・・TDD?BDD? メンバーは?自動化は?自分達の開発スタイルを決めよう!!当たり前だけどこれ重要プロダクト自体や開発の持続性・継続性を支えるものという意識を持って選ぶ
で、最後は・・・書いてて心地良いのでいいんじゃね?
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Java script testing framework for around html5 studies-

3,401 views

Published on

0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,401
On SlideShare
0
From Embeds
0
Number of Embeds
149
Actions
Shares
0
Downloads
16
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Java script testing framework for around html5 studies-

  1. 1. JavaScriptテストフレームワークを諸々眺めてみる
  2. 2. みなさんの心の声・・・お前は誰だ
  3. 3. ということで自己紹介佐伯 純・TIS株式会社というところから来ました・R&Dとか、新規事業創りとか・かれこれ業界11年・Java+C++→Ruby(Rails) 最近はモバイルとか・Agileで育てられました  @sobeit
  4. 4. 宣伝
  5. 5. 出展:@IT HTML5+UXhttp://www.atmarkit.co.jp/ait/kw/jstest.html
  6. 6. 出展:@IT Smart&Socialhttp://www.atmarkit.co.jp/fsmart/index/armobile.html
  7. 7. 出展:@IT Smart&Socialhttp://www.atmarkit.co.jp/ait/kw/android_o2o.html
  8. 8. http://tech-sketch.jp/
  9. 9. ということで本編なのですが・・・
  10. 10. 正直悩みました・・・このメンバーの中で何話せばよいのよ、、、
  11. 11. JavaScriptのテストどうしてますか?
  12. 12. フレームワーク使ってる?使ってない?■うちわの話になってしまうと・・・ まだ      「何それ美味しいの?」                 状態
  13. 13. 今日話すこと・話さないこと※基本、「何それ美味しいの?」と言っている人向け■話すこと ・各フレームワークの簡単な特徴(ざらっと) ・自分達が導入を決める時に考えていること■話さないこと ・各フレームワークの「深い」中身の話 ・細かい使い方 ・超絶テクニック的な何か・・・
  14. 14. フレームワーク使ったほうがよいのは?■JavaScriptのテストに限ったことではないですが −テストを繰返し実行できる −自動化できるようになる −安心してバグフィックス、リファクタリング −テストから仕様が見通せる(要メンテ) −クロスブラウザチェックとかも楽になるかも                ・・・etc.
  15. 15. 導入しましょう!!としてどれ使う?
  16. 16. 出展:Wikipedia 「ユニットテスト・フレームワーク一覧」意外にいっぱいあります+α+α
  17. 17. いくつかのテストフレーワーク(とか)の比較をしてみる
  18. 18. 単独のフレームワーク
  19. 19. QUnit出自・もともとはjQuery用のテストフレームワーク・現在はJavaScript汎用になっている特徴・xUnit系に近い書式・同期/非同期サポート・APIによる外部ツール連携が可能・Pluginによる機能拡張が可能・ブラウザ&Nodeなどサーバサイド
  20. 20. 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関数が呼ばれるまでランナーを停止←ランナーを再開
  21. 21. QUnit■外部ツール連携Callbackを利用する Callback 例)  ・Qunit.begin();  ・Qunit.done();  ・Qunit.log();       ・・・ 使い方はaddons下の各実装 を参照のこと  phantomjsなど■Plugin公式サイトに載っている例 ・Canvas ・JUnit Logger ・Qunit for Rails ・JsTestDriver         ・・・t-wadaさん作 QUnit-TAPとかも有名       
  22. 22. Jasmine出自・Pivotal Labsが作成特徴・BDDフレームワーク・RSpec(Ruby)ライクな書式・spy、clock mock、非同期系サポート等のテストを容易にする多数の機能・クライアント&Nodeなどサーバサイド
  23. 23. 割愛!!
  24. 24. Mocha出自・Expressの作者TJ Holowaychukにより作成特徴・非同期系のテストをサポート・assertion libraryを選択して利用(Chaiなど)・TDD、BDD、exports、QUnitの書式選択可能・レポート形式が豊富・Node&ブラウザ
  25. 25. 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(・・・);});});});
  26. 26. 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
  27. 27. 合わせて使う
  28. 28. JsTestDriver+α出自・Googleで作成特徴・1つ以上のブラウザにコマンドラインテスト実行可・単体でもxUnit系スタイルでテスト記述可能・QUnit,Jasmineとも簡単に連携できる・要Java
  29. 29. (公式サイトより引用)JsTestDriver※詳しくは@IT連載をごらんください
  30. 30. Karma+α出自・Angular.jsチームが作成(元testacular)特徴・Test Runnerなのでフレームワークは選択 (adapter:Jasmine,Mocha,QUnit)・IDE対応(WebStrom,Cloud9)・主要なCIツールとの統合が容易・変更監視によるテストの自動実行・要Node
  31. 31. 番外:Capybara-webkit+CucumberCapybara-webkit・Capybaraユーザのブラウザ操作をエミュレートするツール・Capybara-webkitはドライバとしてwebkitを利用Cubumber・受入テスト向けに作られたツール・ユーザ操作のfeatureを平易な言葉で記述することができる・日本語での記述も可能
  32. 32. 番外: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
  33. 33. その他(手まわりませんでした、ごめんなさい)・Vows・Buster.js・・・ Busterとか気になりますよね
  34. 34. どうやって選びましょう?
  35. 35. 選択時に考えるポイント作るものはどんなもの?何を使って作る?どうやって作る?・・・TDD?BDD? メンバーは?自動化は?自分達の開発スタイルを決めよう!!当たり前だけどこれ重要プロダクト自体や開発の持続性・継続性を支えるものという意識を持って選ぶ
  36. 36. で、最後は・・・書いてて心地良いのでいいんじゃね?
  37. 37. ご清聴ありがとうございました

×