Подтвердить что ты не робот

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

Я пытаюсь протестировать мое приложение Node.js/Express.js, используя Mocha и Zombie. Я могу получить простые тесты, но как только я добавлю теги script для Twitter Bootstrap к моим представлениям, объект браузера возвращает пустой 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

Если я удалю теги script, то 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();
});

Мне придется немного переписать мою тестовую логику, но ключом к ее работе является функция ожидания.

4b9b3361

Ответ 1

Звучит похоже, что выбор времени может быть проблемой. С другой стороны, Zombie хорошо дает вам контроль только после того, как события JavaScript остановились при использовании посещения.

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

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

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