Skip to content

Commit

Permalink
Refactor Event handling and happen.js (Leaflet#8760)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Falke-Design
Falke-Design authored Jan 1, 2023
1 parent 0976082 commit bb34482
Show file tree
Hide file tree
Showing 27 changed files with 342 additions and 364 deletions.
28 changes: 14 additions & 14 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
"bundlemon": "^2.0.0",
"eslint": "^8.23.1",
"eslint-config-mourner": "^3.0.0",
"happen": "~0.3.2",
"husky": "^8.0.1",
"karma": "^6.4.1",
"karma-chrome-launcher": "^3.1.1",
Expand All @@ -29,7 +28,8 @@
"simple-git": "^3.14.1",
"sinon": "^15.0.0",
"ssri": "^10.0.0",
"uglify-js": "^3.17.1"
"uglify-js": "^3.17.1",
"ui-event-simulator": "^1.0.0"
},
"main": "dist/leaflet-src.js",
"module": "dist/leaflet-src.esm.js",
Expand Down
2 changes: 1 addition & 1 deletion spec/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ module.exports = {
L: true,
expect: false,
sinon: false,
happen: false,
UIEventSimulator: false,
Hand: false,
touchEventType: false, /* defined in SpecHelper.js */
createContainer: false, /* defined in SpecHelper.js */
Expand Down
2 changes: 1 addition & 1 deletion spec/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div id="mocha"></div>
<script src="../node_modules/expect.js/index.js"></script>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/happen/happen.js"></script>
<script src="../node_modules/ui-event-simulator/ui-event-simulator.js"></script>
<script src="../node_modules/prosthetic-hand/dist/prosthetic-hand.js"></script>
<script src="../node_modules/sinon/pkg/sinon.js"></script>

Expand Down
2 changes: 1 addition & 1 deletion spec/karma.conf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module.exports = function (config) {
'spec/before.js',
'src/LeafletWithGlobals.js',
'spec/after.js',
'node_modules/happen/happen.js',
'node_modules/ui-event-simulator/ui-event-simulator.js',
'node_modules/prosthetic-hand/dist/prosthetic-hand.js',
'spec/suites/SpecHelper.js',
'spec/suites/**/*.js',
Expand Down
26 changes: 0 additions & 26 deletions spec/suites/SpecHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,32 +16,6 @@ expect.Assertion.prototype.nearLatLng = function (expected, delta) {
.be.within(expected.lng - delta, expected.lng + delta);
};

happen.at = function (what, x, y, props) {
this.once(document.elementFromPoint(x, y), L.Util.extend({
type: what,
clientX: x,
clientY: y,
screenX: x,
screenY: y,
which: 1,
button: 0
}, props || {}));
};

happen.makeEvent = (function (makeEvent) {
return function (o) {
const evt = makeEvent(o);
if (o.type.substring(0, 7) === 'pointer') {
evt.pointerId = o.pointerId;
evt.pointerType = o.pointerType;
} else if (o.type.includes('wheel')) {
evt.deltaY = evt.deltaY || o.deltaY;
evt.deltaMode = evt.deltaMode || o.deltaMode;
}
return evt;
};
})(happen.makeEvent);

// A couple of tests need the browser to be touch-capable
it.skipIfNotTouch = L.Browser.touch ? it : it.skip;

Expand Down
38 changes: 19 additions & 19 deletions spec/suites/control/Control.LayersSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ describe('Control.Layers', () => {
spy = sinon.spy();

map.on('baselayerchange', spy);
happen.click(layers._baseLayersList.getElementsByTagName('input')[0]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[0]);
expect(spy.called).to.be.ok();
expect(spy.args[0][0].name).to.be('Layer 1');
expect(spy.args[0][0].layer).to.be(baseLayers['Layer 1']);
happen.click(layers._baseLayersList.getElementsByTagName('input')[1]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[1]);
expect(spy.calledTwice).to.be.ok();
expect(spy.args[1][0].name).to.be('Layer 2');
expect(spy.args[1][0].layer).to.be(baseLayers['Layer 2']);
Expand All @@ -39,11 +39,11 @@ describe('Control.Layers', () => {
map.removeControl(layers);
map.addControl(layers);

happen.click(layers._baseLayersList.getElementsByTagName('input')[0]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[0]);
expect(spy.called).to.be.ok();
expect(spy.args[0][0].name).to.be('Layer 1');
expect(spy.args[0][0].layer).to.be(baseLayers['Layer 1']);
happen.click(layers._baseLayersList.getElementsByTagName('input')[1]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[1]);
expect(spy.calledTwice).to.be.ok();
expect(spy.args[1][0].name).to.be('Layer 2');
expect(spy.args[1][0].layer).to.be(baseLayers['Layer 2']);
Expand All @@ -55,7 +55,7 @@ describe('Control.Layers', () => {
spy = sinon.spy();

map.on('baselayerchange', spy);
happen.click(layers._overlaysList.getElementsByTagName('input')[0]);
UIEventSimulator.fire('click', layers._overlaysList.getElementsByTagName('input')[0]);

expect(spy.called).to.not.be.ok();
});
Expand Down Expand Up @@ -137,15 +137,15 @@ describe('Control.Layers', () => {
}
}

happen.click(layers._baseLayersList.getElementsByTagName('input')[1]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[1]);
checkInputs(1);
expect(map._layers[L.Util.stamp(layerB)]).to.be.equal(layerB);
expect(map._layers[L.Util.stamp(layerA)]).to.be.equal(undefined);
happen.click(layers._baseLayersList.getElementsByTagName('input')[0]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[0]);
checkInputs(0);
expect(map._layers[L.Util.stamp(layerA)]).to.be.equal(layerA);
expect(map._layers[L.Util.stamp(layerB)]).to.be.equal(undefined);
happen.click(layers._baseLayersList.getElementsByTagName('input')[2]);
UIEventSimulator.fire('click', layers._baseLayersList.getElementsByTagName('input')[2]);
checkInputs(2);
expect(map._layers[L.Util.stamp(layerA)]).to.be.equal(layerA);
expect(map._layers[L.Util.stamp(layerB)]).to.be.equal(undefined);
Expand Down Expand Up @@ -191,41 +191,41 @@ describe('Control.Layers', () => {
it('expands on "Enter" keydown when toggle is focused', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
const toggle = layersCtrl._container.querySelector('.leaflet-control-layers-toggle');
happen.once(toggle, {type:'keydown', keyCode:13});
UIEventSimulator.fire('keydown', toggle, {code: 'Enter'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});

it('expands on click', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
const toggle = layersCtrl._container.querySelector('.leaflet-control-layers-toggle');
happen.once(toggle, {type:'click'});
UIEventSimulator.fire('click', toggle);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});

it('does not expand on "Enter" keydown when toggle is not focused', () => {
L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(document, {type:'keydown', keyCode:13});
UIEventSimulator.fire('keydown', document, {code:'Enter'});
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.not.be.ok();
});

it('expands when mouse is over', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(layersCtrl._container, {type:'mouseover'});
UIEventSimulator.fire('mouseover', layersCtrl._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});

it('collapses when mouse is out', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(layersCtrl._container, {type:'mouseover'});
happen.once(layersCtrl._container, {type:'mouseout'});
UIEventSimulator.fire('mouseover', layersCtrl._container);
UIEventSimulator.fire('mouseout', layersCtrl._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.not.be.ok();
});

it('collapses when map is clicked', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: true}).addTo(map);
happen.once(layersCtrl._container, {type:'mouseover'});
UIEventSimulator.fire('mouseover', layersCtrl._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.click(map._container);
UIEventSimulator.fire('click', map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.not.be.ok();
});
});
Expand All @@ -234,16 +234,16 @@ describe('Control.Layers', () => {
it('does not collapse when mouse enters or leaves', () => {
const layersCtrl = L.control.layers(null, null, {collapsed: false}).addTo(map);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.once(layersCtrl._container, {type:'mouseover'});
UIEventSimulator.fire('mouseover', layersCtrl._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.once(layersCtrl._container, {type:'mouseout'});
UIEventSimulator.fire('mouseout', layersCtrl._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});

it('does not collapse when map is clicked', () => {
L.control.layers(null, null, {collapsed: false}).addTo(map);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
happen.click(map._container);
UIEventSimulator.fire('click', map._container);
expect(map._container.querySelector('.leaflet-control-layers-expanded')).to.be.ok();
});

Expand Down
32 changes: 16 additions & 16 deletions spec/suites/dom/DomEvent.DoubleTapSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,27 @@ describe('DomEvent.DoubleTapSpec.js', () => {
});

it('fires synthetic dblclick after two clicks with delay<200', () => {
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});
clock.tick(100);
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});

expect(spy.called).to.be.ok();
expect(spy.calledOnce).to.be.ok();
expect(spy.lastCall.args[0]._simulated).to.be.ok();
});

it('does not fire dblclick when delay>200', () => {
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});
clock.tick(300);
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});

expect(spy.notCalled).to.be.ok();
});

it('does not fire dblclick when detail !== 1', () => {
happen.click(container, {detail: 0}); // like in IE
UIEventSimulator.fire('click', container, {detail: 0}); // like in IE
clock.tick(100);
happen.click(container, {detail: 0});
UIEventSimulator.fire('click', container, {detail: 0});
clock.tick(100);

expect(spy.notCalled).to.be.ok();
Expand All @@ -45,19 +45,19 @@ describe('DomEvent.DoubleTapSpec.js', () => {
it('does not fire dblclick after removeListener', () => {
L.DomEvent.off(container, 'dblclick', spy);

happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});
clock.tick(100);
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});
clock.tick(100);

expect(spy.notCalled).to.be.ok();
});

it('does not conflict with native dblclick', () => {
happen.click(container, {detail: 1});
UIEventSimulator.fire('click', container, {detail: 1});
clock.tick(100);
happen.click(container, {detail: 2}); // native dblclick expected
happen.dblclick(container);
UIEventSimulator.fire('click', container, {detail: 2}); // native dblclick expected
UIEventSimulator.fire('dblclick', container); // native dblclick expected
expect(spy.called).to.be.ok();
expect(spy.calledOnce).to.be.ok();
expect(spy.lastCall.args[0]._simulated).not.to.be.ok();
Expand All @@ -71,9 +71,9 @@ describe('DomEvent.DoubleTapSpec.js', () => {
screenX: 4,
screenY: 5
};
happen.click(container, click);
UIEventSimulator.fire('click', container, click);
clock.tick(100);
happen.click(container, click);
UIEventSimulator.fire('click', container, click);

const event = spy.lastCall.args[0];
const expectedProps = L.extend(click, {
Expand Down Expand Up @@ -105,9 +105,9 @@ describe('DomEvent.DoubleTapSpec.js', () => {
map.addControl(new MyControl());
L.DomEvent.on(ctrl, 'dblclick', spyCtrl);

happen.click(ctrl, {detail: 1});
UIEventSimulator.fire('click', ctrl, {detail: 1});
clock.tick(100);
happen.click(ctrl, {detail: 1});
UIEventSimulator.fire('click', ctrl, {detail: 1});

expect(spyCtrl.called).to.be.ok();
expect(spyMap.notCalled).to.be.ok();
Expand All @@ -129,7 +129,7 @@ describe('DomEvent.DoubleTapSpec.js', () => {
});
map.addControl(new MyControl());
// click on the label
happen.click(div.children[1], {detail: 1});
UIEventSimulator.fire('click', div.children[1], {detail: 1});
clock.tick(100);
expect(spyMap.notCalled).to.be.ok();
map.remove();
Expand Down
Loading

0 comments on commit bb34482

Please sign in to comment.