コントローラを別にテストするには？

Question

私は別の場所からいくつかのDOMを変更するためのコントローラを持っています。

コントローラは次のとおりです。

angular.module('myModule').controller('myController', myController); 

function myController() { 
    this.addSomeClass = function() { 
     $('#idOfSomeElement').addClass('someClass'); 
    }; 
} 

、それは次のように使用されています。異なるコンポーネントとhtml内。

<div id="idOfSomeElement"></div> 
. 
. 
. 
<some-angular-component-here> 
    <div ng-controller="myController as ctrl"> 
     <div ng-click="ctrl.addSomeClass()"></div> 
    </div> 
</some-angular-component-here> 
. 
. 
. 
<using-in-onother-place> 
    <div ng-controller="myController as ctrl"> 
     <div ng-click="ctrl.addSomeClass()"></div> 
    </div> 
</using-in-onother-place> 

私はこのようにテストしようとしますが、私は未定義のctrlを持っています。

describe('Controller test', function() { 
    'use strict'; 

    var ctrl, 
     element; 

    beforeEach(inject(function ($rootScope, $compile) { 
     var scope = $rootScope.$new(); 
     angular.element('<div id="idOfSomeElement"></div>' + 
         '<div ng-controller="myController as ctrl">' + 
          '<div id="button" ng-click="ctrl.addSomeClass()"></div>' + 
         '</div>'); 

     element = $compile(element)(scope); 
     scope.$apply(); 

     // how to get controller here with linked to html? 
     ctrl = $controller('myController'); 
     ctrl = element.controller('myController'); 

    })); 

    it('should add some class', function() { 

     var button = $(element).find('#button')[0]; 
     $(button).trigger('click'); 

     var someElement = $(element).find('#idOfSomeElement')[0]; 
     expect(someElement).toHaveSomeClass(); 
    }); 
}); 

この種類のコントローラをテストするにはどうすればよいですか？ そして、私はコントローラ内のDOMを操作することが悪いことを知っていますが、私はそれをユニットテストする必要があります。私はあなたがあなたの要素のプロパティにangular.elementの戻り値を代入するのを忘れたと思います

おかげ

Answer 1

...

element = angular.element(.... 

完全beforeEach：

beforeEach(inject(function ($rootScope, $compile) { 
    var scope = $rootScope.$new(); 
    element = angular.element('<div id="idOfSomeElement"></div>' + 
        '<div ng-controller="myController as ctrl">' + 
         '<div id="button" ng-click="ctrl.addSomeClass()"></div>' + 
        '</div>'); 

    element = $compile(element)(scope); 
    scope.$apply(); 

    // how to get controller here with linked to html? 
    ctrl = $controller('myController'); 
    ctrl = element.controller('myController'); 

}));