Include rootEventTypes in DOMEventResponderSystem stopPropagation tests (#15433)
Nicolas Gallagher committed
Apr 17, 2019 at 13:08 UTC
0b50fb29f7147fd821e9a0c126eb297e27b639a5
2 files changed
+58
-15
packages/react-dom/src/events/DOMEventResponderSystem.js
+1
-1
@@ -540,8 +540,8 @@ function traverseAndTriggerEventResponderInstances(
540
let shouldStopPropagation = false;
541
let responderEvent;
542
543
- // Capture target phase
543
if (length > 0) {
544
+ // Capture target phase
545
responderEvent = createResponderEvent(
546
((topLevelType: any): string),
547
nativeEvent,
packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+57
-14
@@ -49,10 +49,14 @@ function phaseToString(phase) {
49
: 'capture';
50
}
51
52
+function dispatchEvent(element, type) {
53
+ const event = document.createEvent('Event');
54
+ event.initEvent(type, true, true);
55
+ element.dispatchEvent(event);
56
+}
57
+
58
function dispatchClickEvent(element) {
53
- const clickEvent = document.createEvent('Event');
54
- clickEvent.initEvent('click', true, true);
55
- element.dispatchEvent(clickEvent);
59
+ dispatchEvent(element, 'click');
60
}
61
62
function createReactEventTarget(type) {
@@ -308,7 +312,11 @@ describe('DOMEventResponderSystem', () => {
312
['click'],
313
undefined,
314
(event, context, props) => {
311
- eventLog.push(`A [${phaseToString(event.phase)}]`);
315
+ context.addRootEventTypes(event.target.ownerDocument, [
316
+ 'click',
317
+ 'pointermove',
318
+ ]);
319
+ eventLog.push(`A [${event.type}, ${phaseToString(event.phase)}]`);
320
},
321
);
322
@@ -316,7 +324,11 @@ describe('DOMEventResponderSystem', () => {
324
['click'],
325
undefined,
326
(event, context, props) => {
319
- eventLog.push(`B [${phaseToString(event.phase)}]`);
327
+ context.addRootEventTypes(event.target.ownerDocument, [
328
+ 'click',
329
+ 'pointermove',
330
+ ]);
331
+ eventLog.push(`B [${event.type}, ${phaseToString(event.phase)}]`);
332
if (event.phase === stopPropagationOnPhase) {
333
return true;
334
}
@@ -337,12 +349,26 @@ describe('DOMEventResponderSystem', () => {
349
ReactDOM.render(<Test />, container);
350
let buttonElement = buttonRef.current;
351
dispatchClickEvent(buttonElement);
352
+ dispatchEvent(buttonElement, 'pointermove');
353
}
354
355
runTestWithPhase(BUBBLE_PHASE);
343
- expect(eventLog).toEqual(['A [capture]', 'B [capture]', 'B [bubble]']);
356
+ // Root phase should not be skipped for different event type
357
+ expect(eventLog).toEqual([
358
+ 'A [click, capture]',
359
+ 'B [click, capture]',
360
+ 'B [click, bubble]',
361
+ 'A [pointermove, root]',
362
+ 'B [pointermove, root]',
363
+ ]);
364
runTestWithPhase(CAPTURE_PHASE);
345
- expect(eventLog).toEqual(['A [capture]', 'B [capture]']);
365
+ // Root phase should not be skipped for different event type
366
+ expect(eventLog).toEqual([
367
+ 'A [click, capture]',
368
+ 'B [click, capture]',
369
+ 'A [pointermove, root]',
370
+ 'B [pointermove, root]',
371
+ ]);
372
});
373
374
it('nested event responders and their onEvent() should fire in the correct order with stopPropagation #2', () => {
@@ -354,7 +380,11 @@ describe('DOMEventResponderSystem', () => {
380
['click'],
381
undefined,
382
(event, context, props) => {
357
- eventLog.push(`A [${phaseToString(event.phase)}]`);
383
+ context.addRootEventTypes(event.target.ownerDocument, [
384
+ 'click',
385
+ 'pointermove',
386
+ ]);
387
+ eventLog.push(`A [${event.type}, ${phaseToString(event.phase)}]`);
388
if (event.phase === stopPropagationOnPhase) {
389
return true;
390
}
@@ -365,7 +395,11 @@ describe('DOMEventResponderSystem', () => {
395
['click'],
396
undefined,
397
(event, context, props) => {
368
- eventLog.push(`B [${phaseToString(event.phase)}]`);
398
+ context.addRootEventTypes(event.target.ownerDocument, [
399
+ 'click',
400
+ 'pointermove',
401
+ ]);
402
+ eventLog.push(`B [${event.type}, ${phaseToString(event.phase)}]`);
403
},
404
);
405
@@ -383,17 +417,26 @@ describe('DOMEventResponderSystem', () => {
417
ReactDOM.render(<Test />, container);
418
let buttonElement = buttonRef.current;
419
dispatchClickEvent(buttonElement);
420
+ dispatchEvent(buttonElement, 'pointermove');
421
}
422
423
runTestWithPhase(BUBBLE_PHASE);
424
+ // Root phase should not be skipped for different event type
425
expect(eventLog).toEqual([
390
- 'A [capture]',
391
- 'B [capture]',
392
- 'B [bubble]',
393
- 'A [bubble]',
426
+ 'A [click, capture]',
427
+ 'B [click, capture]',
428
+ 'B [click, bubble]',
429
+ 'A [click, bubble]',
430
+ 'A [pointermove, root]',
431
+ 'B [pointermove, root]',
432
]);
433
runTestWithPhase(CAPTURE_PHASE);
396
- expect(eventLog).toEqual(['A [capture]']);
434
+ // Root phase should not be skipped for different event type
435
+ expect(eventLog).toEqual([
436
+ 'A [click, capture]',
437
+ 'A [pointermove, root]',
438
+ 'B [pointermove, root]',
439
+ ]);
440
});
441
442
it('custom event dispatching for click -> magicClick works', () => {