さいきんの javascript テスト / test.js - shibuya.js 発表資料
Post on 30-Jun-2015
16.795 Views
Preview:
TRANSCRIPT
今風な CUI での JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
今風な CUI での JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
さいきんの JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
提供
2011年3月8日火曜日
自己紹介2011年3月8日火曜日
•id:secondlife•@hotchpotch•舘野祐一 / Yuichi Tateno•Shibuya.js 発起人•Ruby, Vim, Git
2011年3月8日火曜日
•クックパッド 開発基盤グループ•料理を楽しくするための裏側•サービス開発を加速させる•パフォーマンス向上•ライブラリの作成・統一•テストの仕組み作り•デプロイの仕組み作り
仕事
2011年3月8日火曜日
仕事中の風景
2011年3月8日火曜日
仕事中の風景
2011年3月8日火曜日
本題2011年3月8日火曜日
みなさん、JavaScriptのテスト普段書いてますか?
2011年3月8日火曜日
おさらい
2011年3月8日火曜日
JS テスティングフレームワーク
2011年3月8日火曜日
昔 Test::Simple (JSAN) JsUnit (xUnit 系)
最近 Jasmine (BDD, rspecぽい)QUnit (jQuery から分離)
2011年3月8日火曜日
メジャーライブラリ自体の
テスト
2011年3月8日火曜日
prototype.js•unittest.js•xUnit 系•prototype.js 依存•Ruby / Rake からブラウザを起動→実行可能•Webサーバの起動
2011年3月8日火曜日
jQuery
•QUnit•以前は jQuery 依存•現在は単体で実行可能
2011年3月8日火曜日
YUI
•YUI Test•YUI Developer Tools に付属•Selenium, node.js などにも対応
2011年3月8日火曜日
テスティングフレームワークはたくさんあるが何故あまりJava Scriptのテストは書かれないのか2011年3月8日火曜日
二つの問題2011年3月8日火曜日
テストの種類・特性•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
2011年3月8日火曜日
テストの種類・特性↑簡単
難しい↓
•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
2011年3月8日火曜日
•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
テストの種類・特性↑簡単
難しい↓
書きたいテストを書けるようになるまでの準備が大変
2011年3月8日火曜日
テスト実行環境
•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決
2011年3月8日火曜日
テスト実行環境
•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決
テストを実行させる環境作りが大変
2011年3月8日火曜日
現状のテスティングフレームワークでも、それらを満たしたテストは書ける、が完全なユニットテスト以外はテストを書くコストが高いし、継続的インテグレーションを回すのが難しい2011年3月8日火曜日
継続的インテグレーション•多人数開発プロジェクトでは必須•安心感の担保•自動テストされないテストは保守されない・書かれない
2011年3月8日火曜日
Q: 問題を解決するには?
2011年3月8日火曜日
Q: 問題を解決するには?A: 目的を絞る
2011年3月8日火曜日
目的を絞る•テストを書く・実行するコストを下げる•継続的インテグレーションを回せる•すべてを望まない
2011年3月8日火曜日
CUI で完結するテスト•テストを書く・実行するコストを下げれる•継続的インテグレーションを簡単に回せる
2011年3月8日火曜日
CUI での JS エンジン
•rhino•spidermonkey•node.js
2011年3月8日火曜日
CUI エンジンの問題点•依存性の無いユニットテストなら簡単に実行可能function add(a, b) { return a + b;}assert_equal( add(1, 2), 3));
2011年3月8日火曜日
CUI エンジンの問題点
•setTimeout 系が処理系により無い…•ブラウザ上での動作前提のテストができない…
2011年3月8日火曜日
2011年3月8日火曜日
“Envjs is a simulated browser environment written in javascript”
•JS でブラウザをシミュレート•当初は Rhino のみサポート
2011年3月8日火曜日
Envjs の今•もうじき 1.3 リリース•node/Rhino/spydermonkey/rubyracer/johnson 対応•ただ、いまいちどれもちゃんと動かない…(test 通らない…)
2011年3月8日火曜日
Envjs の fork•jeresig/env-js•thatcher/env-js•現在のメイン開発レポジトリ•smparkes/env-js•tharcher版の2008年後半の fork•Johnson から利用可能
2011年3月8日火曜日
Johnson•2009年末頃の Spidermonkey の Ruby Binding•Ruby <=> JS の相互実行•Proxy による透過的参照•元ネタはRuby Johnson(歌手)
2011年3月8日火曜日
Ruby
runtime = Johnson::Runtime.new
runtime.evaluate <<JSfunction add(a, b) { return a + b;}JSruntime['add'].call(1, 2)# => 3
2011年3月8日火曜日
Ruby
runtime['rb_add'] = proc {|a, b| a + b}
runtime.evaluate <<JSRuby.puts(rb_add(1, 2)); // => 3JS
2011年3月8日火曜日
JSvar ary = (new Ruby.Range(1, 5)).to_a();
for (var i = 0; i < ary.length; i++) { Ruby.puts(ary[i]); // => 1, 2, 3, 4, 5}
2011年3月8日火曜日
smparkes/env-js
•Johnson で動くようにあれこれ修正•XHR の通信・細かい挙動調整など•rubygems 対応•gem install env-js
2011年3月8日火曜日
Ruby
runtime = Johnson::Runtime.newruntime.extend Envjs::Runtime
window = runtime['window']window.location.href = ‘http://cookpad.com/’runtime.waitwindow.jQuery('p > span').length# => 5
2011年3月8日火曜日
Rubyruntime['ok'] = proc {|msg| assert true, msg }runtime['ng'] = proc {|msg| assert false, msg }runtime.evaluate jsd_test_sourceruntime.waitassert_equal assert_count , total, "All Tests running!"
応用編 JSDeferred のテストを Envjs で実行
2011年3月8日火曜日
2011年3月8日火曜日
2011年3月8日火曜日
Envjs
•思っていた以上に使える•ふつうの JavaScript なら割と問題無く動く•Johnson 等で、プロジェクトに組み込める
2011年3月8日火曜日
しかし…
2011年3月8日火曜日
これでCUIからテスト実行可能になったものの、Webエンジニアが書きたいテストはWebアプリ上でのJSのテストが大半だったりする2011年3月8日火曜日
エンドツーエンドテスト“アプリケーションが提供するユーザインタフェースを通じた全体の振る舞いをテストすること”
WEB+DB vol.61 Rails 3 テスト最前線より2011年3月8日火曜日
•JS テストの前提条件•WebアプリのHTMLが取得可能•JSを実行可能•Ajax リクエストのエミュレート
エンドツーエンドテスト
2011年3月8日火曜日
http://www.flickr.com/photos/verzo/2986462106/
xcapybara
2011年3月8日火曜日
•Rack アプリに対するエンドツーエンドテストを提供•Rack アプリ(Rails, Shinatra, etc ...) ならテスト実行可能•Rack レイヤーがレスポンスを返すため、Ajax テストも容易•エンジンを切り替え可能•Selenium, Envjs
Capybara
2011年3月8日火曜日
•重要な箇所を重点的にJSテスト•ログイン•ユーザー登録•広告表示
クックパッドでのJSテスト例
2011年3月8日火曜日
2011年3月8日火曜日
2011年3月8日火曜日
Rubycontext "Ajaxでのバリデーション" do it "ユーザ名が重複してない",:js => true do fill_in 'user_name', :with => "newbie" blur 'user_name' page.should have_content("使用できるニックネームです") end
2011年3月8日火曜日
Rubycontext "Ajaxでのバリデーション" do it "ユーザ名が重複してない",:js => true do fill_in 'user_name', :with => "newbie" blur 'user_name' page.should have_content("使用できるニックネームです") end
JSAjax
2011年3月8日火曜日
Rubyit "ユーザ名が重複していたらエラーメッセージが表示される", :js => true do User.make(:user_name => "sakura") fill_in 'user_name', :with => "sakura" blur 'user_name' page.should have_content("そのニックネームはすでに使われています。")end
2011年3月8日火曜日
•JS のエンドツーエンドテストを書きたい所のみ書ける•rspec のフィルターで実現•テストを書くコストがとても少ない•完璧なブラウザと同等の挙動を求めない•Envjs は完璧でない•絞った目的を忘れるな
ポイント
2011年3月8日火曜日
•ホントに動くの?ちゃんとJSのテスト書けるの?•実際、自分は導入しなかった•導入されたら簡単さにびっくりする•導入したのは、最近入社したイケメン外国人エンジニアの Jens さん•テストもみっちり追加してくれた
最初はEnvjsに懐疑的
2011年3月8日火曜日
•ホントに動くの?ちゃんとJSのテスト書けるの?•実際、自分は導入しなかった•導入されたら簡単さにびっくりする•導入したのは、最近入社したイケメン外国人エンジニアの Jens さん•テストもみっちり追加してくれた
最初はEnvjsに懐疑的
2011年3月8日火曜日
Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト
が書けたら書きますか?
2011年3月8日火曜日
Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト
が書けたら書きますか?
A: 書かない理由がないですね
2011年3月8日火曜日
•ブラウザエミュレートは、Web 開発者にとって必須•Envjs で大体カバーできるけど…
今後のCUIのJSテスト
2011年3月8日火曜日
2011年3月8日火曜日
•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•
Phantom.js
2011年3月8日火曜日
•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•[new!]昨日初めてコンパイルできた
Phantom.js
2011年3月8日火曜日
JSDeferred のテストを Phantomjs で実行
2011年3月8日火曜日
•なんか速い•Jasmine でも利用でき CUI Runner でのテストが一瞬•出たばっかりなのでアツイ•CUI でのブラウザテストとの相性良い
使ってみた感想
2011年3月8日火曜日
•Phantomjs 起動中にアプローチできない•動的な外部からのJS実行できない•↑ができると•他のテストと連携しやすく•capybara-phantomjs も可能
もうちょっと
2011年3月8日火曜日
•最近の JS テストを紹介•CUI でのテストはそこそこやりやすく•まだまだ決定打は無い
終わりに
2011年3月8日火曜日
•どれだけ簡単にテストが書けるようになるのかが鍵•目的を絞る•Rack/PSGI/WSGI などの層と結合•本当は綺麗な実装の分離が…
終わりに
2011年3月8日火曜日
提供
2011年3月8日火曜日
ご清聴ありがとうございました
クックパッドでは一緒に働くエンジニアを
募集してます
2011年3月8日火曜日
top related