diff --git a/package.json b/package.json index e46fa0c1..a9bf3fdf 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "watch": "node scripts/watch.js", "prepare": "yarn build:development", "prepublishOnly": "yarn build:production", - "lint": "eslint ./src --max-warnings 0", + "lint": "eslint ./src ./scripts --max-warnings 0", "esdoc": "esdoc -c esdoc.json", "test": "jest --config config.json", "test-ci": "jest --config config.json --coverage && codecov", diff --git a/scripts/test/matchers/sensor.js b/scripts/test/matchers/sensor.js index 1e9cfa5c..8548af3c 100644 --- a/scripts/test/matchers/sensor.js +++ b/scripts/test/matchers/sensor.js @@ -2,7 +2,9 @@ function toHaveTriggeredSensorEvent(received, expectedEventName, count) { let triggered = false; let callCount = 0; function callback() { - count !== undefined && (callCount = callCount + 1); + if (count !== undefined) { + callCount++; + } triggered = true; } diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 26ffa517..2c28225c 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/src/Draggable/Sensors/MouseSensor/MouseSensor.js @@ -32,6 +32,20 @@ export default class MouseSensor extends Sensor { */ this.mouseDownTimeout = null; + /** + * Save pageX coordinates for delay drag + * @property {Numbre} pageX + * @private + */ + this.pageX = null; + + /** + * Save pageY coordinates for delay drag + * @property {Numbre} pageY + * @private + */ + this.pageY = null; + this[onContextMenuWhileDragging] = this[onContextMenuWhileDragging].bind(this); this[onMouseDown] = this[onMouseDown].bind(this); this[onMouseMove] = this[onMouseMove].bind(this); diff --git a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js index 7e3a4379..21c7004c 100644 --- a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js +++ b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js @@ -275,6 +275,7 @@ describe('MouseSensor', () => { } expect(dragFlow).toHaveTriggeredSensorEvent('drag:start', 1); }); + it('only triggers `drag:start` sensor event once when distance is met after delay', () => { function dragFlow() { clickMouse(draggableElement); diff --git a/src/Draggable/Sensors/TouchSensor/TouchSensor.js b/src/Draggable/Sensors/TouchSensor/TouchSensor.js index 10f170e5..6e4bc31d 100644 --- a/src/Draggable/Sensors/TouchSensor/TouchSensor.js +++ b/src/Draggable/Sensors/TouchSensor/TouchSensor.js @@ -65,6 +65,20 @@ export default class TouchSensor extends Sensor { */ this.touchMoved = false; + /** + * Save pageX coordinates for delay drag + * @property {Numbre} pageX + * @private + */ + this.pageX = null; + + /** + * Save pageY coordinates for delay drag + * @property {Numbre} pageY + * @private + */ + this.pageY = null; + this[onTouchStart] = this[onTouchStart].bind(this); this[onTouchEnd] = this[onTouchEnd].bind(this); this[onTouchMove] = this[onTouchMove].bind(this); diff --git a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js index 7c4d57d0..a094d05f 100644 --- a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js +++ b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js @@ -26,9 +26,12 @@ describe('TouchSensor', () => { touchSensor.detach(); sandbox.parentNode.removeChild(sandbox); } + describe('common', () => { beforeEach(setup); + afterEach(teardown); + it('cancels `drag:start` event when canceling sensor event', () => { sandbox.addEventListener('drag:start', (event) => { event.detail.cancel(); @@ -51,6 +54,7 @@ describe('TouchSensor', () => { expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); + it('prevents context menu while dragging', () => { touchStart(draggableElement); let contextMenuEvent = triggerEvent(draggableElement, 'contextmenu'); @@ -94,12 +98,14 @@ describe('TouchSensor', () => { expect(touchEndEvent.defaultPrevented).toBe(true); }); }); + describe('using distance', () => { beforeEach(() => { setup({delay: 0, distance: 1}); }); afterEach(teardown); + it('does not trigger `drag:start` before distance has been travelled', () => { function dragFlow() { touchStart(draggableElement); @@ -153,6 +159,7 @@ describe('TouchSensor', () => { beforeEach(() => { setup({delay: DRAG_DELAY, distance: 0}); }); + afterEach(teardown); it('does not trigger `drag:start` before delay ends', () => { @@ -210,6 +217,7 @@ describe('TouchSensor', () => { beforeEach(() => { setup({delay: DRAG_DELAY, distance: 1}); }); + afterEach(teardown); it('does not trigger `drag:start` before delay ends', () => { diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index cb91aef3..485952db 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -326,7 +326,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const containerChildren = newInstance.getDraggableElementsForContainer(draggableElement.parentNode); @@ -349,7 +349,7 @@ describe('Draggable', () => { const dynamicContainer = document.querySelector('.DynamicContainer'); clickMouse(draggableElement); - waitForDragDelay(100); + waitForDragDelay(); moveMouse(dynamicContainer); expect(dragOverContainerHandler).not.toHaveBeenCalled(); @@ -361,7 +361,7 @@ describe('Draggable', () => { expect(newInstance.containers).toEqual([...containers, dynamicContainer]); clickMouse(draggableElement); - waitForDragDelay(100); + waitForDragDelay(); moveMouse(dynamicContainer); expect(dragOverContainerHandler).toHaveBeenCalled(); @@ -383,7 +383,7 @@ describe('Draggable', () => { const dynamicContainer = document.querySelector('.DynamicContainer'); clickMouse(draggableElement); - waitForDragDelay(100); + waitForDragDelay(); moveMouse(dynamicContainer); expect(dragOverContainerHandler).toHaveBeenCalled(); @@ -398,7 +398,7 @@ describe('Draggable', () => { newInstance.on('drag:over:container', dragOverContainerHandler); clickMouse(draggableElement); - waitForDragDelay(100); + waitForDragDelay(); moveMouse(dynamicContainer); expect(dragOverContainerHandler).not.toHaveBeenCalled(); @@ -483,7 +483,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const call = callback.mock.calls[0][0]; @@ -507,7 +507,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); triggerEvent(draggableElement, 'dragstart', {button: 0}); @@ -540,7 +540,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); triggerEvent(draggableElement, 'dragstart', {button: 0}); @@ -559,7 +559,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const callback = jest.fn(); newInstance.on('drag:move', callback); @@ -593,7 +593,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const callback = jest.fn(); newInstance.on('drag:stop', callback); @@ -641,7 +641,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(newInstance.source.classList).toContain('draggable-source--is-dragging'); @@ -658,7 +658,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const source = newInstance.source; @@ -683,7 +683,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); const source = newInstance.source; @@ -703,7 +703,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(document.body.classList).toContain('draggable--is-dragging'); @@ -721,7 +721,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(document.body.classList).toContain('draggable--is-dragging'); triggerEvent(document.body, 'mouseup', {button: 0}); @@ -743,7 +743,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(document.body.classList).not.toContain('draggable--is-dragging'); @@ -761,7 +761,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); triggerEvent(draggableElement, 'mouseup', {button: 0}); @@ -779,7 +779,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); triggerEvent(document.body, 'mouseup', {button: 0}); @@ -802,7 +802,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(containers[0].classList).toContain('draggable-container--is-dragging'); @@ -820,7 +820,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(containers[0].classList).toContain('draggable-container--is-dragging'); @@ -842,7 +842,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(containers[0].classList).not.toContain('draggable-container--is-dragging'); @@ -859,7 +859,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(draggableElement.classList.contains(newInstance.getClassNameFor('source:original'))).toBeTruthy(); @@ -887,7 +887,7 @@ describe('Draggable', () => { triggerEvent(draggableElement, 'mousedown', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); expect(newInstance.isDragging()).toBe(true); @@ -895,13 +895,13 @@ describe('Draggable', () => { triggerEvent(draggableElement.nextElementSibling, 'mousemove', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); document.elementFromPoint = () => document.body; triggerEvent(document.body, 'mousemove', {button: 0}); // Wait for delay - waitForDragDelay(100); + waitForDragDelay(); triggerEvent(document.body, 'mouseup', {button: 0}); });