2010-12-05

最近のJavaScriptのテスティングフレームワークについて調べてみた

あるいは kanazawa.js v0.0.1 勉強会 : ATND に参加してきた。

今回はとりあえず今注目している JavaScript テスティングフレームワークの紹介というかリンク集めだけ。

まとめ

  • QUnit と Jasmine について調べたよ!
  • 好きに使って! Jasmine の使い方はまだ書くことあるんだけど疲れたからまた今度ね!

書いたよ! Jasmineをもう少し詳しく紹介してみる も読んでみて!

自分の背景

JsUnit を使って中規模なコードを書いた経験がある。普段は PHP + SimpleTest で概ね TDD で書いている。Ruby はまだ Test::Unit を使っている。RSpec に移行したいと思いながらタイミングをつかみそこねている。

テスティングフレームワークにできること

  • まず原則は JS のみのユニットテスト

これをユニットテストと呼ぶか TDD と呼ぶか BDD と呼ぶかは背景の文化によるが、少なくともできることにものすごく大きな差があるわけではないと考えておいて間違いない。

DOM を操作するものについては JS コードを呼び出す HTML に対して操作を加え、結果をテストするのが基本になる。(はず。)

またサーバサイドの動作とは基本的に切り離して考えておく。サーバが静的な HTML しか返さないならそれをテストコードに与えればよいし、Ajax 対応は今まさにテスティングフレームワークがしのぎを削って対応を進めようとしている課題のようだ。もう少し待て。

今回の2つに共通すること

  • 古い xUnit 系よりも自由に名前付けできる

xUnit 系の率直な実装は基本的にテスト名はメソッド名になってしまう。したがってテストの意図を記述しにくいことがある。今回紹介する2つにはそういう制限はない。

QUnit

jquery/qunit - GitHub

個人的な印象は schwern/test-more - GitHub というか Blog | New testing framework | symfony | Web PHP Framework のような感じ。要するに比較的シンプルにテストを書けるもの。

というより恐らくいちばんウケているのは

準備が楽

ってことだと思う。基本的には qunit.js と qunit.css とそれを読み込む HTML さえあればテストを書くことができる。

基本的な使い方

最も基本的な使い方は以下のような HTML を用意してブラウザで読み込む。

これは http://docs.jquery.com/QUnit にあるデモから jQuery 依存の部分を除いたもの。やってみれば分かるけど普通に jQuery 無関係に動く。1

参考

【レポート】jQueryテストスイート「QUnit」がスタンドアロン化! 使い方を早速チェック (1) QUnitとは? | エンタープライズ | マイコミジャーナル

Jasmine

個人的にはこっちが本命。明確に RSpec-inspired.

Jasmine: BDD for Javascript | Jasmine

Pivotal Labs がメンテナンスをしている。実はこれすごく重要。なぜなら JsUnitpivotal/js-spec-server - GitHub も関係している Pivotal Labs があえて新しい JavaScript Testing Framework を作っているのだ。これが良くなくて一体何が良いのだ。

また、relevance/blue-ridge - GitHub というかなり気合いの入った Framework も今は「もうやらないから Jasmine 使え」って言ってるくらいなんだから、本命中の本命と言っていいと思う。

Pivotal Labs の名前を意識するようになったのはE和さんの中で流行っているという話を聞いてからだけど、jsUnit 自体は以前から知っていたので、これは正直期待しちゃうってもんだ。

related projects などはまだアッチッチかもしれない。でもこれは結構期待できそう。

Jasmine で fixture

velesin/jasmine-jquery - GitHub

を使うと割と素直に目的を達成できる。jasmine-jquery という名前だが別に jquery を使う必要はない。

同じような目的で jeffwatkins/jasmine-dom - GitHub というものもあるのだが、どうも fixture 周りの動きが変。コード自体はものすごく酷似してるんだけど、なんか変。

Jasmine で Ajax

pivotal/jasmine-ajax - GitHub

というプロジェクトがあるんだけど、まだあまり日本語で話を聞かない。今やったら日本人の中ではリードできるかも。

headless

headless っていうのは GUI-less のことだと思ってるんだけど、この取り組みはいくつかある。

  1. jeremylightsmith/class.TDD-in-javascript-with-headless-jasmine - GitHub
  2. injest - Project Hosting on Google Code

これもまだあまり話を聞かない。

参考

  1. ただしコードを追うと中にはまだ jQuery を呼び出している部分があるので完全に jQuery がなくてもよいわけではないっぽい。 

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Develop Document Jekyll