0
にスクリプトファイルをロードしていません
最終的にグラフを生成するjsdomにhtmlページを読み込むテストをしようとしています。私はhtmlページを読み込んでJavaScriptを実行することの最初のハードルを克服することはできません。JSDOMがノード
以下は私がロードしようとしている私のHTMLページです。これはパラメータを取らず、簡単なグラフをレンダリングします。ここで
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"/>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"/>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"/>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"/>
<script>
var testVar = true;
function test(){
testVar = false;
};
</script>
<script>
$(document).ready(function(){
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'column2d',
renderAt: 'container',
width: '400',
height: '200',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "2014",
"numberPrefix": "$",
"theme": "fint",
"captionFontSize": "13",
"subcaptionFontSize": "12",
"subcaptionFontBold": "0",
"showValues": "0"
},
"data": [{
"label": "Food",
"value": "28504"
}, {
"label": "Apparels",
"value": "14633"
}, {
"label": "Electronics",
"value": "10507"
}, {
"label": "Household",
"value": "4910"
}]
}
}).render();
});
var svg = $('#container').html();
});
</script>
<head>
<body>
<div id="container">Charts will render here</div>
</body>
var config = {
file: path.join(__dirname, "chart.html"),
features:{
FetchExternalResources: ["script"],
ProcessExternalResources: ["script"],
MutationEvents: '2.0'
},
scripts:[
"http://code.jquery.com/jquery.min.js",
"http://static.fusioncharts.com/code/latest/fusioncharts.js",
'http://static.fusioncharts.com/code/latest/fusioncharts.charts.js',
"http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"
],
onload: function(err, window) {
console.log('*******onload')
},
created: function(err, window) {
console.log('*******created')
},
done: function(err, window) {
console.log('*******done')
if(err){
console.log('*****got err ' + err.message);
callback(err);
}
global.window = window;
console.log('inside done ----------')
var $ = window.jQuery || window.$,
FusionCharts = window.FusionCharts,
document = window.document;
if(typeof FusionCharts == 'undefined')
console.log('FusionCharts NOT LOADED')
else
console.log('FusionCharts LOADED')
if(typeof $ == 'undefined')
console.log('JQUERY NOT LOADED')
else
console.log('JQUERY LOADED')
console.log('testVar ' + window.testVar)
console.log(window.test())
console.log('testVar ' + window.testVar)
console.log('svg is ' + window.svg);
console.log($('#container').html());
window.close();
}
}
jsdom.env(config);
ここで奇妙なことは、私はconfigオブジェクトにscriptsが含まれていない場合ということです..私は、このページをロードしようとしていますノード内のコードですそれがロードされず、doneコールバックで利用可能になりますが、それはhtmlページにもあると考えられます。
また、testVarはコールバックで定義されていなくても、そのページ内に存在するとは限りません。つまり、window.test()と同じですが、HTMLページではコールバックで利用できないようです。
私はjsdomオブジェクトの作成にさまざまなバリエーションを試しましたが、設定オブジェクトに渡すのではなくスクリプトでページを読み込むことはできません。また、さまざまなバージョンでは変数や関数にアクセスできませんスクリプトタグで定義されています。
紛失しているものがありますか？あなたはすべてがうまくロードされますと、あなたの設定でscriptsを使用する必要がないことを行うと
<script src="http://code.jquery.com/jquery.min.js"></script>
：彼らは正しいHTMLになるように
ルイ、それはまさにそれでした。今、もう2つの質問があります。まず、関数$（document）.readyが呼び出されることはありません。どのように呼び出すかをテストしたり、テストすることができます。第2に、どのようにしてノード内のコードにイベントを戻すことができますか？iveはイベントをウィンドウに添付し、そのイベントをHTMLから伝えようとしましたが、動作していないようです。最後に、ウィンドウの内部からログを取り、ノードのバックエンドでそのログをキャプチャするにはどうすればいいですか？jsdom.envメソッドを使用する場合、jsdomサイトの例は何も表示しません。 – John