Organize tests
This commit is contained in:
264
test/browser/spec/ol/control/zoomslider.test.js
Normal file
264
test/browser/spec/ol/control/zoomslider.test.js
Normal file
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user