0

AngularJS チュートリアル AngularJS チュートリアルのステップ 3 の例では、別の e2e テストを追加することが提案されています。

it('should display the current filter value within an element with id "status"',
    function() {
  expect(element('#status').text()).toMatch(/Current filter: \s*$/);

  input('query').enter('nexus');

  expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);

  //alternative version of the last assertion that tests just the value of the binding
  using('#status').expect(binding('query')).toBe('nexus');
});

テストは最初は失敗します。ページに次を追加すると、テストが成功するはずです。それを追加すると、私のページは次のようになります。

<!doctype html>
<html lang="en" ng-app ng-controller="PhoneListCtrl">
    <head>
    <meta charset="utf-8">
        <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="lib/angular/angular.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-controller="PhoneListCtrl">

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <!--Sidebar content-->

                    Search:
                    <input ng-model="query">

                    <div id="status">
                        Current filter: {{query}}
                    </div>

                </div>
                <div class="span10">
                    <!--Body content-->

                    <ul class="phones">
                    <li ng-repeat="phone in phones | filter:query">
                        {{phone.name}}
                        <p>
                            {{phone.snippet}}
                        </p>
                    </li>
                </ul>

            </div>
        </div>
    </div>

</body>

ただし、最終的なアサーションは失敗します: ` 

using('#status').expect(binding('query')).toBe('nexus');`

次のメッセージが表示されます。

Chrome 23.0 PhoneCat App Phone list view should display the current filter value within an element with id "status" FAILED
expect select binding 'query' toBe "nexus"

これは、要素が実際にはクエリにバインドされておらず、要素のコンテンツがそのバインドを使用しているためだと思いますが、渡すにはどうすればよいですか?

前もって感謝します

デイブ

編集: Controllers.js

'use strict';

/* Controllers */

function PhoneListCtrl($scope) {
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S.",
     "age": 0},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet.",
     "age": 1},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet.",
     "age": 2}
  ];

  $scope.orderProp = 'age';
}
4

1 に答える 1

2

2回ご利用いただいているようですng-controller="PhoneListCtrl"。これにより、問題が発生する可能性があります。htmlタグのものを削除します。

于 2012-12-30T12:54:44.767 に答える