Ext JS 5へのアップグレード: テストは友達です

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Upgrading to Ext JS 5: Tests Are Your Friend を翻訳したものです。

Siesta Testing Ext JS 5 の公開の準備として、アップグレード前にアプリケーションはしっかりテストされていることを確保できるようにテストのカバレッジとコードベースの確認を始める時期です。テストがない時は、今日からでも Siesta のスモークテストを作り始めて、Ext JS の新しいバージョンでアプリケーションが動作することを確認できます。

Bryntum から見ると、我々のコンポーネントに役立つより速いグリッドやタッチイベントのサポートなどの機能を使い始めるのを楽しみにしています。弊社では、Siesta を使って、Ext JS のコンポーネントをテストしていますので、Ext JS 5 へのアップグレード処理を始めました。アップグレードは次のように取り組みました。

プラットフォームのメジャーバージョンアップグレードに対する姿勢

どのソフトウェアプロジェクトでも、基盤のプラットフォームを新しいメジャーバージョンにアップグレードすると、いくつかの問題も発生します。API が変更されたかもしれないし、過去のバグが解決されて、新しいバグが発生するかもしれません。Java や .NET のようなプラットフォームでは、コンパイルの手順がありますのでアップグレードエラーをより簡単に速く見つけられます。JavaScript では、コードを実行しないと動作するか確認できません。そのため、他のコンパイルされた言語と比べて、JavaScript にはコードカバレッジがより重要です。

アップグレードの処理にかかる時間は、テストスイートがあると、無い場合と比べて短くなります。テストスイートが無ければ、アプリケーション全体をサポートしているブラウザと OS で手動でテストする必要があります。

テストを始める前

さて、最新の Ext JS 5 ビルドをダウンロードしました、次はどうしましょう？ここにしっかり準備する為のステップやアップグレードに関する弊社の製品をリストしました。 Ext JS をアップグレードする度に、このような手順に従った方が良いでしょう。

アプリケーションに影響する重大な変更をみつけるために Ext JS 5 Upgrade Guide をご覧下さい。新しいバージョンの Ext JS で動作するように、テストのソースもアップデートする必要もあるかもしれません。ハックや Ext JS のバージョンを検出したりブラウザバージョンを確認するコードの部分を確認して下さい。（注：IE 8 とそれ以前のバージョンはもうサポートされていません）。常にハックや回避策はまだ必要かどうかを確認しましょう。

1
2
3

if (Ext.versions.extjs.isGreaterThanOrEqual("4.2.1")) {
    // Some hack here
}

過去のオーバーライドを確認する。 できたら、このオーバーライドがなぜ必要で何をしているかを説明したコメントを書いておくといいです。理想的としては、コード自体も Sencha フォーラムのバグ報告へのリンクも含まれているはずで、そうしておくと解決されたかどうか簡単に確認できます。もしバグを解決するためにプライベートの Ext JS メソッドのオーバーライドがある場合には、これも確認する必要があります。プライベートのメソッドは変更したり、もう存在していない可能性があります。運良くアップデートされたフレームワークのバージョンでバグが解決されていたら、オーバーライドはもう必要ではないかもしれません。
サードパーティコンポーネントを確認する。 サードパーティコンポーネントに頼っている場合は、この作者と早めに連絡して、Ext JS 5 のサポート予定を確認して下さい。より管理できるように、コンポーネントを自分でアップグレードするか、しないか判断して下さい。
テストスイートを実行する。 全てのテストを一つひとつグリーンにすることに集中して下さい。コアユニットテストから始めるのをおすすめします。コアがグリーンになった後、全てのテストが通るまで、インテグレートとアプリケーションテストを続けて下さい。
この時点で、もしテストスイートがグリーンであれば、アプリケーションがアップグレード前と同じ動作と外観をしていることを確認するために、手動で確認してください。外観や CSS などはテストしづらいです。もしかしたら、いくつかの CSS ルールが Ext JS フレームワークで変更されたかもしれないで、アプリケーションの外観を奇妙な感じにするようになったかもしれません。もしこの段階でクラッシュやエラーを見つけたら、このケースをカバーする追加のテストも作成したほうがいいかもしれません。

テストスイートが無い場合？

