Jasmine 및 Karma를 사용하여 DOM 및 CSS를 테스트하는 방법

Question

Jasmine 및 Karma를 사용하여 단일 HTML 페이지를 기반으로 한 순수 프론트 엔드 프로젝트를 TDD로 테스트하려고합니다.

재스민 문서는 내가 테스트하려고하는 가장 중요한 것 중 하나 인 DOM 조작에 대해 아무것도 말하지 않습니다.

질문은 간단합니다. DOM 변경 사항과 HTML 페이지의 내용 변경을 검사하려면 어떻게해야합니까?

HTML 파일

<a href="#/say_hello">Say Hello</a> 

JS 파일 :

// Router 
App.Router = Backbone.Router.extend({ 
    routes: { 
    '': 'home', 
    'say_hello': 'sayHello' 
    } 
}); 

var router = new App.Router(); 
router.on('route:sayHello', function(){ 
    $("body").append("Hello World"); 
}); 
Backbone.history.start(); 

이 어떻게 그런 행동을 테스트합니까 : 누군가가 클릭하면 는 "안부"나는 다음과 같은 코드가있는 경우 예를 들어 는 말 링크에서 HTML 본문의 텍스트에 "Hello World"가 포함됩니다.

그리고 CSS 변경 사항을 확인하거나 HTML 이벤트 (마우스 오버, 포커스, C)를 어떻게 시뮬레이트합니까? hange, load, etc ...)? 재스민과 카르마와 그게 가능합니까? 부 - - 모의 객체, 명세서 및 스파이 작은 방법

감사

Answer 1

TDD 단위 테스트이다. DOM에 대한 조작은 메소드에 의해 수행되어야하며 메소드를 테스트하려고합니다.

대신 jQuery 엔진 선택기와 메서드 'append'를 테스트하여 일부 메서드를 호출하십시오. 테스트에서 스파이를 만들면 당신의 메소드가 호출 될 것으로 예상됩니다. 당신이 당신의 시험 프로그램 방식을 추가해야합니다 작은 HTML 조각을 테스트해야하는 경우 https://github.com/velesin/jasmine-jquery

Answer 2

-

는을 경우 matcher DOM 조작을 당신이 재스민 jQuery를 사용할 수 있습니다 확인하십시오.

var fixture = '<h1>My HTML fragment</h1>'; 
 

 
document.body.insertAdjacentHTML(
 
    'afterbegin', 
 
    fixture);

당신은 또한 당신이 파일의 목록에 추가해야 카르마와 스타일 시트를 제공하기 위해 스타일 시트

var fixture = '<link rel="stylesheet" media="all" \ 
 
href="https://www.npmjs.com/static/css/index.css?last-changed=10d466883fa405391313dc8294e783fd">\ 
 
<header><div class="header-item header-nav-menu-container">\ 
 
<h1 style="color:#FFF">My HTML fragment</h1></div></header>'; 
 

 
document.body.insertAdjacentHTML(
 
    'afterbegin', 
 
    fixture);

또한

를 연결 관리하고 link them like this