Question

在我的Ember应用程序中，有一个控制状态字段的下拉列表。状态字段控制表中显示的列数。

如果下拉列表=打开，则有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。如果我打开控制台，并执行$（＆＃39;＃orders-table thead tr th＆＃39;）。length，则返回12.不是14.但是测试认为有14个。

是否有一些技巧或怪癖与Ember验收测试和DOM下拉效果有关？我应该以某种方式更改下拉值，而不是像上面那样的jQuery调用吗？

有没有理由为什么pauseTest（）返回的DOM与实际测试似乎认为的那个不同？

我已经尝试将更改下拉列表的代码移到＆＃34;然后＆＃34;之前，但这不起作用。我已经尝试将更改嵌套到第二个＆＃34;和＃34;然后（）＆＃34;在第一个，但这也不起作用。

如果重要的话，我会使用Mirage进行测试。

编辑添加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列。但最后两列仅在status = Open时出现，在相关列的orders.hbs模板中使用{{#if statusIsOpen}}调用进行检查。

Ember验收测试无法识别下拉列表的变化

0 个答案: