$ 카르마/재스민에서 템플릿을 컴파일하지 못했습니다.

나는 이것을 PhantomJS와 Chrome 모두에서 테스트했습니다.

it('Should do something', inject(function ($rootScope, $templateCache, $compile) { 
    var scope = $rootScope.$new(); 
    scope.$digest(); 

    var template = $templateCache.get('/app/views/mytemplate.html'); 
    var compiler = $compile(template); 
    var compiledTemplate = compiler(scope); 
    console.log(compiledTemplate); 
}));

는 내가 발견 한 것은 템플릿을 가져올 제대로되고 있는지, 그리고 원시 HTML에 해당

내가 카르마와 단위 테스트에서 생성 된 HTML 코드에 대한 액세스 권한을 얻으려고 this question에 따라 내 컴퓨터에 파일. 그러나 compiledTemplate은 컴파일되지 않습니다. 기본적으로 Angular는 ng 태그가 지정된 div를 제거하고 값이 무엇이되어야하는지에 관계없이 주석으로 대체합니다. 내가 특별히 단위 테스트에서 어떤 배열에 scope.foos을 설정하더라도

<!-- ngRepeat: foo in foos -->

: 예를 들어

<ol ng-repeat = "foo in foos"> 
    <li>foo</li> 
</ol>

은 항상로 대체됩니다. 나는 waitsFor 및 setTimeout 메서드를 추가하여 카르마가 8 초 동안 기다리도록 시도했다. 그리고 이것은 여전히 내가 얻는 동작이다. 또한 CSS 속성을 테스트 한 결과 카르마가 올바르게 설정했음을 발견했습니다. 예를 들어, ng-show 또는 ng-hide div에는 예상되는 CSS 속성이 있지만 컴파일 된 HTML을 수정해야하는 지시문의 경우 모든 내용이 주석으로 바뀝니다.

단위 테스트에서 HTML의 Angular-modified DOM 구조를 얻을 수있는 방법이 있습니까? 즉, 각도 div가 제거 된 HTML뿐만 아니라 Angular가 실제로 변경 한 HTML이 무엇입니까?

출처

2014-12-01 A. Duff

컴파일 후'$ digest()'를하고 있습니까? 다이제스트를 한 다음,'array '로'scope.foos'를 사용하여'compiledTemplate.children ('li ')'을 시도하고 아무것도 얻지 못하는지 확인하십시오. – user2943490

감사! 편집 후 $ digest를 이동하면 트릭을 완료 한 것으로 보입니다. 나는 그것이 그것이 어디로 갔는지 이해하지 못했습니다. –

@ user2943490이 질문을 "닫으십시오"대답을 추가하십시오;) – glepretre

컴파일 후 $digest()을 수행해야합니다. 다이제스트 후에 compiledTemplate.find('ol') (일부 배열로 scope.foos 포함)은 ng 반복 요소를 반환해야합니다.

출처

2014-12-03 22:23:59 user2943490

$ 카르마/재스민에서 템플릿을 컴파일하지 못했습니다.

답변

관련 문제