Sencha Architect と Sencha Test で開発環境を構築する手順をメモっとく。

この記事では、ワークスペースを用いてアプリケーションのプロジェクトとテストのプロジェクトを分離する。そうすることでコンポーネントごとのテストを書けるようにして、テスト実行の安定性と速度を向上させている。

前提条件

この記事では下記バージョンの Sencha ツール群を使用している。

Tool	Version
Sencha Architect	4.2.7
Sencha Ext JS	7.1.0.48
Sencha Cmd	7.1.0.16
Sencha Test	2.3.0.328

ワークスペースを生成する

Sencha Cmd を使用してワークスペースを生成する。

$ sencha generate workspace example
$ cd example
$ git init
$ git add .
$ git commit -m "Generate workspace"

Sencha Architect プロジェクトを新規作成する

Sencha Architect でプロジェクトを新規作成する。フレームワークとして Ext JS 7.1.x Modern を選択し、テンプレートとして Blank Project を選択する。

プロジェクト設定 (Project settings) でポート番号を1842番に指定する。Sencha Architect のプロジェクトファイルに保持されるポート番号が動的に変わるのを防ぐため。

Sencha Architect プロジェクトを下記の設定で保存する。Save Path をワークスペースに指定するのを忘れやすいので注意すること。

Save Path: ＜ワークスペース＞
Project Name: main
App Name: Example

Sencha Architect が生成するローカルファイルを Git が無視するように設定する。

$ cat << EOS >> .gitignore
.architect
.arch-internal-preview.css
EOS
$ git add .
$ git commit -m "Generate main project"

Sencha Test プロジェクトを生成する

Sencha Cmd でテストプロジェクトを生成する。SDK としてワークスペースにある Ext JS を指定する。また、スターターテンプレートを無効にして、Modern ツールキットを使用するようにも指定する。

$ sencha -sdk=ext generate app -starter=false -modern ExampleTest test

app.json にあるクラスパスの設定に "../main/app" をオーバーライドの設定に "../main/overrides" を追加する。

$ sed -i "" 's|"app"$|"app", "../main/app"|' test/app.json
$ sed -i "" 's|"overrides"$|"overrides", "../main/overrides"|' test/app.json

test/app.js のメッセージボックスを表示する処理を削除する。

test/app.js

/*
 * This call registers your application to be launched when the browser is ready.
 */
Ext.application({
    name: 'ExampleTest'
});

テスト実行時にブラウザーの種類を表示するようにコードを追加する。テスト実行のデモをするときには便利。必須ではない。

test/app.js

/*
 * This call registers your application to be launched when the browser is ready.
 */
Ext.application({
    name: 'ExampleTest',

    requires: [
        'Ext.Panel'
    ],

    launch: () => {
        var config = { floated: true, right: 0, bottom: 0 };
        if (Ext.isChrome) Ext.merge(config, { iconCls: 'x-fab fa-chrome',  title: 'Chrome'  });
        if (Ext.isEdge  ) Ext.merge(config, { iconCls: 'x-fab fa-edge',    title: 'Edge'    });
        if (Ext.isGecko ) Ext.merge(config, { iconCls: 'x-fab fa-firefox', title: 'Firefox' });
        if (Ext.isOpera ) Ext.merge(config, { iconCls: 'x-fab fa-opera',   title: 'Opera'   });
        if (Ext.isSafari) Ext.merge(config, { iconCls: 'x-fab fa-safari',  title: 'Safari'  });
        Ext.create('Ext.Panel', config).show();
    }
});

Sencha Studio でワークスペースを開く。New Project ではなく Open Project であることに注意。Example ワークスペースの ExampleTest アプリケーションでテストプロジェクトの初期化 (Initialize Test Project) を実施する。タブが ExampleTest Tests になっていることを確認してから Initialize Test Project ボタンをクリックすることに注意。

テストプロジェクトを下記の設定で保存する。コードカバレッジが正常に出るようにコードカバレッジフィルター (Code Coverage Filters) も合わせて設定しておく。

Location (URL): http://localhost:1841/test/
Automatically start app watch: Enable
Code Coverage Filters:
- ^/ext/.*?$
- ^/build/.*?$
- ^/test/.*?$

コンポーネントテストのためのシナリオを下記の設定で新規作成する。

Name: Component
Test type: In-browser
Directory: component
Additional Libraries: すべて削除する

$ git add .
$ git commit -m "Generate test project"

実装とテストができるか確認する

Sencha Architect で右上のツールボックス (Toolbox) からボタン (Button) をドラッグアンドドロップして追加する。

ツールバーの保存ボタンをクリックして保存し、保存ボタンの右隣のアイコンをクリックして、プレビュープロジェクト (Preview Project) ダイアログのプレビュー (Preview) ボタンをクリックしてプレビューする。下記のように全画面の MyButton が表示されれば実装はきちんとできている。

Sencha Studio で Jasmine テストスイートを MyButtonTest という名前で作成する。

MyButton をクリックして、tap イベントが発生することを確認するテストを記述する。

ここで beforeEach メソッドで、テスト対象の MyButton コンポーネントを生成し、テストアプリケーションのビューポートに追加している。テストではそのボタンを取得し、ボタンにイベントハンドラーを動的に付与し、tap イベントが発生したら done メソッドを呼び出してテストを成功させるようにしている。なので、後続する click メソッドの呼び出しで、tap イベントが発生し、前述のイベントハンドラーが実行されることでテストが成功する。afterEach メソッドでテストのために生成したコンポーネントを破棄して、ひとつのテストケースが完了する。

test/test/component/MyButtonTest.js

describe("MyButtonTest", function () {
    let component;

    beforeEach(function () {
        component = Ext.create("Example.view.MyButton");
        Ext.getApplication().viewport.add(component);
    });

    afterEach(function () {
        component.destroy();
    });

    it("fires \"tap\" event after clicking", function (done) {
        ST.button("[text=MyButton]")
            .and(button => button.on("tap", () => done()))
            .click();
    });
});

Component テストシナリオを選択し、ブラウザー (Browsers) からテストを実行したいブラウザーを選ぶ。そうすると、Sencha Studio からアプリケーションを立ち上げるか確認するダイアログが出ると思うので、Sencha Studio にアプリケーションを立ち上げてもらう。そして、テスト実行 (Run) ボタンをクリックする。

テストが無事に完了すれば開発環境が正常に構築できたことになる。

この記事では Sencha Architect と Sencha Test で開発環境を構築する方法について説明した。生産性高く SPA が作れる環境だと思うので、興味のある人はトライアル版で試してみてほしい。