カテゴリー別アーカイブ: QUnit

QUnitによるユニットテスト

そろそろテストコードもきちんと書いていかないとなあ〜なんて思っていたので, まずは, 手始めに自作したjQueryプラグインのjqFlipSwitchのテストコードを書いてみることにしました.

一般的に, jQueryやjQueryプラグインではQUnitが利用されることが多いので, QUnitを利用することにしました.

もっとも, QUnit自体はjQueryに依存しているわけではないので, JavaScriptのユニットテストであれば利用可能です.

QUnit

備忘録として, 手順をまとめておきます.

1. QUnitのインストール

インストール方法はいくつかありますが, bowerでインストールしました (npmでも可能ですし, インストールしなくてもCDNから読み込む方法もあります). インストールしたい (テストしたい) ディレクトリで以下のコマンドを実行します.

$ bower install --save-dev qunit

2. qunit.cssとqunit.jsの読み込み

qunitのパッケージにはたくさんファイルがありますが, 重要なのはqunit.css と qunit.jsの2つです.

この2ファイルをテスト結果を表示するためのHTMLに読み込みます (パスはディレクトリ構成に合わせて変えてください).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOUSE_EVENTS | QUnit</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" />
<script type="text/javascript" src="qunit/qunit.js"></script>
</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

また, このHTML (テスト結果を表示するHTML) には, “qunit”のid属性をもつ要素と, “qunit-fixture”のid属性をもつ要素を定義しておきます.

3. テスト対象となるコードを読み込む

今回テストしたいのは, jquery.jqflipswitch.jsですが, 説明のために, マウスイベントをラップするプライベートな定数に関してテストをしたいと思います. プライベートな定数なので, 別途別ファイルにコピペしておきます. 内容は以下のようになります.

mouse-events.js

// This object wraps events
var MOUSE_EVENTS = {};

MOUSE_EVENTS.CLICK = 'click';

// Touch Panel ?
if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
    MOUSE_EVENTS.START = 'touchstart';
    MOUSE_EVENTS.MOVE  = 'touchmove';
    MOUSE_EVENTS.END   = 'touchend';
} else {
    MOUSE_EVENTS.START = 'mousedown';
    MOUSE_EVENTS.MOVE  = 'mousemove';
    MOUSE_EVENTS.END   = 'mouseup';
}

これをqunit.jsよりもあとに読み込みます

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOUSE_EVENTS | QUnit</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" />
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="src/mouse-events.js"></script>
</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

4. テストコードの作成

Qunitのテストコードは以下のような感じになります.

test-mouse-events.js

test('MOUSE_EVENTS', function() {

    deepEqual(MOUSE_EVENTS.CLICK, 'click', 'MOUSE_EVENTS.CLICK');

    if (/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) {
        deepEqual(MOUSE_EVENTS.START, 'touchstart', 'MOUSE_EVENTS.START');
        deepEqual(MOUSE_EVENTS.MOVE,  'touchmove',  'MOUSE_EVENTS.MOVE');
        deepEqual(MOUSE_EVENTS.END,   'touchend',   'MOUSE_EVENTS.END');
    } else {
        deepEqual(MOUSE_EVENTS.START, 'mousedown', 'MOUSE_EVENTS.START');
        deepEqual(MOUSE_EVENTS.MOVE,  'mousemove', 'MOUSE_EVENTS.MOVE');
        deepEqual(MOUSE_EVENTS.END,   'mouseup',   'MOUSE_EVENTS.END');
    }

});
  • test関数の第1引数でテストをグループかして,  第2引数の関数でテストコードを記述していきます.
  • deepEqual(‘テスト値’, ‘期待する値’,  ‘メッセージ’) の順に記述していきます. deepEqual関数以外にも様々なテスト関数があるので, そのあたりはドキュメントなどを参考にしていください

5. テストコードの読み込み

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOUSE_EVENTS | QUnit</title>
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" />
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="src/mouse-events.js"></script>
<script type="text/javascript" src="test/test-mouse-events.js"></script>
</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

以上の準備をして, テスト結果を表示するHTMLにブラウザからアクセスすると, 以下のような表示がされます.

QUnit テストページ
QUnit テストページ

以上が, QUnitを利用したユニットテストの大まかな流れになります.

ちなみに, jqFlipSwitchのユニットテストコードもGitHubにpushしましたので, 参考までにご覧ください.