最近の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 がメンテナンスをしている。実はこれすごく重要。なぜなら JsUnit も pivotal/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 がなくてもよいわけではないっぽい。 ↩

rsync daemon は module 以下の path も受け付けてくれる

まずは man より

 Access via rsync daemon: Pull: rsync
[OPTION...] rsync://[USER@]HOST[:PORT]/SRC... [DEST] Push: rsync
[OPTION...] SRC... rsync://[USER@]HOST[:PORT]/DEST

rsync は –daemon オプション付きで起動することで daemon として listen することができる。そこに直接接続するには src なり dest の URI を rsync:// で書けばよいのだけれど、この

rsync://[USER@]HOST[:PORT]/[SRC|DEST]

の SRC なり DEST の部分は

rsyncd.conf

で

[module]
   path = /path/to/module

と指定した path 以下にしかアクセスできないようになっている。つまりここでシステムのパスへの無制限のアクセスはできないように制限されている。

で、今まで実は module でフルパスを指定するだけで事足りていたので気にしたことなかったんだけど、

rsync src rsync://host/module/path/to/dest

みたいにも書けるということを知った。これであるホストのある特定のパス以下の任意のディレクトリについて rsync プロトコルで同期を取ることが可能なわけだ。なるほどなー。

php-shell が便利すぎてヤバい件

PHP には php -a というインタラクティブモードが一応あるんだけど、これがビックリするくらい使えない。いちばんビックリなのは

readline モジュールを読み込んでいないと <?php ?> を省略できない

ってこと。何それ？ PHP を書くよって最初に明示してるのに <?php を省略できないとは。

これにビックリしてインタラクティブシェルを探してみたら、いくつか見つかった。中でもこれはすごい。

~jk php shell

  • PHP 5 以降
  • pear コマンドでインストールでき、irb のように実行ファイルとしてインストールされる
  • ビルド時の –with-readline ではなく、readline.so を追加する形で利用できる
  • つまり補完が効く
  • 関数の使い方をその場で調べられる

どうです。なかなかすごいっしょ。

例えばこんな風に使える。

$ php-shell.sh
PHP-Shell - Version 0.3.1, with readline() support
(c) 2006, Jan Kneschke <jan@kneschke.de>

>> use '?' to open the inline help

