@terrestris/ol-util
Version:
A set of helper classes for working with openLayers
238 lines • 9.2 kB
JavaScript
/* eslint-env jest*/
import OlLayerGroup from 'ol/layer/Group';
import OlLayerTile from 'ol/layer/Tile';
import { useGeographic } from 'ol/proj';
import OlSourceTile from 'ol/source/Tile';
import TestUtil from '../TestUtil';
import { PermalinkUtil } from './PermalinkUtil';
let map;
beforeEach(() => {
map = TestUtil.createMap();
});
afterEach(() => {
TestUtil.removeMap(map);
});
describe('PermalinkUtil', () => {
describe('Basic test', () => {
it('is defined', () => {
expect(PermalinkUtil).not.toBeUndefined();
});
});
describe('Static methods', () => {
describe('#getLink', () => {
it('is defined', () => {
expect(PermalinkUtil.getLink).not.toBeUndefined();
});
it('creates a valid permalink', () => {
useGeographic();
map.getView().setCenter([50, 7]);
map.getView().setZoom(7);
map.addLayer(new OlLayerTile({
visible: true,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'peter'
}
}));
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'paul'
}
}));
map.addLayer(new OlLayerTile({
visible: true,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'pan'
}
}));
const link = PermalinkUtil.getLink(map);
const url = new URL(link);
const center = url.searchParams.get('center');
const zoom = url.searchParams.get('zoom');
const layers = url.searchParams.get('layers');
expect(center).toBe('50;7');
expect(zoom).toBe('7');
expect(layers).toBe('peter;pan');
});
it('correctly uses optional separator on link creation', () => {
map.getView().setCenter([50, 7]);
map.getView().setZoom(7);
map.addLayer(new OlLayerTile({
visible: true,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'peter'
}
}));
map.addLayer(new OlLayerTile({
visible: true,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'pan'
}
}));
const link = PermalinkUtil.getLink(map, '|');
const url = new URL(link);
const center = url.searchParams.get('center');
const layers = url.searchParams.get('layers');
expect(center).toBe('50|7');
expect(layers).toBe('peter|pan');
});
});
describe('#applyLink', () => {
it('is defined', () => {
expect(PermalinkUtil.applyLink).not.toBeUndefined();
});
it('applies a given permalink', () => {
map.getLayers().clear();
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'peter'
}
}));
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'paul'
}
}));
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'pan'
}
}));
const link = 'http://fake?zoom=3¢er=10;20&layers=peter;pan';
Object.defineProperty(global.window, 'location', {
value: {
href: link
}
});
PermalinkUtil.applyLink(map);
expect(map.getView().getCenter()).toEqual([10, 20]);
expect(map.getView().getZoom()).toBe(3);
const visibles = map.getLayers().getArray()
.filter(l => l.getVisible())
.map(l => l.get('name'));
expect(visibles).toEqual(['peter', 'pan']);
});
it('correctly uses optional separator on link apply', () => {
map.getLayers().clear();
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'peter'
}
}));
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'paul'
}
}));
map.addLayer(new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'pan'
}
}));
const link = 'http://fake?zoom=3¢er=10|20&layers=peter|pan';
// @ts-ignore
delete global.window.location;
global.window = Object.create(window);
Object.defineProperty(window, 'location', {
value: {
href: link
},
configurable: true
});
PermalinkUtil.applyLink(map, '|');
expect(map.getView().getCenter()).toEqual([10, 20]);
const visibles = map.getLayers().getArray()
.filter(l => l.getVisible())
.map(l => l.get('name'));
expect(visibles).toEqual(['peter', 'pan']);
});
it('applies visible state to parenting groups', () => {
map.getLayers().clear();
map.addLayer(new OlLayerGroup({
visible: false,
layers: [
new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'paul'
}
}),
new OlLayerTile({
visible: false,
source: new OlSourceTile({
attributions: ''
}),
properties: {
name: 'pan'
}
})
],
properties: {
name: 'peter'
}
}));
const link = 'http://fake?zoom=3¢er=10|20&layers=pan';
Object.defineProperty(window, 'location', {
value: {
href: link
},
configurable: true
});
PermalinkUtil.applyLink(map, '|');
const firstLevelVisibles = map.getLayers().getArray()
.filter(l => l.getVisible())
.map(l => l.get('name'));
expect(firstLevelVisibles).toEqual(['peter']);
let firstElement = map.getLayers().getArray()[0];
expect(firstElement).toBeInstanceOf(OlLayerGroup);
const secondLevelVisibles = firstElement
.getLayers().getArray().filter(l => l.getVisible())
.map(l => l.get('name'));
expect(secondLevelVisibles).toEqual(['pan']);
});
});
});
});
//# sourceMappingURL=PermalinkUtil.spec.js.map