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.
89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import { ImageOverlay, SVGOverlay, VideoOverlay, latLngBounds } from 'leaflet';
|
|
import { describe, expect, it } from 'vitest';
|
|
import '../../src/components/leaflet-map.ts';
|
|
import '../../src/components/leaflet-image-overlay.ts';
|
|
import '../../src/components/leaflet-video-overlay.ts';
|
|
import '../../src/components/leaflet-svg-overlay.ts';
|
|
|
|
const BOUNDS: [[number, number], [number, number]] = [
|
|
[40.71, -74.24],
|
|
[40.78, -74.12],
|
|
];
|
|
|
|
describe('leaflet-image-overlay', () => {
|
|
it('creates an ImageOverlay with a live bounds getter (url has no Leaflet getter to read back)', () => {
|
|
const el = document.createElement('leaflet-image-overlay');
|
|
el.setAttribute('url', 'https://example.com/a.png');
|
|
el.setAttribute('bounds', JSON.stringify(BOUNDS));
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(ImageOverlay);
|
|
expect(el.url).toBe('https://example.com/a.png');
|
|
expect(el.bounds).toEqual(BOUNDS);
|
|
|
|
el.leafletObject?.setBounds(
|
|
latLngBounds([
|
|
[1, 2],
|
|
[3, 4],
|
|
]),
|
|
);
|
|
// el.bounds reads live via getBounds()
|
|
expect(el.bounds).toEqual([
|
|
[1, 2],
|
|
[3, 4],
|
|
]);
|
|
el.remove();
|
|
});
|
|
});
|
|
|
|
describe('leaflet-video-overlay', () => {
|
|
it('creates a VideoOverlay and applies the newly added options', () => {
|
|
const el = document.createElement('leaflet-video-overlay');
|
|
el.setAttribute('url', 'https://example.com/a.mp4');
|
|
el.setAttribute('bounds', JSON.stringify(BOUNDS));
|
|
el.setAttribute('z-index', '5');
|
|
el.setAttribute('class-name', 'my-video');
|
|
el.setAttribute('keep-aspect-ratio', 'false');
|
|
el.setAttribute('error-overlay-url', 'https://example.com/error.png');
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(VideoOverlay);
|
|
expect(el.leafletObject?.options.zIndex).toBe(5);
|
|
expect(el.leafletObject?.options.className).toBe('my-video');
|
|
expect(el.leafletObject?.options.keepAspectRatio).toBe(false);
|
|
expect(el.leafletObject?.options.errorOverlayUrl).toBe('https://example.com/error.png');
|
|
el.remove();
|
|
});
|
|
|
|
it('applies playback attributes directly to the underlying <video> element once it exists', () => {
|
|
// The <video> element is only created in onAdd(), so the overlay needs to
|
|
// actually be added to a map before getElement() returns anything.
|
|
const map = document.createElement('leaflet-map');
|
|
document.body.append(map);
|
|
|
|
const el = document.createElement('leaflet-video-overlay');
|
|
el.setAttribute('url', 'https://example.com/a.mp4');
|
|
el.setAttribute('bounds', JSON.stringify(BOUNDS));
|
|
el.setAttribute('muted', '');
|
|
el.setAttribute('loop', '');
|
|
map.append(el);
|
|
|
|
const video = el.getElement();
|
|
expect(video?.muted).toBe(true);
|
|
expect(video?.loop).toBe(true);
|
|
map.remove();
|
|
});
|
|
});
|
|
|
|
describe('leaflet-svg-overlay', () => {
|
|
it('creates an SVGOverlay with a live bounds getter', () => {
|
|
const el = document.createElement('leaflet-svg-overlay');
|
|
el.setAttribute('bounds', JSON.stringify(BOUNDS));
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(SVGOverlay);
|
|
expect(el.bounds).toEqual(BOUNDS);
|
|
el.remove();
|
|
});
|
|
});
|