单元测试 – Angularjs：angular-phonecat教程应用程序首次单元

发布时间：2020-12-17 10:26:17 所属栏目：安全来源：网络整理

导读：刚开始学习 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 [laun

刚开始学习 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?',Next Generation tablet.'}
  ];
  $scope.hello = "Hello World";
});

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

在示例中有2个单元测试(2个块).他们看起来应该做同样的事情,但只有第二个实际上创建了你的控制器.

当您以角度定义控制器时,它不是可以使用新Controller(…)初始化的全局可用对象.你必须从角度请求它.

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

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

然后它使用此服务创建控制器

var scope = {},{$scope:scope});

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

我刚刚注意到教程中的测试失败了.如果您已在全局命名空间上定义了控制器,则特别适用于此.例如

function PhoneListCtrl($scope) {
  $scope.phones = [
    {'name': 'Nexus S',Next Generation tablet.'}
  ];
  $scope.hello = "Hello World";
};
phonecatApp.controller('PhoneListCtrl',PhoneListCtrl);

然后测试将起作用,因为您具有全局定义的功能,用作控制器,因此您可以测试它而无需关注它是控制器的事实.这意味着如果您尝试使用其他服务,则必须自己注入并执行$controller将为您执行的任何操作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!