CODEWITHSUNDEEP
javascriptjquerynode.jsjsdom
John
John

Reputation: 565

JSDOM not loading script files in Node

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 ?

Upvotes: 0

Views: 1496

Answers (1)

Louis
Louis

Reputation: 151511

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.

Upvotes: 2

Related Questions