부트 스트랩을 사용할 때 zombie.js 브라우저가 빈 HTML을 반환하는 이유는 무엇입니까?

모카와 좀비를 사용하여 Node.js/Express.js 애플리케이션을 테스트하려고합니다. 간단한 테스트를 통과 할 수 있지만 Twitter 부트 스트랩의 스크립트 태그를 내보기에 추가하자마자 브라우저 객체가 빈 HTML을 반환합니다.부트 스트랩을 사용할 때 zombie.js 브라우저가 빈 HTML을 반환하는 이유는 무엇입니까?

process.env.NODE_ENV = 'test'; 

var app = require('../app'); 
var assert = require('assert'); 
var Browser = require('zombie'); 

describe('home page', function() { 
before(function() { 
    this.server = app.listen(3000); 
    this.browser = new Browser({site: 'http://localhost:3000', debug : true}); 
}); 

it('should show welcome', function(done) { 
    var browser = this.browser; 
    browser 
     .visit("/") 
     .then(function() { 
      console.log(browser.html()); 
     }) 
     .fail(function(error) { 
      console.log("Error: ", error); 
     }) 
     .then(done); 
}); 

after(function(done) { 
    this.server.close(done); 
}); 
});

뷰 코드 (내 layout.jade 파일) : 나는 스크립트 태그를 제거하면

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
    script(src='/javascripts/jquery-2.0.3.min.js') 
    script(src='/javascripts/bootstrap.min.js') 
    body 
    .navbar.navbar-inverse.navbar-fixed-top 
     .container 
     .navbar-header 
      button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') 
      span.icon-bar 
      span.icon-bar 
      span.icon-bar 
      a.navbar-brand(href='/') Contact Database 
     .collapse.navbar-collapse 
      ul.nav.navbar-nav 
      li.active 
       a(href='/') Home 
      li.active 
       a(href='/contacts') Contacts 
    block content

의 HTML이 콘솔로 기록됩니다 여기

내 테스트 코드입니다 예상했다. 그렇지 않으면 빈 HTML이 반환됩니다.

디버그 출력 :

home page 
◦ should show welcome: Zombie: Opened window http://localhost:3000/ 
GET/200 283ms - 1018b 
Zombie: GET http://localhost:3000/ => 200 
Zombie: Loaded document http://localhost:3000/ 
GET /javascripts/bootstrap.min.js 200 4ms - 27.08kb 
Zombie: GET http://localhost:3000/javascripts/jquery-2.0.3.min.js => 200 
Zombie: GET http://localhost:3000/javascripts/bootstrap.min.js => 200 
GET /javascripts/jquery-2.0.3.min.js 200 41ms - 81.65kb 
<html></html> 
Zombie: Event loop is empty 
✓ should show welcome (414ms)

이 문제가 타이밍해야 할 수도 나타납니다. 문서가로드 된 후 Javascript 파일이로드됩니다. 자바가로드되기 전에 좀비가 콜백 함수를 실행하고 있는지 궁금합니다. 따라서 DOM은 그 시점에서 비어 있습니다. 어떤 아이디어?

업데이트 :이 아래 wprl의 제안에 의해 해결되었다

. 나는 조금 지금 내 테스트 로직을 다시 작성해야합니다

it('should show welcome', function(done) { 

    // Wait until page is loaded 
    function pageLoaded(window) { 
     return window.document.querySelector(".container"); 
    } 

    var browser = this.browser; 
    browser.visit("/"); 
    browser.wait(pageLoaded, function() { 
     console.log(browser.html()); 
    }); 
    done(); 
});

하지만 작업에 대기 기능을했다 얻는 데 키 : 여기

는 대기 기능을 추가 한 후, 작동 테스트입니다.

출처

2013-09-30 Andrew Patzer

타이밍과 같은 소리가 들릴 수 있습니다. 다른 한편, Zombie는 방문을 사용할 때 JavaScript 이벤트가 중지 된 후에 만 제어를 제공하는 것이 좋습니다.

사용하기 좋은 전략은 테스트를 진행하기 전에 특정 DOM 요소가 나타나기위한 browser.wait입니다. 예를 들어. 부트 스트랩이로드되어 요소 #widget-view이 표시되었습니다.

조정하고 싶은 경우 maxWait/waitFor도 있습니다.

적어도 타이밍 문제는 제외 할 수 있습니다.

출처

2013-09-30 19:22:07 wprl

정말 잘됐다! 내 게시물을 수정하여 업데이트 된 테스트 코드를 표시합니다. 감사! –

부트 스트랩을 사용할 때 zombie.js 브라우저가 빈 HTML을 반환하는 이유는 무엇입니까?

답변

관련 문제