如何使用Karma在AngularJS控制器中测试$元素？

Question

我有一个问题,我在我的应用程序中有一个控制器,我使用<div ng-controller='LogbookEditCtrl'> </div>,这个控制器有一个$元素提供程序,我需要修改元素.

describe('LogbookEditCtrl', function(){
  'use strict';

  beforeEach(module('logbooks.edit'));


  it('should create "logbook" model', inject(function($controller) {
    var scope = {},

    // THIS EXPLODES BECAUSE IT SAYS THE $element PROVIDER WAS NOT FOUND, because there
    // is no html element of course..the controller is being created on its own.
    ctrl = $controller('LogbookEditCtrl', {$scope: scope});

  }));

});

我尝试了类似下面的内容,但它再次说没有找到$ element提供程序:

beforeEach(inject(function(_$element_) {
  var element = compile('<div></div>');
  $element = element;
}));

Answer 1

您需要自己传递该依赖项,因为它引用了控制器的绑定元素.并且没有$element提供角度的提供程序(非常类似于$scope这些是应用程序注入器提供的动态特殊依赖项).您可以使用angular.element创建一个元素对象,并将其作为locals传递给控制器​​构造函数,如下所示.

var scope = {}, 
    element = angular.element('<div></div>'); //provide element you want to test

ctrl = $controller('LogbookEditCtrl', {$scope: scope, $element:element });

这开辟了这样一个事实:为什么不建议$element在控制器内部使用并在其中执行任何DOM操作.