mirror of
https://github.com/Shopify/draggable.git
synced 2025-12-08 20:15:56 +00:00
Merge pull request #421 from zjffun/chore
chore: fix a eslint error, update waitForDragDelay params and add some LFs and docblocks
This commit is contained in:
Max Hoffmann
GitHub
commit
7a98fcc166
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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', () => {
|
||||
|
||||
@ -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});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user