JSDOM not loading script files in Node

Question

I am trying to do a test of loading up an html page in jsdom which will eventually generate graphs. I cannot overcome the first hurdle of just loading the html page and having the javascript execute.

Below is my html page which I am trying to load which doesnt take any parameters and just renders a simple graph.

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

Here is the code in node where I am trying to load this page..

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

The strange thing here is that if i do not include scripts in the config object, it will not load them and make them available in the done callback even thought it is there on the html page.

Also, testVar is never defined in the callback even thought it is present in the page, the same with window.test(), even though its in the html page it just does not seem to be available in the callback.

I have tried all different variations of creating the jsdom object, but none of them allows the page to load the scripts rather than me passing it into the config object, and none of the different versions allow me to access variables and functions defined in the script tags.

Is there something I am missing ?

Louis · Accepted Answer · 2016-09-07 22:37:14Z

2

Change your script elements so that they are correct HTML:

<script src="http://code.jquery.com/jquery.min.js"></script>

If you do that everything will load fine and you won't have to use scripts in your configuration.

answered Sep 7, 2016 at 22:37

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

Louis, that was exactly it. Now, I have 2 more questions. First, the function $(document).ready is never called, how can I ensure or even test that its getting called. Second, how can I pass an event back to my code in node, because ive tried just attaching an event to the window and propogating that from the html but it seems to not be working. Finally, how can i log from inside the window and capture that log in my node backend, the examples on the jsdom site do not show anything when using the jsdom.env method.

Collectives™ on Stack Overflow

JSDOM not loading script files in Node

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related