Why doesn't step 3 of the AngularJS Tutorial work?

Question

In step 3 of the AngularJS Tutorial AngularJS tutorial the the example suggests adding another e2e test:

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');
});

The test initially fails, adding the following to the page is supposed to make it pass. Having added it my page is like this:

<!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>

The final assertation fails though: `

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

With the following message:

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"

I think this is because the element isn't actually bound to query, the contents of the element use that binding, however, what should I do the make it pass?

Thanks in advance

Dave

EDIT: 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';
}

Answer 1

I see that you have used twice ng-controller="PhoneListCtrl" . This is likely to cause problems. Remove the one on the html tag .

Why doesn't step 3 of the AngularJS Tutorial work?

Question

1 answers

solution1
2 ACCPTED 2012-12-30 12:54:44

Why doesn't step 3 of the AngularJS Tutorial work?

Question

1 answers

solution1 2 ACCPTED 2012-12-30 12:54:44

solution1
2 ACCPTED 2012-12-30 12:54:44