Unit testet eine lokale JavaScript-Datei gegen eine Remote-URL

Question

Wie kann ich eine lokale JavaScript-Datei mit einer Remote-URL testen? Daran habe ich jetzt schon ein paar Tage gearbeitet, kann es aber noch nicht genau sagen.

Ich habe eine lokale Datei, mit der Manipulation DOM, wie ein app.js genannt, die enthält:

document.querySelector('p').textContent = 'This is a test.'; 

Wie kann ich das dann testen gegen eine Remote-URL, wie http://example.com/, dass der Code erfolgreich, um sicherzustellen, läuft? Die URL ist keine, die ich kontrolliere. Vielleicht wäre eine Lösung, die Selenium enthält, am sinnvollsten, aber ich bin mir nicht sicher, wie ich meine lokale JS-Datei auch gegen die Remote-URL ausführen würde.

Wie mit diesem Pseudo-Code:

openUrl('http://example.com/', function() { 
    inject('./app.js'); 

    element = document.querySelector('p'); 

    assertEquals('This is a test.', element.textContent); 
}); 

Ich versuchte Casper JS mit (basierend weg von Phantom JS) und das war der vielversprechendsten, aber nicht für den DOM wartet Laden zu beenden, bevor Assertions ausführen, also alles, was in einem jQuery $ (document) .ready() - Block ist, wird noch nicht ausgeführt.

Hier ist, was ich bisher in Casper JS bekam; Die zweite Assertion schlägt fehl, weil sie in einem ready() - Block ausgeführt wird.

// app.js 
$ = require('jquery'); 

$('p').first().text('test'); 

$(document).ready(function() { 
    $('h1').text('one'); 
}); 

Und:

// test.js 
var url = 'http://example.com/'; 
var script = 'Example/app.js'; 

casper.test.begin('Test', function suite(test) { 
    casper.start(url, function() { 
    casper.page.injectJs(script); 

    // 'test' was added immediately, in app.js. This succeeds. 
    test.assertTextExists('test'); 

    // 'one' runs in a $(document).ready() block. This assertion fails. 
    test.assertTextExists('one'); 
    }); 

    casper.run(function() { 
    test.done(); 
    }); 
}); 

Answer 1

Ich endete mit Casper, und ich löste das Problem des Wartens auf das DOM durch einfache Verwendung casper.wait(100).

Einige Beispielcode (ich habe das nicht getestet, aber es sollte funktionieren; mein tatsächlicher Code ist viel komplexer). Führen Sie mit casperjs test casper.js

casper.js

// Begin test suite. 
casper.test.begin('Example', function(test) { 
    // Start Casper. 
    casper.start(); 

    // Open URL. 
    casper.thenOpen('http://example.com/', function() { 
    casper.page.injectJs('inject.js'); 
    }); 

    // Call the test. Wait for code to finish first. 
    casper.wait(100, function() { 
    test.assertExists('.element-added-by-injection'); 
    }); 

    // A second URL can even be opened. 
    casper.thenOpen('http://google.com/', function() { 
    casper.page.injectJs('google.js'); 
    }); 

    casper.wait(100, function() { 
    test.assertExists('.another-element-we-added'); 
    }); 

    casper.run(function() { 
    test.done(); 
    }); 
}); 

inject.js

var $ = require('jquery'); 

$(function() { 
    $('p').after('<div class="element-added-by-injection">Test</div>'); 
}); 

Answer 2

Kasse phantom.js seine eine Maden Browser, der Urls laden können, jquery auf diese laufen und tun behauptet, wenn Sie mögen.

Sie können dann Ihre lokale Umgebung testen und das gleiche Skript auch für die Remote ausführen.

phantom.js ist sehr beliebt und es gibt viele Plugins dafür.