さいきんの javascript テスト / test.js - shibuya.js 発表資料

今風な CUI での JavaScript テスト

id:secondlife@hotchpotch

2011年3月8日火曜日

さいきんの JavaScript テスト

id:secondlife@hotchpotch


提供


自己紹介2011年3月8日火曜日

•id:secondlife•@hotchpotch•舘野祐一 / Yuichi Tateno•Shibuya.js 発起人•Ruby, Vim, Git


•クックパッド開発基盤グループ•料理を楽しくするための裏側•サービス開発を加速させる•パフォーマンス向上•ライブラリの作成・統一•テストの仕組み作り•デプロイの仕組み作り

仕事


仕事中の風景


本題2011年3月8日火曜日

みなさん、JavaScriptのテスト普段書いてますか？


おさらい


JS テスティングフレームワーク


昔 Test::Simple (JSAN) JsUnit (xUnit 系)

最近 Jasmine (BDD, rspecぽい)QUnit (jQuery から分離)


メジャーライブラリ自体の

テスト


prototype.js•unittest.js•xUnit 系•prototype.js 依存•Ruby / Rake からブラウザを起動→実行可能•Webサーバの起動


jQuery

•QUnit•以前は jQuery 依存•現在は単体で実行可能


YUI

•YUI Test•YUI Developer Tools に付属•Selenium, node.js などにも対応


テスティングフレームワークはたくさんあるが何故あまりJava Scriptのテストは書かれないのか2011年3月8日火曜日

二つの問題2011年3月8日火曜日

テストの種類・特性•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト


テストの種類・特性↑簡単

難しい↓

•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト


•依存性のないユニットテスト•DOM に対するテスト•非同期なテスト•setTimeout, Ajax•Ajaxや生成されるHTMLなどデータを伴うテスト

テストの種類・特性↑簡単

難しい↓

書きたいテストを書けるようになるまでの準備が大変


テスト実行環境

•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決


テスト実行環境

•実行コスト•IE, Firefox, Safari, Chrome, Opera + 各々のバージョン•Selenium 等で何とか解決

テストを実行させる環境作りが大変


現状のテスティングフレームワークでも、それらを満たしたテストは書ける、が完全なユニットテスト以外はテストを書くコストが高いし、継続的インテグレーションを回すのが難しい2011年3月8日火曜日

継続的インテグレーション•多人数開発プロジェクトでは必須•安心感の担保•自動テストされないテストは保守されない・書かれない


Q: 問題を解決するには？


Q: 問題を解決するには？A: 目的を絞る


目的を絞る•テストを書く・実行するコストを下げる•継続的インテグレーションを回せる•すべてを望まない


CUI で完結するテスト•テストを書く・実行するコストを下げれる•継続的インテグレーションを簡単に回せる


CUI での JS エンジン

•rhino•spidermonkey•node.js


CUI エンジンの問題点•依存性の無いユニットテストなら簡単に実行可能function add(a, b) { return a + b;}assert_equal( add(1, 2), 3));


CUI エンジンの問題点

•setTimeout 系が処理系により無い…•ブラウザ上での動作前提のテストができない…


“Envjs is a simulated browser environment written in javascript”

•JS でブラウザをシミュレート•当初は Rhino のみサポート


Envjs の今•もうじき 1.3 リリース•node/Rhino/spydermonkey/rubyracer/johnson 対応•ただ、いまいちどれもちゃんと動かない…(test 通らない…)


Envjs の fork•jeresig/env-js•thatcher/env-js•現在のメイン開発レポジトリ•smparkes/env-js•tharcher版の2008年後半の fork•Johnson から利用可能


Johnson•2009年末頃の Spidermonkey の Ruby Binding•Ruby <=> JS の相互実行•Proxy による透過的参照•元ネタはRuby Johnson(歌手)


Ruby

runtime = Johnson::Runtime.new

runtime.evaluate <<JSfunction add(a, b) { return a + b;}JSruntime['add'].call(1, 2)# => 3


Ruby

runtime['rb_add'] = proc {|a, b| a + b}

runtime.evaluate <<JSRuby.puts(rb_add(1, 2)); // => 3JS


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}


smparkes/env-js

