0

次のようにコントローラーで定義されたテーブルを持つAngularアプリがあります。

$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() 内のコードによって、ボックスの背景色も変更されます。

これはすべて正常に機能します。テーブル内のボックスの 1 つの内容を変更し、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() を入れてみました - それもうまくいきません。

4

1 に答える 1

0

Angular のエレガントなエンド ツー エンド シナリオ ランナーでこれを機能させることができました。

まず、テーブル タグに「inputTable」という ID を付けました。

次に、シナリオランナーの次のようにトリックを行いました。 using("table#inputTable tbody tr:eq(1) td:eq(2)").input("data[$parent.$index][$index]").enter(20);

これを理解するのを手伝ってくれたアリ・ラーナーに感謝します。

于 2014-01-31T20:27:55.837 に答える