Warum gibt der Browser zombie.js bei der Verwendung von Bootstrap einen leeren HTML-Code zurück?

Ich versuche meine Node.js/Express.js Anwendung mit Mocha und Zombie zu testen. Ich kann einfache Tests erhalten, aber sobald ich die Skript-Tags für Twitter Bootstrap zu meinen Ansichten hinzufüge, gibt das Browser-Objekt leeres HTML zurück.Warum gibt der Browser zombie.js bei der Verwendung von Bootstrap einen leeren HTML-Code zurück?

Hier ist mein Testcode:

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

Der Blick Code (meine layout.jade-Datei):

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

Wenn ich die Script-Tags zu entfernen, wird der HTML-Code auf der Konsole angemeldet als erwartet. Ansonsten bekomme ich leeres HTML zurück.

Die Debug-Ausgabe:

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)

Es scheint, dass das Problem mit dem Timing zu tun haben könnte. Das Dokument wird geladen, dann werden die Javascript-Dateien geladen. Ich frage mich, ob Zombie meine Callback-Funktion ausführt, bevor das Javascript geladen wird, daher ist das DOM zu diesem Zeitpunkt leer. Irgendwelche Ideen?

Update:

Das unten durch wprl Vorschlag gelöst wurde.

Hier ist der Test, der, nach dem Hinzufügen einer Wartefunktion funktioniert:

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

Ich muss meine Testlogik umschreiben ein bisschen jetzt, aber der Schlüssel, um es an die Arbeit wurde mit der Wartefunktion.

Quelle

2013-09-30 Andrew Patzer

Es klingt wie Timing könnte ein Problem sein. Auf der anderen Seite ist Zombie gut dabei, Ihnen die Kontrolle zu geben, nachdem JavaScript-Ereignisse bei der Verwendung von visit beendet wurden.

Eine gute Strategie ist es, browser.wait zu verwenden, um ein bestimmtes DOM-Element, bevor Sie mit Ihren Tests fortfahren zu erscheinen. Auf diese Weise kennen Sie z.B. Bootstrap hat das Element #widget-view geladen und angezeigt.

Könnte maxWait/waitFor auch anpassen möchten.

Zumindest dann könnte man das Timing-Problem ausschließen.

Quelle

2013-09-30 19:22:07 wprl

Das hat super funktioniert! Ich bearbeite meinen Beitrag, um den aktualisierten Testcode anzuzeigen. Vielen Dank! –

Warum gibt der Browser zombie.js bei der Verwendung von Bootstrap einen leeren HTML-Code zurück?

Antwort

Verwandte Themen