cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some basic unittests for L.Label

Browse Source
This commit is contained in:
Yohan Boniface 2015-11-15 18:41:46 +01:00
parent 92217bc969
commit 9d0b13b991
3 changed files with 150 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
debug/map/label.html
View File

@ -38,7 +38,7 @@
L.circleMarker([41.206, 9.48], {color: "Chocolate", radius: 12}).bindLabel( "Hello Left World", {direction: 'left'}).addTo(map);
var icon = L.divIcon({
className: 'my-div-icon',
html: "<p>A div icon</p>",
html: '<p>A div icon</p>',
iconSize: [50, 50],
labelAnchor: [20, 0]
});
@ -47,6 +47,13 @@
L.marker([41.23, 9.42], {draggable: true}).addTo(map).bindLabel('Draggable marker label', {static: true});
L.marker([41.19, 9.45]).addTo(map).bindLabel('Clickable marker label', {static: true, clickable: true}).on('click', function () { alert('clicked!'); });
var marker1 = L.marker([41.18, 9.45], {description: 'Marker 1'});
var marker2 = L.marker([41.18, 9.46], {description: 'Marker 2'});
var group = new L.FeatureGroup([marker1, marker2]).addTo(map);
group.bindLabel(function (layer) {
return 'Group label: ' + layer.options.description;
});
</script>
</body>
</html>

1
spec/index.html
View File

@ -62,6 +62,7 @@
<script type="text/javascript" src="suites/layer/ImageOverlaySpec.js"></script>
<script type="text/javascript" src="suites/layer/LayerGroupSpec.js"></script>
<script type="text/javascript" src="suites/layer/PopupSpec.js"></script>
<script type="text/javascript" src="suites/layer/LabelSpec.js"></script>
<!-- /layer/tile -->
<script type="text/javascript" src="suites/layer/tile/GridLayerSpec.js"></script>

138
spec/suites/layer/LabelSpec.js Normal file
View File

@ -0,0 +1,138 @@
describe('Label', function () {
var c, map, p2ll,
center = [55.8, 37.6];
beforeEach(function () {
c = document.createElement('div');
c.style.width = '400px';
c.style.height = '400px';
// Allow to use happen.at with determinist positions.
c.style.position = 'absolute';
c.style.top = '0';
c.style.left = '0';
document.body.appendChild(c);
map = new L.Map(c);
map.setView(center, 6);
p2ll = function (x, y) {
return map.layerPointToLatLng([x, y]);
};
});
afterEach(function () {
document.body.removeChild(c);
});
it("opens on marker mouseover and close on mouseout", function () {
var layer = new L.Marker(center).addTo(map);
layer.bindLabel('Label');
happen.mouseover(layer._icon, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(true);
happen.mouseout(layer._icon, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(false);
});
it("stays open on marker when static", function () {
var layer = new L.Marker(center).addTo(map);
layer.bindLabel('Label', {static: true});
expect(map.hasLayer(layer._label)).to.be(true);
});
it("is removed when removing marker", function () {
var layer = new L.Marker(center).addTo(map);
layer.bindLabel('Label', {static: true});
expect(map.hasLayer(layer._label)).to.be(true);
layer.remove();
expect(map.hasLayer(layer._label)).to.be(false);
});
it("can be make clickable", function () {
var layer = new L.Marker(center).addTo(map);
var spy = sinon.spy();
layer.on('click', spy);
layer.bindLabel('Label', {static: true, clickable: true});
happen.click(layer._label._container);
expect(spy.calledOnce).to.be(true);
});
// Passes on Firefox, but fails on PhantomJS.
xit("can be forced on left direction", function () {
var layer = new L.Marker(center).addTo(map);
var spy = sinon.spy();
layer.on('click', spy);
layer.bindLabel('A long label that should be displayed on the left', {static: true, direction: 'left', clickable: true});
expect(map.hasLayer(layer._label)).to.be(true);
happen.at('click', 150, 190); // Marker is on the map center, which is 400px large.
expect(spy.calledOnce).to.be(true);
});
it("it should use a label with a function as content with a FeatureGroup", function () {
var marker1 = new L.Marker(new L.LatLng(55.8, 37.6), {description: "I'm marker 1."});
var marker2 = new L.Marker(new L.LatLng(54.6, 38.2), {description: "I'm marker 2."});
var group = new L.FeatureGroup([marker1, marker2]).addTo(map);
group.bindLabel(function (layer) {
return layer.options.description;
});
// toggle popup on marker1
happen.mouseover(marker1._icon, {relatedTarget: map._container});
expect(map.hasLayer(group._label)).to.be(true);
expect(group._label._container.innerHTML).to.be("I'm marker 1.");
// toggle popup on marker2
happen.mouseover(marker2._icon, {relatedTarget: map._container});
expect(map.hasLayer(group._label)).to.be(true);
expect(group._label._container.innerHTML).to.be("I'm marker 2.");
});
it("opens on polygon mouseover and close on mouseout", function () {
var layer = new L.Polygon([[55.8, 37.6], [55.9, 37.6], [55.8, 37.5]]).addTo(map);
layer.bindLabel('Label');
happen.mouseover(layer._path, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(true);
happen.mouseout(layer._path, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(false);
});
it("stays open on polygon when static", function () {
var layer = new L.Polygon([[55.8, 37.6], [55.9, 37.6], [55.8, 37.5]]).addTo(map);
layer.bindLabel('Label', {static: true});
expect(map.hasLayer(layer._label)).to.be(true);
});
it("opens on polyline mouseover and close on mouseout", function () {
var layer = new L.Polyline([[55.8, 37.6], [55.9, 37.6], [55.8, 37.5]]).addTo(map);
layer.bindLabel('Label');
happen.mouseover(layer._path, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(true);
happen.mouseout(layer._path, {relatedTarget: map._container});
expect(map.hasLayer(layer._label)).to.be(false);
});
it("stays open on marker when static", function () {
var layer = new L.Polyline([[55.8, 37.6], [55.9, 37.6], [55.8, 37.5]]).addTo(map);
layer.bindLabel('Label', {static: true});
expect(map.hasLayer(layer._label)).to.be(true);
});
});