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.
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { GeoJSON } from 'leaflet';
|
|
import { describe, expect, it } from 'vitest';
|
|
import '../../src/components/leaflet-geojson.ts';
|
|
|
|
const FEATURE = {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Polygon',
|
|
coordinates: [
|
|
[
|
|
[-0.13, 51.5],
|
|
[-0.12, 51.5],
|
|
[-0.12, 51.51],
|
|
[-0.13, 51.51],
|
|
[-0.13, 51.5],
|
|
],
|
|
],
|
|
},
|
|
properties: {},
|
|
};
|
|
|
|
describe('leaflet-geojson', () => {
|
|
it('builds a GeoJSON layer from the data attribute with pathProps nested as style', () => {
|
|
const el = document.createElement('leaflet-geojson');
|
|
el.setAttribute('data', JSON.stringify(FEATURE));
|
|
el.setAttribute('color', '#e67e22');
|
|
el.setAttribute('fill-opacity', '0.4');
|
|
document.body.append(el);
|
|
|
|
expect(el.leafletObject).toBeInstanceOf(GeoJSON);
|
|
expect(el.leafletObject?.getLayers()).toHaveLength(1);
|
|
|
|
const style = el.leafletObject?.options.style as { color?: string; fillOpacity?: number };
|
|
expect(style.color).toBe('#e67e22');
|
|
expect(style.fillOpacity).toBe(0.4);
|
|
el.remove();
|
|
});
|
|
|
|
it('replaces its layers when the data attribute changes', () => {
|
|
const el = document.createElement('leaflet-geojson');
|
|
el.setAttribute('data', JSON.stringify(FEATURE));
|
|
document.body.append(el);
|
|
expect(el.leafletObject?.getLayers()).toHaveLength(1);
|
|
|
|
el.setAttribute(
|
|
'data',
|
|
JSON.stringify({ type: 'FeatureCollection', features: [FEATURE, FEATURE] }),
|
|
);
|
|
expect(el.leafletObject?.getLayers()).toHaveLength(2);
|
|
el.remove();
|
|
});
|
|
});
|