diff --git a/.eslintrc.js b/.eslintrc.js index b2b9abc..fc14231 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,8 @@ module.exports = { extends: [ 'plugin:shopify/esnext', + 'plugin:shopify/jest', + 'plugin:shopify/prettier', ], env: { browser: true, @@ -9,16 +11,7 @@ module.exports = { 'import/no-unresolved': 'off', 'import/no-extraneous-dependencies': 'off', 'class-methods-use-this': 'off', - }, - globals: { - jest: false, - afterAll: false, - afterEach: false, - beforeAll: false, - beforeEach: false, - describe: false, - test: false, - xtest: false, - expect: false, + 'line-comment-position': 0, + 'lines-around-comment': 'off', }, }; diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..3f584f6 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 120, + "singleQuote": true +} diff --git a/scripts/test/helpers/constants.js b/scripts/test/helpers/constants.js index 2d361a6..cb13b9b 100644 --- a/scripts/test/helpers/constants.js +++ b/scripts/test/helpers/constants.js @@ -1,8 +1,10 @@ export const defaultTouchEventOptions = { - touches: [{ - pageX: 0, - pageY: 0, - }], + touches: [ + { + pageX: 0, + pageY: 0, + }, + ], }; export const DRAG_DELAY = 0; diff --git a/scripts/test/helpers/environment.js b/scripts/test/helpers/environment.js index 616b50c..6dc39aa 100644 --- a/scripts/test/helpers/environment.js +++ b/scripts/test/helpers/environment.js @@ -2,6 +2,7 @@ export function createSandbox(content) { const sandbox = document.createElement('div'); sandbox.innerHTML = content; document.body.appendChild(sandbox); + return sandbox; } diff --git a/scripts/test/helpers/event.js b/scripts/test/helpers/event.js index 83baf78..99aadfb 100644 --- a/scripts/test/helpers/event.js +++ b/scripts/test/helpers/event.js @@ -3,6 +3,7 @@ import {withElementFromPoint} from './environment'; export function triggerEvent(element, type, data = {}) { const event = document.createEvent('Event'); event.initEvent(type, true, true); + for (const key in data) { if (data.hasOwnProperty(key)) { event[key] = data[key]; diff --git a/scripts/test/matchers/order.js b/scripts/test/matchers/order.js index 0d114d4..e9d675c 100644 --- a/scripts/test/matchers/order.js +++ b/scripts/test/matchers/order.js @@ -11,15 +11,19 @@ function toHaveOrder(actualOrder, expectedOrder) { const expectation = pass ? 'not to be' : 'to be'; let message = `Expected order ${expectation}:\n`; - message += expectedOrder.map((element) => { - return `${element.textContent.trim()}`; - }).join('\n'); + message += expectedOrder + .map((element) => { + return `${element.textContent.trim()}`; + }) + .join('\n'); message += '\n \nInstead received:\n'; - message += actualOrder.map((element) => { - return `${element.textContent.trim()}`; - }).join('\n'); + message += actualOrder + .map((element) => { + return `${element.textContent.trim()}`; + }) + .join('\n'); return message; }, diff --git a/src/Draggable/DragEvent/tests/DragEvent.test.js b/src/Draggable/DragEvent/tests/DragEvent.test.js index 6dfe77a..260ad84 100644 --- a/src/Draggable/DragEvent/tests/DragEvent.test.js +++ b/src/Draggable/DragEvent/tests/DragEvent.test.js @@ -12,19 +12,19 @@ import { describe('DragEvent', () => { describe('#constructor', () => { - test('should be instance of DragEvent', () => { + it('should be instance of DragEvent', () => { const event = new DragEvent(); expect(event).toBeInstanceOf(DragEvent); }); - test('should initialize with `type` of `event`', () => { + it('should initialize with `type` of `event`', () => { const event = new DragEvent(); expect(event.type).toBe('drag'); }); - test('should initialize with source', () => { + it('should initialize with source', () => { const event = new DragEvent({ source: 'expected source', }); @@ -32,7 +32,7 @@ describe('DragEvent', () => { expect(event.source).toBe('expected source'); }); - test('should initialize with mirror', () => { + it('should initialize with mirror', () => { const event = new DragEvent({ mirror: 'expected mirror', }); @@ -40,7 +40,7 @@ describe('DragEvent', () => { expect(event.mirror).toBe('expected mirror'); }); - test('should initialize with sourceContainer', () => { + it('should initialize with sourceContainer', () => { const event = new DragEvent({ sourceContainer: 'expected sourceContainer', }); @@ -48,7 +48,7 @@ describe('DragEvent', () => { expect(event.sourceContainer).toBe('expected sourceContainer'); }); - test('should initialize with sensorEvent', () => { + it('should initialize with sensorEvent', () => { const event = new DragEvent({ sensorEvent: 'expected sensorEvent', }); @@ -56,7 +56,7 @@ describe('DragEvent', () => { expect(event.sensorEvent).toBe('expected sensorEvent'); }); - test('should initialize with originalEvent', () => { + it('should initialize with originalEvent', () => { const event = new DragEvent({ sensorEvent: { originalEvent: 'expected originalEvent', @@ -68,15 +68,15 @@ describe('DragEvent', () => { }); describe('#originalEvent', () => { - test('should return null when initialized without sensorEvent', () => { + it('should return null when initialized without sensorEvent', () => { const event = new DragEvent({}); - expect(event.originalEvent).toBe(null); + expect(event.originalEvent).toBeNull(); }); }); describe('#hasMirror', () => { - test('should return true when event has mirror', () => { + it('should return true when event has mirror', () => { const event = new DragEvent({ mirror: true, }); @@ -84,7 +84,7 @@ describe('DragEvent', () => { expect(event.hasMirror()).toBe(true); }); - test('should return false when event does not have mirror', () => { + it('should return false when event does not have mirror', () => { const event = new DragEvent({}); expect(event.hasMirror()).toBe(false); @@ -94,13 +94,13 @@ describe('DragEvent', () => { describe('DragStartEvent', () => { describe('#constructor', () => { - test('should be instance of DragStartEvent', () => { + it('should be instance of DragStartEvent', () => { const event = new DragStartEvent(); expect(event).toBeInstanceOf(DragStartEvent); }); - test('should initialize with `type` of `drag:start`', () => { + it('should initialize with `type` of `drag:start`', () => { const event = new DragStartEvent(); expect(event.type).toBe('drag:start'); @@ -110,13 +110,13 @@ describe('DragStartEvent', () => { describe('DragMoveEvent', () => { describe('#constructor', () => { - test('should be instance of DragMoveEvent', () => { + it('should be instance of DragMoveEvent', () => { const event = new DragMoveEvent(); expect(event).toBeInstanceOf(DragMoveEvent); }); - test('should initialize with `type` of `drag:move`', () => { + it('should initialize with `type` of `drag:move`', () => { const event = new DragMoveEvent(); expect(event.type).toBe('drag:move'); @@ -126,19 +126,19 @@ describe('DragMoveEvent', () => { describe('DragOutContainerEvent', () => { describe('#constructor', () => { - test('should be instance of DragOutContainerEvent', () => { + it('should be instance of DragOutContainerEvent', () => { const event = new DragOutContainerEvent(); expect(event).toBeInstanceOf(DragOutContainerEvent); }); - test('should initialize with `type` of `drag:out:container`', () => { + it('should initialize with `type` of `drag:out:container`', () => { const event = new DragOutContainerEvent(); expect(event.type).toBe('drag:out:container'); }); - test('should initialize with overContainer', () => { + it('should initialize with overContainer', () => { const event = new DragOutContainerEvent({ overContainer: 'expected overContainer', }); @@ -150,19 +150,19 @@ describe('DragOutContainerEvent', () => { describe('DragOutEvent', () => { describe('#constructor', () => { - test('should be instance of DragOutEvent', () => { + it('should be instance of DragOutEvent', () => { const event = new DragOutEvent(); expect(event).toBeInstanceOf(DragOutEvent); }); - test('should initialize with `type` of `drag:out`', () => { + it('should initialize with `type` of `drag:out`', () => { const event = new DragOutEvent(); expect(event.type).toBe('drag:out'); }); - test('should initialize with overContainer', () => { + it('should initialize with overContainer', () => { const event = new DragOutEvent({ overContainer: 'expected overContainer', }); @@ -170,7 +170,7 @@ describe('DragOutEvent', () => { expect(event.overContainer).toBe('expected overContainer'); }); - test('should initialize with over', () => { + it('should initialize with over', () => { const event = new DragOutEvent({ over: 'expected over', }); @@ -182,19 +182,19 @@ describe('DragOutEvent', () => { describe('DragOverContainerEvent', () => { describe('#constructor', () => { - test('should be instance of DragOverContainerEvent', () => { + it('should be instance of DragOverContainerEvent', () => { const event = new DragOverContainerEvent(); expect(event).toBeInstanceOf(DragOverContainerEvent); }); - test('should initialize with `type` of `drag:over:container`', () => { + it('should initialize with `type` of `drag:over:container`', () => { const event = new DragOverContainerEvent(); expect(event.type).toBe('drag:over:container'); }); - test('should initialize with overContainer', () => { + it('should initialize with overContainer', () => { const event = new DragOverContainerEvent({ overContainer: 'expected overContainer', }); @@ -206,19 +206,19 @@ describe('DragOverContainerEvent', () => { describe('DragOverEvent', () => { describe('#constructor', () => { - test('should be instance of DragOverEvent', () => { + it('should be instance of DragOverEvent', () => { const event = new DragOverEvent(); expect(event).toBeInstanceOf(DragOverEvent); }); - test('should initialize with `type` of `drag:over`', () => { + it('should initialize with `type` of `drag:over`', () => { const event = new DragOverEvent(); expect(event.type).toBe('drag:over'); }); - test('should initialize with overContainer', () => { + it('should initialize with overContainer', () => { const event = new DragOverEvent({ overContainer: 'expected overContainer', }); @@ -226,7 +226,7 @@ describe('DragOverEvent', () => { expect(event.overContainer).toBe('expected overContainer'); }); - test('should initialize with over', () => { + it('should initialize with over', () => { const event = new DragOverEvent({ over: 'expected over', }); @@ -238,19 +238,19 @@ describe('DragOverEvent', () => { describe('DragPressureEvent', () => { describe('#constructor', () => { - test('should be instance of DragPressureEvent', () => { + it('should be instance of DragPressureEvent', () => { const event = new DragPressureEvent(); expect(event).toBeInstanceOf(DragPressureEvent); }); - test('should initialize with `type` of `drag:pressure`', () => { + it('should initialize with `type` of `drag:pressure`', () => { const event = new DragPressureEvent(); expect(event.type).toBe('drag:pressure'); }); - test('should initialize with pressure', () => { + it('should initialize with pressure', () => { const event = new DragPressureEvent({ pressure: 'expected pressure', }); @@ -262,13 +262,13 @@ describe('DragPressureEvent', () => { describe('DragStopEvent', () => { describe('#constructor', () => { - test('should be instance of DragStopEvent', () => { + it('should be instance of DragStopEvent', () => { const event = new DragStopEvent(); expect(event).toBeInstanceOf(DragStopEvent); }); - test('should initialize with `type` of `drag:stop`', () => { + it('should initialize with `type` of `drag:stop`', () => { const event = new DragStopEvent(); expect(event.type).toBe('drag:stop'); diff --git a/src/Draggable/Draggable.js b/src/Draggable/Draggable.js index ff33bc1..09f8ba3 100644 --- a/src/Draggable/Draggable.js +++ b/src/Draggable/Draggable.js @@ -1,18 +1,8 @@ import {closest} from 'shared/utils'; - import {Accessibility, Mirror, Scrollable, Announcement} from './Plugins'; - import Emitter from './Emitter'; - -import { - MouseSensor, - TouchSensor, -} from './Sensors'; - -import { - DraggableInitializedEvent, - DraggableDestroyEvent, -} from './DraggableEvent'; +import {MouseSensor, TouchSensor} from './Sensors'; +import {DraggableInitializedEvent, DraggableDestroyEvent} from './DraggableEvent'; import { DragStartEvent, @@ -76,7 +66,6 @@ export const defaultOptions = { * @module Draggable */ export default class Draggable { - /** * Default plugins draggable uses * @static @@ -96,7 +85,6 @@ export default class Draggable { * @param {Object} options - Options for draggable */ constructor(containers = [document.body], options = {}) { - /** * Draggable containers * @property containers @@ -199,8 +187,10 @@ export default class Draggable { */ addPlugin(...plugins) { const activePlugins = plugins.map((Plugin) => new Plugin(this)); + activePlugins.forEach((plugin) => plugin.attach()); this.plugins = [...this.plugins, ...activePlugins]; + return this; } @@ -213,8 +203,10 @@ export default class Draggable { */ removePlugin(...plugins) { const removedPlugins = this.plugins.filter((plugin) => plugins.includes(plugin.constructor)); + removedPlugins.forEach((plugin) => plugin.detach()); this.plugins = this.plugins.filter((plugin) => !plugins.includes(plugin.constructor)); + return this; } @@ -226,8 +218,10 @@ export default class Draggable { */ addSensor(...sensors) { const activeSensors = sensors.map((Sensor) => new Sensor(this.containers, this.options)); + activeSensors.forEach((sensor) => sensor.attach()); this.sensors = [...this.sensors, ...activeSensors]; + return this; } @@ -240,8 +234,10 @@ export default class Draggable { */ removeSensor(...sensors) { const removedSensors = this.sensors.filter((sensor) => sensors.includes(sensor.constructor)); + removedSensors.forEach((sensor) => sensor.detach()); this.sensors = this.sensors.filter((sensor) => !sensors.includes(sensor.constructor)); + return this; } @@ -484,10 +480,10 @@ export default class Draggable { target = closest(target, this.options.draggable); const withinCorrectContainer = closest(sensorEvent.target, this.containers); const overContainer = sensorEvent.overContainer || withinCorrectContainer; - const isLeavingContainer = this.currentOverContainer && (overContainer !== this.currentOverContainer); - const isLeavingDraggable = this.currentOver && (target !== this.currentOver); - const isOverContainer = overContainer && (this.currentOverContainer !== overContainer); - const isOverDraggable = withinCorrectContainer && target && (this.currentOver !== target); + const isLeavingContainer = this.currentOverContainer && overContainer !== this.currentOverContainer; + const isLeavingDraggable = this.currentOver && target !== this.currentOver; + const isOverContainer = overContainer && this.currentOverContainer !== overContainer; + const isOverDraggable = withinCorrectContainer && target && this.currentOver !== target; if (isLeavingDraggable) { const dragOutEvent = new DragOutEvent({ diff --git a/src/Draggable/Emitter/Emitter.js b/src/Draggable/Emitter/Emitter.js index 49326a1..0c94bf6 100644 --- a/src/Draggable/Emitter/Emitter.js +++ b/src/Draggable/Emitter/Emitter.js @@ -58,6 +58,7 @@ export default class Emitter { for (let i = callbacks.length - 1; i >= 0; i--) { const callback = callbacks[i]; + try { callback(event); } catch (error) { diff --git a/src/Draggable/Emitter/tests/Emitter.test.js b/src/Draggable/Emitter/tests/Emitter.test.js index 54f32e2..df7fc68 100644 --- a/src/Draggable/Emitter/tests/Emitter.test.js +++ b/src/Draggable/Emitter/tests/Emitter.test.js @@ -11,7 +11,7 @@ describe('Emitter', () => { }); describe('#on', () => { - test('registers a callback by event type', () => { + it('registers a callback by event type', () => { const callback = jest.fn(); emitter.on('event', callback); @@ -19,7 +19,7 @@ describe('Emitter', () => { expect(emitter.callbacks.event).toContain(callback); }); - test('registers multiple callbacks by event type', () => { + it('registers multiple callbacks by event type', () => { const callbacks = [jest.fn(), jest.fn()]; emitter.on('event', ...callbacks); @@ -30,7 +30,7 @@ describe('Emitter', () => { }); describe('#off', () => { - test('removes a callback by event type', () => { + it('removes a callback by event type', () => { const callback = jest.fn(); emitter.on('event', callback); @@ -44,7 +44,7 @@ describe('Emitter', () => { }); describe('#trigger', () => { - test('triggers callbacks on event with test event', () => { + it('triggers callbacks on event with test event', () => { const testEvent = new TestEvent({}); const callback = jest.fn(); @@ -55,11 +55,13 @@ describe('Emitter', () => { expect(callback).toHaveBeenCalledWith(testEvent); }); - test('catches errors from listeners and re-throws at the end of the trigger phase', () => { + it('catches errors from listeners and re-throws at the end of the trigger phase', () => { const testEvent = new TestEvent({}); const callbacks = [ jest.fn(), - () => { throw new Error('Error'); }, + () => { + throw new Error('Error'); + }, jest.fn(), ]; diff --git a/src/Draggable/MirrorEvent/MirrorEvent.js b/src/Draggable/MirrorEvent/MirrorEvent.js index 818fbb4..011fa02 100644 --- a/src/Draggable/MirrorEvent/MirrorEvent.js +++ b/src/Draggable/MirrorEvent/MirrorEvent.js @@ -7,7 +7,6 @@ import AbstractEvent from 'shared/AbstractEvent'; * @extends AbstractEvent */ export class MirrorEvent extends AbstractEvent { - /** * Draggables source element * @property source diff --git a/src/Draggable/Plugins/Accessibility/Accessibility.js b/src/Draggable/Plugins/Accessibility/Accessibility.js index 9bcd3c6..72c232e 100644 --- a/src/Draggable/Plugins/Accessibility/Accessibility.js +++ b/src/Draggable/Plugins/Accessibility/Accessibility.js @@ -11,7 +11,6 @@ const TABINDEX = 'tabindex'; * @extends AbstractPlugin */ export default class Accessibility extends AbstractPlugin { - /** * Accessibility constructor. * @constructs Accessibility diff --git a/src/Draggable/Plugins/Announcement/Announcement.js b/src/Draggable/Plugins/Announcement/Announcement.js index 3186946..f919c60 100644 --- a/src/Draggable/Plugins/Announcement/Announcement.js +++ b/src/Draggable/Plugins/Announcement/Announcement.js @@ -27,7 +27,6 @@ export const defaultOptions = { * @extends AbstractPlugin */ export default class Announcement extends AbstractPlugin { - /** * Announcement constructor. * @constructs Announcement @@ -61,16 +60,14 @@ export default class Announcement extends AbstractPlugin { * Attaches listeners to draggable */ attach() { - this.draggable - .on('draggable:initialize', this[onInitialize]); + this.draggable.on('draggable:initialize', this[onInitialize]); } /** * Detaches listeners from draggable */ detach() { - this.draggable - .off('draggable:destroy', this[onDestroy]); + this.draggable.off('draggable:destroy', this[onDestroy]); } /** @@ -88,11 +85,11 @@ export default class Announcement extends AbstractPlugin { [announceEvent](event) { const message = this.options[event.type]; - if (message && (typeof message === 'string')) { + if (message && typeof message === 'string') { this[announceMessage](message); } - if (message && (typeof message === 'function')) { + if (message && typeof message === 'function') { this[announceMessage](message(event)); } } @@ -144,8 +141,10 @@ const liveRegion = createRegion(); */ function announce(message, {expire}) { const element = document.createElement('div'); + element.innerHTML = message; liveRegion.appendChild(element); + return setTimeout(() => { liveRegion.removeChild(element); }, expire); diff --git a/src/Draggable/Plugins/Mirror/Mirror.js b/src/Draggable/Plugins/Mirror/Mirror.js index 85c86f1..acb818f 100644 --- a/src/Draggable/Plugins/Mirror/Mirror.js +++ b/src/Draggable/Plugins/Mirror/Mirror.js @@ -31,7 +31,6 @@ export const defaultOptions = { * @extends AbstractPlugin */ export default class Mirror extends AbstractPlugin { - /** * Mirror constructor. * @constructs Mirror @@ -163,15 +162,17 @@ export default class Mirror extends AbstractPlugin { options: this.options, }; - return Promise.resolve(initialState) - // Fix reflow here - .then(computeMirrorDimensions) - .then(calculateMirrorOffset) - .then(resetMirror) - .then(addMirrorClasses) - .then(positionMirror({initial: true})) - .then(removeMirrorID) - .then(setState); + return ( + Promise.resolve(initialState) + // Fix reflow here + .then(computeMirrorDimensions) + .then(calculateMirrorOffset) + .then(resetMirror) + .then(addMirrorClasses) + .then(positionMirror({initial: true})) + .then(removeMirrorID) + .then(setState) + ); } /** @@ -191,8 +192,7 @@ export default class Mirror extends AbstractPlugin { scrollOffset: this.scrollOffset, }; - return Promise.resolve(initialState) - .then(positionMirror({raf: true})); + return Promise.resolve(initialState).then(positionMirror({raf: true})); } } @@ -222,8 +222,8 @@ function computeMirrorDimensions({source, ...args}) { */ function calculateMirrorOffset({sensorEvent, sourceRect, options, ...args}) { return withPromise((resolve) => { - const top = options.cursorOffsetY === null ? (sensorEvent.clientY - sourceRect.top) : options.cursorOffsetY; - const left = options.cursorOffsetX === null ? (sensorEvent.clientX - sourceRect.left) : options.cursorOffsetX; + const top = options.cursorOffsetY === null ? sensorEvent.clientY - sourceRect.top : options.cursorOffsetY; + const left = options.cursorOffsetX === null ? sensorEvent.clientX - sourceRect.left : options.cursorOffsetX; const mirrorOffset = {top, left}; @@ -310,35 +310,38 @@ function removeMirrorID({mirror, ...args}) { */ function positionMirror({withFrame = false, initial = false} = {}) { return ({mirror, sensorEvent, mirrorOffset, initialY, initialX, scrollOffset, options, ...args}) => { - return withPromise((resolve) => { - const result = { - mirror, - sensorEvent, - mirrorOffset, - options, - ...args, - }; + return withPromise( + (resolve) => { + const result = { + mirror, + sensorEvent, + mirrorOffset, + options, + ...args, + }; - if (mirrorOffset) { - const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x; - const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y; + if (mirrorOffset) { + const x = sensorEvent.clientX - mirrorOffset.left - scrollOffset.x; + const y = sensorEvent.clientY - mirrorOffset.top - scrollOffset.y; - if ((options.xAxis && options.yAxis) || initial) { - mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`; - } else if (options.xAxis && !options.yAxis) { - mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`; - } else if (options.yAxis && !options.xAxis) { - mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`; + if ((options.xAxis && options.yAxis) || initial) { + mirror.style.transform = `translate3d(${x}px, ${y}px, 0)`; + } else if (options.xAxis && !options.yAxis) { + mirror.style.transform = `translate3d(${x}px, ${initialY}px, 0)`; + } else if (options.yAxis && !options.xAxis) { + mirror.style.transform = `translate3d(${initialX}px, ${y}px, 0)`; + } + + if (initial) { + result.initialX = x; + result.initialY = y; + } } - if (initial) { - result.initialX = x; - result.initialY = y; - } - } - - resolve(result); - }, {frame: withFrame}); + resolve(result); + }, + {frame: withFrame}, + ); }; } diff --git a/src/Draggable/Plugins/Scrollable/Scrollable.js b/src/Draggable/Plugins/Scrollable/Scrollable.js index 532dace..b05f4d8 100644 --- a/src/Draggable/Plugins/Scrollable/Scrollable.js +++ b/src/Draggable/Plugins/Scrollable/Scrollable.js @@ -27,7 +27,6 @@ export const defaultOptions = { * @extends AbstractPlugin */ export default class Scrollable extends AbstractPlugin { - /** * Scrollable constructor. * @constructs Scrollable @@ -224,12 +223,20 @@ export default class Scrollable extends AbstractPlugin { bottom = rect.bottom; } - let offsetY = (Math.abs(bottom - this.currentMousePosition.clientY) <= this.options.sensitivity) - (Math.abs(top - this.currentMousePosition.clientY) <= this.options.sensitivity); - let offsetX = (Math.abs(right - this.currentMousePosition.clientX) <= this.options.sensitivity) - (Math.abs(left - this.currentMousePosition.clientX) <= this.options.sensitivity); + let offsetY = + (Math.abs(bottom - this.currentMousePosition.clientY) <= this.options.sensitivity) - + (Math.abs(top - this.currentMousePosition.clientY) <= this.options.sensitivity); + let offsetX = + (Math.abs(right - this.currentMousePosition.clientX) <= this.options.sensitivity) - + (Math.abs(left - this.currentMousePosition.clientX) <= this.options.sensitivity); if (!offsetX && !offsetY) { - offsetX = (windowWidth - this.currentMousePosition.clientX <= this.options.sensitivity) - (this.currentMousePosition.clientX <= this.options.sensitivity); - offsetY = (windowHeight - this.currentMousePosition.clientY <= this.options.sensitivity) - (this.currentMousePosition.clientY <= this.options.sensitivity); + offsetX = + (windowWidth - this.currentMousePosition.clientX <= this.options.sensitivity) - + (this.currentMousePosition.clientX <= this.options.sensitivity); + offsetY = + (windowHeight - this.currentMousePosition.clientY <= this.options.sensitivity) - + (this.currentMousePosition.clientY <= this.options.sensitivity); } this.scrollableElement.scrollTop += offsetY * this.options.speed; @@ -249,9 +256,10 @@ function hasOverflow(element) { const overflowRegex = /(auto|scroll)/; const computedStyles = getComputedStyle(element, null); - const overflow = computedStyles.getPropertyValue('overflow') + - computedStyles.getPropertyValue('overflow-y') + - computedStyles.getPropertyValue('overflow-x'); + const overflow = + computedStyles.getPropertyValue('overflow') + + computedStyles.getPropertyValue('overflow-y') + + computedStyles.getPropertyValue('overflow-x'); return overflowRegex.test(overflow); } diff --git a/src/Draggable/Plugins/index.js b/src/Draggable/Plugins/index.js index 8829dfa..adcb621 100644 --- a/src/Draggable/Plugins/index.js +++ b/src/Draggable/Plugins/index.js @@ -1,18 +1,4 @@ -export { - default as Mirror, - defaultOptions as defaultMirrorOptions, -} from './Mirror'; - -export { - default as Announcement, - defaultOptions as defaultAnnouncementOptions, -} from './Announcement'; - -export { - default as Scrollable, - defaultOptions as defaultScrollableOptions, -} from './Scrollable'; - -export { - default as Accessibility, -} from './Accessibility'; +export {default as Mirror, defaultOptions as defaultMirrorOptions} from './Mirror'; +export {default as Announcement, defaultOptions as defaultAnnouncementOptions} from './Announcement'; +export {default as Scrollable, defaultOptions as defaultScrollableOptions} from './Scrollable'; +export {default as Accessibility} from './Accessibility'; diff --git a/src/Draggable/Sensors/DragSensor/DragSensor.js b/src/Draggable/Sensors/DragSensor/DragSensor.js index 42f68ee..11a981c 100644 --- a/src/Draggable/Sensors/DragSensor/DragSensor.js +++ b/src/Draggable/Sensors/DragSensor/DragSensor.js @@ -1,12 +1,6 @@ import {closest} from 'shared/utils'; - import Sensor from '../Sensor'; - -import { - DragStartSensorEvent, - DragMoveSensorEvent, - DragStopSensorEvent, -} from '../SensorEvent'; +import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent} from '../SensorEvent'; const onMouseDown = Symbol('onMouseDown'); const onMouseUp = Symbol('onMouseUp'); @@ -23,7 +17,6 @@ const reset = Symbol('reset'); * @extends Sensor */ export default class DragSensor extends Sensor { - /** * DragSensor constructor. * @constructs DragSensor @@ -177,7 +170,8 @@ export default class DragSensor extends Sensor { * @private * @param {Event} event - Drop event */ - [onDrop](event) { // eslint-disable-line class-methods-use-this + [onDrop](event) { + // eslint-disable-line class-methods-use-this event.preventDefault(); } @@ -188,7 +182,7 @@ export default class DragSensor extends Sensor { */ [onMouseDown](event) { // Firefox bug for inputs within draggables https://bugzilla.mozilla.org/show_bug.cgi?id=739071 - if ((event.target && (event.target.form || event.target.contenteditable))) { + if (event.target && (event.target.form || event.target.contenteditable)) { return; } diff --git a/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js b/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js index b797f24..68ac7e4 100644 --- a/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js +++ b/src/Draggable/Sensors/DragSensor/tests/DragSensor.test.js @@ -39,23 +39,20 @@ describe('DragSensor', () => { sandbox.parentNode.removeChild(sandbox); }); - test('mousedown handler adds draggable attribute', () => { - expect(draggableElement.draggable) - .toBeUndefined(); + it('mousedown handler adds draggable attribute', () => { + expect(draggableElement.draggable).toBeUndefined(); clickMouse(draggableElement); waitForDragDelay(); - expect(draggableElement.draggable) - .toBe(true); + expect(draggableElement.draggable).toBe(true); releaseMouse(draggableElement); - expect(draggableElement.draggable) - .toBe(false); + expect(draggableElement.draggable).toBe(false); }); - test('triggers `drag:start` sensor event on dragstart', () => { + it('triggers `drag:start` sensor event on dragstart', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -65,11 +62,10 @@ describe('DragSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); }); - test('cancels `drag:start` event when canceling sensor event', () => { + it('cancels `drag:start` event when canceling sensor event', () => { sandbox.addEventListener('drag:start', (event) => { event.detail.cancel(); }); @@ -83,11 +79,10 @@ describe('DragSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveCanceledSensorEvent('drag:start'); + expect(dragFlow).toHaveCanceledSensorEvent('drag:start'); }); - test('does not trigger `drag:start` event releasing mouse before timeout', () => { + it('does not trigger `drag:start` event releasing mouse before timeout', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -103,22 +98,16 @@ describe('DragSensor', () => { releaseMouse(document.body); } - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:start'); - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:stop'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:stop'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('triggers `drag:move` event while moving the mouse', () => { + it('triggers `drag:move` event while moving the mouse', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -129,11 +118,10 @@ describe('DragSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:move'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:move'); }); - test('triggers `drag:stop` event when releasing mouse', () => { + it('triggers `drag:stop` event when releasing mouse', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -144,11 +132,10 @@ describe('DragSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('does not trigger `drag:start` event when clicking on none draggable element', () => { + it('does not trigger `drag:start` event when clicking on none draggable element', () => { function dragFlow() { clickMouse(document.body); waitForDragDelay(); @@ -156,8 +143,6 @@ describe('DragSensor', () => { waitForDragDelay(); } - expect(dragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); }); diff --git a/src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js b/src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js index 2e577d0..fa5ebd6 100644 --- a/src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js +++ b/src/Draggable/Sensors/ForceTouchSensor/ForceTouchSensor.js @@ -1,11 +1,5 @@ import Sensor from '../Sensor'; - -import { - DragStartSensorEvent, - DragMoveSensorEvent, - DragStopSensorEvent, - DragPressureSensorEvent, -} from '../SensorEvent'; +import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent, DragPressureSensorEvent} from '../SensorEvent'; const onMouseForceWillBegin = Symbol('onMouseForceWillBegin'); const onMouseForceDown = Symbol('onMouseForceDown'); @@ -22,7 +16,6 @@ const onMouseForceGlobalChange = Symbol('onMouseForceGlobalChange'); * @extends Sensor */ export default class ForceTouchSensor extends Sensor { - /** * ForceTouchSensor constructor. * @constructs ForceTouchSensor diff --git a/src/Draggable/Sensors/MouseSensor/MouseSensor.js b/src/Draggable/Sensors/MouseSensor/MouseSensor.js index 72645cf..313bb11 100644 --- a/src/Draggable/Sensors/MouseSensor/MouseSensor.js +++ b/src/Draggable/Sensors/MouseSensor/MouseSensor.js @@ -1,11 +1,6 @@ import {closest} from 'shared/utils'; import Sensor from '../Sensor'; - -import { - DragStartSensorEvent, - DragMoveSensorEvent, - DragStopSensorEvent, -} from '../SensorEvent'; +import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent} from '../SensorEvent'; const onContextMenuWhileDragging = Symbol('onContextMenuWhileDragging'); const onMouseDown = Symbol('onMouseDown'); @@ -19,7 +14,6 @@ const onMouseUp = Symbol('onMouseUp'); * @extends Sensor */ export default class MouseSensor extends Sensor { - /** * MouseSensor constructor. * @constructs MouseSensor diff --git a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js index 5bc05f2..8d0d7ab 100644 --- a/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js +++ b/src/Draggable/Sensors/MouseSensor/tests/MouseSensor.test.js @@ -1,12 +1,4 @@ -import { - createSandbox, - triggerEvent, - waitForDragDelay, - DRAG_DELAY, - clickMouse, - moveMouse, - releaseMouse, -} from 'helper'; +import {createSandbox, triggerEvent, waitForDragDelay, DRAG_DELAY, clickMouse, moveMouse, releaseMouse} from 'helper'; import MouseSensor from '..'; @@ -35,18 +27,17 @@ describe('MouseSensor', () => { sandbox.parentNode.removeChild(sandbox); }); - test('triggers `drag:start` sensor event on mousedown', () => { + it('triggers `drag:start` sensor event on mousedown', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); }); - test('cancels `drag:start` event when canceling sensor event', () => { + it('cancels `drag:start` event when canceling sensor event', () => { sandbox.addEventListener('drag:start', (event) => { event.detail.cancel(); }); @@ -57,11 +48,10 @@ describe('MouseSensor', () => { releaseMouse(draggableElement); } - expect(dragFlow) - .toHaveCanceledSensorEvent('drag:start'); + expect(dragFlow).toHaveCanceledSensorEvent('drag:start'); }); - test('does not trigger `drag:start` event releasing mouse before timeout', () => { + it('does not trigger `drag:start` event releasing mouse before timeout', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -73,22 +63,16 @@ describe('MouseSensor', () => { releaseMouse(document.body); } - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:start'); - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:stop'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:stop'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('triggers `drag:move` event while moving the mouse', () => { + it('triggers `drag:move` event while moving the mouse', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -96,11 +80,10 @@ describe('MouseSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:move'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:move'); }); - test('triggers `drag:stop` event when releasing mouse', () => { + it('triggers `drag:stop` event when releasing mouse', () => { function dragFlow() { clickMouse(draggableElement); waitForDragDelay(); @@ -108,11 +91,10 @@ describe('MouseSensor', () => { releaseMouse(document.body); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('does not trigger `drag:start` event when right clicking or holding ctrl or meta key', () => { + it('does not trigger `drag:start` event when right clicking or holding ctrl or meta key', () => { function dragFlowWithRightClick() { clickMouse(draggableElement, {button: 2}); waitForDragDelay(); @@ -131,61 +113,45 @@ describe('MouseSensor', () => { releaseMouse(document.body); } - [ - dragFlowWithRightClick, - dragFlowWithCtrlKey, - dragFlowWithMetaKey, - ].forEach((dragFlow) => { - expect(dragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + [dragFlowWithRightClick, dragFlowWithCtrlKey, dragFlowWithMetaKey].forEach((dragFlow) => { + expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); }); - test('does not trigger `drag:start` event when clicking on none draggable element', () => { + it('does not trigger `drag:start` event when clicking on none draggable element', () => { function dragFlow() { clickMouse(document.body); waitForDragDelay(); } - expect(dragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); - test('prevents context menu while dragging', () => { + it('prevents context menu while dragging', () => { let contextMenuEvent = triggerEvent(draggableElement, 'contextmenu'); - expect(contextMenuEvent) - .not - .toHaveDefaultPrevented(); + expect(contextMenuEvent).not.toHaveDefaultPrevented(); clickMouse(draggableElement); waitForDragDelay(); contextMenuEvent = triggerEvent(draggableElement, 'contextmenu'); - expect(contextMenuEvent) - .toHaveDefaultPrevented(); + expect(contextMenuEvent).toHaveDefaultPrevented(); releaseMouse(draggableElement); }); - test('prevents native drag when initiating drag flow', () => { + it('prevents native drag when initiating drag flow', () => { let dragEvent = triggerEvent(draggableElement, 'dragstart'); - expect(dragEvent) - .not - .toHaveDefaultPrevented(); + expect(dragEvent).not.toHaveDefaultPrevented(); clickMouse(draggableElement); waitForDragDelay(); dragEvent = triggerEvent(draggableElement, 'dragstart'); - expect(dragEvent) - .toHaveDefaultPrevented(); + expect(dragEvent).toHaveDefaultPrevented(); releaseMouse(document.body); }); }); - - diff --git a/src/Draggable/Sensors/Sensor/Sensor.js b/src/Draggable/Sensors/Sensor/Sensor.js index 19bb84a..8b4e7fb 100644 --- a/src/Draggable/Sensors/Sensor/Sensor.js +++ b/src/Draggable/Sensors/Sensor/Sensor.js @@ -4,7 +4,6 @@ * @module Sensor */ export default class Sensor { - /** * Sensor constructor. * @constructs Sensor @@ -12,7 +11,6 @@ export default class Sensor { * @param {Object} options - Options */ constructor(containers = [], options = {}) { - /** * Current containers * @property containers @@ -69,6 +67,7 @@ export default class Sensor { event.initEvent(sensorEvent.type, true, true); element.dispatchEvent(event); this.lastEvent = sensorEvent; + return sensorEvent; } } diff --git a/src/Draggable/Sensors/Sensor/tests/Sensor.test.js b/src/Draggable/Sensors/Sensor/tests/Sensor.test.js index a9f4bd5..8cd547f 100644 --- a/src/Draggable/Sensors/Sensor/tests/Sensor.test.js +++ b/src/Draggable/Sensors/Sensor/tests/Sensor.test.js @@ -2,14 +2,14 @@ import Sensor from '../Sensor'; describe('Sensor', () => { describe('#constructor', () => { - test('should initialize with default containers and options', () => { + it('should initialize with default containers and options', () => { const sensor = new Sensor(); expect(sensor.containers).toMatchObject([]); expect(sensor.options).toMatchObject({}); }); - test('should initialize with containers and options', () => { + it('should initialize with containers and options', () => { const expectedContainers = ['expectedContainer']; const expectedOptions = {expectedOptions: true}; const sensor = new Sensor(expectedContainers, expectedOptions); @@ -20,9 +20,8 @@ describe('Sensor', () => { }); describe('#attach', () => { - test('should return self', () => { + it('should return self', () => { const sensor = new Sensor(); - const returnValue = sensor.attach(); expect(returnValue).toBe(sensor); @@ -30,9 +29,8 @@ describe('Sensor', () => { }); describe('#detach', () => { - test('should return self', () => { + it('should return self', () => { const sensor = new Sensor(); - const returnValue = sensor.attach(); expect(returnValue).toBe(sensor); @@ -40,7 +38,7 @@ describe('Sensor', () => { }); describe('#trigger', () => { - test('should dispatch event on element', () => { + it('should dispatch event on element', () => { const sensor = new Sensor(); const element = document.createElement('div'); const expectedEvent = { @@ -50,9 +48,13 @@ describe('Sensor', () => { let eventDispatched; - element.addEventListener('my:event', (event) => { - eventDispatched = event; - }, true); + element.addEventListener( + 'my:event', + (event) => { + eventDispatched = event; + }, + true, + ); const returnValue = sensor.trigger(element, expectedEvent); diff --git a/src/Draggable/Sensors/SensorEvent/SensorEvent.js b/src/Draggable/Sensors/SensorEvent/SensorEvent.js index 01f07d6..d5aa455 100644 --- a/src/Draggable/Sensors/SensorEvent/SensorEvent.js +++ b/src/Draggable/Sensors/SensorEvent/SensorEvent.js @@ -7,7 +7,6 @@ import AbstractEvent from 'shared/AbstractEvent'; * @extends AbstractEvent */ export class SensorEvent extends AbstractEvent { - /** * Original browser event that triggered a sensor * @property originalEvent diff --git a/src/Draggable/Sensors/TouchSensor/TouchSensor.js b/src/Draggable/Sensors/TouchSensor/TouchSensor.js index e1c5040..19bfac1 100644 --- a/src/Draggable/Sensors/TouchSensor/TouchSensor.js +++ b/src/Draggable/Sensors/TouchSensor/TouchSensor.js @@ -1,11 +1,6 @@ import {closest} from 'shared/utils'; import Sensor from '../Sensor'; - -import { - DragStartSensorEvent, - DragMoveSensorEvent, - DragStopSensorEvent, -} from '../SensorEvent'; +import {DragStartSensorEvent, DragMoveSensorEvent, DragStopSensorEvent} from '../SensorEvent'; const onTouchStart = Symbol('onTouchStart'); const onTouchHold = Symbol('onTouchHold'); @@ -16,9 +11,11 @@ const onScroll = Symbol('onScroll'); /** * Adds default document.ontouchmove. Workaround for preventing scrolling on touchmove */ -document.ontouchmove = document.ontouchmove || function() { - return true; -}; +document.ontouchmove = + document.ontouchmove || + function() { + return true; + }; /** * This sensor picks up native browser touch events and dictates drag operations @@ -27,7 +24,6 @@ document.ontouchmove = document.ontouchmove || function() { * @extends Sensor */ export default class TouchSensor extends Sensor { - /** * TouchSensor constructor. * @constructs TouchSensor @@ -118,7 +114,9 @@ export default class TouchSensor extends Sensor { */ [onTouchHold](event, container) { return () => { - if (this.touchMoved) { return; } + if (this.touchMoved) { + return; + } const touch = event.touches[0] || event.changedTouches[0]; const target = event.target; diff --git a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js index ea59807..5262912 100644 --- a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js +++ b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js @@ -1,12 +1,4 @@ -import { - createSandbox, - triggerEvent, - waitForDragDelay, - DRAG_DELAY, - touchStart, - touchMove, - touchRelease, -} from 'helper'; +import {createSandbox, triggerEvent, waitForDragDelay, DRAG_DELAY, touchStart, touchMove, touchRelease} from 'helper'; import TouchSensor from '..'; @@ -35,18 +27,17 @@ describe('TouchSensor', () => { sandbox.parentNode.removeChild(sandbox); }); - test('triggers `drag:start` sensor event on touchstart', () => { + it('triggers `drag:start` sensor event on touchstart', () => { function dragFlow() { touchStart(draggableElement); waitForDragDelay(); touchRelease(draggableElement); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); }); - test('cancels `drag:start` event when canceling sensor event', () => { + it('cancels `drag:start` event when canceling sensor event', () => { sandbox.addEventListener('drag:start', (event) => { event.detail.cancel(); }); @@ -57,11 +48,10 @@ describe('TouchSensor', () => { touchRelease(draggableElement); } - expect(dragFlow) - .toHaveCanceledSensorEvent('drag:start'); + expect(dragFlow).toHaveCanceledSensorEvent('drag:start'); }); - test('does not trigger `drag:start` event releasing finger before timeout', () => { + it('does not trigger `drag:start` event releasing finger before timeout', () => { function dragFlow() { touchStart(draggableElement); waitForDragDelay(); @@ -73,22 +63,16 @@ describe('TouchSensor', () => { touchRelease(document.body); } - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:start'); - expect(hastyDragFlow) - .not - .toHaveTriggeredSensorEvent('drag:stop'); + expect(hastyDragFlow).not.toHaveTriggeredSensorEvent('drag:stop'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:start'); - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('triggers `drag:move` event while moving the finger', () => { + it('triggers `drag:move` event while moving the finger', () => { function dragFlow() { touchStart(draggableElement); waitForDragDelay(); @@ -96,11 +80,10 @@ describe('TouchSensor', () => { touchRelease(draggableElement); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:move'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:move'); }); - test('triggers `drag:stop` event when releasing the finger', () => { + it('triggers `drag:stop` event when releasing the finger', () => { function dragFlow() { touchStart(draggableElement); waitForDragDelay(); @@ -108,87 +91,72 @@ describe('TouchSensor', () => { touchRelease(draggableElement); } - expect(dragFlow) - .toHaveTriggeredSensorEvent('drag:stop'); + expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop'); }); - test('does not trigger `drag:start` event when holding finger on none draggable element', () => { + it('does not trigger `drag:start` event when holding finger on none draggable element', () => { function dragFlow() { touchStart(document.body); waitForDragDelay(); } - expect(dragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); - test('cancels `drag:start` if browser starts scrolling instead', () => { + it('cancels `drag:start` if browser starts scrolling instead', () => { function dragFlow() { touchStart(draggableElement); triggerEvent(document.body, 'scroll'); waitForDragDelay(); } - expect(dragFlow) - .not - .toHaveTriggeredSensorEvent('drag:start'); + expect(dragFlow).not.toHaveTriggeredSensorEvent('drag:start'); }); - test('prevents context menu while dragging', () => { + it('prevents context menu while dragging', () => { touchStart(draggableElement); let contextMenuEvent = triggerEvent(draggableElement, 'contextmenu'); waitForDragDelay(); - expect(contextMenuEvent.defaultPrevented) - .toBe(true); + expect(contextMenuEvent.defaultPrevented).toBe(true); - expect(contextMenuEvent.stoppedPropagation) - .toBe(true); + expect(contextMenuEvent.stoppedPropagation).toBe(true); touchRelease(draggableElement); contextMenuEvent = triggerEvent(draggableElement, 'contextmenu'); - expect(contextMenuEvent.defaultPrevented) - .toBe(false); + expect(contextMenuEvent.defaultPrevented).toBe(false); - expect(contextMenuEvent.stoppedPropagation) - .toBeUndefined(); + expect(contextMenuEvent.stoppedPropagation).toBeUndefined(); }); - test('prevents scroll on touchmove while dragging', () => { + it('prevents scroll on touchmove while dragging', () => { let touchMoveEvent = touchMove(draggableElement); - expect(touchMoveEvent.defaultPrevented) - .toBe(false); + expect(touchMoveEvent.defaultPrevented).toBe(false); - expect(touchMoveEvent.stoppedPropagation) - .toBeUndefined(); + expect(touchMoveEvent.stoppedPropagation).toBeUndefined(); touchStart(draggableElement); waitForDragDelay(); touchMoveEvent = touchMove(draggableElement); - expect(touchMoveEvent.defaultPrevented) - .toBe(true); + expect(touchMoveEvent.defaultPrevented).toBe(true); - expect(touchMoveEvent.stoppedPropagation) - .toBe(true); + expect(touchMoveEvent.stoppedPropagation).toBe(true); touchRelease(draggableElement); }); - test('prevents clicking on touchend after dragging', () => { + it('prevents clicking on touchend after dragging', () => { let touchEndEvent = touchRelease(draggableElement); - expect(touchEndEvent.defaultPrevented) - .toBe(false); + expect(touchEndEvent.defaultPrevented).toBe(false); touchStart(draggableElement); waitForDragDelay(); touchEndEvent = touchRelease(draggableElement); - expect(touchEndEvent.defaultPrevented) - .toBe(true); + expect(touchEndEvent.defaultPrevented).toBe(true); }); }); diff --git a/src/Draggable/tests/Draggable.test.js b/src/Draggable/tests/Draggable.test.js index 5c3b9c8..41cbadf 100644 --- a/src/Draggable/tests/Draggable.test.js +++ b/src/Draggable/tests/Draggable.test.js @@ -1,35 +1,9 @@ -import { - createSandbox, - triggerEvent, - TestPlugin, -} from 'helper'; - -import Draggable, { - defaultOptions, -} from '../Draggable'; - -import { - DragStartEvent, - DragMoveEvent, - DragStopEvent, -} from '../DragEvent'; - -import { - DraggableInitializedEvent, - DraggableDestroyEvent, -} from '../DraggableEvent'; - -import { - Accessibility, - Mirror, - Scrollable, - Announcement, -} from '../Plugins'; - -import { - MouseSensor, - TouchSensor, -} from '../Sensors'; +import {createSandbox, triggerEvent, TestPlugin} from 'helper'; +import Draggable, {defaultOptions} from '../Draggable'; +import {DragStartEvent, DragMoveEvent, DragStopEvent} from '../DragEvent'; +import {DraggableInitializedEvent, DraggableDestroyEvent} from '../DraggableEvent'; +import {Accessibility, Mirror, Scrollable, Announcement} from '../Plugins'; +import {MouseSensor, TouchSensor} from '../Sensors'; const sampleMarkup = `