Siesta – No.1 テスト環境の構築 « 株式会社ゼノフィ

Siesta – No.1 テスト環境の構築

Siestaについて

Siestaは、JavaScript用のユニットテスティングツールです。

ひたすらコードを記述して、動作の検証にも時間がとられるスタイルは、もうやめたいですよね。先にいくつかのテストを記述しておいて、テストを自動化し、少し休めるようにしませんか？

Siestaは、非常に簡単に学ぶことができ、複雑なテスト要件に対応していくことができます。さらに、Siestaは、クロスプラットフォーム対応で、同じテストをブラウザやNodeJSで動作させることができます。 (プラットフォームに異存しない記述が必要です。)

ここでは、最新版である(2013/08/25現在) Siesta Version 2.xを利用して、その便利さと機能を紹介していきます。

主要機能

JavaScriptによるテスト計画記述
キーやマウスイベントをシミュレート
カバレッジレポート出力
Selenium または PhantomJSを使ったコマンドライン実行

エディション比較

Siestaは、Lite版とStandard版の2つのエディションが提供されています。

それぞれのエディション比較は、下図の通りです。

	Lite版	Standard版
テストケースのブラウザ実行	○	○
NodeJSでの実行	○	○
ソースコード、サンプル、ドキュメントの提供	○	○
コミュニティフォーラムでのサポート	○	○
プレミアムフォーラムでのサポート	−	○
コードカバレッジモジュールの提供	−	○
クロスページテスト機能	−	○
Seleniumインテグレーション	−	○
Phantom JSインテグレーション	−	○
無償アップグレード	無料	12ヶ月間

Siesta Lite版の入手

Siesta Lite版は、無料で入手・利用が可能です。 Sencha Learning Placeでは、Standard版の機能に触れるまでは、Lite版を利用します。まだ、Siesta Lite版を入手していない場合は、下記URLからダウンロードすることができますので、準備してください。

http://www.bryntum.com/products/siesta/

アプリケーションの生成 – Sencha Ext JS

Sencha Ext JS(SDK)と、必要なHTMLなどをSencha Cmdを利用して自動的にセットアップするしましょう。 SDKをダウンロードしてきて、ドキュメントルートに自分で配置する方法は、もう古いんです。

Sencha Cmdを活用しましょう。

Sencha Cmdのインストールは、完了しているものとして、説明を続けます。まだ、ダウンロード・インストールしていない方は、下記URLからSencha Cmdを入手することができます。

http://www.sencha.com/products/sencha-cmd/download

Sencha Ext JSを配置する

毎回アプリケーションを生成する時に、SDK(Sencha Ext JSやSencha Touch)をダウンロードしないで、ローカルの一カ所に保存しておくようにしましょう。 Sencha Ext JSもSencha Touchも配置しましょう、もちろん異なるバーションを配置しておくのが検証時に便利です。

ここでは、Mac OS Xでの例で説明しますが、ライブラリの配置する位置に関しては、任意のディレクトリで構いません。例として、~/Library/Sencha ディレクトリを作成して、その下に、展開したSDKを配置しましょう。

下記のようなディレクトリ構成になります。

+ ~/Library
  + Sencha
    + ext-4.2.1-883
    + touch-2.1.1

アプリケーションの生成

さて、次にアプリケーションの生成を行います。先ほどのSDK配置の手順は、毎回やる必要はないことは説明するまでもありませんね。

アプリケーションの生成は、次の手順で行います。

プロジェクトのディレクトリへ移動
次のコマンドを実行(アプリケーション名は、”SiestaSample2″とします。)

1	sencha -s ~/Library/Sencha/ext-4.2.1.883 generate app SiestaSample2 ./

しばらく待っていると、SDKがカレントディレクトリに配置されてるだけでなく、モックのアプリケーションの生成までSencha Cmdが行ってくれます。

.senchaディレクトリというディレクトリが生成され、そのままSencha Cmdを利用してソースコードをビルドすることができる環境まで整いますので、これから、まず最初にSencha Cmdを利用してアプリケーションを生成するところか始めるとよいでしょう。

Siestaの配置

まず、siestaとtestsディレクトリをドキュメントルートに作成します。続いて、siestaディレクトリには、ダウンロードしてきたzipファイルを展開し配置します。 testsは、siestaのテストケースファイルを格納しますが、現在空です。

ハーネスの作成

次に、テストケース実行用のHTMLファイル作成を作成します。配置場所は、任意です。ここでは、ドキュメントルート直下に、harness.html としてファイルを作成します。

