さいきんの javascript テスト / test.js - shibuya.js 発表資料
TRANSCRIPT
![Page 1: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/1.jpg)
今風な CUI での JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
![Page 2: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/2.jpg)
今風な CUI での JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
![Page 3: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/3.jpg)
さいきんの JavaScript テスト
id:secondlife@hotchpotch
2011年3月8日火曜日
![Page 4: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/4.jpg)
提供
2011年3月8日火曜日
![Page 5: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/5.jpg)
自己紹介2011年3月8日火曜日
![Page 6: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/6.jpg)
•id:secondlife•@hotchpotch•舘野祐一 / Yuichi Tateno•Shibuya.js 発起人•Ruby, Vim, Git
2011年3月8日火曜日
![Page 7: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/7.jpg)
•クックパッド 開発基盤グループ•料理を楽しくするための裏側•サービス開発を加速させる•パフォーマンス向上•ライブラリの作成・統一•テストの仕組み作り•デプロイの仕組み作り
仕事
2011年3月8日火曜日
![Page 8: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/8.jpg)
仕事中の風景
2011年3月8日火曜日
![Page 9: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/9.jpg)
仕事中の風景
2011年3月8日火曜日
![Page 10: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/10.jpg)
本題2011年3月8日火曜日
![Page 11: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/11.jpg)
みなさん、JavaScriptのテスト普段書いてますか?
2011年3月8日火曜日
![Page 12: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/12.jpg)
おさらい
2011年3月8日火曜日
![Page 13: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/13.jpg)
JS テスティングフレームワーク
2011年3月8日火曜日
![Page 14: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/14.jpg)
昔 Test::Simple (JSAN) JsUnit (xUnit 系)
最近 Jasmine (BDD, rspecぽい)QUnit (jQuery から分離)
2011年3月8日火曜日
![Page 15: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/15.jpg)
メジャーライブラリ自体の
テスト
2011年3月8日火曜日
![Page 16: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/16.jpg)
prototype.js•unittest.js•xUnit 系•prototype.js 依存•Ruby / Rake からブラウザを起動→実行可能•Webサーバの起動
2011年3月8日火曜日
![Page 17: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/17.jpg)
jQuery
•QUnit•以前は jQuery 依存•現在は単体で実行可能
2011年3月8日火曜日
![Page 18: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/18.jpg)
YUI
•YUI Test•YUI Developer Tools に付属•Selenium, node.js などにも対応
2011年3月8日火曜日
![Page 19: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/19.jpg)
テスティングフレームワークはたくさんあるが何故あまりJava Scriptのテストは書かれないのか2011年3月8日火曜日
![Page 20: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/20.jpg)
二つの問題2011年3月8日火曜日
![Page 21: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/21.jpg)
テストの種類・特性•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
2011年3月8日火曜日
![Page 22: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/22.jpg)
テストの種類・特性↑簡単
難しい↓
•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
2011年3月8日火曜日
![Page 23: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/23.jpg)
•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト
テストの種類・特性↑簡単
難しい↓
書きたいテストを書けるようになるまでの準備が大変
2011年3月8日火曜日
![Page 24: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/24.jpg)
テスト実行環境
•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決
2011年3月8日火曜日
![Page 25: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/25.jpg)
テスト実行環境
•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決
テストを実行させる環境作りが大変
2011年3月8日火曜日
![Page 26: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/26.jpg)
現状のテスティングフレームワークでも、それらを満たしたテストは書ける、が完全なユニットテスト以外はテストを書くコストが高いし、継続的インテグレーションを回すのが難しい2011年3月8日火曜日
![Page 27: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/27.jpg)
継続的インテグレーション•多人数開発プロジェクトでは必須•安心感の担保•自動テストされないテストは保守されない・書かれない
2011年3月8日火曜日
![Page 28: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/28.jpg)
Q: 問題を解決するには?
2011年3月8日火曜日
![Page 29: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/29.jpg)
Q: 問題を解決するには?A: 目的を絞る
2011年3月8日火曜日
![Page 30: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/30.jpg)
目的を絞る•テストを書く・実行するコストを下げる•継続的インテグレーションを回せる•すべてを望まない
2011年3月8日火曜日
![Page 31: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/31.jpg)
CUI で完結するテスト•テストを書く・実行するコストを下げれる•継続的インテグレーションを簡単に回せる
2011年3月8日火曜日
![Page 32: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/32.jpg)
CUI での JS エンジン
•rhino•spidermonkey•node.js
2011年3月8日火曜日
![Page 33: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/33.jpg)
CUI エンジンの問題点•依存性の無いユニットテストなら簡単に実行可能function add(a, b) { return a + b;}assert_equal( add(1, 2), 3));
2011年3月8日火曜日
![Page 34: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/34.jpg)
CUI エンジンの問題点
•setTimeout 系が処理系により無い…•ブラウザ上での動作前提のテストができない…
2011年3月8日火曜日
![Page 35: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/35.jpg)
2011年3月8日火曜日
![Page 36: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/36.jpg)
“Envjs is a simulated browser environment written in javascript”
•JS でブラウザをシミュレート•当初は Rhino のみサポート
2011年3月8日火曜日
![Page 37: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/37.jpg)
Envjs の今•もうじき 1.3 リリース•node/Rhino/spydermonkey/rubyracer/johnson 対応•ただ、いまいちどれもちゃんと動かない…(test 通らない…)
2011年3月8日火曜日
![Page 38: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/38.jpg)
Envjs の fork•jeresig/env-js•thatcher/env-js•現在のメイン開発レポジトリ•smparkes/env-js•tharcher版の2008年後半の fork•Johnson から利用可能
2011年3月8日火曜日
![Page 39: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/39.jpg)
Johnson•2009年末頃の Spidermonkey の Ruby Binding•Ruby <=> JS の相互実行•Proxy による透過的参照•元ネタはRuby Johnson(歌手)
2011年3月8日火曜日
![Page 40: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/40.jpg)
Ruby
runtime = Johnson::Runtime.new
runtime.evaluate <<JSfunction add(a, b) { return a + b;}JSruntime['add'].call(1, 2)# => 3
2011年3月8日火曜日
![Page 41: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/41.jpg)
Ruby
runtime['rb_add'] = proc {|a, b| a + b}
runtime.evaluate <<JSRuby.puts(rb_add(1, 2)); // => 3JS
2011年3月8日火曜日
![Page 42: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/42.jpg)
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日火曜日
![Page 43: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/43.jpg)
smparkes/env-js
•Johnson で動くようにあれこれ修正•XHR の通信・細かい挙動調整など•rubygems 対応•gem install env-js
2011年3月8日火曜日
![Page 44: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/44.jpg)
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日火曜日
![Page 45: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/45.jpg)
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日火曜日
![Page 46: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/46.jpg)
2011年3月8日火曜日
![Page 47: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/47.jpg)
2011年3月8日火曜日
![Page 48: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/48.jpg)
Envjs
•思っていた以上に使える•ふつうの JavaScript なら割と問題無く動く•Johnson 等で、プロジェクトに組み込める
2011年3月8日火曜日
![Page 49: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/49.jpg)
しかし…
2011年3月8日火曜日
![Page 50: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/50.jpg)
これでCUIからテスト実行可能になったものの、Webエンジニアが書きたいテストはWebアプリ上でのJSのテストが大半だったりする2011年3月8日火曜日
![Page 51: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/51.jpg)
エンドツーエンドテスト“アプリケーションが提供するユーザインタフェースを通じた全体の振る舞いをテストすること”
WEB+DB vol.61 Rails 3 テスト最前線より2011年3月8日火曜日
![Page 52: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/52.jpg)
•JS テストの前提条件•WebアプリのHTMLが取得可能•JSを実行可能•Ajax リクエストのエミュレート
エンドツーエンドテスト
2011年3月8日火曜日
![Page 53: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/53.jpg)
http://www.flickr.com/photos/verzo/2986462106/
xcapybara
2011年3月8日火曜日
![Page 54: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/54.jpg)
•Rack アプリに対するエンドツーエンドテストを提供•Rack アプリ(Rails, Shinatra, etc ...) ならテスト実行可能•Rack レイヤーがレスポンスを返すため、Ajax テストも容易•エンジンを切り替え可能•Selenium, Envjs
Capybara
2011年3月8日火曜日
![Page 55: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/55.jpg)
•重要な箇所を重点的にJSテスト•ログイン•ユーザー登録•広告表示
クックパッドでのJSテスト例
2011年3月8日火曜日
![Page 56: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/56.jpg)
2011年3月8日火曜日
![Page 57: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/57.jpg)
2011年3月8日火曜日
![Page 58: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/58.jpg)
Rubycontext "Ajaxでのバリデーション" do it "ユーザ名が重複してない",:js => true do fill_in 'user_name', :with => "newbie" blur 'user_name' page.should have_content("使用できるニックネームです") end
2011年3月8日火曜日
![Page 59: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/59.jpg)
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日火曜日
![Page 60: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/60.jpg)
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日火曜日
![Page 61: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/61.jpg)
•JS のエンドツーエンドテストを書きたい所のみ書ける•rspec のフィルターで実現•テストを書くコストがとても少ない•完璧なブラウザと同等の挙動を求めない•Envjs は完璧でない•絞った目的を忘れるな
ポイント
2011年3月8日火曜日
![Page 62: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/62.jpg)
•ホントに動くの?ちゃんとJSのテスト書けるの?•実際、自分は導入しなかった•導入されたら簡単さにびっくりする•導入したのは、最近入社したイケメン外国人エンジニアの Jens さん•テストもみっちり追加してくれた
最初はEnvjsに懐疑的
2011年3月8日火曜日
![Page 63: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/63.jpg)
•ホントに動くの?ちゃんとJSのテスト書けるの?•実際、自分は導入しなかった•導入されたら簡単さにびっくりする•導入したのは、最近入社したイケメン外国人エンジニアの Jens さん•テストもみっちり追加してくれた
最初はEnvjsに懐疑的
2011年3月8日火曜日
![Page 64: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/64.jpg)
Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト
が書けたら書きますか?
2011年3月8日火曜日
![Page 65: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/65.jpg)
Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト
が書けたら書きますか?
A: 書かない理由がないですね
2011年3月8日火曜日
![Page 66: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/66.jpg)
•ブラウザエミュレートは、Web 開発者にとって必須•Envjs で大体カバーできるけど…
今後のCUIのJSテスト
2011年3月8日火曜日
![Page 67: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/67.jpg)
2011年3月8日火曜日
![Page 68: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/68.jpg)
•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•
Phantom.js
2011年3月8日火曜日
![Page 69: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/69.jpg)
•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•[new!]昨日初めてコンパイルできた
Phantom.js
2011年3月8日火曜日
![Page 70: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/70.jpg)
JSDeferred のテストを Phantomjs で実行
2011年3月8日火曜日
![Page 71: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/71.jpg)
•なんか速い•Jasmine でも利用でき CUI Runner でのテストが一瞬•出たばっかりなのでアツイ•CUI でのブラウザテストとの相性良い
使ってみた感想
2011年3月8日火曜日
![Page 72: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/72.jpg)
•Phantomjs 起動中にアプローチできない•動的な外部からのJS実行できない•↑ができると•他のテストと連携しやすく•capybara-phantomjs も可能
もうちょっと
2011年3月8日火曜日
![Page 73: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/73.jpg)
•最近の JS テストを紹介•CUI でのテストはそこそこやりやすく•まだまだ決定打は無い
終わりに
2011年3月8日火曜日
![Page 74: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/74.jpg)
•どれだけ簡単にテストが書けるようになるのかが鍵•目的を絞る•Rack/PSGI/WSGI などの層と結合•本当は綺麗な実装の分離が…
終わりに
2011年3月8日火曜日
![Page 75: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/75.jpg)
提供
2011年3月8日火曜日
![Page 76: さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料](https://reader033.vdocuments.site/reader033/viewer/2022042602/559222871a28abc5068b4613/html5/thumbnails/76.jpg)
ご清聴ありがとうございました
クックパッドでは一緒に働くエンジニアを
募集してます
2011年3月8日火曜日