카르마 + 재스민을 사용한 AngularJS 지시문 테스트

Question

나는 AngularJS 지시문을 테스트하기 위해 Karma + Jasmine을 사용하고 있으며 300 개가 넘는 테스트를 작성했으며 매우 행복했습니다. 일부 테스트는 실패했습니다. 일부 요소에 적용된 CSS가 필요하기 때문입니다. (내 지시문의 코드 조각은이 스타일을 기반으로 한 크기 계산을 수행합니다) CSS 구현을 포함하는 파일을 추가 했음에도 불구하고이 파일은 무시 된 것처럼 보입니다. 테스트 중. 내 카르마 설정에서 내가 이런 식으로 CSS 파일 추가 :

files: [ 
    // .. 
    'styles/foo.css', 
    // .. 
], 

위의 설정이 body 오히려 head 이외의 링크 태그를 생성을, 그래서 나는 JS를 사용하여 "수동"는 CSS를 주입하려고 :

angular.element(document).find('head').prepend(
     '<style type="text/css">@charset "UTF-8";' + 
     '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
     '</style>' 
); 

하지만이 방법은 효과가없는 것으로 나타났습니다 (테스트 한 결과 스타일 태그가 올바르게 주입 됨). 나는 마침내 내가 각도 $compile를 사용하여 컴파일 HTML 사이 스타일의 블록을 추가하려고 :

var element = ng.element('<div>' + 
'<style type="text/css">@charset "UTF-8";' + 
      '/* THE STYLE I NEED FOR MY TESTS HERE */' + 
      '</style>' + 
'<my-directive></my-directive>' + 
+ '</div>'); 
$compile(element)(scope); 

...하지만 여전히 운 ... 나는 또한 PhantomJS을까지 테스트 러너를 전환 시도 크롬,하지만 문제는 동일합니다 : 스타일을 어떻게 든 (가 주입되어 있지만, 그것은 0을 반환 jQuery(targetElement).css('width')를 사용하여 사실, 요소에 적용되지 않는) 무시됩니다 ...

그래서, 내 큰 질문 : 카르마 테스트에서 스타일 시트를 가져와 성공적으로 적용해야합니까 ??? :

Answer 1

좋아, 문제는 매우 간단하고 어리 석다 ... 왜 나는 그것을 깨닫는 데 너무 많은 시간을 잃었는지 궁금하다 : P 그래서 ... CSS는 내가 설정 파일에서 그들을 지정하여 카르마에 의해 완벽하게 주입된다. 첫 번째 접근 방식 (다른 플러그인이나 흑 마술은 필요 없습니다.)으로 끝났지 만 ... DOM에 추가 될 때까지 CSS 스타일이 요소에 적용되지 않습니다! 이것은 카르마, 앵글, 재스민 또는 기타 ...이 문제는 브라우저 엔진 작동 방식과 관련이 없습니다. 브라우저는 CSS 정의를 분석하고이 페이지있어서의 요소를 렌더링하지만, 때 각 테스트에서 나는 쓰기 :

var element = angular.element('<my-directive></my-directive>'); 
$compile(element)(scope); 

내가 모든 사람에게 알 수없는 메모리 DOM 노드,하지만 내 자바 스크립트 코드를 처리하고있어! 브라우저 엔진이 CSS를 js 변수에있는 인 메모리 노드에 어떻게 적용해야합니까? 분명히 ... 페이지의 노드 트리를 탐색 할 수는 없으므로 ... "수정"은 매우 간단합니다. DOM에 요소를 추가해야합니다.

angular.element(document).find('body').append(element); 

Answer 2

상황에 따라 DOM이 특정 상태인지 테스트하고 싶습니다.이 유스 케이스를 염두에두고 설계된 것처럼 보이는 플러그인을 발견했습니다 : jasmine-jquery. 당신의 DOM 조작에 대한 AngularJS와를 사용하여 다시 ',이 확장은 여전히 ​​그 결과 DOM의 상태를 테스트하게됩니다. 특히

을 나는 당신이 시험에 CSS를 삽입 할 수있는 StyleSheet Fixtures에서 봐한다고 생각합니다.

면책 조항 : 아직 어떤 것도 테스트하지 않았지만 대답은 연구 결과 일뿐입니다.