Add some basic unittests for L.Label

debug/map/label.html

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

spec/index.html

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

spec/suites/layer/LabelSpec.js

@@ -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);
+	});
+
+});
+