10

How can you unit test Leaflet JS maps?

SteveC
  • 15,808
  • 23
  • 102
  • 173

2 Answers2

5

I am really struggling with the same issue. Here is a link to some testing with the js test library 'mocha': http://blog.mathieu-leplatre.info/test-your-leaflet-applications-with-mocha.html

However, I ran into further issues trying to call leaflet's sort of catch all 'L' function. The first was this:

}(window, document));
  ^

ReferenceError: window is not defined

I remedied that issue with this bit of code:

// Create globals so leaflet can load
GLOBAL.window = {};
GLOBAL.document = {
  documentElement: {
    style: {}
  },
  getElementsByTagName: function() { return []; },
  createElement: function() { return {}; }
};
GLOBAL.navigator = {
  userAgent: 'nodejs'
};
GLOBAL.L = require('leaflet');

Node.js Leaflet error

After I dealt with that issue, I am running into a problem with the actual functions, such as 'L.map(''). It seems that the function needs an element with an id to function correctly.

Here is the error I received for that function:

        return (typeof id === 'string' ? document.getElementById(id) : id);
                                                  ^

TypeError: document.getElementById is not a function

I hope this helps you a little bit, I certainly still haven't figured it out.

Community
  • 1
  • 1
patzmt
  • 81
  • 3
3

I have been working a bit more on testing and using Leaflet.

Currently I am using QUnit to run the tests.

I currently have to open it in a browser to see if it is working, maybe someone else knows how to run QUnit via commandline.

Before I wrote and ran my tests I took a look at the Leafletjs docs page and just started exploring the different js objects with the developer tools console on google chrome.

Leaflet docs: http://leafletjs.com/reference-1.0.0.html

Example tests from my QUnit tests.js file:

QUnit.test("map default options", function( assert )    assert.equal(myMap.getCenter().toString(),
            "LatLng(0, 8.846)",
            "The map is centered at the ZMT's longitude, and the equator"
    );
    assert.equal(myMap.getZoom(),
            2,
            "The default zoom is set to 2"
    );
});

QUnit.test("baseLayer layerGroup", function( assert ) {
    assert.equal(baseLayer.getLayers().length,
            1,
            "There is just one layer in 'baseLayer' layerGroup"
    );
    assert.equal(baseLayer.getLayers()[0]._url,
            "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            "The url of the layer leads to the correct openstreet map tiles"
    );

    assert.equal(baseLayer.getLayers()[0].options.attribution,
            '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            "The attribution for the layer is correct"
    );
    assert.equal(baseLayer.getLayers()[0].options.minZoom,
            0,
            "The default minimum zoom is set to 0"
    );
    assert.equal(baseLayer.getLayers()[0].options.maxZoom,
            19,
            "The default maximum zoom is set to 19"
    );
});
patzmt
  • 81
  • 3