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

わかば (id:wakabatan)

自己紹介

わかば

id:wakabatan

JavaScript は15年目くらい

株式会社はてな アプリケーションエンジニア
www c h m s developer copie let (ugomemo h2 l)

仕事では1年くらい JavaScript 書いてない

概要

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

HatenaStar.js

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

Ten.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/

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

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

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

テスト自動化したいです

PhantomJS

http://phantomjs.org/

Wight

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/

完成!

https://github.com/wakaba/opentenjs

終わり

この発表資料は Kyoto.js のページ https://github.com/kyotojs/meetup/wiki/4 に置く予定です。