Add a test for non-passive event handlers for events affected by the browsers' intervention (#19658)
Toru Kobayashi committed
Aug 24, 2020 at 22:30 UTC
2ada4bd0c2c8e2ccac0c3c952712d6e03c9a7362
1 file changed
+61
packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+61
@@ -3137,6 +3137,67 @@ describe('DOMPluginEventSystem', () => {
3137
3138
expect(onClick).toHaveBeenCalledTimes(1);
3139
});
3140
+
3141
+ // @gate experimental
3142
+ it('should be able to register non-passive handlers for events affected by the intervention', () => {
3143
+ const rootContainer = document.createElement('div');
3144
+ container.appendChild(rootContainer);
3145
+
3146
+ const defaultPreventedEvents = [];
3147
+ const handler = e => {
3148
+ if (e.defaultPrevented) defaultPreventedEvents.push(e.type);
3149
+ };
3150
+
3151
+ container.addEventListener('touchstart', handler);
3152
+ container.addEventListener('touchmove', handler);
3153
+ container.addEventListener('wheel', handler);
3154
+
3155
+ const ref = React.createRef();
3156
+ const setTouchStart = ReactDOM.unstable_createEventHandle(
3157
+ 'touchstart',
3158
+ {passive: false},
3159
+ );
3160
+ const setTouchMove = ReactDOM.unstable_createEventHandle(
3161
+ 'touchmove',
3162
+ {passive: false},
3163
+ );
3164
+ const setWheel = ReactDOM.unstable_createEventHandle('wheel', {
3165
+ passive: false,
3166
+ });
3167
+
3168
+ function Component() {
3169
+ React.useEffect(() => {
3170
+ const clearTouchStart = setTouchStart(ref.current, e =>
3171
+ e.preventDefault(),
3172
+ );
3173
+ const clearTouchMove = setTouchMove(ref.current, e =>
3174
+ e.preventDefault(),
3175
+ );
3176
+ const clearWheel = setWheel(ref.current, e =>
3177
+ e.preventDefault(),
3178
+ );
3179
+ return () => {
3180
+ clearTouchStart();
3181
+ clearTouchMove();
3182
+ clearWheel();
3183
+ };
3184
+ });
3185
+ return <div ref={ref}>test</div>;
3186
+ }
3187
+
3188
+ ReactDOM.render(<Component />, rootContainer);
3189
+ Scheduler.unstable_flushAll();
3190
+
3191
+ dispatchEvent(ref.current, 'touchstart');
3192
+ dispatchEvent(ref.current, 'touchmove');
3193
+ dispatchEvent(ref.current, 'wheel');
3194
+
3195
+ expect(defaultPreventedEvents).toEqual([
3196
+ 'touchstart',
3197
+ 'touchmove',
3198
+ 'wheel',
3199
+ ]);
3200
+ });
3201
});
3202
});
3203
},