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×2個單元測試it的塊）。 他們看起來應該做同樣的事情，但只有第二個實際上創建了你的控制器。

當您以角度定義控制器時，它不是可以使用new Controller(...)初始化的全局可用對象。 你必須從角度請求它。

您的第二個測試（似乎正在通過）通過注入$controller服務來執行此操作，該服務將執行設置和請求控制器所需的任何操作。

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

然后它使用此服務創建控制器

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

在第一次測試中，您嘗試直接使用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";
};
phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

然后測試將起作用，因為您具有全局定義的功能，用作控制器，因此您可以測試它而無需關注它是控制器的事實。 這意味着如果您嘗試使用其他服務，則必須自己注入並執行$controller將為您執行的任何操作。