harness.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
    <!-- Ext JSのCSS読み込み-->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
 
    <!-- SiestaのCSS読み込み-->
    <link rel="stylesheet" type="text/css" href="./siesta/resources/css/siesta-all.css">
 
    <!-- Ext JS読み込み -->
    <script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>
 
    <!-- Siesta読み込み-->
    <script type="text/javascript" src="./siesta/siesta-all.js"></script>
 
    <!-- ハーネス用JavaScriptファイル -->
    <script type="text/javascript" src="./harness.js"></script>
 
</head>
<body></body>
</html>

ハーネスとは、Siestaのテスト実行環境です。ハーネスの中に、Siestaがテストケースを読み込み、テストケースを実行します。

テストケースごとに、独立したiframeでテストが施行されます。つまり、ハーネスのHTML内に、テストするアプリケーションやコンポーネントを読み込ませるわけではありません。

ハーネスの動作は、Sencha Ext JS 4.2.1に対応していないので、Sencha Ext JS 4.2.0を使いましょう。

Sencha Ext JSのソースコードはCDNから読み込んでいるため、上記のharness.htmlを毎回使い回せます。ネットワーク接続環境が無い環境でも動作させるためには、Sencha Ext JS 4.2.0をローカル環境に配置して、読み込ませるようにしてください。

ハーネスの種類

ハーネスには、種類がありテストケースのSDKによって、適切に選択する必要があります。

Siesta.Harness.Browser

Sencha Ext JS、Ext Core、Sencha Touchを利用しないアプリケーションのテスト用(jQuery、prototype.js)

Siesta.Harness.Browser.ExtJS

Sencha Ext JSを利用したアプリケーション、コンポーネントのテスト用

Siesta.Harness.Browser.ExtJSCore

Ext Coreを利用したアプリケーション、コンポーネントのテスト用

Siesta.Harness.Browser.SenchaTouch

Sencha Touchを利用したアプリケーション、コンポーネントのテスト用

Siesta.Harness.NodeJS

NodeJS上でのテスト用

Sencha Ext JS用のハーネス作成

では、Sencha Ext JS用のハーネスを作成しましょう。ハーネスには、Siestaの動作設定を記述することができ、どのテストケースを実行するのか、ハーネスのタイトルは何にするか、などを記述します。

施行したいテストケースは、startメソッドの引数に指定します。テストケースの設定については、次項で説明します。

harness.htmlを同じディレクトリ（ドキュメントルート）に、harness.jsを作成します。

harness.js

// Sencha Ext JS用ハーネスのショートハンド設定
var Harness = Siesta.Harness.Browser.ExtJS;
 
// コンフィグ指定
Harness.configure({
    title     : 'Siesta v2 サンプル for Sencha Ext JS',
    preload : [
        "./ext/ext-all-debug.js"
    ]
});
 
// ハーネス実行
Harness.start(
);

テストケースの追加

testsディレクトリ下に、group1ディレクトリを作成して、その下に、001_sanity.t.jsというファイルを作り、この中に記載してみましょう。テストケースのファイルは多量になる（ほうがいいですよね？）ので、カテゴリーごとにディレクトリを作成するなど、最初から命名規則を工夫すると良いでしょう。

1
2
3

+ tests
  + group1
    + 001_sanity.t.js

続いて、001_sanity.t.jsを編集します。

1
2
3

StartTest(function(t) {
    t.diag(“正常なアサーション”);
});

StartTest関数の引数に、無名関数を設定します。引数をtとします、もちろん任意の変数名で構いません。このtは、テストクラスオブジェクトのインスタンスです。

テストクラスオブジェクトは、実行されるハーネスによりデフォルトのクラスが設定されていて、Siesta.Harness.Browser.ExtJSハーネスの場合、Siesta.Test.ExtJSが利用されます。

テストクラスオブジェクトには、いくつかメソッドが用意されていて、そのメソッドを利用してテストケースを記述していきます。上記の、diagメソッドは、テスト中にconsole.logのようにメッセージを出力を行うことができます。

それでは、作成したテストケースをハーネスに追加するために、harness.jsを修正します。

// ハーネス実行
Harness.start(
    'tests/group1/001_sanity.t.js'
);

実行すると、diagに指定したメッセージが表示されます。

テストケールのグループ化

ハーネスに、どんどんテストケースを追加していっても良いのですが、管理しやすいようにグルーピングすることができます。グループ化すると、グループごとにテストケースを実行したりできます。もちろん、毎回実行したいテストケースを手動でチェックすれば、指定はできますが…。また、グループごとにテストクラスを切り替えることが可能です。先ほど説明しましたが、通常はハーネスごとのデフォルトのテストクラスが利用されます。

