ユニットはリモートURLに対してローカルJavaScriptファイルをテストします

Question

リモートURLに対してローカルJavaScriptファイルをユニットテストするにはどうすればよいですか？私はこれを数日間はオン/オフしていますが、まだそれを理解することはできません。

私は、このような含まれていapp.jsと呼ばれる一つとして、DOM操作で、ローカルファイルを持っている：

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

どのようにして正常コードすることを確実にするために、このようhttp://example.com/として、リモートURLに対してこれをテストすることができます走る？ URLは私がコントロールするものではありません。おそらくSeleniumを含む解決策が最も理にかなっていますが、リモートURLに対してローカルJSファイルを実行する方法がわかりません。このような、この擬似コードと同様に

：

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

    element = document.querySelector('p'); 

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

私はキャスパーJSを使用してみました（ファントムJSのオフに基づいて）、それは最も有望だったが、それは前の読み込みが完了するDOMを待ちません。アサーションを実行するので、jQuery $（document）.ready（）ブロック内にあるものはまだ実行されません。

これまで私がキャスパーJSに持っていたことは、これまでのところです。 2番目のアサーションはready（）ブロックで実行されるため失敗します。

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

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

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

そして：

// 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

私はキャスパーを使い終わったので、単にcasper.wait(100)を使ってDOMを待つという問題を解決しました。

いくつかのサンプルコード（これはテストしていませんが動作するはずです;実際のコードははるかに複雑です）。 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

チェックアウトは、この上でjqueryのを実行するURLをロードすることができ、そのヘッドレスブラウザを、phantom.js、および行う場合のように主張します。

ローカル環境をテストし、同じスクリプトをリモートで実行することもできます。

phantom.jsは非常に人気があり、多くのプラグインがあります。