Почему браузер zombie.js возвращает пустой HTML при использовании Bootstrap?

Я пытаюсь протестировать приложение Node.js/Express.js, используя Mocha и Zombie. Я могу получить простые тесты для прохождения, но как только я добавлю теги скриптов для Twitter Bootstrap к моим представлениям, объект браузера возвращает пустой HTML.Почему браузер zombie.js возвращает пустой HTML при использовании Bootstrap?

Вот мой тестовый код:

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 пуст в этой точке. Есть идеи?

Update:

Эта задача была решена с помощью внушения 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 остановились при использовании посещения.

Хорошая стратегия использования - browser.wait для отображения некоторого элемента DOM перед продолжением ваших тестов. Таким образом, вы знаете, например. Bootstrap загрузил и показал элемент #widget-view.

Возможно, вы захотите настроить maxWait/waitFor как есть.

По крайней мере, тогда вы могли бы исключить проблему синхронизации.

источник

2013-09-30 19:22:07 wprl

Это сработало отлично! Я отредактирую сообщение, чтобы показать обновленный тестовый код. Благодаря! –

Почему браузер zombie.js возвращает пустой HTML при использовании Bootstrap?

ответ

Смежные вопросы