Как протестировать контроллер отдельно?

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 это плохо, но мне нужно его проверить.

Благодаря

Answer 1

Я думаю, что вы забыли присвоить возвращаемое значение angular.element вашей собственности элемента ...

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'); 

}));