javascript - 为什么 AngularJS 教程的第 3 步不起作用?

标签 javascript angularjs jasmine frontend

step 3 of the AngularJS Tutorial AngularJS 教程示例建议添加另一个 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"

我认为这是因为该元素实际上并未绑定(bind)到查询,元素的内容使用该绑定(bind),但是,我应该做什么才能使其通过?

提前致谢

戴夫

编辑: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 标记上的一个。

关于javascript - 为什么 AngularJS 教程的第 3 步不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14084807/

相关文章:

Angular 4 测试 : fakeAsync with Inject

javascript - 如何从 Javascript 中的数组返回最低日期值和最高日期值?

Javascript:将链接文本更改为新文本填充或收缩文本以保持其与原始文本的大小相同

javascript - $routeProvider 将无法正常工作

javascript - window.location.href 不适用于 ionic 应用程序中的移动设备

angular - 为什么我的测试不使用服务 stub 方法?

javascript - 如何在 dc.js 的行图中创建目标线

javascript - 在 Typescript 中取消定义变量

javascript - 将值传递给工厂 angularjs

javascript - 如何让 jasmine 读取单个文件 Vue 组件?