You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import { Marker, Popup, Tooltip } from 'leaflet';
|
|
import { describe, expect, it } from 'vitest';
|
|
import '../../src/components/leaflet-map.ts';
|
|
import '../../src/components/leaflet-marker.ts';
|
|
import '../../src/components/leaflet-popup.ts';
|
|
import '../../src/components/leaflet-tooltip.ts';
|
|
import '../../src/components/leaflet-icon.ts';
|
|
|
|
describe('leaflet-marker', () => {
|
|
it('creates a Marker at lat/lng and keeps lat/lng synced while it moves', () => {
|
|
const el = document.createElement('leaflet-marker');
|
|
el.setAttribute('lat', '51.5');
|
|
el.setAttribute('lng', '-0.09');
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(Marker);
|
|
expect(el.leafletObject?.getLatLng()).toMatchObject({ lat: 51.5, lng: -0.09 });
|
|
|
|
el.leafletObject?.setLatLng([1, 2]);
|
|
expect(el.lat).toBe(1);
|
|
expect(el.lng).toBe(2);
|
|
// event: 'move' syncs the attribute too
|
|
expect(el.getAttribute('lat')).toBe('1');
|
|
expect(el.getAttribute('lng')).toBe('2');
|
|
el.remove();
|
|
});
|
|
|
|
it('draggable toggles the Leaflet dragging handler', () => {
|
|
// The dragging handler is only initialized in onAdd(), so the marker
|
|
// needs to actually be added to a map first.
|
|
const map = document.createElement('leaflet-map');
|
|
document.body.append(map);
|
|
|
|
const el = document.createElement('leaflet-marker');
|
|
el.setAttribute('lat', '0');
|
|
el.setAttribute('lng', '0');
|
|
el.setAttribute('draggable', '');
|
|
map.append(el);
|
|
|
|
expect(el.leafletObject?.dragging?.enabled()).toBe(true);
|
|
el.removeAttribute('draggable');
|
|
expect(el.leafletObject?.dragging?.enabled()).toBe(false);
|
|
map.remove();
|
|
});
|
|
|
|
it('swaps in a <leaflet-icon> child via the icon-changed handshake', () => {
|
|
const el = document.createElement('leaflet-marker');
|
|
el.setAttribute('lat', '0');
|
|
el.setAttribute('lng', '0');
|
|
document.body.append(el);
|
|
|
|
const icon = document.createElement('leaflet-icon');
|
|
icon.setAttribute('icon-url', 'https://example.com/icon.png');
|
|
el.append(icon);
|
|
|
|
expect(el.leafletObject?.options.icon).toBe(icon.leafletObject);
|
|
el.remove();
|
|
});
|
|
});
|
|
|
|
describe('leaflet-popup', () => {
|
|
it('takes its content from innerHTML and stays in sync on mutation', async () => {
|
|
const el = document.createElement('leaflet-popup');
|
|
el.innerHTML = '<b>hello</b>';
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(Popup);
|
|
expect(el.leafletObject?.getContent()).toBe('<b>hello</b>');
|
|
|
|
el.innerHTML = '<b>updated</b>';
|
|
// MutationObserver callbacks run as a microtask.
|
|
await Promise.resolve();
|
|
expect(el.leafletObject?.getContent()).toBe('<b>updated</b>');
|
|
el.remove();
|
|
});
|
|
|
|
it('only sets its own latlng when lat/lng attributes are present', () => {
|
|
const withLatLng = document.createElement('leaflet-popup');
|
|
withLatLng.setAttribute('lat', '1');
|
|
withLatLng.setAttribute('lng', '2');
|
|
document.body.append(withLatLng);
|
|
expect(withLatLng.leafletObject?.getLatLng()).toMatchObject({ lat: 1, lng: 2 });
|
|
withLatLng.remove();
|
|
|
|
const withoutLatLng = document.createElement('leaflet-popup');
|
|
document.body.append(withoutLatLng);
|
|
expect(withoutLatLng.leafletObject?.getLatLng()).toBeUndefined();
|
|
withoutLatLng.remove();
|
|
});
|
|
});
|
|
|
|
describe('leaflet-tooltip', () => {
|
|
it('creates a Tooltip with content and direction/permanent/sticky options', () => {
|
|
const el = document.createElement('leaflet-tooltip');
|
|
el.innerHTML = 'hover text';
|
|
el.setAttribute('direction', 'top');
|
|
el.setAttribute('permanent', '');
|
|
el.setAttribute('sticky', '');
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(Tooltip);
|
|
expect(el.leafletObject?.getContent()).toBe('hover text');
|
|
expect(el.leafletObject?.options.direction).toBe('top');
|
|
expect(el.leafletObject?.options.permanent).toBe(true);
|
|
expect(el.leafletObject?.options.sticky).toBe(true);
|
|
el.remove();
|
|
});
|
|
});
|