先ほど作成したharness.htmlを修正して、1つしかテストケースがありませんが、グループ化してみましょう。

// 汎用ハーネスのショートハンド設定
var Harness = Siesta.Harness.Browser;
 
// コンフィグ指定
Harness.configure({
    title     : 'Siesta v2 サンプル for Sencha Ext JS'
});
 
// ハーネス実行
Harness.start({
    group: 'グループ1',
    autoCheckGlobals : true,
    testClass: Siesta.Test.ExtJS,
    preload: [
        "./ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css",
        "./ext/ext-all-debug.js"
    ],
    items: [
        'tests/group1/001_sanity.t.js'
    ]
});

testClassで、グループごとに利用するテストクラスを指定することができ、テストケースは、itemsに配列で指定します。 preloadも、Harness.configureに設定すると、全てのテストケースを実行するときに事前に読み込まれるようになりますが、グループごとに事前に読み込むファイルを切り替えることができます。

値の判定

診断メッセージを出力するだけでは、味気ないので、値の判定くらいテストケースらしく作ってみましょう。

ここでは、okメソッドとnotOkメソッドを利用します。

StartTest(function(t) {
 
    t.diag("正常なアサーション");
 
    t.ok(true, 'trueは、OKです。');
    t.ok(1, '1 は、OKです。');
    t.ok({}, '{} は、OKです。');
    t.ok(Ext, 'Extオブジェクトは、存在します。');
 
    t.notOk(false, 'falseは、OKではありません。');
    t.notOk(0, '0は、OKではありません。');
    t.notOk(undefined, '`undefined`は、OKではありません。');
 
});

アプリケーションの生成 – Sencha Touch

ここまで、Sencha Ext JSのハーネス準備まで紹介したので、今度は、Sencha Touch版も準備しましょう。

Sencha Ext JSの時と同様に、次の手順を実行します。

プロジェクトのディレクトリへ移動
次のコマンドを実行(アプリケーション名は、”SiestaSample2″とします。)

1	sencha -s ~/Library/Sencha/touch-2.2.1 generate app SiestaSample2 ./

実行すると、モックアプリケーションが生成されています。

ハーネスの作成

ハーネスを作るのもSencha Ext JSと同じですが、harness.htmlの記述が若干違います。

harness.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
    <!-- Sencha TouchのCSS読み込み-->
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
 
    <!-- Siesta(Sencha Touch用)のCSS読み込み-->
    <link rel="stylesheet" type="text/css" href="./siesta/resources/css/siesta-touch-all.css">
 
</head>
<body>
    <div id="splashLoader">
        <div id="loading">
            <span class="loadTxt">Loading...</span>
            <div class="x-loading-spinner"><span class="x-loading-top"></span><span class="x-loading-right"></span><span class="x-loading-bottom"></span><span class="x-loading-left"></span></div>
        </div>
    </div>
 
    <!-- Sencha Touch読み込み -->
    <script type="text/javascript" src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all-debug.js"></script>
 
    <!-- Siesta(Sencha Touch用)読み込み-->
    <script type="text/javascript" src="./siesta/siesta-touch-all.js"></script>
 
    <!-- ハーネス用JavaScriptファイル -->
    <script type="text/javascript" src="./harness.js"></script>
 
</body>
</html>

Sencha Touchのソースコードは、Sencha Ext JS同様CDNから読み込んでいます。都合に合わせて調整してください。

herness.js

// Sencha Touch用ハーネスのショートハンド設定
var Harness = Siesta.Harness.Browser.SenchaTouch;
 
// コンフィグ指定
Harness.configure({
    title     : 'Siesta v2 サンプル for Sencha Touch',
    preload : [
        "http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css",
        "http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all-debug.js"
    ]
});
 
// ハーネス実行
Harness.start(
    'tests/group1/001_sanity.t.js'
);

利用するハーネスが、Siesta.Harness.Browser.SenchaTouchに変わった以外は、先ほどと同じです。もちろん、グループ化手順も同じです。

まとめ

無事、Sencha Ext JS、Sencha Touchのハーネスとテストケースを作成することができました。今回、テストケースをどんどん追加していける環境ができたので、次回からSencha Ext JS、Sencha TouchそれぞれのSDKのテストクラスの詳細について、テストケースを作りながら説明していきます。

また、jQueryやprototype.jsなどSencha製品を使わないハーネスの作成、NodeJSでの動作、Standard版によるPhantomJSでの自動テスト、カバレッジレポートなど、 Siesta の魅力を順次お伝えしていきます。