0

私の Ember アプリには、ステータス フィールドを制御するドロップダウンがあります。ステータス フィールドは、テーブルに表示される列の数を制御します。

ドロップダウン = Open の場合、14 列あります。それ以外の場合は 12 個あります。アプリはこの面で正常に動作します。

このための受け入れテストを作成しようとしていますが、いくつかの問題があります。

ドロップダウンは id=status-dropdown でタグ付けされています。注文テンプレート/ルートにあります。

私の受け入れテストでは、これがあります：

test('Col numbers by status', function(assert) {
  //go to the orders pages
  visit('/orders');
  //wait for the orders visit to resolve
  andThen(function() {
    //change the status to All Statuses
    Ember.$('#status-dropdown').val("All Statuses").change();
    //now check the number of columns in the orders table
    assert.equal(Ember.$('#orders-table thead tr th').length, 12);
    return pauseTest(); //for debugging
  });
});

しかし、テストでは列の数が 14 に戻ります。

pauseTest() 呼び出しを使用すると、テストが動作しているように見える DOM を確認できます。コンソールを開いて $('#orders-table thead tr th').length を実行すると、14 ではなく 12 が返されます。ただし、テストでは 14 があると見なされます。

Ember 受け入れテストと DOM のドロップダウン効果に関連して、私が見逃しているトリックや癖はありますか? 上記のような jQuery 呼び出し以外の方法でドロップダウン値を変更する必要がありますか?

pauseTest() が返す DOM が、実際のテストが存在すると思われるものと異なる理由はありますか?

ドロップダウンを「andThen」の前に変更するコードを移動しようとしましたが、うまくいきません。最初の "andThen()" 内の 2 番目の "andThen()" でドロップダウンへの変更をネストしようとしましたが、それも機能しません。

問題がある場合は、テストにミラージュを使用しています。

Handlebars コードを追加するために編集:

//status-dropdown.hbs

<select id="status-dropdown" class="col-xs-12" onchange={{action "filterByStatus" value="target.value"}}>
  <option value="all" selected={{eq status -1}}>All Statuses</option>
  <option value="Open" selected={{eq status "Open"}}>Open</option>
  <option value="Filled" selected={{eq status "Filled"}}>Filled</option>
  <option value="Rejected" selected={{eq status "Rejected"}}>Rejected</option>
  <option value="Cancelled" selected={{eq status "Cancelled"}}>Cancelled</option>
  <option value="Expired" selected={{eq status "Expired"}}>Expired</option>
</select>

上記のコードは、orders.hbs テンプレートに部分的に統合されています。

orders.hbs コードはかなり大きくて複雑ですが、テストの結果、重要なのはメイン テーブルに 14 列あることです。ただし、最後の 2 つの列は status = Open の場合にのみ表示されます。これは、関連する列の orders.hbs テンプレートの {{#if statusIsOpen}} 呼び出しでチェックされます。

4

0 に答える 0