如何在Angular端到端测试中修改阵列模型

Question

我有一个角度应用程序，它在控制器中定义了一个表，如下所示：

$scope.rowHeaders = ["Revenues","Costs","Profit"];
$scope.data = [[100,230,300,400,500,600,700,800,900,1000,1100,1200], [30,40,50,60,70,80,90,100,110,120,130,140], [70,160,250,340,430,540,630,720,810,900,990,1100]];

rowHeaders应用于数据对象中的每一行。这与模板连接如下：

    <tbody>
      <tr ng-repeat="row in rowHeaders track by $index">
        <td>{{row}}</td>
        <td ng-repeat="cellData in data[$index] track by $index">
          <input id="data{{$parent.$index}}_{{$index}}" type="text" class="clsinputboxes" ng-model="data[$parent.$index][$index]" name="data{{$parent.$index}}_{{$index}}" ng-blur="updateColor($parent.$index, $index, data[$parent.$index][$index])" style="background-color: {{color[$parent.$index][$index]}}">
        </td>
      </tr>
     </tbody>

这将生成一个带有输入框的简单表格。当框中的输入发生变化时，框的背景颜色也会随着控制器中指定的updateColor（）内的代码而变化。

所有这些都很好。我希望能够编写一个非常简单的端到端测试，它将更改表中某个框的内容，然后检查updateColor（）函数是否正确触发（也许是通过检查背景颜色是否确实发生了变化）。事实证明，要做到这一点非常困难

我原以为像下面这样简单的东西应该会起作用：

input("data[1][1]").enter(20);

但这实际上不起作用，我得到了以下错误：

http://localhost:8000/test/e2e/scenarios.js:17:4
Selector [ng:model="data[1][1]"] did not match any elements.

然而，代码在不处于测试模式时工作良好，并且使用ng model="data[$parent.$index][$index]"将模型正确绑定在输入标记中。

对于端到端测试，我如何将一些数据输入到表中链接到阵列模型的任何框中？

我还尝试了以下操作（尽管我更愿意使用input（）.enter（））：

element("#data1_1").query(function(el, done) {
      el.click();
      el.val(20);
      done();
  });

这会更改框内容，但不会触发updateColor（）。我还试着把e1.blur（）放进去——这也不起作用。

Answer 1

我终于能够在Angular的优雅端到端场景运行器中实现这一点。

首先，我给table标记一个id——"inputTable"。

然后，场景中的以下跑步者完成了任务：using("table#inputTable tbody tr:eq(1) td:eq(2)").input("data[$parent.$index][$index]").enter(20);

向帮助我解决这个问题的Ari Lerner大喊。