Added some unit tests

mapbox · Oct 16, 2019 · 9aa7609 · 9aa7609
1 parent 9053c48
commit 9aa7609
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset='utf-8' />
+<title>Display a map</title>
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+<script src='dist/mapbox-gl.js'></script>
+<link href='dist/mapbox-gl.css' rel='stylesheet' />
+<style>
+body { margin:0; padding:0; }
+#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+	mapboxgl.accessToken = 'pk.eyJ1IjoiZGJ1cm5zaWkiLCJhIjoiY2p4Nm5uand6MDFraDNubm5vaThkdGdnbyJ9.TOwUFMiTxFwuAhChYmN0rw';
+	var map = new mapboxgl.Map({
+		container: 'map', // container id
+		style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
+		center: [-74.50, 40], // starting position [lng, lat]
+		zoom: 9, // starting zoom
+		pitch: 50
+	});
+
+	var marker = new mapboxgl.Marker({rotation: 45, rotationAlignment: "map", pitchAlignment: "map", anchor: "top"}).setLngLat([-74.50, 40]).addTo(map);
+	new mapboxgl.Marker().setLngLat([-74.60, 40]).addTo(map);
+
+	//window.setInterval(function(){
+	//	marker.setBearing(marker.getBearing() + 5);		
+	//}, 50);
+
+</script>
+
+</body>
+</html>
diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js
@@ -465,3 +465,69 @@ test('Marker with draggable:true does not error if removed on mousedown', (t) =>
     t.ok(map.fire('mouseup'));
     t.end();
 });
+
+test('Marker can set rotationAlignment and pitchAlignment', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotationAlignment: 'map', pitchAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    t.equal(marker.getRotationAlignment(), 'map');
+    t.equal(marker.getPitchAlignment(), 'map');
+
+    map.remove();
+    t.end();
+});
+
+test('Marker can set and update rotation', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotation: 45})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    t.equal(marker.getRotation(), 45);
+
+    marker.setRotation(90);
+    t.equal(marker.getRotation(), 90);
+
+    map.remove();
+    t.end();
+});
+
+test('Marker transforms rotation with the map', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({rotationAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    const rotationRegex = /rotateZ\(-?([0-9]+)deg\)/;
+    const initialRotation = marker.getElement().style.transform.match(rotationRegex)[1];
+
+    map.setBearing(map.getBearing() + 180);
+
+    const finalRotation = marker.getElement().style.transform.match(rotationRegex)[1];
+    t.notEqual(initialRotation, finalRotation);
+
+    map.remove();
+    t.end();
+});
+
+test('Marker transforms pitch with the map', (t) => {
+    const map = createMap(t);
+    const marker = new Marker({pitchAlignment: 'map'})
+        .setLngLat([0, 0])
+        .addTo(map);
+
+    map.setPitch(0);
+
+    const rotationRegex = /rotateX\(-?([0-9]+)deg\)/;
+    const initialPitch = marker.getElement().style.transform.match(rotationRegex)[1];
+
+    map.setPitch(45);
+
+    const finalPitch = marker.getElement().style.transform.match(rotationRegex)[1];
+    t.notEqual(initialPitch, finalPitch);
+
+    map.remove();
+    t.end();
+});