概要

• HatenaStar.js
• Ten.js
• JSAN
• PhantomJS
• Wight / Poltergeist
• Travis CI

JavaScript のテストを Perl から実行できるようにした話です。

HatenaStar.js

http://s.hatena.ne.jp/js/HatenaStar.js

• はてなスターの Web ページ用公式クライアント (2007-)
• ブログ記事に ボタンを付ける
• ほとんどのはてなサービス、いくつかの社外のサイト、 いくつかのブラウザ拡張で利用されている

Ten.js

• id:jkondo 作の JavaScript フレームワーク
• 2007年～2011年くらいのはてなサービスの多くで使われている
• HatenaStar.js が使っているし、含まれている

Hatena.Star.Entry = new Ten.Class({
    initialize: function(e) {
        this.entry = e;
        this.uri = e.uri;
        ...
    },
    maxStarCount: 11
},{
    flushStars: function() {
        ...

JSAN

http://openjsan.org/

• JavaScript ライブラリ集積サイト (Perl でいう CPAN)
• 2005年からしばらく使われたが、あまり流行らなかった
• Perl のモジュールと文化を移植しようとしていた
• Ten.js のテストはなぜか JSAN ライブラリを使って書かれている

<script>
new JSAN('lib').use('Test.More');
plan({tests: 9});

ok (Ten.JSONP, 'JSONP');
...
</script>

Ten.js/HatenaStar.js で困ったこと

• テストはあるにはあった
• ブラウザで開いて TAP を目視でチェック...
• 面倒なので実行されない → だんだん腐っていく

テスト自動化したいです

• 変更するたびに自動でチェックしたい
• サーバー側 (Perl) と連動したテストもしたい
• 既存のテストを書きなおすのは面倒くさい

PhantomJS

http://phantomjs.org/

• 画面表示なしの WebKit ブラウザ
• HTML, JavaScript, CSS, ... そのまま動く

Wight

• Wight + Poltergeist
• Perl から PhantomJS を操作できるモジュール
• URL を指定して表示 -> DOM 操作
• (ちなみに Web Sockets をプロセス間通信に使っている)

my $wight = Wight->new;
$wight->visit('http://example.com/');
$wight->evaluate('document.title');
$wight->find('//a[@rel="next"]')->click;

できた

1. Ten.js/HatenaStar.js <- テストしたいコード
2. JSAN / Test.Simple <- テストライブラリ
3. PhantomJS <- Web ブラウザ
4. Wight <- ブラウザ操作ライブラリ
5. taptest.pl <- JavaScript ファイルを開いてテスト結果を出力する Perl スクリプト
6. Prove <- テストランナー

$wight->execute(q{
    var v = document.getElementById('test');
    var list = v.querySelectorAll('script, style');
    for (var i = list.length - 1; i >= 0; i--) {
        list[i].parentNode.removeChild(list[i]);
    }
});
$tap = $wight->evaluate(q{document.getElementById('test').textContent});
print $tap;

Travis CI

https://travis-ci.org/

• GitHub にコードを push したら自動でビルドしてくれる
• 簡単な設定ファイルを書いてボタンを押すと後は勝手にテストを実行してくれる (便利!)

完成!

• HatenaStar.js
• Ten.js
• JSAN
• PhantomJS
• Wight / Poltergeist
• Travis CI