•Johnson で動くようにあれこれ修正•XHR の通信・細かい挙動調整など•rubygems 対応•gem install env-js


Ruby

runtime = Johnson::Runtime.newruntime.extend Envjs::Runtime

window = runtime['window']window.location.href = ‘http://cookpad.com/’runtime.waitwindow.jQuery('p > span').length# => 5


http://cookpad.com

http://cookpad.com

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 で実行


Envjs

•思っていた以上に使える•ふつうの JavaScript なら割と問題無く動く•Johnson 等で、プロジェクトに組み込める


しかし…


これでCUIからテスト実行可能になったものの、Webエンジニアが書きたいテストはWebアプリ上でのJSのテストが大半だったりする2011年3月8日火曜日

エンドツーエンドテスト“アプリケーションが提供するユーザインタフェースを通じた全体の振る舞いをテストすること”

WEB+DB vol.61 Rails 3 テスト最前線より2011年3月8日火曜日

•JS テストの前提条件•WebアプリのHTMLが取得可能•JSを実行可能•Ajax リクエストのエミュレート

エンドツーエンドテスト


http://www.flickr.com/photos/verzo/2986462106/

ｘcapybara




•Rack アプリに対するエンドツーエンドテストを提供•Rack アプリ(Rails, Shinatra, etc ...) ならテスト実行可能•Rack レイヤーがレスポンスを返すため、Ajax テストも容易•エンジンを切り替え可能•Selenium, Envjs

Capybara


•重要な箇所を重点的にJSテスト•ログイン•ユーザー登録•広告表示

クックパッドでのJSテスト例


Rubycontext "Ajaxでのバリデーション" do it "ユーザ名が重複してない",:js => true do fill_in 'user_name', :with => "newbie" blur 'user_name' page.should have_content("使用できるニックネームです") end


Rubycontext "Ajaxでのバリデーション" do it "ユーザ名が重複してない",:js => true do fill_in 'user_name', :with => "newbie" blur 'user_name' page.should have_content("使用できるニックネームです") end

JSAjax


Rubyit "ユーザ名が重複していたらエラーメッセージが表示される", :js => true do User.make(:user_name => "sakura") fill_in 'user_name', :with => "sakura" blur 'user_name' page.should have_content("そのニックネームはすでに使われています。")end


•JS のエンドツーエンドテストを書きたい所のみ書ける•rspec のフィルターで実現•テストを書くコストがとても少ない•完璧なブラウザと同等の挙動を求めない•Envjs は完璧でない•絞った目的を忘れるな

ポイント


•ホントに動くの？ちゃんとJSのテスト書けるの？•実際、自分は導入しなかった•導入されたら簡単さにびっくりする•導入したのは、最近入社したイケメン外国人エンジニアの Jens さん•テストもみっちり追加してくれた

最初はEnvjsに懐疑的


Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト

が書けたら書きますか？


Q: コストをほとんどかけず、エンドツーテストで JS/Ajax のテスト

が書けたら書きますか？

A: 書かない理由がないですね


•ブラウザエミュレートは、Web 開発者にとって必須•Envjs で大体カバーできるけど…

今後のCUIのJSテスト


•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•

Phantom.js


•QTWebKit を使った CUI から使えるブラウザ実行環境•WebKit なので互換性は結構安心•[new!]昨日初めてコンパイルできた

Phantom.js


JSDeferred のテストを Phantomjs で実行


•なんか速い•Jasmine でも利用でき CUI Runner でのテストが一瞬•出たばっかりなのでアツイ•CUI でのブラウザテストとの相性良い

使ってみた感想


•Phantomjs 起動中にアプローチできない•動的な外部からのJS実行できない•↑ができると•他のテストと連携しやすく•capybara-phantomjs も可能

もうちょっと


•最近の JS テストを紹介•CUI でのテストはそこそこやりやすく•まだまだ決定打は無い

終わりに


•どれだけ簡単にテストが書けるようになるのかが鍵•目的を絞る•Rack/PSGI/WSGI などの層と結合•本当は綺麗な実装の分離が…

終わりに


提供


ご清聴ありがとうございました

クックパッドでは一緒に働くエンジニアを

募集してます


さいきんの javascript テスト / test.js - shibuya.js 発表資料

Documents