0

在我的 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。如果我打开控制台并执行 $('#orders-table thead tr th').length，它会返回 12。不是 14。但测试认为有 14。

是否有一些与 Ember 验收测试和 DOM 上的下拉效果相关的技巧或怪癖？除了上面的 jQuery 调用之外，我是否应该以某种方式更改下拉值？

pauseTest() 返回的 DOM 是否与实际测试认为的 DOM 不同？

我尝试将更改下拉列表的代码移动到“andThen”之前，但这不起作用。我已经尝试将更改嵌套在第一个中的第二个“andThen()”中，但这也不起作用。

如果这很重要，我正在使用 Mirage 进行测试。

编辑添加把手代码：

//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}} 进行检查。

4

0 回答 0