AngularJS 지시문을 테스트하는 방법

AngularJS를 사용하는 Rails 3.2 응용 프로그램을 작성 중입니다. Angular가 필요한 것을 할 수는 있지만, 내가하고있는 일을 테스트하는 방법을 찾는 데는 매우 어려움을 겪고 있습니다. 나는 PhantomJS를 사용하여 Jasmine 스펙을 실행하기 위해 guard-jasmine을 사용하고 있습니다. 위의 코드는 정확히 의도가 무엇을 할 수 않습니다AngularJS 지시문을 테스트하는 방법

window.Project = 
    App: angular.module('app', []) 
    Directive: {} 

Project.Directive.DirectiveElement = 
    -> 
    restrict: 'C' 
    link: (scope, element, attrs) -> 
     element.html 'hello world' 
Project.App.directive 'directiveElement', Project.Directive.DirectiveElement

:처럼 보이는 (커피 스크립트에서)

<html id="ng-app" ng-app="app"> 
    <div id="directive-element" class="directive-element"> 
    </div> 
</html>

자바 스크립트 : 여기

은 (관련) HTML입니다. 테스트가 문제입니다. 나는 그들에게 전혀 일하도록 할 수 없다. 이것이 내가 시도한 한 가지입니다. 이것을 게시하는 것은 대화를 어딘가에 시작하는 것입니다. AS를

describe 'App.Directive.DirectiveElement', -> 
    it 'updates directive-element', -> 
    inject ($compile, $rootScope) -> 
     element = $compile('<div id="app" ng-app="app"><div id="directive'element" class="directive-element"></div></div>') 
     expect(element.text()).toEqual('hello world')

옆으로, 나는 AngularJS와 새로운 오전, 그래서 등 내가 다음 아니라고 네임 스페이스 지정, 모듈,에 관한 모범 사례가있는 경우, 지침 감상 할 수있다.

어떻게 테스트 할 수 있습니까?

출처

2012-10-05 toadjamb

Here's how alert directive is tested in angular-ui/bootstrap.

당신이 beforeEach(module('myModule'))으로 테스트하는 것을 모듈 테스트 러너에게하십시오 : 여기
Here's another simple set of tests, for the buttons directive.

은 몇 가지 팁입니다.
지시어에 외부 templateUrl이있는 경우 시험용으로 사전 캐싱을 원할 것입니다. 테스트 러너는 비동기식으로 GET 템플릿을 사용할 수 없습니다. 부트 스트랩에서 우리는 빌드 단계로 자바 스크립트에 템플릿을 삽입하고 각 템플릿을 모듈로 만듭니다. 우리는 grunt-html2js 쓸데없는 작업을 사용합니다.
beforeEach에있는 inject 도우미를 사용하여 $ compile 및 $ rootScope 및 기타 필요한 서비스를 주입하십시오. var myScope = $rootScope.$new()을 사용하여 각 테스트의 새로운 범위를 만드십시오. var myElement = $compile('<my-directive></my-directive>')(myScope);을 사용하여 지시문의 인스턴스를 만들고 해당 요소에 액세스 할 수 있습니다.
지시문이 자체 범위를 만들고 이에 대해 테스트하려는 경우 var directiveScope = myElement.children().scope()을 수행하여 해당 지시어의 범위에 액세스 할 수 있습니다. - 요소의 자식 (지시문 자체)을 가져오고 범위 .
테스트 시간 초과의 경우 $timeout.flush()을 사용하여 보류중인 모든 시간 제한을 종료 할 수 있습니다. 약속을 테스트

다음 다이제스트 때까지 then 콜백을 호출하지

deferred.resolve(); scope.$apply();

다양성이 다른 지시문에 대한 테스트는 the bootstrap repo에서 찾을 수 있습니다. src/{directiveName}/test/을 살펴보십시오.

출처

2012-10-06 14:21:17

plunker가 더 이상 작동하지 않는 것으로 판단되면 작동중인 버전이 있습니까? AngularJS에 대한 Jasmine의 지침을 테스트하는 방법에 관한 문서는 매우 좋지 않으며 큰 그림에있는 것과 같은 예제를 아프게합니다. – Philipp

OK, 실제 테스트에 대한 링크를 제공하기 위해 편집했습니다 :-) –

myElement.children(). scope()에 대해 확실합니까? 나는 나를 위해 일하지 않는다. = ( -> UPD : 나는 $ scope을해야만했다. $ apply() –

Angular Test Patterns 당신을 도울 수 있습니다, coffeescript와 javascript에 모두 예제가 있습니다.

다음은 example directive이 rendering the expected output인지 확인하는 테스트 패턴입니다.

출처

2013-09-17 21:34:33 daniellmb

AngularJS 지시문을 테스트하는 방법

답변

관련 문제