JSのCIで椅子を投げられないため方法

自己紹介

ども。KAYACでJS書いてる@kyo_agoです
最近はスマホ環境で色々JS書いてます

はじめに

「椅子投げる」=元々はこの記事

Webアプリケーションのログについてあれこれ - 酒日記はてな支店

弊社では「問題のあるコード、構成」の意味で使われてたりします

例「そんなコードじゃ椅子が飛ぶ」

タイトルにはCIと入っていますが、「JenkinsでUnitTest回す」くらいの意味で使ってます

ここから本題

その1

「去年のShibuyajsから変わったこと」
JSテスト事情アップデート

「JavaScript テスト」と言えば

さいきんの JavaScript テスト / Test.js - Shibuya.js 発表資料 - 2nd life
（Googleさん調べ）

2011/03/09に行われたShibuya.js - Test.jsで発表された内容

中で紹介されてる二つの問題

テストの種類・特性

テスト実行環境

状況はかなり改善した

非同期、setTimeout, Ajax系はSinonJSで簡単に
Swarm系のツールでDOMのテストも容易に
環境構築も非常に楽になった
PhantomJSはバイナリもあるし、ビルドも簡単
Swarm系のツールならブラウザでURLへアクセスすればすぐテスト開始

それ以外も変わってきた

BusterJSが登場し、Swarm系のツールが増えた
テスト駆動JavaScript本が日本でも発売された
ツールに関する情報も増えてきた

JavaScriptのUnitTestも進化してる

その2

「JenkinsでJavaScriptのUnitTestを回す方法」

簡単に行うならJsTestDriverがおすすめ

0-9, JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテスト

JsTestDriverとは何か

Google製Swarm系ツール
ブラウザのマネージメントツールのような感じ
Javaで書かれており導入が簡単

ざっくりとした概念図

JsTestDriverを使う利点

Javaで書かれてるのでJenkinsと親和性高い
QUnit、JasmineはPluginで移行可能
Code CoverageもPluginで取れる
スマホや古いIEでも使える
CUIからテストを実行できる
特殊構文でテスト内にhtmlを埋め込める

クライアントサイドのJSテストなら一枚噛ませとくと色々捗る

その3

「JenkinsでJavaScriptのUnitTestを簡単にはじめる方法」

こういう人が対象

「サーバサイドはテスト回してるのでJSもそこに組み込みたいけど、JSのテストとかやったこと無いからどうしていい分からないし、はじめるのが面倒ならまだこのままでもいいけど、ときたまトラブルし、確認が手薄になるブラウザとかあるので最低限でいいから始めたい人」

条件

jQuery使ってる
コードは$(function () {});で囲ってある
Jenkinsサーバはすでにある
htmlとJSは分離してある
とりあえずSyntax Errorの確認だけ

JsTestDriver.conf

server: http://localhost:9876
load:
 - jquery.js
 - sinon.js
 - stub.js
 - target.js #テストしたいJSファイル
test:
 - test.js

stub.js

sinon.stub(window, 'jQuery');
sinon.stub(window, '$');

test.js

TestCase('test', {
	'test' : function () {
		sinon.assert.called($);
	}
});

jquery.js、 sinon.js、 JsTestDriver.jarを別途ダウンロードする

全部まとめて同じディレクトリに入れる

以下のコマンドを実行

#JsTestDriver server起動
java -jar JsTestDriver.jar --port 9876 &
#テストしたいブラウザで http://localhost:9876/capture へ接続
#接続したブラウザ上でテスト実行
java -jar JsTestDriver.jar --tests all

最初はここからはじめて徐々にテストを増やしていくのがおすすめ

最後に

まだ正解は見えないが、方向は明確になってきた

はじめる環境としては整ってきてる

質問はありますか？

ex. 「JsTestDriverの問題点は？」、「実際運用してるの？」、「テスト駆動JavaScript本の評価は？」、「他の言語と比べてどう？」

KAYACではJSのテストが好きな技術者も募集しています！

Kyo Ago