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.
81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
|
|
// A real page has all its <leaflet-*> markup already parsed by the browser's
|
|
// HTML parser before the deferred module script (which calls
|
|
// customElements.define for every tag) ever runs. customElements.define()
|
|
// upgrades every matching element already in the document immediately and
|
|
// synchronously -- including firing connectedCallback -- so a "child" tag
|
|
// whose one-shot connect-time announcement is missed because its listening
|
|
// "parent" tag wasn't defined yet is broken in exactly this scenario, even
|
|
// though it looks fine in every other test in this suite (they all import
|
|
// the component modules -- and so call customElements.define -- before
|
|
// creating any element, which sidesteps the whole problem).
|
|
//
|
|
// This file deliberately does NOT statically import any component module,
|
|
// so nothing here is defined yet when the tree below is built.
|
|
describe('real page load order (markup before customElements.define)', () => {
|
|
it('wires control-layers, layer-group and polygon/line correctly', async () => {
|
|
const map = document.createElement('leaflet-map');
|
|
map.setAttribute('lat', '51.5');
|
|
map.setAttribute('lng', '-0.09');
|
|
map.setAttribute('zoom', '13');
|
|
|
|
const controlLayers = document.createElement('leaflet-control-layers');
|
|
const baseTile = document.createElement('leaflet-tile-layer');
|
|
baseTile.setAttribute('type', 'base');
|
|
baseTile.setAttribute('name', 'Base');
|
|
baseTile.setAttribute('active', '');
|
|
baseTile.setAttribute('url', 'https://tile.example/{z}/{x}/{y}.png');
|
|
controlLayers.append(baseTile);
|
|
|
|
const group = document.createElement('leaflet-layer-group');
|
|
const groupedMarker = document.createElement('leaflet-marker');
|
|
groupedMarker.setAttribute('lat', '1');
|
|
groupedMarker.setAttribute('lng', '2');
|
|
group.append(groupedMarker);
|
|
|
|
const polygon = document.createElement('leaflet-polygon');
|
|
const vertices = [
|
|
['51.509', '-0.08'],
|
|
['51.503', '-0.06'],
|
|
['51.51', '-0.047'],
|
|
].map(([lat, lng]) => {
|
|
const line = document.createElement('leaflet-line');
|
|
line.setAttribute('lat', lat);
|
|
line.setAttribute('lng', lng);
|
|
return line;
|
|
});
|
|
polygon.append(...vertices);
|
|
|
|
map.append(controlLayers, group, polygon);
|
|
document.body.append(map);
|
|
|
|
// Nothing is upgraded yet -- these are plain, undefined elements.
|
|
expect(map.leafletObject).toBeUndefined();
|
|
|
|
// Mirrors index.ts's real export order, which is what actually runs when
|
|
// a page does `import 'leaflet-components'`.
|
|
const lc = await import('../src/index.ts');
|
|
|
|
expect(map).toBeInstanceOf(lc.LeafletMap);
|
|
expect(map.leafletObject).toBeDefined();
|
|
expect(polygon.leafletObject?.getLatLngs()).toEqual([
|
|
[
|
|
{ lat: 51.509, lng: -0.08 },
|
|
{ lat: 51.503, lng: -0.06 },
|
|
{ lat: 51.51, lng: -0.047 },
|
|
],
|
|
]);
|
|
|
|
const controlLayersInternal = controlLayers.leafletObject as unknown as {
|
|
_layers: { name: string }[];
|
|
};
|
|
// oxlint-disable-next-line no-underscore-dangle -- Leaflet's own field name
|
|
expect(controlLayersInternal._layers.map((l) => l.name)).toEqual(['Base']);
|
|
|
|
expect(group.leafletObject?.hasLayer(groupedMarker.leafletObject!)).toBe(true);
|
|
|
|
map.remove();
|
|
});
|
|
});
|