Perché il browser zombie.js restituisce HTML vuoto quando si utilizza Bootstrap?

Sto provando a testare la mia applicazione Node.js/Express.js utilizzando Mocha e Zombie. Posso far passare semplici test, ma non appena aggiungo i tag script per Twitter Bootstrap alle mie visualizzazioni, l'oggetto browser restituisce HTML vuoto.Perché il browser zombie.js restituisce HTML vuoto quando si utilizza Bootstrap?

Ecco il mio codice di prova:

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); 
}); 
});

Il codice della vista (il mio file 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

Se rimuovo i tag di script, il codice HTML viene registrato alla console come previsto. Altrimenti, restituisco l'HTML vuoto restituito.

L'output di debug:

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)

Sembra che il problema potrebbe avere a che fare con tempismo. Il documento viene caricato, quindi vengono caricati i file Javascript. Mi chiedo se zombie sta eseguendo la mia funzione di callback prima che venga caricato Javascript, quindi il DOM è vuoto in quel punto. Qualche idea?

Aggiornamento:

Questo è stato risolto con suggerimento di wprl sotto.

Ecco la prova che funziona, dopo l'aggiunta di una funzione di attesa:

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(); 
});

dovrò riscrivere la mia logica di prova un po 'adesso, ma la chiave per ottenere al lavoro è stato la funzione di attesa.

fonte

2013-09-30 Andrew Patzer

Sembra che il tempo potrebbe essere un problema. D'altra parte, Zombie è utile per darti il controllo solo dopo che gli eventi JavaScript si sono fermati durante l'utilizzo di visita.

Una buona strategia da utilizzare è browser.wait per un determinato elemento DOM da visualizzare prima di procedere con i test. In questo modo conosci per esempio Bootstrap ha caricato e mostrato l'elemento #widget-view.

Potrebbe voler regolare anche maxWait/waitFor.

Almeno allora si potrebbe escludere il problema di temporizzazione.

fonte

2013-09-30 19:22:07 wprl

Ha funzionato alla grande! Modificherò il mio post per mostrare il codice di test aggiornato. Grazie! –

Perché il browser zombie.js restituisce HTML vuoto quando si utilizza Bootstrap?

risposta

Problemi correlati