결국 그래프를 생성 할 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);
여기서 이상한 것은 내가 설정 개체에 scripts
을 포함하지 않는 경우이다 .. 나는이 페이지를로드하려고 노드의 코드입니다 그것들을로드하지 않고 html 페이지에 있다고 생각하더라도 done
콜백에서 사용할 수있게합니다.
또한 testVar
은 콜백에 정의되어 있지 않습니다. 심지어 페이지에 있다고 생각하더라도 (window.test()
과 동일 함), HTML 페이지에서는 콜백에서 사용할 수없는 것처럼 보입니다.
jsdom 개체를 만드는 데있어 다른 모든 변형을 시도했지만 그 중 아무 것도 페이지를 설정 개체로 전달하지 않고 스크립트를로드 할 수 없으며 다른 버전에서 변수 및 함수에 액세스 할 수 없습니다 스크립트 태그에 정의되어 있습니다.
누락 된 것이 있습니까? 그들이 올바른 HTML을되도록
루이, 바로 그거야. 이제 2 가지 더 질문이 있습니다. 먼저 함수 $ (document) .ready가 호출되지 않습니다. 어떻게 호출되는지를 확인하거나 테스트 할 수 있습니다. 둘째, 필자는 노드에서 코드를 다시 전달할 수 있습니다. 필자가 이벤트를 창에 붙이려고했는데 html에서이를 전파했지만 작동하지 않는 것처럼 보였습니다. 마지막으로, 어떻게 창 내부에서 로그하고 내 노드 백엔드에서 로그를 캡처 할 수 있습니까? jsdom.env 메소드를 사용할 때 jsdom 사이트의 예제는 아무 것도 표시하지 않습니다. – John