Sencha ug3 siesta_share

中村久司
＠martini3oz

Ext JSのアプリを
Siestaでテストする

Siestaとは
JavaScriptテストフレームワーク

Liteバージョンは無料で使える

Standardバージョンになるとheadlessテストができる

Ext JSで開発されている

ユーザーの操作をシミュレートできる

Bryntumの製品

Bryntum社
スウェーデンの企業

Ext Scheduler / Ext Gantt などの製品

Siestaの設置
MVCアプリケーション

Siestaの本体
{
テストメイン
個々のテスト

今回のサンプルでの構成は少し違う

test_harness.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
5 <link rel="stylesheet" type="text/css" href="../siesta/resources/css/siesta-
all.css">
6
7 <script type="text/javascript" src="../extjs/ext-all.js"></script>
8 <script type="text/javascript" src="../siesta/siesta-all.js"></script>
9
10 <script type="text/javascript" src="test_harness.js"></script>
11 </head>
12
13 <body>
14 </body>
15 </html>

siesta-all.cssの読み込み
siesta-all.jsの読み込み
test_harness.jsの読み込み

Harness
ハーネスはダッシュボードの一種で、各テストの環境をセッ

トアップしテストの結果を収集します。

test_harness.js
1 var Harness = Siesta.Harness.Browser.ExtJS;
2
3 Harness.configure({ loaderPath
4 title : 'MVC Test Suite',
5 loaderPath : { 'EX' : 'app' },
6
7 autoCheckGlobals: true,
8 expectedGlobals : [ 'Ext', 'EX' ], グローバル変数のチェック
9
10 preload : [
11 "../extjs/resources/css/ext-all.css",
12 "../extjs/ext-all-debug.js" テストページにロードしてお
13 ]
14
15 }); くファイル

Siesta.Harness.Browser.ExtJS
ハーネスの設定

test_harness.js
Harness.startメソッドにテストファイル名を渡す

ファイル名は複数指定可能
Harness.start('testA.js', 'testB.js');

オブジェクトを渡すことでグループ化もできる
17 Harness.start({
18 group: 'Sanity',
19 items: [
20 'tests/sanity/sanity.t.js'
21 ]
22 },{
23 group: 'Model',
24 items: [
25 'tests/model/employee.t.js',
26 'tests/model/department.t.js'

テストを書く
StartTest(startTestも可)関数に関数オブジェクトを渡す。

その関数オブジェクトの中にテストを書く。

関数オブジェクトに渡される引数はSiesta.Testのインスタン
ス。
1 StartTest(function(t) {
2 t.diag("基本的なテスト");
3 t.ok(Ext, 'ExtJS 確認');
4 });

Siesta.Test
アサーションメソッドが多数装備されている
t.ok
t.notOk
t.pass
t.isGrater
t.isGraterOrEqual
t.isLess
t.isLessOrEqual
t.diag

テストの実行
②実行ボタンを押す

①実行するテストに
チェックを入れる ③テストの結果が表示される

Model
単体でのテストが最もしやすいのがモデルです・

2 t.diag('Depertment Model');
3 t.requireOk('EX.model.Department', function() {
4 var dept = '開発部', mod;
5
6 mod = Ext.create('EX.model.Department', {
7 name: dept
8 });
9 t.is(mod.get('name'), dept, 'nameフィールド読み出しOK');
10
11 });
12 });

Model
2 t.diag('Employee Model');
3 var rec = {
4 name: '鬼瓦権三',
5 department_id: 1,
6 email: 'gonzo@onigawara.com',
7 gender: '男',
8 age: 33
9 };
10
11 t.requireOk('EX.model.Employee', function() {
12 var mod = Ext.create('EX.model.Employee', rec);
13
14 t.is(mod.genderEn(), 'male', 'genderEn 動作OK');
15 Ext.iterate(rec, function(key, value) {
16 t.is(mod.get(key), value, key + 'フィールド読み出しok');
17 });
18 });
19 });

Model(Store)
Storeのテストで実際にデータを読み込む

loadメソッドのテストでは非同期呼び出しになる

beginAsync / endAsync による方法

chainによる方法

Model(Store)
beginAsync/endAsyncでの非同期テスト
8 function() {
9 var s = Ext.create('EX.store.Employees'),
10 // 非同期処理の開始
11 async = t.beginAsync();
12
13 s.load({
14 callback: function() {
15 var c, m;
16
17 // 非同期処理の完了
18 t.endAsync(async);
19 t.pass('loaded');
:
:
24 }
25 });
26 }

Model(Store)
chainメソッドによるテスト

chainでは関数をどんどん繋げて実行できる
10 t.chain(
11 function (next) {
12 s.load({
13 callback: function() {
14 next();
15 }
16 });
17 },
18 function (next) {
19 var c,m;
20
21 t.pass('loaded');
:
:
27 }
28 );

Model/View
ViewのテストはModelとの結合テスト

waitForXXメソッド
t.waitForViewRendered('mylist dataview', function () {
t.pass('mylist が描画されました');
});
chainの中でリテラルでも使用可能
7 t.chain({
8 waitFor: 'rowsVisible',
9 args: [grid]
10 }, {

Model/View
Viewの場合はユーザー操作のシミュレートができる

click, typeなどの操作をシミュレートする

clickメソッド、typeメソッドなど、Siesta.Test.Simulate以下
のクラスのメソッドを呼び出す。
test.type(el, ‘abc’);
アクションコンフィグオブジェクトで指定する。
{
action: ‘click’,
target: el
}

Sencha ug3 siesta_share

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Sencha ug3 siesta_share

Similar to Sencha ug3 siesta_share (20)

More from 久司中村

More from 久司中村 (8)

Recently uploaded

Recently uploaded (10)