在AngularJS教程的第3步中,该示例建议添加另一个端到端测试:
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: nexuss*$/);
//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"
我认为这是因为元素实际上没有绑定到查询,元素的内容使用该绑定,但是,我应该怎么做才能使它通过?
Thanks in advance
戴夫编辑: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';
}
我看到您使用了两次ng-controller="PhoneListCtrl"
。这很可能会引起问题。去掉html
标签上的那个