tests/test.mouse.js

   1 const expect = chai.expect;
   2
   3 import sinon from '../vendor/sinon.js';
   4
   5 import Mouse from '../core/input/mouse.js';
   6 import * as eventUtils from '../core/util/events.js';
   7
   8 describe('Mouse Event Handling', function() {
   9     "use strict";
  10
  11     sinon.stub(eventUtils, 'setCapture');
  12     // This function is only used on target (the canvas)
  13     // and for these tests we can assume that the canvas is 100x100
  14     // located at coordinates 10x10
  15     sinon.stub(Element.prototype, 'getBoundingClientRect').returns(
  16         {left: 10, right: 110, top: 10, bottom: 110, width: 100, height: 100});
  17     const target = document.createElement('canvas');
  18
  19     // The real constructors might not work everywhere we
  20     // want to run these tests
  21     const mouseevent = (typeArg, MouseEventInit) => {
  22         const e = { type: typeArg };
  23         for (let key in MouseEventInit) {
  24             e[key] = MouseEventInit[key];
  25         }
  26         e.stopPropagation = sinon.spy();
  27         e.preventDefault = sinon.spy();
  28         return e;
  29     };
  30     const touchevent = mouseevent;
  31
  32     describe('Decode Mouse Events', function() {
  33         it('should decode mousedown events', function(done) {
  34             const mouse = new Mouse(target);
  35             mouse.onmousebutton = (x, y, down, bmask) => {
  36                 expect(bmask).to.be.equal(0x01);
  37                 expect(down).to.be.equal(1);
  38                 done();
  39             };
  40             mouse._handleMouseDown(mouseevent('mousedown', { button: '0x01' }));
  41         });
  42         it('should decode mouseup events', function(done) {
  43             let calls = 0;
  44             const mouse = new Mouse(target);
  45             mouse.onmousebutton = (x, y, down, bmask) => {
  46                 expect(bmask).to.be.equal(0x01);
  47                 if (calls++ === 1) {
  48                     expect(down).to.not.be.equal(1);
  49                     done();
  50                 }
  51             };
  52             mouse._handleMouseDown(mouseevent('mousedown', { button: '0x01' }));
  53             mouse._handleMouseUp(mouseevent('mouseup', { button: '0x01' }));
  54         });
  55         it('should decode mousemove events', function(done) {
  56             const mouse = new Mouse(target);
  57             mouse.onmousemove = (x, y) => {
  58                 // Note that target relative coordinates are sent
  59                 expect(x).to.be.equal(40);
  60                 expect(y).to.be.equal(10);
  61                 done();
  62             };
  63             mouse._handleMouseMove(mouseevent('mousemove',
  64                                               { clientX: 50, clientY: 20 }));
  65         });
  66         it('should decode mousewheel events', function(done) {
  67             let calls = 0;
  68             const mouse = new Mouse(target);
  69             mouse.onmousebutton = (x, y, down, bmask) => {
  70                 calls++;
  71                 expect(bmask).to.be.equal(1<<6);
  72                 if (calls === 1) {
  73                     expect(down).to.be.equal(1);
  74                 } else if (calls === 2) {
  75                     expect(down).to.not.be.equal(1);
  76                     done();
  77                 }
  78             };
  79             mouse._handleMouseWheel(mouseevent('mousewheel',
  80                                                { deltaX: 50, deltaY: 0,
  81                                                  deltaMode: 0}));
  82         });
  83     });
  84
  85     describe('Double-click for Touch', function() {
  86
  87         beforeEach(function () { this.clock = sinon.useFakeTimers(); });
  88         afterEach(function () { this.clock.restore(); });
  89
  90         it('should use same pos for 2nd tap if close enough', function(done) {
  91             let calls = 0;
  92             const mouse = new Mouse(target);
  93             mouse.onmousebutton = (x, y, down, bmask) => {
  94                 calls++;
  95                 if (calls === 1) {
  96                     expect(down).to.be.equal(1);
  97                     expect(x).to.be.equal(68);
  98                     expect(y).to.be.equal(36);
  99                 } else if (calls === 3) {
 100                     expect(down).to.be.equal(1);
 101                     expect(x).to.be.equal(68);
 102                     expect(y).to.be.equal(36);
 103                     done();
 104                 }
 105             };
 106             // touch events are sent in an array of events
 107             // with one item for each touch point
 108             mouse._handleMouseDown(touchevent(
 109                 'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
 110             this.clock.tick(10);
 111             mouse._handleMouseUp(touchevent(
 112                 'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
 113             this.clock.tick(200);
 114             mouse._handleMouseDown(touchevent(
 115                 'touchstart', { touches: [{ clientX: 67, clientY: 35 }]}));
 116             this.clock.tick(10);
 117             mouse._handleMouseUp(touchevent(
 118                 'touchend', { touches: [{ clientX: 66, clientY: 36 }]}));
 119         });
 120
 121         it('should not modify 2nd tap pos if far apart', function(done) {
 122             let calls = 0;
 123             const mouse = new Mouse(target);
 124             mouse.onmousebutton = (x, y, down, bmask) => {
 125                 calls++;
 126                 if (calls === 1) {
 127                     expect(down).to.be.equal(1);
 128                     expect(x).to.be.equal(68);
 129                     expect(y).to.be.equal(36);
 130                 } else if (calls === 3) {
 131                     expect(down).to.be.equal(1);
 132                     expect(x).to.not.be.equal(68);
 133                     expect(y).to.not.be.equal(36);
 134                     done();
 135                 }
 136             };
 137             mouse._handleMouseDown(touchevent(
 138                 'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
 139             this.clock.tick(10);
 140             mouse._handleMouseUp(touchevent(
 141                 'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
 142             this.clock.tick(200);
 143             mouse._handleMouseDown(touchevent(
 144                 'touchstart', { touches: [{ clientX: 57, clientY: 35 }]}));
 145             this.clock.tick(10);
 146             mouse._handleMouseUp(touchevent(
 147                 'touchend', { touches: [{ clientX: 56, clientY: 36 }]}));
 148         });
 149
 150         it('should not modify 2nd tap pos if not soon enough', function(done) {
 151             let calls = 0;
 152             const mouse = new Mouse(target);
 153             mouse.onmousebutton = (x, y, down, bmask) => {
 154                 calls++;
 155                 if (calls === 1) {
 156                     expect(down).to.be.equal(1);
 157                     expect(x).to.be.equal(68);
 158                     expect(y).to.be.equal(36);
 159                 } else if (calls === 3) {
 160                     expect(down).to.be.equal(1);
 161                     expect(x).to.not.be.equal(68);
 162                     expect(y).to.not.be.equal(36);
 163                     done();
 164                 }
 165             };
 166             mouse._handleMouseDown(touchevent(
 167                 'touchstart', { touches: [{ clientX: 78, clientY: 46 }]}));
 168             this.clock.tick(10);
 169             mouse._handleMouseUp(touchevent(
 170                 'touchend', { touches: [{ clientX: 79, clientY: 45 }]}));
 171             this.clock.tick(500);
 172             mouse._handleMouseDown(touchevent(
 173                 'touchstart', { touches: [{ clientX: 67, clientY: 35 }]}));
 174             this.clock.tick(10);
 175             mouse._handleMouseUp(touchevent(
 176                 'touchend', { touches: [{ clientX: 66, clientY: 36 }]}));
 177         });
 178
 179         it('should not modify 2nd tap pos if not touch', function(done) {
 180             let calls = 0;
 181             const mouse = new Mouse(target);
 182             mouse.onmousebutton = (x, y, down, bmask) => {
 183                 calls++;
 184                 if (calls === 1) {
 185                     expect(down).to.be.equal(1);
 186                     expect(x).to.be.equal(68);
 187                     expect(y).to.be.equal(36);
 188                 } else if (calls === 3) {
 189                     expect(down).to.be.equal(1);
 190                     expect(x).to.not.be.equal(68);
 191                     expect(y).to.not.be.equal(36);
 192                     done();
 193                 }
 194             };
 195             mouse._handleMouseDown(mouseevent(
 196                 'mousedown', { button: '0x01', clientX: 78, clientY: 46 }));
 197             this.clock.tick(10);
 198             mouse._handleMouseUp(mouseevent(
 199                 'mouseup', { button: '0x01', clientX: 79, clientY: 45 }));
 200             this.clock.tick(200);
 201             mouse._handleMouseDown(mouseevent(
 202                 'mousedown', { button: '0x01', clientX: 67, clientY: 35 }));
 203             this.clock.tick(10);
 204             mouse._handleMouseUp(mouseevent(
 205                 'mouseup', { button: '0x01', clientX: 66, clientY: 36 }));
 206         });
 207
 208     });
 209
 210     describe('Accumulate mouse wheel events with small delta', function() {
 211
 212         beforeEach(function () { this.clock = sinon.useFakeTimers(); });
 213         afterEach(function () { this.clock.restore(); });
 214
 215         it('should accumulate wheel events if small enough', function () {
 216             const mouse = new Mouse(target);
 217             mouse.onmousebutton = sinon.spy();
 218
 219             mouse._handleMouseWheel(mouseevent(
 220                 'mousewheel', { clientX: 18, clientY: 40,
 221                                 deltaX: 4, deltaY: 0, deltaMode: 0 }));
 222             this.clock.tick(10);
 223             mouse._handleMouseWheel(mouseevent(
 224                 'mousewheel', { clientX: 18, clientY: 40,
 225                                 deltaX: 4, deltaY: 0, deltaMode: 0 }));
 226
 227             // threshold is 10
 228             expect(mouse._accumulatedWheelDeltaX).to.be.equal(8);
 229
 230             this.clock.tick(10);
 231             mouse._handleMouseWheel(mouseevent(
 232                 'mousewheel', { clientX: 18, clientY: 40,
 233                                 deltaX: 4, deltaY: 0, deltaMode: 0 }));
 234
 235             expect(mouse.onmousebutton).to.have.callCount(2); // mouse down and up
 236
 237             this.clock.tick(10);
 238             mouse._handleMouseWheel(mouseevent(
 239                 'mousewheel', { clientX: 18, clientY: 40,
 240                                 deltaX: 4, deltaY: 9, deltaMode: 0 }));
 241
 242             expect(mouse._accumulatedWheelDeltaX).to.be.equal(4);
 243             expect(mouse._accumulatedWheelDeltaY).to.be.equal(9);
 244
 245             expect(mouse.onmousebutton).to.have.callCount(2); // still
 246         });
 247
 248         it('should not accumulate large wheel events', function () {
 249             const mouse = new Mouse(target);
 250             mouse.onmousebutton = sinon.spy();
 251
 252             mouse._handleMouseWheel(mouseevent(
 253                 'mousewheel', { clientX: 18, clientY: 40,
 254                                 deltaX: 11, deltaY: 0, deltaMode: 0 }));
 255             this.clock.tick(10);
 256             mouse._handleMouseWheel(mouseevent(
 257                 'mousewheel', { clientX: 18, clientY: 40,
 258                                 deltaX: 0, deltaY: 70, deltaMode: 0 }));
 259             this.clock.tick(10);
 260             mouse._handleMouseWheel(mouseevent(
 261                 'mousewheel', { clientX: 18, clientY: 40,
 262                                 deltaX: 400, deltaY: 400, deltaMode: 0 }));
 263
 264             expect(mouse.onmousebutton).to.have.callCount(8); // mouse down and up
 265         });
 266
 267         it('should send even small wheel events after a timeout', function () {
 268             const mouse = new Mouse(target);
 269             mouse.onmousebutton = sinon.spy();
 270
 271             mouse._handleMouseWheel(mouseevent(
 272                 'mousewheel', { clientX: 18, clientY: 40,
 273                                 deltaX: 1, deltaY: 0, deltaMode: 0 }));
 274             this.clock.tick(51); // timeout on 50 ms
 275
 276             expect(mouse.onmousebutton).to.have.callCount(2); // mouse down and up
 277         });
 278
 279         it('should account for non-zero deltaMode', function () {
 280             const mouse = new Mouse(target);
 281             mouse.onmousebutton = sinon.spy();
 282
 283             mouse._handleMouseWheel(mouseevent(
 284                 'mousewheel', { clientX: 18, clientY: 40,
 285                                 deltaX: 0, deltaY: 2, deltaMode: 1 }));
 286
 287             this.clock.tick(10);
 288
 289             mouse._handleMouseWheel(mouseevent(
 290                 'mousewheel', { clientX: 18, clientY: 40,
 291                                 deltaX: 1, deltaY: 0, deltaMode: 2 }));
 292
 293             expect(mouse.onmousebutton).to.have.callCount(4); // mouse down and up
 294         });
 295     });
 296
 297 });