Karma - Jasmine fails with error "TypeError: null is not an object"

998 Views Asked by At

I am trying to test my very simple vanilla javascript code.

I am using PhantomJS launcher. I suspect, that somehow it can't see the DOM elements, so there is null for the object that is assigned by DOM element.

Do I need to include HTML in the karma.conf.js?

This is the output I get from the karma command line:

[22:44:33] Starting 'test'...
31 07 2017 22:44:33.901:INFO [karma]: Karma v1.7.0 server started at http://0.0.0.0:9876/
31 07 2017 22:44:33.901:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
31 07 2017 22:44:33.901:INFO [launcher]: Starting browser PhantomJS
31 07 2017 22:44:36.850:INFO [PhantomJS 2.1.1 (Windows 7 0.0.0)]: Connected on socket AJGzUqkYiuWudLwyAAAA with id 48481682
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
  TypeError: null is not an object (evaluating 'radarImageDiv.appendChild')
  at src/app.js:260

The function that it gives an error:

function placeRadarImageToDom(currentRadarImage) {
    var radarImageDiv = document.getElementById("radar-image");
    var table = document.createElement("table");
    table.setAttribute("id", "radar-image-table");

    for (var i = 0; i < verticalLimit; i++) {
        var tr = document.createElement('tr');

        for (var j = 0; j < horizontalLimit; j++) {
            var td = document.createElement('td');
            var char = document.createTextNode(currentRadarImage[i].charAt(j));
            td.appendChild(char);
            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    // error is given to below line
    radarImageDiv.appendChild(table);
}

HTML:

<div class="main-content">
   <div id="radar-image"></div>
       <div class="right-panel">
           Radar map
           <select onchange="changeRadarImage(this)">
               <option value="default">Default</option>
               <option value="alternate">Alternate</option>
           </select>

           Scanning speed
           <select id="speed-select">
               <option value="very-slow">Very slow</option>
               <option value="slow">Slow</option>
               <option value="normal">Normal</option>
               <option value="fast">Fast</option>
               <option value="fastest">Fastest</option>
           </select>

           <button class="search-btn" onclick="startScanning()">
               Scan
           </button>
           </div>
       </div>
   </div>

karma.conf.js:

module.exports = function(config) {
    config.set({
        frameworks: ['jasmine'],
        reporters: ['spec'],
        browsers: ['PhantomJS'],
        files: [
            'src/shapes.js',
            'src/app.js',
            'test/*.js'
        ]
    });
};

gulpfile.js

var gulp = require('gulp');
var Server = require('karma').Server;

gulp.task('test', function (done) {
    return new Server({
        configFile: __dirname + '/karma.conf.js',
        singleRun: true
    }, done).start();
});
0

There are 0 best solutions below