• https://github.com/cho45/Test-HTML-Differences
• http://search.cpan.org/~satoh/Test-HTML-Differences/

CPAN にあげました。前回書いたときのは、衝動的に書いて結構挙動が微妙だったので、ちょっとなおしました。

というのも、構造的にだいたい一緒の部分が diff として出てきても鬱陶しいだけなので、比較時にはインデントをせず比較して、表示するときにはインデントして構造がわかりやすくなるようにしました。つまり以下のようになります。

#   Failed test at t/03_output.t line 47.
# +----+-----------------------+----+-------------------------+
# | Elt|Got                    | Elt|Expected                 |
# +----+-----------------------+----+-------------------------+
# |    |                       *   0|<foo>                    *
# |   0|<div class="section">  |   1|  <div class="section">  |
# |   1|  foo                  |   2|    foo                  |
# |   2|  <a href="/">foo</a>  |   3|    <a href="/">foo</a>  |
# |   3|</div>                 |   4|  </div>                 |
# |    |                       *   5|</foo>                   *
# +----+-----------------------+----+-------------------------+

インデント量が違う部分も、変化無しとして検出されます。

あるいは

#   Failed test at t/03_output.t line 47.
# +----+-------------------------+----+-------------------------+
# | Elt|Got                      | Elt|Expected                 |
# +----+-------------------------+----+-------------------------+
# |   0|<div class="section">    |   0|<div class="section">    |
# |   1|  <div class="section">  |   1|  <div class="section">  |
# |   2|    <p>foo</p>           |   2|    <p>foo</p>           |
# |   3|  </div>                 |   3|  </div>                 |
# |    |                         *   4|</div>                   *
# |   4|  <div class="section">  |   5|<div class="section">    |
# |   5|    <p>foo</p>           |   6|  <p>foo</p>             |
# *   6|  </div>                 *    |                         |
# |   7|</div>                   |   7|</div>                   |
# +----+-------------------------+----+-------------------------+ 

とかになります。

また、冒頭のスクリーンショットのように、いろつきに対応しました。これは単に use するときに -color をつけると Test::Differences::Color を使うようになるだけです。

なお、Test::HTML::Differences は HTML の構造をテストするもので、そのテストの書きやすさのために、要素内の始め・終わりの空白類を無視するようになっています。XML 的等価性を検証するテストではなく、あくまでデータの構造テスト用です。つまり、空白を含めた厳密なテストは例えば is とか別の手段でもっと最小限のテストを書くべきです。

postMessage、便利でいいですね。ドメインを跨いでうまく連携してスクリプトを書けたときの楽しさはパズル的でこのうえない感じであります。しかしながら postMessage は古い IE で動かないので、代替実装が必要です。ググるといっぱい出てきはするのですが、自分の要求にかなったものがなかったのでひとまず書きました。

• https://gist.github.com/701752#file_post_message.js

$ cat /etc/hosts
127.0.0.1 anotherhost
$ git clone git://gist.github.com/701752.git gist-701752 
$ cd gist-701752
$ plackup -MPlack::App::Directory -e 'Plack::App::Directory->new({root=>"."})->to_app' -p 5000

とかやっておいて、http://localhost:5000/test.html にアクセスするとなんか出るので、ボタンをクリックしたりするとどうにかなります。フレームの中と外で別ドメインです。