describe('ImageOverlay', () => { let container, map; const imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]]; beforeEach(() => { container = container = createContainer(); map = L.map(container); map.setView([55.8, 37.6], 6); // view needs to be set so when layer is added it is initilized }); afterEach(() => { removeMapContainer(map, container); }); describe('#setStyle', () => { it('sets opacity', () => { const overlay = L.imageOverlay().setStyle({opacity: 0.5}); expect(overlay.options.opacity).to.equal(0.5); }); }); describe('#setBounds', () => { it('sets bounds', () => { const bounds = L.latLngBounds( [14, 12], [30, 40] ); const overlay = L.imageOverlay().setBounds(bounds); expect(overlay._bounds).to.equal(bounds); }); }); describe('_image', () => { let overlay; // Url for testing errors const errorUrl = 'data:image/false;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAT1JREFUOI2dk79qwlAUxr9zcKmxbyAWh0IIDqJrcchkX6ODrn2TDAWRPEkyKKVzBxHJkKFoySP0mlLhnA5NbIgmpf6my73n+853/xFKRLY9UJEpAy6Am2x6q8xLYZ73omhVrKd88DocNpvGPBHwUDYtIiL+9X7/2EmS9GiQiUMC7urER1RfLGPGnSRJGQCyzidiy/Nged6pAdHoo9XyAIAj2x78FfscBEw3jtNnFZn+V5zDIhPOTvsiFHAZv1d1SYIuXyrOaQDYArg9t3gIw1qxML81lHlJFQZfQVBrwKoLFuZ5VUHlO8ggVZ97UbQSEf9cwSEMq7ehOrPjeE0A8N5uXxnLCkA0qs2cIcBzM03vu7vdJwNAJ0lSy5hxVZJy51wMFH5jzsZx+iwyUcBlkS7wc9qsuiBV347jdbH+G/fth7AzHdiJAAAAAElFTkSuQmCC'; const blankUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // Create overlay for each test beforeEach(() => { overlay = L.imageOverlay(blankUrl, imageBounds, { errorOverlayUrl: errorUrl, className: 'my-custom-image-class' }); map.addLayer(overlay); const bounds = L.latLngBounds( [14, 12], [30, 40] ); overlay.setBounds(bounds); }); // Clean up after each test run afterEach(() => { map.removeLayer(overlay); overlay = null; }); function raiseImageEvent(event) { const domEvent = document.createEvent('Event'); domEvent.initEvent(event, false, false); overlay._image.dispatchEvent(domEvent); } describe('when loaded', () => { it('should raise the load event', () => { const loadRaised = sinon.spy(); overlay.once('load', loadRaised); raiseImageEvent('load'); expect(loadRaised.called).to.be(true); }); }); describe('when load fails', () => { it('should raise the error event', () => { const errorRaised = sinon.spy(); overlay.once('error', errorRaised); raiseImageEvent('error'); expect(errorRaised.called).to.be(true); }); it('should change the image to errorOverlayUrl', () => { raiseImageEvent('error'); expect(overlay._url).to.be(errorUrl); expect(overlay._image.src).to.be(errorUrl); }); }); describe('className', () => { it('should set image\'s class', () => { expect(overlay._image.classList.contains('my-custom-image-class')).to.be(true); }); }); }); describe('#setZIndex', () => { it('sets the z-index of the image', () => { const overlay = L.imageOverlay(); overlay.setZIndex(10); expect(overlay.options.zIndex).to.equal(10); }); it('should update the z-index of the image if it has allready been added to the map', () => { const overlay = L.imageOverlay('', imageBounds); overlay.addTo(map); expect(overlay._image.style.zIndex).to.eql('1'); // Number type in IE overlay.setZIndex('10'); expect(overlay._image.style.zIndex).to.eql('10'); // Number type in IE }); it('should set the z-index of the image when it is added to the map', () => { const overlay = L.imageOverlay('', imageBounds); overlay.setZIndex('10'); overlay.addTo(map); expect(overlay._image.style.zIndex).to.eql('10'); // Number type in IE }); it('should use the z-index specified in options', () => { const overlay = L.imageOverlay('', imageBounds, {zIndex: 20}); overlay.addTo(map); expect(overlay._image.style.zIndex).to.eql('20'); // Number type in IE }); it('should be fluent', () => { const overlay = L.imageOverlay(); expect(overlay.setZIndex()).to.equal(overlay); }); }); describe('#getCenter', () => { it('should return the correct center', () => { const overlay = L.imageOverlay('', imageBounds).addTo(map); expect(overlay.getCenter()).to.be.nearLatLng([40.743078, -74.175995]); }); it('should open popup at the center', () => { const overlay = L.imageOverlay('', imageBounds).addTo(map); overlay.bindPopup('Center').openPopup(); expect(overlay.getPopup().getLatLng()).to.be.nearLatLng([40.743078, -74.175995]); }); }); describe('crossOrigin option', () => { let overlay; const blankUrl = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // https://html.spec.whatwg.org/multipage/urls-and-fetching.html#cors-settings-attributes testCrossOriginValue(undefined, null); // Falsy value (other than empty string '') => no attribute set. testCrossOriginValue(true, ''); testCrossOriginValue('', ''); testCrossOriginValue('anonymous', 'anonymous'); testCrossOriginValue('use-credentials', 'use-credentials'); function testCrossOriginValue(crossOrigin, expectedValue) { it(`uses crossOrigin option value ${crossOrigin}`, () => { overlay = L.imageOverlay(blankUrl, imageBounds, { crossOrigin }); map.addLayer(overlay); expect(overlay._image.getAttribute('crossorigin')).to.be(expectedValue); }); } }); });