/
DOMModernPluginEventSystem-test.internal.js
122 lines (105 loc) · 3.55 KB
/
DOMModernPluginEventSystem-test.internal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
* 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;
function dispatchClickEvent(element) {
const event = document.createEvent('Event');
event.initEvent('click', true, true);
element.dispatchEvent(event);
}
describe('DOMModernPluginEventSystem', () => {
let container;
beforeEach(() => {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableModernEventSystem = true;
React = require('react');
ReactDOM = require('react-dom');
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
it('handle propagation of click events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
const log = [];
const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));
function Test() {
return (
<button
ref={buttonRef}
onClick={onClick}
onClickCapture={onClickCapture}>
<div ref={divRef} onClick={onClick} onClickCapture={onClickCapture}>
Click me!
</div>
</button>
);
}
ReactDOM.render(<Test />, container);
let buttonElement = buttonRef.current;
dispatchClickEvent(buttonElement);
expect(onClick).toHaveBeenCalledTimes(1);
expect(onClickCapture).toHaveBeenCalledTimes(1);
expect(log[0]).toEqual(['capture', buttonElement]);
expect(log[1]).toEqual(['bubble', buttonElement]);
let divElement = divRef.current;
dispatchClickEvent(divElement);
expect(onClick).toHaveBeenCalledTimes(3);
expect(onClickCapture).toHaveBeenCalledTimes(3);
expect(log[2]).toEqual(['capture', buttonElement]);
expect(log[3]).toEqual(['capture', divElement]);
expect(log[4]).toEqual(['bubble', divElement]);
expect(log[5]).toEqual(['bubble', buttonElement]);
});
it('handle propagation of focus events', () => {
const buttonRef = React.createRef();
const divRef = React.createRef();
const log = [];
const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));
const onFocusCapture = jest.fn(e => log.push(['capture', e.currentTarget]));
function Test() {
return (
<button
ref={buttonRef}
onFocus={onFocus}
onFocusCapture={onFocusCapture}>
<div
ref={divRef}
onFocus={onFocus}
onFocusCapture={onFocusCapture}
tabIndex={0}>
Click me!
</div>
</button>
);
}
ReactDOM.render(<Test />, container);
let buttonElement = buttonRef.current;
buttonElement.focus();
expect(onFocus).toHaveBeenCalledTimes(1);
expect(onFocusCapture).toHaveBeenCalledTimes(1);
expect(log[0]).toEqual(['capture', buttonElement]);
expect(log[1]).toEqual(['bubble', buttonElement]);
let divElement = divRef.current;
divElement.focus();
expect(onFocus).toHaveBeenCalledTimes(3);
expect(onFocusCapture).toHaveBeenCalledTimes(3);
expect(log[2]).toEqual(['capture', buttonElement]);
expect(log[3]).toEqual(['capture', divElement]);
expect(log[4]).toEqual(['bubble', divElement]);
expect(log[5]).toEqual(['bubble', buttonElement]);
});
});