如何使用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可用的$element提供者（非常類似於$scope因為它們是app注入器提供的動態特殊依賴項）。 您可以使用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操作。