ブートストラップを使用しているときにzombie.jsブラウザが空のHTMLを返すのはなぜですか？

私は、MochaとZombieを使ってNode.js/Express.jsアプリケーションをテストしようとしています。私は単純なテストをパスすることができますが、Twitter Bootstrapのスクリプトタグを自分のビューに追加すると、ブラウザオブジェクトは空の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ファイルがロードされます。 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を返すのはなぜですか？

答えて

関連する問題