Angularjs:angular-phonecat教程应用程序首次单元测试失败

Question

刚开始用茉莉花学习Angularjs和单元测试......

按照http://docs.angularjs.org/tutorial/step_02上的教程找到第一个单元测试(因为scope.phones.length是3 而应该通过)失败.

INFO [karma]: Karma v0.10.2 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 30.0.1599 (Mac OS X 10.8.5)]: Connected on socket BdjA1lVT9OOo8kgQKLYs
Chrome 30.0.1599 (Mac OS X 10.8.5) PhoneCat controllers PhoneListCtrl should create "phones" model with 3 phones FAILED
    ReferenceError: PhoneListCtrl is not defined
        at null.<anonymous> (/Applications/MAMP/htdocs/angular-phonecat/test/unit/controllersSpec.js:12:22)
Chrome 30.0.1599 (Mac OS X 10.8.5): Executed 2 of 2 (1 FAILED) (0.37 secs / 0.033 secs)

所以基本上,它声明没有定义PhoneListCtrl.然而,应用程序运行正常,我真的不知道从哪里开始考虑我在教程的开头!

这是我的单元测试,这是本教程的默认值.

测试/单元/ controllerSpec.js

'use strict';

/* jasmine specs for controllers go here */
describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){

    beforeEach(module('phonecatApp'));

    it('should create "phones" model with 3 phones', function() {
      var scope = {},
          ctrl = new PhoneListCtrl(scope);

      expect(scope.phones.length).toBe(3);
    });

    it('should create "phones" model with 3 phones', inject(function($controller) {
      var scope = {},
          ctrl = $controller('PhoneListCtrl', {$scope:scope});

      expect(scope.phones.length).toBe(3);
    }));

  });
});

应用程序/ JS/controller.js

'use strict';

/* Controllers */

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
  $scope.hello = "Hello World";
});

config/karma.conf.js http://pastebin.com/PPWjSmyJ

Answer 1

示例中有 2 个单元测试（2it块）。它们看起来应该做同样的事情，但只有第二个真正创建了您的控制器。

\n\n

当你在 Angular 中定义控制器时，它不是一个可以初始化的全局可用对象new Controller(...)。您必须从角度请求它。

\n\n

您的第二个测试（似乎正在通过）通过注入$controller该服务将执行设置和请求控制器所需的任何操作。

\n\n

inject(function($controller) { ... });\n

\n\n

然后它使用该服务创建控制器，如下所示

\n\n

var scope = {},\n    ctrl = $controller(\'PhoneListCtrl\', {$scope:scope});\n

\n\n

在你的第一次测试中，你尝试只使用PhoneListCtrl直接使用该变量。正如错误所述，除非您在函数中定义具有该名称的变量，否则它不存在。

\n\n\n\n

我刚刚注意到教程中的测试失败。这专门适用于您在全局命名空间上定义了控制器的情况。例如

\n\n

function PhoneListCtrl($scope) {\n  $scope.phones = [\n    {\'name\': \'Nexus S\',\n     \'snippet\': \'Fast just got faster with Nexus S.\'},\n    {\'name\': \'Motorola XOOM\xe2\x84\xa2 with Wi-Fi\',\n     \'snippet\': \'The Next, Next Generation tablet.\'},\n    {\'name\': \'MOTOROLA XOOM\xe2\x84\xa2\',\n     \'snippet\': \'The Next, Next Generation tablet.\'}\n  ];\n  $scope.hello = "Hello World";\n};\nphonecatApp.controller(\'PhoneListCtrl\', PhoneListCtrl);\n

\n\n

然后测试就会起作用，因为您已经全局定义了用作控制器的函数，因此您可以测试它而无需注意它是控制器这一事实。这意味着如果您尝试使用其他服务，您将必须自己注入它们并执行任何对$controller您有用的操作。

\n