From 3f736c360efdb83edc323bc0b8bd197805828b9b Mon Sep 17 00:00:00 2001 From: Whien Date: Fri, 1 Dec 2017 05:22:58 +0800 Subject: [PATCH] Test: create TapEventPlugin-test (#11727) * Test: create TapEventPlugin-test * move TapEventPlugin to TapEventPlugin-test.internal.js from ReactBrowserEventEmitter-test.internal.js * Prittier: run prittier * run prittier * Fix: fix CI test error fix CI test error by lint * Test: remove TapEventPlugin test code * remove TapEventPlugin test code from ReactBrowserEventEmitter-test.internal.js --- .../ReactBrowserEventEmitter-test.internal.js | 81 --------- .../__tests__/TapEventPlugin-test.internal.js | 172 ++++++++++++++++++ 2 files changed, 172 insertions(+), 81 deletions(-) create mode 100644 packages/react-dom/src/__tests__/TapEventPlugin-test.internal.js diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js index 09d631e548..ddbd8fa95e 100644 --- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js @@ -16,9 +16,7 @@ var ReactDOM; var ReactDOMComponentTree; var ReactBrowserEventEmitter; var ReactTestUtils; -var TapEventPlugin; -var tapMoveThreshold; var idCallOrder; var recordID = function(id) { idCallOrder.push(id); @@ -33,7 +31,6 @@ var recordIDAndReturnFalse = function(id, event) { }; var LISTENER = jest.fn(); var ON_CLICK_KEY = 'onClick'; -var ON_TOUCH_TAP_KEY = 'onTouchTap'; var ON_CHANGE_KEY = 'onChange'; var ON_MOUSE_ENTER_KEY = 'onMouseEnter'; @@ -65,7 +62,6 @@ describe('ReactBrowserEventEmitter', () => { ReactDOMComponentTree = require('../client/ReactDOMComponentTree'); ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter'); ReactTestUtils = require('react-dom/test-utils'); - TapEventPlugin = require('../events/TapEventPlugin').default; var container = document.createElement('div'); @@ -131,20 +127,6 @@ describe('ReactBrowserEventEmitter', () => { }; idCallOrder = []; - tapMoveThreshold = TapEventPlugin.tapMoveThreshold; - spyOnDev(console, 'warn'); - EventPluginHub.injection.injectEventPluginsByName({ - TapEventPlugin: TapEventPlugin, - }); - }); - - afterEach(() => { - if (__DEV__) { - expect(console.warn.calls.count()).toBe(1); - expect(console.warn.calls.argsFor(0)[0]).toContain( - 'Injecting custom event plugins (TapEventPlugin) is deprecated', - ); - } }); it('should store a listener correctly', () => { @@ -343,47 +325,6 @@ describe('ReactBrowserEventEmitter', () => { expect(idCallOrder[0]).toBe(CHILD); }); - it('should infer onTouchTap from a touchStart/End', () => { - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); - ReactTestUtils.SimulateNative.touchStart( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - ReactTestUtils.SimulateNative.touchEnd( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - expect(idCallOrder.length).toBe(1); - expect(idCallOrder[0]).toBe(CHILD); - }); - - it('should infer onTouchTap from when dragging below threshold', () => { - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); - ReactTestUtils.SimulateNative.touchStart( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - ReactTestUtils.SimulateNative.touchEnd( - CHILD, - ReactTestUtils.nativeTouchData(0, tapMoveThreshold - 1), - ); - expect(idCallOrder.length).toBe(1); - expect(idCallOrder[0]).toBe(CHILD); - }); - - it('should not onTouchTap from when dragging beyond threshold', () => { - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); - ReactTestUtils.SimulateNative.touchStart( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - ReactTestUtils.SimulateNative.touchEnd( - CHILD, - ReactTestUtils.nativeTouchData(0, tapMoveThreshold + 1), - ); - expect(idCallOrder.length).toBe(0); - }); - it('should listen to events only once', () => { spyOnDevAndProd(EventTarget.prototype, 'addEventListener'); ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document); @@ -420,26 +361,4 @@ describe('ReactBrowserEventEmitter', () => { expect(dependencies.indexOf(setEventListeners[i])).toBeTruthy(); } }); - - it('should bubble onTouchTap', () => { - putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); - putListener(PARENT, ON_TOUCH_TAP_KEY, recordID.bind(null, PARENT)); - putListener( - GRANDPARENT, - ON_TOUCH_TAP_KEY, - recordID.bind(null, GRANDPARENT), - ); - ReactTestUtils.SimulateNative.touchStart( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - ReactTestUtils.SimulateNative.touchEnd( - CHILD, - ReactTestUtils.nativeTouchData(0, 0), - ); - expect(idCallOrder.length).toBe(3); - expect(idCallOrder[0] === CHILD).toBe(true); - expect(idCallOrder[1] === PARENT).toBe(true); - expect(idCallOrder[2] === GRANDPARENT).toBe(true); - }); }); diff --git a/packages/react-dom/src/__tests__/TapEventPlugin-test.internal.js b/packages/react-dom/src/__tests__/TapEventPlugin-test.internal.js new file mode 100644 index 0000000000..ae5274d527 --- /dev/null +++ b/packages/react-dom/src/__tests__/TapEventPlugin-test.internal.js @@ -0,0 +1,172 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * 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'; + +var EventPluginHub; +var React; +var ReactDOM; +var ReactTestUtils; +var TapEventPlugin; + +var tapMoveThreshold; +var idCallOrder; +var recordID = function(id) { + idCallOrder.push(id); +}; +var LISTENER = jest.fn(); +var ON_TOUCH_TAP_KEY = 'onTouchTap'; + +var GRANDPARENT; +var PARENT; +var CHILD; + +var putListener; + +describe('TapEventPlugin', () => { + beforeEach(() => { + jest.resetModules(); + LISTENER.mockClear(); + + EventPluginHub = require('events/EventPluginHub'); + React = require('react'); + ReactDOM = require('react-dom'); + ReactTestUtils = require('react-dom/test-utils'); + TapEventPlugin = require('react-dom/src/events/TapEventPlugin').default; + + var container = document.createElement('div'); + + var GRANDPARENT_PROPS = {}; + var PARENT_PROPS = {}; + var CHILD_PROPS = {}; + + function Child(props) { + return
(CHILD = c)} {...props} />; + } + + class ChildWrapper extends React.PureComponent { + render() { + return ; + } + } + + function renderTree() { + ReactDOM.render( +
(GRANDPARENT = c)} {...GRANDPARENT_PROPS}> +
(PARENT = c)} {...PARENT_PROPS}> + +
+
, + container, + ); + } + + renderTree(); + + putListener = function(node, eventName, listener) { + switch (node) { + case CHILD: + CHILD_PROPS[eventName] = listener; + break; + case PARENT: + PARENT_PROPS[eventName] = listener; + break; + case GRANDPARENT: + GRANDPARENT_PROPS[eventName] = listener; + break; + } + renderTree(); + }; + + idCallOrder = []; + tapMoveThreshold = TapEventPlugin.tapMoveThreshold; + spyOnDev(console, 'warn'); + EventPluginHub.injection.injectEventPluginsByName({ + TapEventPlugin: TapEventPlugin, + }); + }); + + afterEach(() => { + if (__DEV__) { + expect(console.warn.calls.count()).toBe(1); + expect(console.warn.calls.argsFor(0)[0]).toContain( + 'Injecting custom event plugins (TapEventPlugin) is deprecated', + ); + } + }); + + /** + * The onTouchTap inject is ignore future, + * we should always test the deprecated message correct. + * See https://github.com/facebook/react/issues/11689 + */ + + it('should infer onTouchTap from a touchStart/End', () => { + putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); + ReactTestUtils.SimulateNative.touchStart( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + ReactTestUtils.SimulateNative.touchEnd( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + expect(idCallOrder.length).toBe(1); + expect(idCallOrder[0]).toBe(CHILD); + }); + + it('should infer onTouchTap from when dragging below threshold', () => { + putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); + ReactTestUtils.SimulateNative.touchStart( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + ReactTestUtils.SimulateNative.touchEnd( + CHILD, + ReactTestUtils.nativeTouchData(0, tapMoveThreshold - 1), + ); + expect(idCallOrder.length).toBe(1); + expect(idCallOrder[0]).toBe(CHILD); + }); + + it('should not onTouchTap from when dragging beyond threshold', () => { + putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); + ReactTestUtils.SimulateNative.touchStart( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + ReactTestUtils.SimulateNative.touchEnd( + CHILD, + ReactTestUtils.nativeTouchData(0, tapMoveThreshold + 1), + ); + expect(idCallOrder.length).toBe(0); + }); + + it('should bubble onTouchTap', () => { + putListener(CHILD, ON_TOUCH_TAP_KEY, recordID.bind(null, CHILD)); + putListener(PARENT, ON_TOUCH_TAP_KEY, recordID.bind(null, PARENT)); + putListener( + GRANDPARENT, + ON_TOUCH_TAP_KEY, + recordID.bind(null, GRANDPARENT), + ); + ReactTestUtils.SimulateNative.touchStart( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + ReactTestUtils.SimulateNative.touchEnd( + CHILD, + ReactTestUtils.nativeTouchData(0, 0), + ); + expect(idCallOrder.length).toBe(3); + expect(idCallOrder[0] === CHILD).toBe(true); + expect(idCallOrder[1] === PARENT).toBe(true); + expect(idCallOrder[2] === GRANDPARENT).toBe(true); + }); +});