テストスイートが無い場合でも、今からテストの作成を始めるのはどうですか？ Siesta の最新リリースの一部として、素早くテストスタブを生成できるようになる強力なイベントレコーダーも追加しました。レコーダーは Ext JS とその様々なコンポーネントの深い知識を持ち、生成されたテストスクリプトがあると、大きく時間を節約できます。ただ基本的な CSS と Component Query（Siesta UIの中心）を知れば充分です。下記はレコーダーの動作を見ることができるビデオです。

さて、ユーザーの詳細が編集できる、シンプルなユーザー管理アプリケーションがあるとしましょう。

レアケースですが、ユーザーの名前を変更したい場合には、このフィールドに間違えて変更することを避けるために、保存する前にアプリケーションから確認するプロンプトが出るはずです。例えば、Save ボタンハンドラーのコードでナイーブなチェックが次のようにされたとしましょう：

buttons : [
    {
        text    : 'Save',
        handler : function() {
            var showPrompt;
 
            store.each(store, function(user) {
 
                showPrompt = "name" in user.modified;
 
                if (showPrompt) {
                    return false;
                }
            });
 
            if (showPrompt) {
                Ext.Msg.confirm('Please confirm name change', 'You have changed the name of at least one user, please confirm this is intended.')
            }
        }
    }
]

この流れを確認するシンプルなsmoke testは次のようになります：

test user の name を変更する
“Save” ボタンをクリックする
プロンプトが表示されたのを確認する
プロンプトの “Yes” ボタンをクリックする
プロンプトが消えたのを確認する
モデルが更新されたのを確認する

Siestaのコードでは、次の様にテストを書きます。このテストはここで実際に実行できます。

t.it('Should show a Y/N prompt when changing user name', function (t) {
 
    t.chain(
        // CSS クエリ
        { dblclick : '.namecell:contains(Homer)' },
 
        // 現在の名前の後にテキストを入力
        { type : "2[ENTER]"},
 
        // Component Query は >> で始めます
        { click : '>> button[text=Save]' },
 
        function(next) {
            t.messageBoxIsVisible();
 
            next();
        },
 
        { click : '>> button[text=Yes]' },
 
        function() {
            t.messageBoxIsHidden();
            t.expect(grid.store.getById(2).get('name')).toBe('Homer Simpson2');
        }
    )
})

Ext JS 4でテストを実行すると、予想通りに通ります。同じテストをExt JS 5 でダブルクリックして、実行すると、例外がスローされます。

この例外の原因は Ext JS 5 の重大な変更で、メジャーバージョンのアップグレードでは、このような変更はあるでしょう。 Ext.data.Model の “modified” プロパティはデフォルトでは定義されていません。以前は空のオブジェクトでした。これで、手動で探す努力をしなくても、小さいアップグレードの課題を発見する事ができました。このテストがなかったら、アップグレードされたアプリケーションを公開する前に、このシナリオをテストすることを思い出す必要があります。

アプリケーションの動作を保つためにソースコードをアップデートしたくない場合には、次のオーバーライドを利用すれば、上記の問題をシンプルに解決できます。

Ext.data.Model.override({
    constructor : function() {
        this.callParent(arguments);
        this.modified = {};
    }
})

上記のテストはだた起点となります。もっとテストして、コアモデルとビジネスロジックに対して、良いユニットテストカバレッジを追加することも重要です。コードベースの重要な部分が全てテストされていることを確保するために、Siesta 内でコードカバレッジレポートを生成するのもおすすめします。

まとめ

Ext JS 5 上で動作するアップデートされたコンポーネントを紹介できるのを楽しみにしています。我々のユーザーはより速い体験、タッチイベントサポート、コンポーネントによりモダンな外観を与える新しい Crisp テーマなどに期待することができます。

以前の経験でいうと、テストスイートがあると、Ext JS のバージョンアップグレードはより簡単でした。我々のテストを利用すると、アップグレードと手動のテストの処理にかかる時間が大きく削減できます。基盤となっているプラットフォームに大きい変更を起こす必要がある時、または自分のコードの部分をリファクターしたい時には、テストスイートはとても良い資産となります。

We hope you found the tips and tricks in this post useful for your own upgrade process. If you have any tricks of your own to share, please help your fellow Sencha community members by posting them in the comments or in the Ext JS 5 forums. 皆様のアップグレード処理に対して、この記事のコツやアドバイスが役に立ったら幸いです。もし皆様と共有したいコツがあったら、是非 Ext JS 5 のフォーラム . で他の Sencha ユーザーと共有して下さい。

Sencha Blog