@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
425 lines • 17.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const chai_1 = require("chai");
const leaflet_1 = require("leaflet");
const index_1 = require("./index");
const path_directives_spec_1 = require("./path-directives.spec");
const spec_1 = require("./spec");
describe("Circle-Marker Directive", () => {
let map;
let layer;
const TEST_VALUE = leaflet_1.latLng(0, 1);
const TEST_POINT = [3, 4];
const TEST_GEOJSON = {
geometry: {
coordinates: [1, 3],
type: "Point",
},
properties: {},
type: "Feature",
};
beforeEach(() => {
map = new index_1.MapComponent({ nativeElement: document.createElement("div") }, new index_1.LayerGroupProvider(), new index_1.MapProvider());
map._size = leaflet_1.point(100, 100);
map._pixelOrigin = leaflet_1.point(50, 50);
map._renderer = map._renderer || new leaflet_1.SVG();
layer = new index_1.CircleMarkerDirective({ ref: map }, {});
layer.ngAfterContentInit();
});
path_directives_spec_1.createPathTests(index_1.CircleMarkerDirective);
describe("[(display)]", () => {
it("should set DOM container style to display:none when not displaying", () => {
layer.display = false;
chai_1.expect(layer.getElement().style.display).to.equal("none");
});
it("should reset DOM container style when display is true again", () => {
layer.display = false;
layer.display = true;
chai_1.expect(layer.getElement().style.display).to.not.equal("none");
});
it("should set to false by removing from map", (done) => {
layer.displayChange.subscribe((val) => {
chai_1.expect(val).to.equal(false);
chai_1.expect(layer.display).to.equal(false);
done();
});
map.removeLayer(layer);
});
it("should set to true when adding to map again", (done) => {
map.removeLayer(layer);
layer.displayChange.subscribe((val) => {
chai_1.expect(val).to.equal(true);
chai_1.expect(layer.display).to.equal(true);
done();
});
map.addLayer(layer);
});
});
describe("[(position)]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
layer.position = TEST_VALUE;
chai_1.expect(layer._latlng).to.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Angular", () => {
layer.position = TEST_VALUE;
chai_1.expect(layer.position).to.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Leaflet", () => {
layer.setLatLng(TEST_VALUE);
chai_1.expect(layer.position).to.equal(TEST_VALUE);
});
it("should fire an event when changing in Angular", (done) => {
layer.positionChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(TEST_VALUE);
done();
});
layer.position = TEST_VALUE;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.positionChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(TEST_VALUE);
done();
});
layer.setLatLng(TEST_VALUE);
});
it("should fire geoJSON-change event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe(() => {
done();
});
layer.position = TEST_VALUE;
});
it("should fire geoJSON-change event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe(() => {
done();
});
layer.setLatLng(TEST_VALUE);
});
});
describe("[(lat)]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
const val = spec_1.randomLat();
layer.lat = val;
chai_1.expect(layer.getLatLng().lat).to.equal(val);
});
it("should be changed in Angular when changing in Angular", () => {
const val = spec_1.randomLat();
layer.lat = val;
chai_1.expect(layer.lat).to.equal(val);
});
it("should be changed in Angular when changing in Leaflet", () => {
const val = spec_1.randomLat();
layer.setLatLng([val, 0]);
chai_1.expect(layer.lat).to.equal(val);
});
it("should fire an event when changing in Angular", (done) => {
const val = spec_1.randomLat();
layer.latChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.lat = val;
});
it("should fire an event when changing in Leaflet", (done) => {
const val = spec_1.randomLat();
layer.latChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.setLatLng([val, 0]);
});
});
describe("[(lng)]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
const val = spec_1.randomLng();
layer.lng = val;
chai_1.expect(layer.getLatLng().lng).to.equal(val);
});
it("should be changed in Angular when changing in Angular", () => {
const val = spec_1.randomLng();
layer.lng = val;
chai_1.expect(layer.lng).to.equal(val);
});
it("should be changed in Angular when changing in Leaflet", () => {
const val = spec_1.randomLng();
layer.setLatLng([0, val]);
chai_1.expect(layer.lng).to.equal(val);
});
it("should fire an event when changing in Angular", (done) => {
const val = spec_1.randomLng();
layer.lngChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.lng = val;
});
it("should fire an event when changing in Leaflet", (done) => {
const val = spec_1.randomLng();
layer.lngChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.setLatLng([0, val]);
});
});
describe("[(radius)]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
const val = spec_1.randomNumber(100);
layer.radius = val;
chai_1.expect(layer.getRadius()).to.equal(val);
});
it("should be changed in Angular when changing in Angular", () => {
const val = spec_1.randomNumber(100);
layer.radius = val;
chai_1.expect(layer.radius).to.equal(val);
});
it("should be changed in Angular when changing in Leaflet", () => {
const val = spec_1.randomNumber(100);
layer.setRadius(val);
chai_1.expect(layer.radius).to.equal(val);
});
it("should fire an event when changing in Angular", (done) => {
const val = spec_1.randomNumber(100);
layer.radiusChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.radius = val;
});
it("should fire an event when changing in Leaflet", (done) => {
const val = spec_1.randomNumber(100);
layer.radiusChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.equal(val);
done();
});
layer.setRadius(val);
});
});
describe("[(geoJSON)]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
layer.geoJSON = TEST_GEOJSON;
chai_1.expect(layer.position.lng).to.equal(TEST_GEOJSON.geometry.coordinates[0]);
chai_1.expect(layer.position.lat).to.equal(TEST_GEOJSON.geometry.coordinates[1]);
});
it("should be changed in Angular when changing in Angular", () => {
layer.geoJSON = TEST_GEOJSON;
chai_1.expect(layer.geoJSON.geometry.coordinates[0]).to.equal(TEST_GEOJSON.geometry.coordinates[0]);
chai_1.expect(layer.geoJSON.geometry.coordinates[1]).to.equal(TEST_GEOJSON.geometry.coordinates[1]);
});
it("should be changed geoJSON in Angular when changing in latlngs Leaflet", () => {
layer.setLatLng(TEST_POINT);
chai_1.expect(layer.geoJSON.geometry.coordinates[0]).to.equal(TEST_POINT[1]);
chai_1.expect(layer.geoJSON.geometry.coordinates[1]).to.equal(TEST_POINT[0]);
});
it("should fire an event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
chai_1.expect(eventVal.geometry.coordinates[0]).to.equal(TEST_GEOJSON.geometry.coordinates[0]);
chai_1.expect(eventVal.geometry.coordinates[1]).to.equal(TEST_GEOJSON.geometry.coordinates[1]);
done();
});
layer.geoJSON = TEST_GEOJSON;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
const values = eventVal.geometry.coordinates;
chai_1.expect(values[0]).to.equal(TEST_POINT[1]);
chai_1.expect(values[1]).to.equal(TEST_POINT[0]);
done();
});
layer.setLatLng(TEST_POINT);
});
});
describe("[properties]", () => {
let layerWithProps;
const TEST_OBJECT = {
test: "OK",
};
beforeEach(() => {
layerWithProps = new index_1.CircleMarkerDirective({ ref: map }, {});
});
it("should be changed in Leaflet when changing in Angular", () => {
layerWithProps.properties = TEST_OBJECT;
chai_1.expect(layerWithProps.feature.properties).to.equal(TEST_OBJECT);
});
it("should be changed in Angular when changing in Angular", () => {
layerWithProps.properties = TEST_OBJECT;
chai_1.expect(layerWithProps.properties).to.equal(TEST_OBJECT);
});
it("should emit an event for GeoJSONChange when changing in Angular", (done) => {
layerWithProps.geoJSONChange.subscribe((val) => {
chai_1.expect(val.properties).to.equal(TEST_OBJECT);
done();
});
layerWithProps.properties = TEST_OBJECT;
});
});
// Events
describe("(add)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.addEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("add", testEvent);
});
});
describe("(remove)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.removeEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("remove", testEvent);
});
});
describe("(popupopen)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.popupopenEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("popupopen", testEvent);
});
});
describe("(popupclose)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.popupcloseEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("popupclose", testEvent);
});
});
describe("(tooltipopen)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.tooltipopenEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("tooltipopen", testEvent);
});
});
describe("(tooltipclose)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.tooltipcloseEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("tooltipclose", testEvent);
});
});
describe("(click)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.clickEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("click", testEvent);
});
});
describe("(dblclick)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.dblclickEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("dblclick", testEvent);
});
});
describe("(mousedown)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.mousedownEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("mousedown", testEvent);
});
});
describe("(mouseover)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.mouseoverEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("mouseover", testEvent);
});
});
describe("(mouseout)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.mouseoutEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("mouseout", testEvent);
});
});
describe("(contextmenu)", () => {
it("should fire event in Angular when firing event in Leaflet", (done) => {
const testHandle = {};
const testEvent = { testHandle };
layer.contextmenuEvent.subscribe((event) => {
chai_1.expect(event.testHandle).to.equal(testHandle);
return done();
});
layer.fire("contextmenu", testEvent);
});
});
describe("Popup in Circle Directive", () => {
let popup;
let testDiv;
beforeEach(() => {
testDiv = document.createElement("div");
layer = new index_1.CircleMarkerDirective({ ref: map }, {});
popup = new index_1.PopupDirective({ nativeElement: testDiv }, { ref: layer });
});
it("should bind popup", () => {
layer.ngAfterContentInit();
chai_1.expect(layer._popup).to.equal(popup);
});
});
describe("Tooltip in Circle Directive", () => {
let tooltip;
let testDiv;
beforeEach(() => {
testDiv = document.createElement("div");
layer = new index_1.CircleMarkerDirective({ ref: map }, {});
tooltip = new index_1.TooltipDirective({ ref: layer }, { nativeElement: testDiv });
});
it("should bind tooltip", () => {
chai_1.expect(layer._tooltip).to.equal(tooltip);
});
});
describe("Destroying a Circle Directive", () => {
before(() => {
// Hack to get write-access to readonly property
layer = new index_1.CircleMarkerDirective({ ref: map }, {});
});
it("should remove Circle Directive from map on destroy", () => {
chai_1.expect(map.hasLayer(layer)).to.equal(true);
layer.ngOnDestroy();
chai_1.expect(map.hasLayer(layer)).to.equal(false);
});
});
});
//# sourceMappingURL=circle-marker.directive.spec.js.map