@yaga/leaflet-ng2
Version:
Angular2 module for Leaflet
399 lines • 19.4 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("Polygon Directive", () => {
path_directives_spec_1.createPathTests(index_1.PolygonDirective);
let map;
let layer;
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.PolygonDirective({ ref: map }, {});
});
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("[(latlngs)]", () => {
describe("for Polygons", () => {
const TEST_VALUE = [[leaflet_1.latLng(0, 1), leaflet_1.latLng(1, 1), leaflet_1.latLng(1, 0)]];
it("should be changed in Leaflet when changing in Angular", () => {
layer.latLngs = TEST_VALUE;
chai_1.expect(layer._latlngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Angular", () => {
layer.latLngs = TEST_VALUE;
chai_1.expect(layer.latLngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Leaflet", () => {
layer.setLatLngs(TEST_VALUE);
chai_1.expect(layer.latLngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when adding in Leaflet", () => {
layer.setLatLngs(TEST_VALUE);
layer.addLatLng([3, 3]);
chai_1.expect(layer.latLngs[0][3].lat).to.equal(3);
chai_1.expect(layer.latLngs[0][3].lng).to.equal(3);
});
it("should fire an event when changing in Angular", (done) => {
layer.latLngsChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.latLngs = TEST_VALUE;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.latLngsChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.setLatLngs(TEST_VALUE);
});
it("should fire geoJSON-change event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.latLngs = TEST_VALUE;
});
it("should fire geoJSON-change event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.setLatLngs(TEST_VALUE);
});
it("should fire an change event when adding in Leaflet", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.addLatLng([3, 3]);
});
});
describe("for MultiPolygons", () => {
const TEST_VALUE = [
[[leaflet_1.latLng(1, 0), leaflet_1.latLng(1, 1), leaflet_1.latLng(0, 1)]],
[[leaflet_1.latLng(0, 1), leaflet_1.latLng(1, 1), leaflet_1.latLng(1, 0)]],
];
it("should be changed in Leaflet when changing in Angular", () => {
layer.latLngs = TEST_VALUE;
chai_1.expect(layer._latlngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Angular", () => {
layer.latLngs = TEST_VALUE;
chai_1.expect(layer.latLngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when changing in Leaflet", () => {
layer.setLatLngs(TEST_VALUE);
chai_1.expect(layer.latLngs).to.deep.equal(TEST_VALUE);
});
it("should be changed in Angular when adding in Leaflet", () => {
layer.setLatLngs(TEST_VALUE);
layer.addLatLng([3, 3]);
chai_1.expect(layer.latLngs[0][0][3].lat).to.equal(3);
chai_1.expect(layer.latLngs[0][0][3].lng).to.equal(3);
});
it("should fire an event when changing in Angular", (done) => {
layer.latLngsChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.latLngs = TEST_VALUE;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.latLngsChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.setLatLngs(TEST_VALUE);
});
it("should fire geoJSON-change event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.latLngs = TEST_VALUE;
});
it("should fire geoJSON-change event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.setLatLngs(TEST_VALUE);
});
it("should fire an change event when adding in Leaflet", (done) => {
layer.geoJSONChange.subscribe(() => {
return done();
});
layer.addLatLng([3, 3]);
});
});
});
describe("[(geoJSON)]", () => {
describe("for Polygon", () => {
const TEST_VALUE = {
geometry: {
coordinates: [[[0, 1], [1, 1], [0, 0], [0, 1]]],
type: "Polygon",
},
properties: {},
type: "Feature",
};
const TEST_POLYGON = [[[0, 0], [1, 0], [1, 1], [0, 0]]];
it("should be changed in Leaflet when changing in Angular", () => {
layer.geoJSON = TEST_VALUE;
/* istanbul ignore if */
if (layer.latLngs[0][0].lng !== TEST_VALUE.geometry.coordinates[0][0][0] ||
layer.latLngs[0][0].lat !== TEST_VALUE.geometry.coordinates[0][0][1] ||
layer.latLngs[0][1].lng !== TEST_VALUE.geometry.coordinates[0][1][0] ||
layer.latLngs[0][1].lat !== TEST_VALUE.geometry.coordinates[0][1][1] ||
layer.latLngs[0][2].lng !== TEST_VALUE.geometry.coordinates[0][2][0] ||
layer.latLngs[0][2].lat !== TEST_VALUE.geometry.coordinates[0][2][1]) {
throw new Error(`Wrong value setted: ${TEST_VALUE.geometry.coordinates} != ${layer._latlngs}`);
}
});
it("should be changed in Angular when changing in Angular", () => {
layer.geoJSON = TEST_VALUE;
chai_1.expect(layer.geoJSON).to.deep.equal(TEST_VALUE);
});
it("should be changed geoJSON in Angular when changing in latlngs Leaflet", () => {
layer.setLatLngs(TEST_POLYGON);
chai_1.expect(index_1.lng2lat(layer.geoJSON.geometry.coordinates)).to.deep.equal(TEST_POLYGON);
});
it("should be changed geoJSON in Angular when adding in latlngs Leaflet", () => {
layer.setLatLngs(TEST_POLYGON);
layer.addLatLng([3, 3]);
/* istanbul ignore if */
if (layer.geoJSON.geometry.coordinates[0][3][0] !== 3 ||
layer.geoJSON.geometry.coordinates[0][3][1] !== 3) {
throw new Error(`Wrong value added: ${[3, 3]} != ${layer.geoJSON.geometry.coordinates}`);
}
});
it("should fire an event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.geoJSON = TEST_VALUE;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
chai_1.expect(index_1.lng2lat(eventVal.geometry.coordinates)).to.deep.equal(TEST_POLYGON);
return done();
});
layer.setLatLngs(TEST_POLYGON);
});
it("should fire an event when adding in Leaflet", (done) => {
layer.setLatLngs(TEST_POLYGON);
layer.geoJSONChange.subscribe((eventVal) => {
const values = eventVal.geometry.coordinates;
/* istanbul ignore if */
if (values[0][3][0] !== 3 ||
values[0][3][1] !== 3) {
return done(new Error("Received wrong value"));
}
return done();
});
layer.addLatLng([3, 3]);
});
});
describe("for MultiPolygon", () => {
const TEST_VALUE = {
geometry: {
coordinates: [
[[[1, 0], [1, 1], [0, 1], [1, 0]]],
[[[0, 1], [1, 1], [0, 0], [0, 1]]],
],
type: "MultiPolygon",
},
properties: {},
type: "Feature",
};
const TEST_MULTIPOLYGON = [
[[[0, 0], [1, 0], [1, 1], [0, 0]]],
[[[0, 0], [0, 1], [1, 1], [0, 0]]],
];
it("should be changed in Leaflet when changing in Angular", () => {
layer.geoJSON = TEST_VALUE;
/* istanbul ignore if */
if (layer.latLngs[0][0][0].lng !== TEST_VALUE.geometry.coordinates[0][0][0][0] ||
layer.latLngs[0][0][0].lat !== TEST_VALUE.geometry.coordinates[0][0][0][1] ||
layer.latLngs[0][0][1].lng !== TEST_VALUE.geometry.coordinates[0][0][1][0] ||
layer.latLngs[0][0][1].lat !== TEST_VALUE.geometry.coordinates[0][0][1][1] ||
layer.latLngs[0][0][2].lng !== TEST_VALUE.geometry.coordinates[0][0][2][0] ||
layer.latLngs[0][0][2].lat !== TEST_VALUE.geometry.coordinates[0][0][2][1] ||
layer.latLngs[1][0][0].lng !== TEST_VALUE.geometry.coordinates[1][0][0][0] ||
layer.latLngs[1][0][0].lat !== TEST_VALUE.geometry.coordinates[1][0][0][1] ||
layer.latLngs[1][0][1].lng !== TEST_VALUE.geometry.coordinates[1][0][1][0] ||
layer.latLngs[1][0][1].lat !== TEST_VALUE.geometry.coordinates[1][0][1][1] ||
layer.latLngs[1][0][2].lng !== TEST_VALUE.geometry.coordinates[1][0][2][0] ||
layer.latLngs[1][0][2].lat !== TEST_VALUE.geometry.coordinates[1][0][2][1]) {
throw new Error(`Wrong value setted: ${TEST_VALUE.geometry.coordinates} != ${layer._latlngs}`);
}
});
it("should be changed in Angular when changing in Angular", () => {
layer.geoJSON = TEST_VALUE;
chai_1.expect(layer.geoJSON).to.deep.equal(TEST_VALUE);
});
it("should be changed geoJSON in Angular when changing in latlngs Leaflet", () => {
layer.setLatLngs(TEST_MULTIPOLYGON);
/* istanbul ignore if */
if (layer.geoJSON.geometry.type !== "MultiPolygon") {
throw new Error("Received wrong geometry type: " + layer.geoJSON.geometry.type);
}
chai_1.expect(index_1.lng2lat(layer.geoJSON.geometry.coordinates)).to.deep.equal(TEST_MULTIPOLYGON);
});
it("should be changed geoJSON in Angular when adding in latlngs Leaflet", () => {
layer.setLatLngs(TEST_MULTIPOLYGON);
layer.addLatLng([3, 3]);
/* istanbul ignore if */
if (layer.geoJSON.geometry.type !== "MultiPolygon") {
throw new Error("Received wrong geometry type: " + layer.geoJSON.geometry.type);
}
/* istanbul ignore if */
if (layer.geoJSON.geometry.coordinates[0][0][3][0] !== 3 ||
layer.geoJSON.geometry.coordinates[0][0][3][1] !== 3) {
throw new Error(`Wrong value added: ${[3, 3]} != ${layer.geoJSON.geometry.coordinates}`);
}
});
it("should fire an event when changing in Angular", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
chai_1.expect(eventVal).to.deep.equal(TEST_VALUE);
return done();
});
layer.geoJSON = TEST_VALUE;
});
it("should fire an event when changing in Leaflet", (done) => {
layer.geoJSONChange.subscribe((eventVal) => {
chai_1.expect(index_1.lng2lat(eventVal.geometry.coordinates)).to.deep.equal(TEST_MULTIPOLYGON);
return done();
});
layer.setLatLngs(TEST_MULTIPOLYGON);
});
it("should fire an event when adding in Leaflet", (done) => {
layer.setLatLngs(TEST_MULTIPOLYGON);
layer.geoJSONChange.subscribe((eventVal) => {
const values = eventVal.geometry.coordinates;
/* istanbul ignore if */
if (values[0][0][3][0] !== 3 ||
values[0][0][3][1] !== 3) {
return done(new Error("Received wrong value"));
}
return done();
});
layer.addLatLng([3, 3]);
});
});
});
describe("[smoothFactor]", () => {
it("should be changed in Leaflet when changing in Angular", () => {
const val = spec_1.randomNumber(10, 0, 0);
layer.smoothFactor = val;
chai_1.expect(layer.options.smoothFactor).to.equal(val);
});
it("should be changed in Angular when changing in Angular", () => {
const val = spec_1.randomNumber(10, 0, 0);
layer.smoothFactor = val;
chai_1.expect(layer.smoothFactor).to.equal(val);
});
});
describe("[properties]", () => {
const TEST_OBJECT = {
test: "OK",
};
it("should be changed in Leaflet when changing in Angular", () => {
layer.properties = TEST_OBJECT;
chai_1.expect(layer.feature.properties).to.equal(TEST_OBJECT);
});
it("should be changed in Angular when changing in Angular", () => {
layer.properties = TEST_OBJECT;
chai_1.expect(layer.properties).to.equal(TEST_OBJECT);
});
it("should emit an event for GeoJSONChange when changing in Angular", (done) => {
layer.geoJSONChange.subscribe((val) => {
chai_1.expect(val.properties).to.equal(TEST_OBJECT);
return done();
});
layer.properties = TEST_OBJECT;
});
});
describe("[noClip]", () => {
it("should be changed to false in Leaflet when changing in Angular to false", () => {
layer.noClip = false;
chai_1.expect(layer.options.noClip).to.equal(false);
});
it("should be changed to true in Leaflet when changing in Angular to true", () => {
layer.options.noClip = false;
layer.noClip = true;
chai_1.expect(layer.options.noClip).to.equal(true);
});
it("should be changed in Angular to false when changing in Angular to false", () => {
layer.noClip = false;
chai_1.expect(layer.noClip).to.equal(false);
});
it("should be changed in Angular to true when changing in Angular to true", () => {
layer.noClip = true;
chai_1.expect(layer.noClip).to.equal(true);
});
});
describe("Popup in Polygon Directive", () => {
let layerWithPopup;
let popup;
let testDiv;
before(() => {
testDiv = document.createElement("div");
layerWithPopup = new index_1.PolygonDirective({ ref: map }, {});
popup = new index_1.PopupDirective({ nativeElement: testDiv }, { ref: layerWithPopup });
});
it("should bind popup", () => {
chai_1.expect(layerWithPopup._popup).to.equal(popup);
});
});
describe("Tooltip in Polygon Directive", () => {
let layerWithTooltip;
let tooltip;
let testDiv;
before(() => {
testDiv = document.createElement("div");
layerWithTooltip = new index_1.PolygonDirective({ ref: map }, {});
tooltip = new index_1.TooltipDirective({ ref: layerWithTooltip }, { nativeElement: testDiv });
});
it("should bind tooltip", () => {
chai_1.expect(layerWithTooltip._tooltip).to.equal(tooltip);
});
});
describe("Destroying a Polygon Directive", () => {
it("should remove Polygon 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=polygon.directive.spec.js.map