使用父控制器方法调用测试 Angular

Question

我第一次尝试为 Angular 应用程序编写单元测试。目前我在测试中遇到了一些问题运行。运行该应用程序正常运行，没有出现任何错误。但是，当运行使用 Karma 和 Jasmine 进行测试时，出现以下错误：

TypeError: 'undefined' is not a function (evaluating '$scope.addActiveClassToMenuButton('menuButtonHome')')

我正在使用 ui.router 模块。不确定这是否重要。

父控制器

父控制器包含以下方法：

angular.module('testApp')
.controller('ParentCtrl', function ($scope, $resource) {

    $scope.addActiveClassToMenuButton = function(buttonId) {
        //Some code
    }

}

子控制器

子控制器这样调用父方法：

angular.module('testApp')
.controller('ChildCtrl', function ($scope, $resource) {

    $scope.addActiveClassToMenuButton('menuButtonHome');

}

子控制器测试文件

失败的测试文件：

describe('Child controller tests. ', function () {
    beforeEach(module('testApp'));

    var ChildCtrl, scope;

    beforeEach(inject(function ($controller, $rootScope) {
      scope = $rootScope.$new();
      ChildCtrl = $controller('ChildCtrl', {
        $scope: scope
      });
    }));

    it('simple false test', function () {
      expect(false).toBe(false);
    });
});

即使我还没有在测试中使用范围，所有测试都失败了，因为代码找不到父方法。

解决方案

将测试文件更改为此有效：

describe('Child controller tests. ', function () {
  beforeEach(module('testApp'));

  var controller, scope, parentScope, childScope;

  beforeEach(inject(function ($controller, $rootScope, $compile) {
    scope = $rootScope.$new();
    var el = angular.element('<div ng-controller="ParentCtrl"><div ng-controller="ChildCtrl"></div></div>');
    $compile(el)(scope);

    parentScope = el.scope();
    childScope = el.children().scope();
  }));

  it('simple false test', function () {
    expect(false).toBe(false);
  });

});

Answer 1

试试这个..

describe('Child controller tests. ', function () {
    beforeEach(module('testApp'));

    var ChildCtrl, scope;

    beforeEach(inject(function ($controller, $rootScope, $compile) {
      scope = $rootScope.$new();
      var el = angular.element('<div ng-controller="ParentCtrl"><div ng-controller="ChildCtrl"></div></div>');

      $compile(el)(scope);

      // to access parent controller.
      var parentScope = el.scope();
      var childScope = el.children().scope();

      // now you should be able to access from parent and child scopes.
    }));

    it('simple false test', function () {
      expect(false).toBe(false);
    });
});

这将首先实例化 ParentCtrl，然后使用 ChildCtrl 的范围扩展它的范围。

在你给出的例子中只实例化了ChildCtrl ParentCtrl没有实例化。

使用父控制器方法调用测试 Angular

Testing Angular with parent controller method call

javascript

unit-testing

jasmine

angularjs

父控制器

子控制器

子控制器测试文件

解决方案