javascript - extjs アプリのテスト

Question

グリッドのように、コンポーネントまたはコンポーネント パーツの事前生成された ID がある場合、extjs アプリケーションをテストするにはどうすればよいですか。

各コンポーネントに ID を追加することはできますが、1 つ以上の ID を追加できず、アプリケーションが大きくて複雑な場合はどうすればよいでしょうか?

ExtJS/Siesta には、各コンポーネントの事前定義された ID に依存することなく、アプリケーション内のコンポーネント/要素を見つけることができる関数またはモジュールがありますか?

Answer 1

まず、コンポーネントで ID を使用する際は十分に注意してください。私は彼らとの問題のかなりの部分を見てきました。

第二に、ExtJS は、コンポーネントと要素をターゲットにするいくつかの方法を提供します。2つを混ぜないでください。

コンポーネントの場合:

• Ext.getCmp(id)
• Ext.ComponentQuery .query()
• 上（）
• 下（）
• 次の兄弟()
• 前の兄弟()
• 子（）
• 以前のノード()

加えて様々なfind..方法

要素の場合:

• Ext.get()
• Ext.dom.Query()

DOM クエリの詳細http://docs.sencha.com/core/manual/content/domquery.html

Answer 2

シエスタを使用すると、クリックする場所などをターゲットにする際に多くのオプションがあります。

• Dom ノード ID (Ext コンポーネント ID と同じ)
• 任意のコンポーネント クエリ
• 任意の CSS クエリ
• 座標
• Real Ext Component JS インスタンス
• 実際の DOM ノード インスタンス
• 複合クエリ (コンポーネント クエリと CSS クエリの組み合わせ、「.x-grid => .x-grid-cell」
• 上記のいずれかを返す関数。

こちらのスライドの詳細: https://speakerdeck.com/mats/testing-sencha-touch

Answer 3

自動機能 GUI テスト ツールRIATestを参照してください。

RIATest は、ExtJS によって動的に生成された ID を無視する方法を知っていますが、ID をコンポーネントに手動で割り当てると、ツールはID を識別に使用します (以下のサンプルの #tree2 を参照)。

RIATest のテストは、ExtJS UI ウィジェットの観点から動作します。

ExtJS ウィジェットで動作する RIATest スクリプトの例:

次の例では、「次のページ」というラベルが付いた ExtJS ボタンをクリックします。

ExtButton("Next Page")=>click();

次の例では、ある ExtJS ツリーから別の ExtJS ツリーに行をドラッグ アンド ドロップします。

ExtRow("Controller.js")=>dragAndDropTo(
    ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));

そして、これは ExtJS ボックスのヘッダーを折りたたみます:

ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();

(上記のサンプル コードはすべて、ExtJS サンプル アプリケーションで実行される実際のテスト スクリプトからのものです)。

(免責事項: 私は RIATest チームのメンバーです)。