leaflet-components/test/components/shapes.test.ts

import { Circle, CircleMarker, Polygon, Polyline, Rectangle } from 'leaflet';
import { describe, expect, it } from 'vitest';
import '../../src/components/leaflet-circle.ts';
import '../../src/components/leaflet-circle-marker.ts';
import '../../src/components/leaflet-rectangle.ts';
import '../../src/components/leaflet-polygon.ts';
import '../../src/components/leaflet-polyline.ts';
import '../../src/components/leaflet-line.ts';

describe('leaflet-circle', () => {
  it('creates a Circle at lat/lng with radius and pathProps applied', () => {
    const el = document.createElement('leaflet-circle') as HTMLElement & {
      leafletObject?: Circle;
      radius: number;
    };
    el.setAttribute('lat', '51.5');
    el.setAttribute('lng', '-0.09');
    el.setAttribute('radius', '500');
    el.setAttribute('color', 'red');
    el.setAttribute('interactive', 'false');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Circle);
    expect(el.leafletObject?.getLatLng()).toMatchObject({ lat: 51.5, lng: -0.09 });
    expect(el.leafletObject?.getRadius()).toBe(500);
    expect(el.leafletObject?.options.color).toBe('red');
    expect(el.leafletObject?.options.interactive).toBe(false);
    el.remove();
  });

  it('radius property reads the live value and reacts to attribute changes', () => {
    const el = document.createElement('leaflet-circle') as HTMLElement & {
      leafletObject?: Circle;
      radius: number;
    };
    document.body.append(el);
    // Leaflet's own default, no attribute set
    expect(el.radius).toBe(1000);

    el.setAttribute('radius', '750');
    expect(el.leafletObject?.getRadius()).toBe(750);
    expect(el.radius).toBe(750);

    // Change bypassing the attribute entirely.
    el.leafletObject?.setRadius(42);
    // Property getter still reflects Leaflet's live state.
    expect(el.radius).toBe(42);
    el.remove();
  });
});

describe('leaflet-circle-marker', () => {
  it('creates a CircleMarker with a live radius getter', () => {
    const el = document.createElement('leaflet-circle-marker') as HTMLElement & {
      leafletObject?: CircleMarker;
      radius: number;
    };
    el.setAttribute('lat', '1');
    el.setAttribute('lng', '2');
    el.setAttribute('radius', '15');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(CircleMarker);
    expect(el.leafletObject?.getRadius()).toBe(15);
    el.leafletObject?.setRadius(30);
    expect(el.radius).toBe(30);
    el.remove();
  });
});

describe('leaflet-rectangle', () => {
  it('creates a Rectangle from the bounds attribute with a live bounds getter', () => {
    const el = document.createElement('leaflet-rectangle') as HTMLElement & {
      leafletObject?: Rectangle;
      bounds: [[number, number], [number, number]];
    };
    el.setAttribute(
      'bounds',
      JSON.stringify([
        [51.49, -0.08],
        [51.5, -0.06],
      ]),
    );
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Rectangle);
    expect(el.bounds).toEqual([
      [51.49, -0.08],
      [51.5, -0.06],
    ]);
    el.remove();
  });
});

describe('leaflet-polygon', () => {
  it('collects vertices from <leaflet-line> children and updates on change', () => {
    const el = document.createElement('leaflet-polygon') as HTMLElement & {
      leafletObject?: Polygon;
    };
    const line1 = document.createElement('leaflet-line');
    line1.setAttribute('lat', '1');
    line1.setAttribute('lng', '2');
    const line2 = document.createElement('leaflet-line');
    line2.setAttribute('lat', '3');
    line2.setAttribute('lng', '4');
    el.append(line1, line2);
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Polygon);
    expect(el.leafletObject?.getLatLngs()).toEqual([
      [
        { lat: 1, lng: 2 },
        { lat: 3, lng: 4 },
      ],
    ]);

    line1.setAttribute('lat', '9');
    expect(el.leafletObject?.getLatLngs()).toEqual([
      [
        { lat: 9, lng: 2 },
        { lat: 3, lng: 4 },
      ],
    ]);
    el.remove();
  });
});

describe('leaflet-polyline', () => {
  it('applies smoothFactor/noClip and is unfilled by default', () => {
    const el = document.createElement('leaflet-polyline') as HTMLElement & {
      leafletObject?: Polyline;
    };
    el.setAttribute('smooth-factor', '2.5');
    el.setAttribute('no-clip', '');
    const line = document.createElement('leaflet-line');
    line.setAttribute('lat', '1');
    line.setAttribute('lng', '2');
    el.append(line);
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Polyline);
    expect(el.leafletObject?.options.smoothFactor).toBe(2.5);
    expect(el.leafletObject?.options.noClip).toBe(true);
    expect(el.leafletObject?.options.fill).toBe(false);
    el.remove();
  });
});