컨트롤러를 별도로 테스트하는 방법은 무엇입니까?

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

}));