>> get_<TAB>
get_browser(                 get_headers(
get_cfg_var(                 get_html_translation_table(
get_class(                   get_include_path(
get_class_methods(           get_included_files(
get_class_vars(              get_loaded_extensions(
get_current_user(            get_magic_quotes_gpc(
get_declared_classes(        get_magic_quotes_runtime(
get_declared_interfaces(     get_meta_tags(
get_defined_constants(       get_object_vars(
get_defined_functions(       get_parent_class(
get_defined_vars(            get_required_files(
get_extension_funcs(         get_resource_type(
>> ? get_class()
'/**
* Retrieves the class name
*
* @params [object object]
* @return string
*/
'

どうですか。

※ ただ、PHP では readline モジュール自体がポピュラーでないのか、手元の環境ではシステム標準のパッケージだけで readline が有効な PHP を構築できたのは CentOS だけだった。Debian も MacPorts, Fink もダメだった。FreeBSD ではたぶんイケるけど試してない。

おまけ1（2月4日に気づいた）

>> ?
'Inline Help:
  >> quit
    leaves the shell
  >> ?
    show this help
  >> ? license
    show license of the shell
  >> :set <var>
    set a shell variable
  >> ? <var>
    show the DocComment a Class, Method or Function
    e.g.: ? fopen(), ? PHP_Shell, ? $__shell
  >> p <var>
    print the variable verbosly
  >> r <filename>
    load a php-script and execute each line
'

なんと、p も定義されている。irb 使いならこれを使わずに何を使うのだという話ですよ！ まぁ中身はただの var_export() なんだけど。

おまけ2（同じく2月4日に気づいた）

こういう使い方がなかなか便利かも。

php -c INIFILE -q /PATH/TO/php-shell-cmd.php

デフォルトの php-shell.sh を起動するだけだと、例えば案件独自の設定などを反映させることができない。そこでこの方法。これならライブラリの読み込みもスムーズに行える。php-shell は組み込みの関数だけではなくて PHP で書かれたライブラリについても ? で phpdoc コメントを表示させることができるので、真面目に書かれたライブラリを使っているとものすごく便利に使える。

オレ？ オレはもちろん大真面目に作っているから超便利に使っているよ！

Subversion 1.4.2 と Apache 2 と Apache Runtime 1.2.7

これまで、Subversion を WebDAV で使う際に利用していた Apache Runtime(以下 apr と略す) が Apache 2.2 と合わない、Subversion を使うときは Apache 2.0 と合わせろという話をあちこちで聞いていたので家鯖の Apache も 2.0 にしていたんだけど、今回 Subversion を 1.4.2 に上げたら Apache が再起動するたびに core dump するようになった。1

結論から言うと Apache 2.2 に上げたら収まったので、組み合わせ的には以下のような感じになるっぽい。2

SubversionApacheapr
1.3.22.0.591.2.7
1.4.22.2.31.2.7

apr 自体のバージョンは変わってないんだけど、組み合わせる Subversion のバージョンによってうまく動く Apache のバージョンが変わってくる。うーむむむ。ややこしいな。apr 自体に 2.0 系と 2.2 系みたいな区別があれば分かりやすいのに。3

※ 家鯖の Subversion はいやな予感がしたので 1.3.2 のままにしておいたんだけど、今回サーバそのものをリプレイスしたついでに上げてみた。

Apache 2.0 から 2.2 へ上げる際には特に注意したことはなかった。4FreeBSD ports だけなのか、conf が module ごとに分割されたので設定の記述位置が変わったくらいで大きな違和感はない。あ、mod_autoindex で出力されるファイルリストが pre から table になった。これも設定次第だけど、デフォルトの設定が table になったのかな？ 少なくとも ports のデフォルトは table になったようだ。ファイルリストがプロポーショナルフォントになるので気持ち悪い。

proxy やらなんやらの部分も大きな違いはなさげ。少なくとも 1.3 -> 2.0 の移行に比べればはるかに楽ちんだと思う。うちでは記述位置以外は以前と同じ。cache を使いこなせれば面白いかなと思うけど、その辺はとりあえず放置。PCRE が使えるのでログとか rewrite の設定は今までよりも強力になりそうで嬉しい。つっても家ではそんな細かいことしないけど。

  1. ただし動くことは動く。停止と再起動がうまくいかないだけ。 ↩

  2. もしかして Apache 2.0.60 が出たらうまく動くかもしれないけど。 ↩

  3. メインの Web サーバを Apache 以外にするという選択肢もなくはないけど、lighttpd はちょっと前に話題になった .svn ディレクトリの問題など、よく分からない部分がたくさんあってちょっと怖い。 ↩

  4. 関連するライブラリをインストールし直したくらい。 ↩

オレンジニュース効果

オレンジニュースに「Ruby と PHP の配列操作比較」が晒されたのでまた千客万来状態に。でも意外と本家いやなブログからリンクされたときほどは伸びないな。読者層がかぶってるのかな？

しかしこんなめちゃめちゃ他人のふんどしでアクセス数が稼げるんだから、一生懸命相互リンクだのお返しトラックバックだのやってる人たちの気持ちが少し分かるような気がする。人気サイトすげぇっす。

ちなみに、自分のサイトで今まででいちばんキタのはデイリーポータルZに晒された1翌日のカトゆー家断絶経由。1日で数千のオーダーに乗ったのはあのときだけだな。

※ 現在、この tDiary のサイトはアクセス解析してない（めんどい）ので、tDiary のリファラ表示機能で分かる範囲しか状況が把握できてません。

  1. らしい。リファラ以外は未確認。 ↩

一人で納得

JavaScript は

  • 目立たないけどあると便利
  • 目立って便利ではあるけれどもなくても困らない

のどっちかを満たす使い方がフツーのサイトではかっこよさげだと思った。

アドビの体験版げと

なんとか Win 版、Mac 版ともに吸出し完了＆転送完了。なぜか iMac & Panther の機械で CD が読めなかった。勝手に PowerBook を使わせていただきました。はっは。ゆるせ。

めがねができた

しかし相変わらずじっくりきっちりした調整をしてないめがねは痛い。時間が時間だったってのもあるけど、そもそもちゃんと合わせる技術があるんだかないんだか。

About

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