• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Java script testing framework for  around html5 studies-
 

Java script testing framework for around html5 studies-

on

  • 3,455 views

 

Statistics

Views

Total Views
3,455
Views on SlideShare
3,314
Embed Views
141

Actions

Likes
10
Downloads
13
Comments
0

3 Embeds 141

http://light-road.blogspot.jp 110
https://twitter.com 27
http://light-road.blogspot.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Java script testing framework for  around html5 studies- Java script testing framework for around html5 studies- Presentation Transcript

    • 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で作成特徴・1つ以上のブラウザにコマンドラインテスト実行可・単体でもxUnit系スタイルでテスト記述可能・QUnit,Jasmineとも簡単に連携できる・要Java
    • (公式サイトより引用)JsTestDriver※詳しくは@IT連載をごらんください
    • Karma+α出自・Angular.jsチームが作成(元testacular)特徴・Test Runnerなのでフレームワークは選択 (adapter:Jasmine,Mocha,QUnit)・IDE対応(WebStrom,Cloud9)・主要なCIツールとの統合が容易・変更監視によるテストの自動実行・要Node
    • 番外:Capybara-webkit+CucumberCapybara-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? メンバーは?自動化は?自分達の開発スタイルを決めよう!!当たり前だけどこれ重要プロダクト自体や開発の持続性・継続性を支えるものという意識を持って選ぶ
    • で、最後は・・・書いてて心地良いのでいいんじゃね?
    • ご清聴ありがとうございました