如何对 Leaflet JS 地图进行单元测试？答案

【问题标题】：How can you unit test Leaflet JS maps?如何对 Leaflet JS 地图进行单元测试？
【发布时间】：2016-06-29 12:16:59
【问题描述】：

如何对Leaflet JS maps 进行单元测试？

【问题讨论】：

究竟需要测试什么？

标签： unit-testing testing leaflet regression-testing

【解决方案1】：

我真的在为同样的问题而苦苦挣扎。这是使用 js 测试库“mocha”进行一些测试的链接： http://blog.mathieu-leplatre.info/test-your-leaflet-applications-with-mocha.html

但是，我在尝试调用传单的捕获所有“L”函数时遇到了更多问题。第一个是这样的：

}(window, document));
  ^

ReferenceError: window is not defined

我用这段代码解决了这个问题：

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

在我处理了这个问题之后，我遇到了实际函数的问题，例如'L.map('')。该函数似乎需要一个具有 id 的元素才能正常运行。

这是我收到的关于该功能的错误：

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

TypeError: document.getElementById is not a function

我希望这对你有一点帮助，我当然还没有弄清楚。

【讨论】：

【解决方案2】：

我一直在测试和使用 Leaflet。

目前我正在使用 QUnit 运行测试。

我目前必须在浏览器中打开它以查看它是否正常工作，也许其他人知道如何通过命令行运行 QUnit。

在编写和运行测试之前，我查看了 Leafletjs 文档页面，并开始使用谷歌浏览器上的开发人员工具控制台探索不同的 js 对象。

传单文档： http://leafletjs.com/reference-1.0.0.html

来自我的 QUnit tests.js 文件的示例测试：

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

【讨论】：