From 2590cac99b6b08f62d1eb6e1f0b1375e362c8a42 Mon Sep 17 00:00:00 2001 From: behzad88 Date: Tue, 2 Apr 2019 19:42:30 +0430 Subject: [PATCH 1/3] writing unit tests in experimental event Drag API --- packages/react-events/src/Drag.js | 14 ++ .../src/__tests__/Drag-test.internal.js | 121 ++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 packages/react-events/src/__tests__/Drag-test.internal.js diff --git a/packages/react-events/src/Drag.js b/packages/react-events/src/Drag.js index 7181b4efa233b..eb8f10132dbdd 100644 --- a/packages/react-events/src/Drag.js +++ b/packages/react-events/src/Drag.js @@ -72,6 +72,9 @@ const DragResponder = { case 'mousedown': case 'pointerdown': { if (!state.isDragging) { + if (props.onShouldClaimOwnership) { + context.releaseOwnership(state.dragTarget); + } const obj = eventType === 'touchstart' ? (event: any).changedTouches[0] : event; const x = (state.startX = (obj: any).screenX); @@ -80,6 +83,17 @@ const DragResponder = { state.y = y; state.dragTarget = eventTarget; state.isPointerDown = true; + + if (props.onDragStart) { + dispatchDragEvent( + context, + 'dragstart', + props.onDragStart, + state, + true, + ); + } + context.addRootEventTypes(rootEventTypes); } break; diff --git a/packages/react-events/src/__tests__/Drag-test.internal.js b/packages/react-events/src/__tests__/Drag-test.internal.js new file mode 100644 index 0000000000000..b5d590ae4c42c --- /dev/null +++ b/packages/react-events/src/__tests__/Drag-test.internal.js @@ -0,0 +1,121 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactFeatureFlags; +let ReactDOM; +let Drag; +let dragMoveOptions = [ + 'mousemove', + true, //canBubble + true, //cancelable + window, //event's AbstractView : should be window + 1, // detail : Event's mouse click count + 50, // screenX + 50, // screenY + 50, // clientX + 50, // clientY +]; + +describe('Drag event responder', () => { + let container; + + beforeEach(() => { + jest.resetModules(); + ReactFeatureFlags = require('shared/ReactFeatureFlags'); + ReactFeatureFlags.enableEventAPI = true; + React = require('react'); + ReactDOM = require('react-dom'); + Drag = require('react-events/drag'); + + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('should support onDragChange', () => { + let divRef = React.createRef(); + let events = []; + + function handleOnDrag(e) { + if (e) { + events.push('dragging'); + } else { + events.push('dragend'); + } + } + + function Component() { + return ( + +
Drag me!
+ + ); + } + + ReactDOM.render(, container); + + const mouseOverEvent = document.createEvent('Event'); + mouseOverEvent.initEvent('mousedown', true, true); + divRef.current.dispatchEvent(mouseOverEvent); + + const mouseOutEvent = document.createEvent('MouseEvents'); + mouseOutEvent.initMouseEvent(...dragMoveOptions); + divRef.current.dispatchEvent(mouseOutEvent); + + const mouseUpEvent = document.createEvent('Event'); + mouseUpEvent.initEvent('mouseup', true, true); + divRef.current.dispatchEvent(mouseUpEvent); + + expect(events).toEqual(['dragging', 'dragend']); + }); + + it('should support onDragStart and onDragEnd', () => { + let divRef = React.createRef(); + let events = []; + + function handleDragStart() { + events.push('dragstart'); + } + + function handleDragEnd() { + events.push('dragend'); + } + + function Component() { + return ( + +
Drag me!
+ + ); + } + + ReactDOM.render(, container); + + const mouseOverEvent = document.createEvent('Event'); + mouseOverEvent.initEvent('mousedown', true, true); + divRef.current.dispatchEvent(mouseOverEvent); + + const mouseOutEvent = document.createEvent('MouseEvents'); + mouseOutEvent.initMouseEvent(...dragMoveOptions); + divRef.current.dispatchEvent(mouseOutEvent); + + const mouseUpEvent = document.createEvent('Event'); + mouseUpEvent.initEvent('mouseup', true, true); + divRef.current.dispatchEvent(mouseUpEvent); + + expect(events).toEqual(['dragstart', 'dragend']); + }); +}); From 3c156ec6760999f66af3eac758e3a49eaf47efee Mon Sep 17 00:00:00 2001 From: behzad88 Date: Tue, 2 Apr 2019 21:33:12 +0430 Subject: [PATCH 2/3] add onDragMove unit test --- .../src/__tests__/Drag-test.internal.js | 127 ++++++++++++++---- 1 file changed, 98 insertions(+), 29 deletions(-) diff --git a/packages/react-events/src/__tests__/Drag-test.internal.js b/packages/react-events/src/__tests__/Drag-test.internal.js index b5d590ae4c42c..96196242c83d0 100644 --- a/packages/react-events/src/__tests__/Drag-test.internal.js +++ b/packages/react-events/src/__tests__/Drag-test.internal.js @@ -13,18 +13,6 @@ let React; let ReactFeatureFlags; let ReactDOM; let Drag; -let dragMoveOptions = [ - 'mousemove', - true, //canBubble - true, //cancelable - window, //event's AbstractView : should be window - 1, // detail : Event's mouse click count - 50, // screenX - 50, // screenY - 50, // clientX - 50, // clientY -]; - describe('Drag event responder', () => { let container; @@ -49,12 +37,8 @@ describe('Drag event responder', () => { let divRef = React.createRef(); let events = []; - function handleOnDrag(e) { - if (e) { - events.push('dragging'); - } else { - events.push('dragend'); - } + function handleOnDrag() { + events.push({isChanged: true}); } function Component() { @@ -67,19 +51,35 @@ describe('Drag event responder', () => { ReactDOM.render(, container); - const mouseOverEvent = document.createEvent('Event'); + const mouseOverEvent = document.createEvent('MouseEvents'); mouseOverEvent.initEvent('mousedown', true, true); divRef.current.dispatchEvent(mouseOverEvent); - const mouseOutEvent = document.createEvent('MouseEvents'); - mouseOutEvent.initMouseEvent(...dragMoveOptions); - divRef.current.dispatchEvent(mouseOutEvent); + const mouseMoveEvent = document.createEvent('MouseEvents'); + for (let index = 0; index <= 20; index++) { + mouseMoveEvent.initMouseEvent( + 'mousemove', + true, + true, + window, + 1, + index, + index, + 50, + 50, + ); + divRef.current.dispatchEvent(mouseMoveEvent); + } + divRef.current.dispatchEvent(mouseMoveEvent); - const mouseUpEvent = document.createEvent('Event'); + const mouseUpEvent = document.createEvent('MouseEvents'); mouseUpEvent.initEvent('mouseup', true, true); divRef.current.dispatchEvent(mouseUpEvent); - expect(events).toEqual(['dragging', 'dragend']); + expect(events).toHaveLength(2); + expect(events).toEqual( + expect.arrayContaining([expect.objectContaining({isChanged: true})]), + ); }); it('should support onDragStart and onDragEnd', () => { @@ -104,18 +104,87 @@ describe('Drag event responder', () => { ReactDOM.render(, container); - const mouseOverEvent = document.createEvent('Event'); + const mouseOverEvent = document.createEvent('MouseEvents'); mouseOverEvent.initEvent('mousedown', true, true); divRef.current.dispatchEvent(mouseOverEvent); - const mouseOutEvent = document.createEvent('MouseEvents'); - mouseOutEvent.initMouseEvent(...dragMoveOptions); - divRef.current.dispatchEvent(mouseOutEvent); + const mouseMoveEvent = document.createEvent('MouseEvents'); + for (let index = 0; index <= 20; index++) { + mouseMoveEvent.initMouseEvent( + 'mousemove', + true, + true, + window, + 1, + index, + index, + 50, + 50, + ); + divRef.current.dispatchEvent(mouseMoveEvent); + } + divRef.current.dispatchEvent(mouseMoveEvent); - const mouseUpEvent = document.createEvent('Event'); + const mouseUpEvent = document.createEvent('MouseEvents'); mouseUpEvent.initEvent('mouseup', true, true); divRef.current.dispatchEvent(mouseUpEvent); expect(events).toEqual(['dragstart', 'dragend']); }); + + it('should support onDragMove', () => { + let divRef = React.createRef(); + let events = []; + + function handleDragMove(e) { + events.push({ + diffX: e.diffX, + diffY: e.diffY, + }); + } + + function Component() { + return ( + +
Drag me!
+ + ); + } + + ReactDOM.render(, container); + + const mouseOverEvent = document.createEvent('MouseEvents'); + mouseOverEvent.initEvent('mousedown', true, true); + divRef.current.dispatchEvent(mouseOverEvent); + + const mouseMoveEvent = document.createEvent('MouseEvents'); + for (let index = 0; index <= 20; index++) { + mouseMoveEvent.initMouseEvent( + 'mousemove', + true, + true, + window, + 1, + index, + index, + 50, + 50, + ); + divRef.current.dispatchEvent(mouseMoveEvent); + } + + const mouseUpEvent = document.createEvent('MouseEvents'); + mouseUpEvent.initEvent('mouseup', true, true); + divRef.current.dispatchEvent(mouseUpEvent); + expect(events).toHaveLength(20); + let index = 0; + expect(events).toEqual( + expect.arrayContaining([ + expect.objectContaining({ + diffX: index, + diffY: index++, + }), + ]), + ); + }); }); From 0a685a4ca6ada012c57968e4234cc0de2ce78d99 Mon Sep 17 00:00:00 2001 From: behzad88 Date: Wed, 3 Apr 2019 00:37:03 +0430 Subject: [PATCH 3/3] fix dragstart event type --- packages/react-events/src/Drag.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-events/src/Drag.js b/packages/react-events/src/Drag.js index 6c98872127df5..081f135e782ec 100644 --- a/packages/react-events/src/Drag.js +++ b/packages/react-events/src/Drag.js @@ -37,7 +37,7 @@ type EventData = { diffX: number, diffY: number, }; -type DragEventType = 'dragend' | 'dragchange' | 'dragmove'; +type DragEventType = 'dragstart' | 'dragend' | 'dragchange' | 'dragmove'; type DragEvent = {| listener: DragEvent => void,