Organize tests
This commit is contained in:
Tim Schaub
@@ -0,0 +1,126 @@
|
||||
import Attribution from '../../../../../src/ol/control/Attribution.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import Tile from '../../../../../src/ol/Tile.js';
|
||||
import TileLayer from '../../../../../src/ol/layer/Tile.js';
|
||||
import TileSource from '../../../../../src/ol/source/Tile.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
import {createXYZ} from '../../../../../src/ol/tilegrid.js';
|
||||
|
||||
describe('ol.control.Attribution', function () {
|
||||
let map;
|
||||
|
||||
const tileLoadFunction = function () {
|
||||
const tile = new Tile([0, 0, -1], 2 /* LOADED */);
|
||||
tile.getImage = function () {
|
||||
const image = new Image();
|
||||
image.width = 256;
|
||||
image.height = 256;
|
||||
return image;
|
||||
};
|
||||
return tile;
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
const target = document.createElement('div');
|
||||
target.style.width = '100px';
|
||||
target.style.height = '100px';
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
target: target,
|
||||
controls: [
|
||||
new Attribution({
|
||||
collapsed: false,
|
||||
collapsible: false,
|
||||
}),
|
||||
],
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new TileSource({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: createXYZ(),
|
||||
attributions: 'foo',
|
||||
}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new TileSource({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: createXYZ(),
|
||||
attributions: 'bar',
|
||||
}),
|
||||
}),
|
||||
new TileLayer({
|
||||
source: new TileSource({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: createXYZ(),
|
||||
attributions: 'foo',
|
||||
}),
|
||||
}),
|
||||
],
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
}),
|
||||
});
|
||||
map.getLayers().forEach(function (layer) {
|
||||
const source = layer.getSource();
|
||||
source.getTile = tileLoadFunction;
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
disposeMap(map);
|
||||
map = null;
|
||||
});
|
||||
|
||||
it('does not add duplicate attributions', function () {
|
||||
map.renderSync();
|
||||
const attribution = map.getTarget().querySelectorAll('.ol-attribution li');
|
||||
expect(attribution.length).to.be(2);
|
||||
});
|
||||
|
||||
it('renders attributions as non-collapsible if source is configured with attributionsCollapsible set to false', function () {
|
||||
map.getControls().clear();
|
||||
map.addControl(new Attribution());
|
||||
const source = new TileSource({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: createXYZ(),
|
||||
attributions: 'foo',
|
||||
attributionsCollapsible: false,
|
||||
});
|
||||
source.getTile = tileLoadFunction;
|
||||
map.addLayer(
|
||||
new TileLayer({
|
||||
source: source,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
|
||||
const attribution = map
|
||||
.getTarget()
|
||||
.querySelectorAll('.ol-attribution.ol-uncollapsible');
|
||||
expect(attribution.length).to.be(1);
|
||||
});
|
||||
|
||||
it('renders attributions as collapsible if configured with collapsible set to true', function () {
|
||||
map.getControls().clear();
|
||||
map.addControl(new Attribution({collapsible: true}));
|
||||
const source = new TileSource({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: createXYZ(),
|
||||
attributions: 'foo',
|
||||
attributionsCollapsible: false,
|
||||
});
|
||||
source.getTile = tileLoadFunction;
|
||||
map.addLayer(
|
||||
new TileLayer({
|
||||
source: source,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
|
||||
const attribution = map
|
||||
.getTarget()
|
||||
.querySelectorAll('.ol-attribution.ol-uncollapsible');
|
||||
expect(attribution.length).to.be(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,104 @@
|
||||
import Control from '../../../../../src/ol/control/Control.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
|
||||
describe('ol.control.Control', function () {
|
||||
let map, control;
|
||||
|
||||
beforeEach(function () {
|
||||
map = new Map({
|
||||
target: document.createElement('div'),
|
||||
});
|
||||
const element = document.createElement('div');
|
||||
control = new Control({element: element});
|
||||
control.setMap(map);
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
disposeMap(map);
|
||||
map = null;
|
||||
control = null;
|
||||
});
|
||||
|
||||
describe('dispose', function () {
|
||||
it('removes the control element from its parent', function () {
|
||||
control.dispose();
|
||||
expect(control.element.parentNode).to.be(null);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('element', function () {
|
||||
it('sets `pointer-events: auto` for default target', function () {
|
||||
const control = new Control({
|
||||
element: document.createElement('div'),
|
||||
});
|
||||
expect(control.element.style.pointerEvents).to.be('auto');
|
||||
});
|
||||
it('does not set `pointer-events: auto` for custom target', function () {
|
||||
const control = new Control({
|
||||
element: document.createElement('div'),
|
||||
target: document.createElement('div'),
|
||||
});
|
||||
expect(control.element.style.pointerEvents).to.be('');
|
||||
});
|
||||
it('does not override `pointer-events` style', function () {
|
||||
const element = document.createElement('div');
|
||||
element.style.pointerEvents = 'none';
|
||||
const control = new Control({
|
||||
element: element,
|
||||
});
|
||||
expect(control.element.style.pointerEvents).to.be('none');
|
||||
});
|
||||
});
|
||||
|
||||
describe("ol.control.Control's target", function () {
|
||||
describe('target as string or element', function () {
|
||||
it('transforms target from string to element', function () {
|
||||
const target = document.createElement('div');
|
||||
target.id = 'mycontrol';
|
||||
document.body.appendChild(target);
|
||||
const ctrl = new Control({target: 'mycontrol'});
|
||||
expect(ctrl.target_.id).to.equal('mycontrol');
|
||||
ctrl.dispose();
|
||||
target.parentNode.removeChild(target);
|
||||
});
|
||||
it('accepts element for target', function () {
|
||||
const target = document.createElement('div');
|
||||
target.id = 'mycontrol';
|
||||
document.body.appendChild(target);
|
||||
const ctrl = new Control({target: target});
|
||||
expect(ctrl.target_.id).to.equal('mycontrol');
|
||||
ctrl.dispose();
|
||||
target.parentNode.removeChild(target);
|
||||
});
|
||||
it('ignores non-existing target id', function () {
|
||||
const ctrl = new Control({target: 'doesnotexist'});
|
||||
expect(ctrl.target_).to.equal(null);
|
||||
ctrl.dispose();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("ol.control.Control's event target", function () {
|
||||
it('is the Control when the Control uses the default target', function (done) {
|
||||
const ctrl = new Control({element: document.createElement('div')});
|
||||
ctrl.on('test-event', function (e) {
|
||||
expect(e.target).to.be(ctrl);
|
||||
done();
|
||||
});
|
||||
ctrl.dispatchEvent('test-event');
|
||||
ctrl.dispose();
|
||||
});
|
||||
it('is the Control when the Control has a custom target', function (done) {
|
||||
const ctrl = new Control({
|
||||
element: document.createElement('div'),
|
||||
target: document.createElement('div'),
|
||||
});
|
||||
ctrl.on('test-event', function (e) {
|
||||
expect(e.target).to.be(ctrl);
|
||||
done();
|
||||
});
|
||||
ctrl.dispatchEvent('test-event');
|
||||
ctrl.dispose();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import FullScreen from '../../../../../src/ol/control/FullScreen.js';
|
||||
|
||||
describe('ol.control.FullScreen', function () {
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const instance = new FullScreen();
|
||||
expect(instance).to.be.an(FullScreen);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
import EventType from '../../../../../src/ol/pointer/EventType.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import MousePosition from '../../../../../src/ol/control/MousePosition.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
|
||||
describe('ol/control/MousePosition', function () {
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const instance = new MousePosition();
|
||||
expect(instance).to.be.an(MousePosition);
|
||||
expect(instance.element.className).to.be('ol-mouse-position');
|
||||
});
|
||||
|
||||
it('creates the element with the provided class name', function () {
|
||||
const className = 'foobar';
|
||||
const instance = new MousePosition({
|
||||
className: className,
|
||||
});
|
||||
expect(instance.element.className).to.be(className);
|
||||
});
|
||||
});
|
||||
|
||||
describe('configuration options', function () {
|
||||
let target, map;
|
||||
const width = 360;
|
||||
const height = 180;
|
||||
|
||||
beforeEach(function () {
|
||||
target = document.createElement('div');
|
||||
const style = target.style;
|
||||
style.position = 'absolute';
|
||||
style.left = '-1000px';
|
||||
style.top = '-1000px';
|
||||
style.width = width + 'px';
|
||||
style.height = height + 'px';
|
||||
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
target: target,
|
||||
controls: [],
|
||||
view: new View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
resolution: 1,
|
||||
}),
|
||||
});
|
||||
});
|
||||
afterEach(function () {
|
||||
map.dispose();
|
||||
document.body.removeChild(target);
|
||||
});
|
||||
|
||||
function simulateEvent(type, x, y) {
|
||||
const viewport = map.getViewport();
|
||||
// calculated in case body has top < 0 (test runner with small window)
|
||||
const position = viewport.getBoundingClientRect();
|
||||
const evt = new PointerEvent(type, {
|
||||
clientX: position.left + x + width / 2,
|
||||
clientY: position.top + y + height / 2,
|
||||
});
|
||||
document.querySelector('div.ol-viewport').dispatchEvent(evt);
|
||||
}
|
||||
|
||||
describe('undefinedHTML', function () {
|
||||
it('renders undefinedHTML when mouse moves out', function () {
|
||||
const ctrl = new MousePosition({
|
||||
undefinedHTML: 'some text',
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.renderSync();
|
||||
|
||||
const element = document.querySelector(
|
||||
'.ol-mouse-position',
|
||||
map.getTarget()
|
||||
);
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be('some text');
|
||||
|
||||
simulateEvent(EventType.POINTERMOVE, 20, 30);
|
||||
expect(element.innerHTML).to.be('20,-30');
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be('some text');
|
||||
});
|
||||
|
||||
it('clears the mouse position by default when the mouse moves outside the viewport', function () {
|
||||
const ctrl = new MousePosition();
|
||||
ctrl.setMap(map);
|
||||
map.renderSync();
|
||||
|
||||
const element = document.querySelector(
|
||||
'.ol-mouse-position',
|
||||
map.getTarget()
|
||||
);
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be(' ');
|
||||
|
||||
target.dispatchEvent(new PointerEvent('pointermove'));
|
||||
simulateEvent(EventType.POINTERMOVE, 20, 30);
|
||||
expect(element.innerHTML).to.be('20,-30');
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be(' ');
|
||||
});
|
||||
|
||||
it('retains the mouse position when undefinedHTML is falsey and mouse moves outside the viewport', function () {
|
||||
const ctrl = new MousePosition({
|
||||
undefinedHTML: '',
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.renderSync();
|
||||
|
||||
const element = document.querySelector(
|
||||
'.ol-mouse-position',
|
||||
map.getTarget()
|
||||
);
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be('');
|
||||
|
||||
target.dispatchEvent(new PointerEvent('pointermove'));
|
||||
simulateEvent(EventType.POINTERMOVE, 20, 30);
|
||||
expect(element.innerHTML).to.be('20,-30');
|
||||
|
||||
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
|
||||
expect(element.innerHTML).to.be('20,-30');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
import Control from '../../../../../src/ol/control/Control.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import OverviewMap from '../../../../../src/ol/control/OverviewMap.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
|
||||
describe('ol.control.OverviewMap', function () {
|
||||
let map, target;
|
||||
|
||||
beforeEach(function () {
|
||||
target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
target: target,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
map.dispose();
|
||||
document.body.removeChild(target);
|
||||
map = null;
|
||||
target = null;
|
||||
});
|
||||
|
||||
describe('constructor', function () {
|
||||
it('creates an overview map with the default options', function () {
|
||||
const control = new OverviewMap();
|
||||
expect(control).to.be.a(OverviewMap);
|
||||
expect(control).to.be.a(Control);
|
||||
});
|
||||
});
|
||||
|
||||
describe('setMap()', function () {
|
||||
it('keeps ovmap view rotation in sync with map view rotation', function () {
|
||||
const view = new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
rotation: Math.PI / 2,
|
||||
});
|
||||
map.setView(view);
|
||||
|
||||
const control = new OverviewMap({
|
||||
rotateWithView: true,
|
||||
});
|
||||
map.addControl(control);
|
||||
const ovView = control.ovmap_.getView();
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 2);
|
||||
|
||||
view.setRotation(Math.PI / 4);
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 4);
|
||||
});
|
||||
|
||||
it('maintains rotation in sync if view added later', function () {
|
||||
const control = new OverviewMap({
|
||||
rotateWithView: true,
|
||||
});
|
||||
map.addControl(control);
|
||||
const ovInitialView = control.ovmap_.getView();
|
||||
expect(ovInitialView.getRotation()).to.be(0);
|
||||
|
||||
const view = new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
rotation: Math.PI / 2,
|
||||
});
|
||||
map.setView(view);
|
||||
const ovView = control.ovmap_.getView();
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 2);
|
||||
|
||||
view.setRotation(Math.PI / 4);
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 4);
|
||||
});
|
||||
|
||||
it('stops listening to old maps', function () {
|
||||
const control = new OverviewMap({
|
||||
rotateWithView: true,
|
||||
});
|
||||
|
||||
const view = new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
rotation: 0,
|
||||
});
|
||||
map.setView(view);
|
||||
map.addControl(control);
|
||||
const ovView = control.ovmap_.getView();
|
||||
|
||||
view.setRotation(Math.PI / 8);
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 8);
|
||||
|
||||
map.removeControl(control);
|
||||
|
||||
view.setRotation(Math.PI / 4);
|
||||
expect(ovView.getRotation()).to.be(Math.PI / 8);
|
||||
});
|
||||
|
||||
it('reflects projection change of main map', function () {
|
||||
const control = new OverviewMap({
|
||||
rotateWithView: true,
|
||||
});
|
||||
|
||||
map.addControl(control);
|
||||
expect(control.ovmap_.getView().getProjection().getCode()).to.be(
|
||||
'EPSG:3857'
|
||||
);
|
||||
|
||||
map.setView(
|
||||
new View({
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
expect(control.ovmap_.getView().getProjection().getCode()).to.be(
|
||||
'EPSG:4326'
|
||||
);
|
||||
});
|
||||
|
||||
it('retains explicitly set view', function () {
|
||||
const overviewMapView = new View();
|
||||
const control = new OverviewMap({
|
||||
rotateWithView: true,
|
||||
view: overviewMapView,
|
||||
});
|
||||
|
||||
map.addControl(control);
|
||||
expect(control.ovmap_.getView()).to.be(overviewMapView);
|
||||
expect(control.ovmap_.getView().getProjection().getCode()).to.be(
|
||||
'EPSG:3857'
|
||||
);
|
||||
|
||||
map.setView(
|
||||
new View({
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
expect(control.ovmap_.getView()).to.be(overviewMapView);
|
||||
expect(control.ovmap_.getView().getProjection().getCode()).to.be(
|
||||
'EPSG:3857'
|
||||
);
|
||||
});
|
||||
|
||||
it('set target to null', function () {
|
||||
const control = new OverviewMap();
|
||||
|
||||
map.addControl(control);
|
||||
|
||||
expect(control.ovmap_.getTarget()).not.to.be(null);
|
||||
|
||||
map.removeControl(control);
|
||||
|
||||
expect(control.ovmap_.getTarget()).to.be(null);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import Rotate from '../../../../../src/ol/control/Rotate.js';
|
||||
|
||||
describe('ol.control.Rotate', function () {
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const instance = new Rotate();
|
||||
expect(instance).to.be.an(Rotate);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,644 @@
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import Projection from '../../../../../src/ol/proj/Projection.js';
|
||||
import ScaleLine from '../../../../../src/ol/control/ScaleLine.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
import proj4 from 'proj4';
|
||||
import {
|
||||
addCommon,
|
||||
clearAllProjections,
|
||||
fromLonLat,
|
||||
} from '../../../../../src/ol/proj.js';
|
||||
import {register} from '../../../../../src/ol/proj/proj4.js';
|
||||
|
||||
describe('ol.control.ScaleLine', function () {
|
||||
let map;
|
||||
beforeEach(function () {
|
||||
const target = document.createElement('div');
|
||||
target.style.height = '256px';
|
||||
document.body.appendChild(target);
|
||||
map = new Map({
|
||||
target: target,
|
||||
});
|
||||
});
|
||||
afterEach(function () {
|
||||
disposeMap(map);
|
||||
map = null;
|
||||
});
|
||||
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
expect(ctrl).to.be.an(ScaleLine);
|
||||
});
|
||||
});
|
||||
|
||||
describe('configuration options', function () {
|
||||
describe('className', function () {
|
||||
it('defaults to "ol-scale-line"', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
const element = document.querySelector(
|
||||
'.ol-scale-line',
|
||||
map.getTarget()
|
||||
);
|
||||
expect(element).to.not.be(null);
|
||||
expect(element).to.be.a(HTMLDivElement);
|
||||
});
|
||||
it('can be configured', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
className: 'humpty-dumpty',
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
|
||||
// check that the default was not chosen
|
||||
const element1 = document.querySelector(
|
||||
'.ol-scale-line',
|
||||
map.getTarget()
|
||||
);
|
||||
expect(element1).to.be(null);
|
||||
// check if the configured classname was chosen
|
||||
const element2 = document.querySelector(
|
||||
'.humpty-dumpty',
|
||||
map.getTarget()
|
||||
);
|
||||
expect(element2).to.not.be(null);
|
||||
expect(element2).to.be.a(HTMLDivElement);
|
||||
});
|
||||
});
|
||||
|
||||
describe('minWidth', function () {
|
||||
it('defaults to 64', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
expect(ctrl.minWidth_).to.be(64);
|
||||
});
|
||||
it('can be configured', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
minWidth: 4711,
|
||||
});
|
||||
expect(ctrl.minWidth_).to.be(4711);
|
||||
});
|
||||
});
|
||||
|
||||
describe('render', function () {
|
||||
it('defaults to `ol.control.ScaleLine.render`', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
expect(ctrl.render).to.be(ScaleLine.prototype.render);
|
||||
});
|
||||
it('can be configured', function () {
|
||||
const myRender = function () {};
|
||||
const ctrl = new ScaleLine({
|
||||
render: myRender,
|
||||
});
|
||||
expect(ctrl.render).to.be(myRender);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('synchronisation with map view', function () {
|
||||
it('calls `render` as soon as the map is rendered', function (done) {
|
||||
const renderSpy = sinon.spy();
|
||||
const ctrl = new ScaleLine({
|
||||
render: renderSpy,
|
||||
});
|
||||
expect(renderSpy.called).to.be(false);
|
||||
ctrl.setMap(map);
|
||||
expect(renderSpy.called).to.be(false);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
expect(renderSpy.called).to.be(false);
|
||||
map.once('postrender', function () {
|
||||
expect(renderSpy.called).to.be(true);
|
||||
expect(renderSpy.callCount).to.be(1);
|
||||
done();
|
||||
});
|
||||
});
|
||||
it('calls `render` as often as the map is rendered', function () {
|
||||
const renderSpy = sinon.spy();
|
||||
const ctrl = new ScaleLine({
|
||||
render: renderSpy,
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(renderSpy.callCount).to.be(1);
|
||||
map.renderSync();
|
||||
expect(renderSpy.callCount).to.be(2);
|
||||
map.renderSync();
|
||||
expect(renderSpy.callCount).to.be(3);
|
||||
});
|
||||
it('calls `render` as when the view changes', function (done) {
|
||||
const renderSpy = sinon.spy();
|
||||
const ctrl = new ScaleLine({
|
||||
render: renderSpy,
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
map.once('postrender', function () {
|
||||
expect(renderSpy.callCount).to.be(2);
|
||||
done();
|
||||
});
|
||||
map.getView().setCenter([1, 1]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('static method `render`', function () {
|
||||
it('updates the rendered text', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
expect(ctrl.element.innerText).to.be('');
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
multiWorld: true,
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('10000 km');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getUnits', function () {
|
||||
it('returns "metric" by default', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
expect(ctrl.getUnits()).to.be('metric');
|
||||
});
|
||||
it('returns what is configured via `units` property', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
units: 'nautical',
|
||||
});
|
||||
expect(ctrl.getUnits()).to.be('nautical');
|
||||
});
|
||||
it('returns what is configured `setUnits` method', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setUnits('nautical');
|
||||
expect(ctrl.getUnits()).to.be('nautical');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#setUnits', function () {
|
||||
it('triggers rerendering', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
multiWorld: true,
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
ctrl.setMap(map);
|
||||
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('10000 km');
|
||||
|
||||
ctrl.setUnits('nautical');
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('10000 nm');
|
||||
});
|
||||
});
|
||||
|
||||
describe('different units result in different contents', function () {
|
||||
let ctrl;
|
||||
let metricHtml;
|
||||
let nauticalHtml;
|
||||
let degreesHtml;
|
||||
let imperialHtml;
|
||||
let usHtml;
|
||||
beforeEach(function (done) {
|
||||
ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
})
|
||||
);
|
||||
map.once('postrender', function () {
|
||||
metricHtml = ctrl.element.innerHTML;
|
||||
done();
|
||||
});
|
||||
});
|
||||
afterEach(function () {
|
||||
map.setView(null);
|
||||
map.removeControl(ctrl);
|
||||
});
|
||||
|
||||
it('renders a scaleline for "metric"', function () {
|
||||
expect(metricHtml).to.not.be(undefined);
|
||||
});
|
||||
it('renders a different scaleline for "nautical"', function () {
|
||||
ctrl.setUnits('nautical');
|
||||
nauticalHtml = ctrl.element.innerHTML;
|
||||
expect(nauticalHtml).to.not.be(metricHtml);
|
||||
});
|
||||
it('renders a different scaleline for "degrees"', function () {
|
||||
ctrl.setUnits('degrees');
|
||||
degreesHtml = ctrl.element.innerHTML;
|
||||
expect(degreesHtml).to.not.be(metricHtml);
|
||||
expect(degreesHtml).to.not.be(nauticalHtml);
|
||||
});
|
||||
it('renders a different scaleline for "imperial"', function () {
|
||||
ctrl.setUnits('imperial');
|
||||
imperialHtml = ctrl.element.innerHTML;
|
||||
expect(imperialHtml).to.not.be(metricHtml);
|
||||
expect(imperialHtml).to.not.be(nauticalHtml);
|
||||
expect(imperialHtml).to.not.be(degreesHtml);
|
||||
});
|
||||
it('renders a different scaleline for "us"', function () {
|
||||
ctrl.setUnits('us');
|
||||
usHtml = ctrl.element.innerHTML;
|
||||
expect(usHtml).to.not.be(metricHtml);
|
||||
expect(usHtml).to.not.be(nauticalHtml);
|
||||
expect(usHtml).to.not.be(degreesHtml);
|
||||
// it's hard to actually find a difference in rendering between
|
||||
// usHtml and imperialHtml
|
||||
});
|
||||
});
|
||||
|
||||
describe('projections affect the scaleline', function () {
|
||||
beforeEach(function () {
|
||||
proj4.defs(
|
||||
'Indiana-East',
|
||||
'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' +
|
||||
'SPHEROID["GRS1980",6378137.000,298.25722210]],PRIMEM["Greenwich",0],' +
|
||||
'UNIT["Degree",0.017453292519943295]],PROJECTION["Transverse_Mercator"],' +
|
||||
'PARAMETER["false_easting",328083.333],' +
|
||||
'PARAMETER["false_northing",820208.333],' +
|
||||
'PARAMETER["scale_factor",0.999966666667],' +
|
||||
'PARAMETER["central_meridian",-85.66666666666670],' +
|
||||
'PARAMETER["latitude_of_origin",37.50000000000000],' +
|
||||
'UNIT["Foot_US",0.30480060960122]]'
|
||||
);
|
||||
register(proj4);
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
clearAllProjections();
|
||||
addCommon();
|
||||
});
|
||||
|
||||
it('is rendered differently for different projections', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([7, 52]),
|
||||
zoom: 2,
|
||||
projection: 'EPSG:3857',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('2000 km');
|
||||
map.setView(
|
||||
new View({
|
||||
center: [7, 52],
|
||||
multiWorld: true,
|
||||
zoom: 2,
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('5000 km');
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([-85.685, 39.891], 'Indiana-East'),
|
||||
zoom: 7,
|
||||
projection: 'Indiana-East',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('100 km');
|
||||
});
|
||||
|
||||
it('shows the same scale for different projections at higher resolutions', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([-85.685, 39.891]),
|
||||
zoom: 7,
|
||||
projection: 'EPSG:3857',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('100 km');
|
||||
map.setView(
|
||||
new View({
|
||||
center: [-85.685, 39.891],
|
||||
zoom: 7,
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('100 km');
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([-85.685, 39.891], 'Indiana-East'),
|
||||
zoom: 7,
|
||||
projection: 'Indiana-East',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('100 km');
|
||||
});
|
||||
|
||||
it("Projection's metersPerUnit affect scale for non-degree units", function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
resolutions: [1],
|
||||
projection: new Projection({
|
||||
code: 'METERS',
|
||||
units: 'm',
|
||||
getPointResolution: function (r) {
|
||||
return r;
|
||||
},
|
||||
}),
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
|
||||
ctrl.setUnits('metric');
|
||||
expect(ctrl.element.innerText).to.be('100 m');
|
||||
|
||||
ctrl.setUnits('imperial');
|
||||
expect(ctrl.element.innerText).to.be('500 ft');
|
||||
|
||||
ctrl.setUnits('nautical');
|
||||
expect(ctrl.element.innerText).to.be('0.05 nm');
|
||||
|
||||
ctrl.setUnits('us');
|
||||
expect(ctrl.element.innerText).to.be('500 ft');
|
||||
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 0,
|
||||
resolutions: [1],
|
||||
projection: new Projection({
|
||||
code: 'PIXELS',
|
||||
units: 'pixels',
|
||||
metersPerUnit: 1 / 1000,
|
||||
getPointResolution: function (r) {
|
||||
return r;
|
||||
},
|
||||
}),
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
|
||||
ctrl.setUnits('metric');
|
||||
expect(ctrl.element.innerText).to.be('100 mm');
|
||||
|
||||
ctrl.setUnits('imperial');
|
||||
expect(ctrl.element.innerText).to.be('5 in');
|
||||
|
||||
ctrl.setUnits('nautical');
|
||||
expect(ctrl.element.innerText).to.be('0.00005 nm');
|
||||
|
||||
ctrl.setUnits('us');
|
||||
expect(ctrl.element.innerText).to.be('5 in');
|
||||
});
|
||||
|
||||
it('Metric display works with Geographic (EPSG:4326) projection', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
multiWorld: true,
|
||||
zoom: 0 /* min zoom */,
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('10000 km');
|
||||
map.getView().setZoom(28); /* max zoom */
|
||||
map.renderSync();
|
||||
expect(ctrl.element.innerText).to.be('50 mm');
|
||||
});
|
||||
});
|
||||
|
||||
describe('latitude may affect scale line in EPSG:4326', function () {
|
||||
it('is rendered differently at different latitudes for metric', function () {
|
||||
const ctrl = new ScaleLine();
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [7, 0],
|
||||
zoom: 2,
|
||||
projection: 'EPSG:4326',
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
const innerHtml0 = ctrl.element.innerHTML;
|
||||
map.getView().setCenter([7, 52]);
|
||||
map.renderSync();
|
||||
const innerHtml52 = ctrl.element.innerHTML;
|
||||
expect(innerHtml0).to.not.be(innerHtml52);
|
||||
});
|
||||
|
||||
it('is rendered the same at different latitudes for degrees', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
units: 'degrees',
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [7, 0],
|
||||
zoom: 2,
|
||||
projection: 'EPSG:4326',
|
||||
multiWorld: true,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
const innerHtml0 = ctrl.element.innerHTML;
|
||||
map.getView().setCenter([7, 52]);
|
||||
map.renderSync();
|
||||
const innerHtml52 = ctrl.element.innerHTML;
|
||||
expect(innerHtml0).to.be(innerHtml52);
|
||||
});
|
||||
});
|
||||
|
||||
describe('zoom affects the scaleline', function () {
|
||||
let currentZoom;
|
||||
let ctrl;
|
||||
let renderedHtmls;
|
||||
let mapView;
|
||||
|
||||
const getMetricUnit = function (zoom) {
|
||||
if (zoom > 30) {
|
||||
return 'μm';
|
||||
} else if (zoom > 20) {
|
||||
return 'mm';
|
||||
} else if (zoom > 10) {
|
||||
return 'm';
|
||||
} else {
|
||||
return 'km';
|
||||
}
|
||||
};
|
||||
|
||||
const getImperialUnit = function (zoom) {
|
||||
if (zoom >= 21) {
|
||||
return 'in';
|
||||
} else if (zoom >= 10) {
|
||||
return 'ft';
|
||||
} else {
|
||||
return 'mi';
|
||||
}
|
||||
};
|
||||
|
||||
beforeEach(function () {
|
||||
currentZoom = 33;
|
||||
renderedHtmls = {};
|
||||
ctrl = new ScaleLine({
|
||||
minWidth: 10,
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: currentZoom,
|
||||
maxZoom: currentZoom,
|
||||
multiWorld: true,
|
||||
})
|
||||
);
|
||||
mapView = map.getView();
|
||||
map.renderSync();
|
||||
});
|
||||
afterEach(function () {
|
||||
map.removeControl(ctrl);
|
||||
map.setView(null);
|
||||
});
|
||||
|
||||
it('metric: is rendered differently for different zoomlevels', function () {
|
||||
ctrl.setUnits('metric');
|
||||
map.renderSync();
|
||||
renderedHtmls[ctrl.element.innerHTML] = true;
|
||||
while (--currentZoom >= 0) {
|
||||
mapView.setZoom(currentZoom);
|
||||
map.renderSync();
|
||||
const currentHtml = ctrl.element.innerHTML;
|
||||
expect(currentHtml in renderedHtmls).to.be(false);
|
||||
renderedHtmls[currentHtml] = true;
|
||||
|
||||
const unit = ctrl.innerElement_.textContent.match(/\d+ (.+)/)[1];
|
||||
expect(unit).to.eql(getMetricUnit(currentZoom));
|
||||
}
|
||||
});
|
||||
it('degrees: is rendered differently for different zoomlevels', function () {
|
||||
ctrl.setUnits('degrees');
|
||||
map.renderSync();
|
||||
renderedHtmls[ctrl.element.innerHTML] = true;
|
||||
while (--currentZoom >= 0) {
|
||||
mapView.setZoom(currentZoom);
|
||||
map.renderSync();
|
||||
const currentHtml = ctrl.element.innerHTML;
|
||||
expect(currentHtml in renderedHtmls).to.be(false);
|
||||
renderedHtmls[currentHtml] = true;
|
||||
}
|
||||
});
|
||||
it('imperial: is rendered differently for different zoomlevels', function () {
|
||||
ctrl.setUnits('imperial');
|
||||
map.renderSync();
|
||||
renderedHtmls[ctrl.element.innerHTML] = true;
|
||||
while (--currentZoom >= 0) {
|
||||
mapView.setZoom(currentZoom);
|
||||
map.renderSync();
|
||||
const currentHtml = ctrl.element.innerHTML;
|
||||
expect(currentHtml in renderedHtmls).to.be(false);
|
||||
renderedHtmls[currentHtml] = true;
|
||||
|
||||
const unit = ctrl.innerElement_.textContent.match(/\d+ (.+)/)[1];
|
||||
expect(unit).to.eql(getImperialUnit(currentZoom));
|
||||
}
|
||||
});
|
||||
it('nautical: is rendered differently for different zoomlevels', function () {
|
||||
ctrl.setUnits('nautical');
|
||||
map.renderSync();
|
||||
renderedHtmls[ctrl.element.innerHTML] = true;
|
||||
while (--currentZoom >= 0) {
|
||||
mapView.setZoom(currentZoom);
|
||||
map.renderSync();
|
||||
const currentHtml = ctrl.element.innerHTML;
|
||||
expect(currentHtml in renderedHtmls).to.be(false);
|
||||
renderedHtmls[currentHtml] = true;
|
||||
}
|
||||
});
|
||||
it('us: is rendered differently for different zoomlevels', function () {
|
||||
ctrl.setUnits('us');
|
||||
map.renderSync();
|
||||
renderedHtmls[ctrl.element.innerHTML] = true;
|
||||
while (--currentZoom >= 0) {
|
||||
mapView.setZoom(currentZoom);
|
||||
map.renderSync();
|
||||
const currentHtml = ctrl.element.innerHTML;
|
||||
expect(currentHtml in renderedHtmls).to.be(false);
|
||||
renderedHtmls[currentHtml] = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('scalebar text', function () {
|
||||
it('it corresponds to the resolution', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
bar: true,
|
||||
text: true,
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
multiWorld: true,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
const element = document.querySelector('.ol-scale-text', map.getTarget());
|
||||
expect(element).to.not.be(null);
|
||||
expect(element).to.be.a(HTMLDivElement);
|
||||
const text = element.innerText;
|
||||
expect(text.slice(0, 4)).to.be('1 : ');
|
||||
expect(text.replace(/^1|\D/g, '')).to.eql(139770566);
|
||||
});
|
||||
it('it changes with latitude', function () {
|
||||
const ctrl = new ScaleLine({
|
||||
bar: true,
|
||||
text: true,
|
||||
});
|
||||
ctrl.setMap(map);
|
||||
map.setView(
|
||||
new View({
|
||||
center: fromLonLat([0, 60]),
|
||||
zoom: 2,
|
||||
multiWorld: true,
|
||||
})
|
||||
);
|
||||
map.renderSync();
|
||||
const element = document.querySelector('.ol-scale-text', map.getTarget());
|
||||
expect(element).to.not.be(null);
|
||||
expect(element).to.be.a(HTMLDivElement);
|
||||
const text = element.innerText;
|
||||
expect(text.slice(0, 4)).to.be('1 : ');
|
||||
expect(text.replace(/^1|\D/g, '')).to.eql(69885283);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import Zoom from '../../../../../src/ol/control/Zoom.js';
|
||||
|
||||
describe('ol.control.Zoom', function () {
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const instance = new Zoom();
|
||||
expect(instance).to.be.an(Zoom);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,264 @@
|
||||
import Event from '../../../../../src/ol/events/Event.js';
|
||||
import EventTarget from '../../../../../src/ol/events/Target.js';
|
||||
import Map from '../../../../../src/ol/Map.js';
|
||||
import View from '../../../../../src/ol/View.js';
|
||||
import ZoomSlider from '../../../../../src/ol/control/ZoomSlider.js';
|
||||
|
||||
describe('ol.control.ZoomSlider', function () {
|
||||
let map, target, zoomslider;
|
||||
|
||||
const createElement = document.createElement;
|
||||
function createEventElement(type) {
|
||||
const element = createElement.call(document, type);
|
||||
const eventTarget = new EventTarget();
|
||||
element.listeners_ = {};
|
||||
element.dispatching_ = {};
|
||||
element.pendingRemovals_ = {};
|
||||
element.dispatchEvent = eventTarget.dispatchEvent.bind(element);
|
||||
element.addEventListener = eventTarget.addEventListener.bind(element);
|
||||
return element;
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
target = document.createElement('div');
|
||||
document.body.appendChild(target);
|
||||
zoomslider = new ZoomSlider();
|
||||
map = new Map({
|
||||
target: target,
|
||||
controls: [zoomslider],
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(function () {
|
||||
zoomslider.dispose();
|
||||
map.dispose();
|
||||
document.body.removeChild(target);
|
||||
zoomslider = null;
|
||||
map = null;
|
||||
target = null;
|
||||
});
|
||||
|
||||
describe('DOM creation', function () {
|
||||
it('creates the expected DOM elements', function () {
|
||||
const zoomSliderContainers = target.querySelectorAll('.ol-zoomslider');
|
||||
|
||||
expect(zoomSliderContainers.length).to.be(1);
|
||||
|
||||
const zoomSliderContainer = zoomSliderContainers[0];
|
||||
expect(zoomSliderContainer instanceof HTMLDivElement).to.be(true);
|
||||
|
||||
let hasUnselectableCls = zoomSliderContainer.classList.contains(
|
||||
'ol-unselectable'
|
||||
);
|
||||
expect(hasUnselectableCls).to.be(true);
|
||||
|
||||
const zoomSliderThumbs = zoomSliderContainer.querySelectorAll(
|
||||
'.ol-zoomslider-thumb'
|
||||
);
|
||||
expect(zoomSliderThumbs.length).to.be(1);
|
||||
|
||||
const zoomSliderThumb = zoomSliderThumbs[0];
|
||||
expect(zoomSliderThumb instanceof HTMLButtonElement).to.be(true);
|
||||
|
||||
hasUnselectableCls = zoomSliderThumb.classList.contains(
|
||||
'ol-unselectable'
|
||||
);
|
||||
expect(hasUnselectableCls).to.be(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#initSlider_', function () {
|
||||
it('sets limits', function () {
|
||||
zoomslider.initSlider_();
|
||||
expect(zoomslider.widthLimit_).not.to.be(0);
|
||||
expect(zoomslider.heightLimit_).to.be(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#direction_', function () {
|
||||
it('is horizontal for wide containers', function () {
|
||||
const control = new ZoomSlider({});
|
||||
control.element.style.width = '1000px';
|
||||
control.element.style.height = '10px';
|
||||
control.setMap(map);
|
||||
control.initSlider_();
|
||||
|
||||
const horizontal = 1;
|
||||
expect(control.direction_).to.be(horizontal);
|
||||
|
||||
control.dispose();
|
||||
});
|
||||
|
||||
it('is vertical for tall containers', function () {
|
||||
const control = new ZoomSlider({});
|
||||
control.element.style.width = '10px';
|
||||
control.element.style.height = '1000px';
|
||||
|
||||
control.setMap(map);
|
||||
|
||||
const vertical = 0;
|
||||
expect(control.direction_).to.be(vertical);
|
||||
|
||||
control.dispose();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pointer event handling', function () {
|
||||
let map;
|
||||
|
||||
beforeEach(function () {
|
||||
map = new Map({
|
||||
target: createMapDiv(500, 100),
|
||||
view: new View({
|
||||
center: [0, 0],
|
||||
resolutions: [16, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.0625],
|
||||
}),
|
||||
});
|
||||
});
|
||||
afterEach(function () {
|
||||
disposeMap(map);
|
||||
});
|
||||
|
||||
it('[horizontal] handles a drag sequence', function () {
|
||||
document.createElement = createEventElement;
|
||||
const control = new ZoomSlider();
|
||||
map.addControl(control);
|
||||
document.createElement = createElement;
|
||||
map.getView().setZoom(0);
|
||||
control.element.style.width = '500px';
|
||||
control.element.style.height = '10px';
|
||||
control.element.firstChild.style.width = '100px';
|
||||
control.element.firstChild.style.height = '10px';
|
||||
map.renderSync();
|
||||
const event = new Event();
|
||||
(event.type = 'pointerdown'),
|
||||
(event.target = control.element.firstElementChild);
|
||||
event.clientX = control.widthLimit_;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(16);
|
||||
expect(control.dragging_).to.be(true);
|
||||
expect(control.dragListenerKeys_.length).to.be(2);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = (6 * control.widthLimit_) / 8;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(4);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = (4 * control.widthLimit_) / 8;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
event.type = 'pointerup';
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(1);
|
||||
expect(control.dragListenerKeys_.length).to.be(0);
|
||||
expect(control.dragging_).to.be(false);
|
||||
});
|
||||
it('[horizontal] handles a drag sequence ending outside its bounds', function () {
|
||||
document.createElement = createEventElement;
|
||||
const control = new ZoomSlider();
|
||||
map.addControl(control);
|
||||
document.createElement = createElement;
|
||||
map.getView().setZoom(0);
|
||||
control.element.style.width = '500px';
|
||||
control.element.style.height = '10px';
|
||||
control.element.firstChild.style.width = '100px';
|
||||
control.element.firstChild.style.height = '10px';
|
||||
map.renderSync();
|
||||
const event = new Event();
|
||||
event.type = 'pointerdown';
|
||||
event.target = control.element.firstElementChild;
|
||||
event.clientX = control.widthLimit_;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(16);
|
||||
expect(control.dragging_).to.be(true);
|
||||
expect(control.dragListenerKeys_.length).to.be(2);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = (6 * control.widthLimit_) / 8;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(4);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = (12 * control.widthLimit_) / 8;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
event.type = 'pointerup';
|
||||
event.target = 'document';
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.dragListenerKeys_.length).to.be(0);
|
||||
expect(control.dragging_).to.be(false);
|
||||
expect(control.currentResolution_).to.be(16);
|
||||
});
|
||||
it('[vertical] handles a drag sequence', function () {
|
||||
document.createElement = createEventElement;
|
||||
const control = new ZoomSlider();
|
||||
control.element.style.width = '10px';
|
||||
control.element.style.height = '100px';
|
||||
control.element.firstChild.style.width = '10px';
|
||||
control.element.firstChild.style.height = '20px';
|
||||
map.addControl(control);
|
||||
document.createElement = createElement;
|
||||
map.getView().setZoom(8);
|
||||
map.renderSync();
|
||||
const event = new Event();
|
||||
event.type = 'pointerdown';
|
||||
event.target = control.element.firstElementChild;
|
||||
event.clientX = 0;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(0.0625);
|
||||
expect(control.dragging_).to.be(true);
|
||||
expect(control.dragListenerKeys_.length).to.be(2);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = 0;
|
||||
event.clientY = (2 * control.heightLimit_) / 8;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(0.25);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = 0;
|
||||
event.clientY = (4 * control.heightLimit_) / 8;
|
||||
control.element.dispatchEvent(event);
|
||||
event.type = 'pointerup';
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(1);
|
||||
expect(control.dragListenerKeys_.length).to.be(0);
|
||||
expect(control.dragging_).to.be(false);
|
||||
});
|
||||
it('[vertical] handles a drag sequence ending outside its bounds', function () {
|
||||
document.createElement = createEventElement;
|
||||
const control = new ZoomSlider();
|
||||
control.element.style.width = '10px';
|
||||
control.element.style.height = '100px';
|
||||
control.element.firstChild.style.width = '10px';
|
||||
control.element.firstChild.style.height = '20px';
|
||||
map.addControl(control);
|
||||
document.createElement = createElement;
|
||||
map.getView().setZoom(8);
|
||||
map.renderSync();
|
||||
const event = new Event();
|
||||
event.type = 'pointerdown';
|
||||
event.target = control.element.firstElementChild;
|
||||
event.clientX = 0;
|
||||
event.clientY = 0;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(0.0625);
|
||||
expect(control.dragging_).to.be(true);
|
||||
expect(control.dragListenerKeys_.length).to.be(2);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = 0;
|
||||
event.clientY = (2 * control.heightLimit_) / 8;
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(0.25);
|
||||
event.type = 'pointermove';
|
||||
event.clientX = 0;
|
||||
event.clientY = (12 * control.heightLimit_) / 8;
|
||||
control.element.dispatchEvent(event);
|
||||
event.type = 'pointerup';
|
||||
control.element.dispatchEvent(event);
|
||||
expect(control.currentResolution_).to.be(16);
|
||||
expect(control.dragListenerKeys_.length).to.be(0);
|
||||
expect(control.dragging_).to.be(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
import ZoomToExtent from '../../../../../src/ol/control/ZoomToExtent.js';
|
||||
|
||||
describe('ol.control.ZoomToExtent', function () {
|
||||
describe('constructor', function () {
|
||||
it('can be constructed without arguments', function () {
|
||||
const instance = new ZoomToExtent();
|
||||
expect(instance).to.be.an(ZoomToExtent);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user