From 191a0cc59bffff54c83c2abcc3075ffd6f00381e Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Thu, 15 Mar 2018 14:17:00 -0700 Subject: [PATCH] Clean up Marker tests --- test/unit/ui/marker.test.js | 200 +++++++++++++++++------------------- 1 file changed, 96 insertions(+), 104 deletions(-) diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js index 5719adba8f7..be3f1ee255d 100644 --- a/test/unit/ui/marker.test.js +++ b/test/unit/ui/marker.test.js @@ -13,110 +13,102 @@ function createMap() { return new Map({container: container}); } -test('Marker', (t) => { - t.test('constructor', (t) => { - const el = window.document.createElement('div'); - const marker = new Marker(el); - t.ok(marker.getElement(), 'marker element is created'); - t.end(); - }); - - t.test('default marker', (t) => { - const marker = new Marker(); - t.ok(marker.getElement(), 'default marker is created'); - t.ok(marker.getOffset().equals(new Point(0, -14)), 'default marker with no offset uses default marker offset'); - t.end(); - }); - - t.test('default marker with some options', (t) => { - const marker = new Marker(null, { foo: 'bar' }); - t.ok(marker.getElement(), 'default marker is created'); - t.ok(marker.getOffset().equals(new Point(0, -14)), 'default marker with no offset uses default marker offset'); - t.end(); - }); - - t.test('default marker with custom offest', (t) => { - const marker = new Marker(null, { offset: [1, 2] }); - t.ok(marker.getElement(), 'default marker is created'); - t.ok(marker.getOffset().equals(new Point(1, 2)), 'default marker with supplied offset'); - t.end(); - }); - - t.test('marker is added to map', (t) => { - const map = createMap(); - const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]); - t.ok(marker.addTo(map) instanceof Marker, 'marker.addTo(map) returns Marker instance'); - t.ok(marker._map, 'marker instance is bound to map instance'); - t.end(); - }); - - t.test('marker\'s lngLat can be changed', (t) => { - const map = createMap(); - const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]).addTo(map); - t.ok(marker.setLngLat([-76, 39]) instanceof Marker, 'marker.setLngLat() returns Marker instance'); - const markerLngLat = marker.getLngLat(); - t.ok(markerLngLat.lng === -76 && markerLngLat.lat === 39, 'marker\'s position can be updated'); - t.end(); - }); - - t.test('popups can be bound to marker instance', (t) => { - const map = createMap(); - const popup = new Popup(); - const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]).addTo(map); - marker.setPopup(popup); - t.ok(marker.getPopup() instanceof Popup, 'popup created with Popup instance'); - t.end(); - }); - - t.test('popups can be unbound from a marker instance', (t) => { - const map = createMap(); - const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]).addTo(map); - marker.setPopup(new Popup()); - t.ok(marker.getPopup() instanceof Popup); - t.ok(marker.setPopup() instanceof Marker, 'passing no argument to Marker.setPopup() is valid'); - t.ok(!marker.getPopup(), 'Calling setPopup with no argument successfully removes Popup instance from Marker instance'); - t.end(); - }); - - t.test('popups can be set before LngLat', (t) => { - const map = createMap(); - const popup = new Popup(); - new Marker(window.document.createElement('div')) - .setPopup(popup) - .setLngLat([-77.01866, 38.888]) - .addTo(map); - t.deepEqual(popup.getLngLat(), new LngLat(-77.01866, 38.888)); - t.end(); - }); - - t.test('marker centered by default', (t) => { - const map = createMap(); - const element = window.document.createElement('div'); - const marker = new Marker(element).setLngLat([0, 0]).addTo(map); - const translate = Math.round(map.getContainer().offsetWidth / 2); - t.equal(marker.getElement().style.transform, `translate(-50%, -50%) translate(${translate}px, ${translate}px)`, 'Marker centered'); - t.end(); - }); - - t.test('togglePopup returns Marker instance', (t) => { - const map = createMap(); - const element = window.document.createElement('div'); - const marker = new Marker(element).setLngLat([0, 0]).addTo(map); - marker.setPopup(new Popup()); - t.ok(marker.togglePopup() instanceof Marker); - t.end(); - }); - - t.test('marker\'s offset can be changed', (t) => { - const map = createMap(); - const marker = new Marker(window.document.createElement('div')).setLngLat([-77.01866, 38.888]).addTo(map); - const offset = marker.getOffset(); - t.ok(offset.x === 0 && offset.y === 0, 'default offset'); - t.ok(marker.setOffset([50, -75]) instanceof Marker, 'marker.setOffset() returns Marker instance'); - const newOffset = marker.getOffset(); - t.ok(newOffset.x === 50 && newOffset.y === -75, 'marker\'s offset can be updated'); - t.end(); - }); +test('Marker uses a default marker element with an appropriate offset', (t) => { + const marker = new Marker(); + t.ok(marker.getElement()); + t.ok(marker.getOffset().equals(new Point(0, -14))); + t.end(); +}); + +test('Marker uses a default marker with custom offest', (t) => { + const marker = new Marker(null, { offset: [1, 2] }); + t.ok(marker.getElement()); + t.ok(marker.getOffset().equals(new Point(1, 2))); + t.end(); +}); + +test('Marker uses the provided element', (t) => { + const el = window.document.createElement('div'); + const marker = new Marker(el); + t.equal(marker.getElement(), el); + t.end(); +}); + +test('Marker#addTo adds the marker element to the canvas container', (t) => { + const map = createMap(); + new Marker() + .setLngLat([-77.01866, 38.888]) + .addTo(map); + + t.equal(map.getCanvasContainer().querySelectorAll('.mapboxgl-marker').length, 1); + + map.remove(); + t.end(); +}); + +test('Marker provides LngLat accessors', (t) => { + t.equal(new Marker().getLngLat(), undefined); + + t.ok(new Marker().setLngLat([1, 2]).getLngLat() instanceof LngLat); + t.deepEqual(new Marker().setLngLat([1, 2]).getLngLat(), new LngLat(1, 2)); + + t.ok(new Marker().setLngLat(new LngLat(1, 2)).getLngLat() instanceof LngLat); + t.deepEqual(new Marker().setLngLat(new LngLat(1, 2)).getLngLat(), new LngLat(1, 2)); + + t.end(); +}); + +test('Marker provides offset accessors', (t) => { + t.ok(new Marker().setOffset([1, 2]).getOffset() instanceof Point); + t.deepEqual(new Marker().setOffset([1, 2]).getOffset(), new Point(1, 2)); + + t.ok(new Marker().setOffset(new Point(1, 2)).getOffset() instanceof Point); + t.deepEqual(new Marker().setOffset(new Point(1, 2)).getOffset(), new Point(1, 2)); + + t.end(); +}); + +test('Marker#setPopup binds a popup', (t) => { + const popup = new Popup(); + const marker = new Marker() + .setPopup(popup); + t.equal(marker.getPopup(), popup); + t.end(); +}); + +test('Marker#setPopup unbinds a popup', (t) => { + const marker = new Marker() + .setPopup(new Popup()) + .setPopup(); + t.ok(!marker.getPopup()); + t.end(); +}); + +test('Marker#togglePopup opens a popup that was closed', (t) => { + const map = createMap(); + const marker = new Marker() + .setLngLat([0, 0]) + .addTo(map) + .setPopup(new Popup()) + .togglePopup(); + + t.ok(marker.getPopup().isOpen()); + + map.remove(); + t.end(); +}); + +test('Marker#togglePopup closes a popup that was open', (t) => { + const map = createMap(); + const marker = new Marker() + .setLngLat([0, 0]) + .addTo(map) + .setPopup(new Popup()) + .togglePopup() + .togglePopup(); + + t.ok(!marker.getPopup().isOpen()); + map.remove(); t.end(); });