Convert SimpleEventPlugin to createRoot (#28164)
Sebastian Silbermann committed
Jan 30, 2024 at 22:22 UTC
13aae52aea07b59b17aebaf65fd83d1c67c6ecb4
1 file changed
+91
-63
packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+91
-63
@@ -11,7 +11,6 @@
11
12
describe('SimpleEventPlugin', function () {
13
let React;
14
- let ReactDOM;
14
let ReactDOMClient;
15
let Scheduler;
16
let act;
@@ -21,8 +20,10 @@ describe('SimpleEventPlugin', function () {
20
let assertLog;
21
let waitForAll;
22
24
- function expectClickThru(element) {
25
- element.click();
23
+ async function expectClickThru(element) {
24
+ await act(() => {
25
+ element.click();
26
+ });
27
expect(onClick).toHaveBeenCalledTimes(1);
28
}
29
@@ -31,23 +32,27 @@ describe('SimpleEventPlugin', function () {
32
expect(onClick).toHaveBeenCalledTimes(0);
33
}
34
34
- function mounted(element) {
35
+ async function mounted(element) {
36
container = document.createElement('div');
37
document.body.appendChild(container);
37
- element = ReactDOM.render(element, container);
38
+ const root = ReactDOMClient.createRoot(container);
39
+ await act(() => {
40
+ root.render(element);
41
+ });
42
+ element = container.firstChild;
43
return element;
44
}
45
46
beforeEach(function () {
47
jest.resetModules();
48
React = require('react');
44
- ReactDOM = require('react-dom');
49
ReactDOMClient = require('react-dom/client');
50
Scheduler = require('scheduler');
51
52
const InternalTestUtils = require('internal-test-utils');
53
assertLog = InternalTestUtils.assertLog;
54
waitForAll = InternalTestUtils.waitForAll;
55
+ act = InternalTestUtils.act;
56
57
onClick = jest.fn();
58
});
@@ -59,13 +64,13 @@ describe('SimpleEventPlugin', function () {
64
}
65
});
66
62
- it('A non-interactive tags click when disabled', function () {
67
+ it('A non-interactive tags click when disabled', async function () {
68
const element = <div onClick={onClick} />;
64
- expectClickThru(mounted(element));
69
+ await expectClickThru(await mounted(element));
70
});
71
67
- it('A non-interactive tags clicks bubble when disabled', function () {
68
- const element = mounted(
72
+ it('A non-interactive tags clicks bubble when disabled', async function () {
73
+ const element = await mounted(
74
<div onClick={onClick}>
75
<div />
76
</div>,
@@ -75,8 +80,8 @@ describe('SimpleEventPlugin', function () {
80
expect(onClick).toHaveBeenCalledTimes(1);
81
});
82
78
- it('does not register a click when clicking a child of a disabled element', function () {
79
- const element = mounted(
83
+ it('does not register a click when clicking a child of a disabled element', async function () {
84
+ const element = await mounted(
85
<button onClick={onClick} disabled={true}>
86
<span />
87
</button>,
@@ -87,8 +92,8 @@ describe('SimpleEventPlugin', function () {
92
expect(onClick).toHaveBeenCalledTimes(0);
93
});
94
90
- it('triggers click events for children of disabled elements', function () {
91
- const element = mounted(
95
+ it('triggers click events for children of disabled elements', async function () {
96
+ const element = await mounted(
97
<button disabled={true}>
98
<span onClick={onClick} />
99
</button>,
@@ -99,8 +104,8 @@ describe('SimpleEventPlugin', function () {
104
expect(onClick).toHaveBeenCalledTimes(1);
105
});
106
102
- it('triggers parent captured click events when target is a child of a disabled elements', function () {
103
- const element = mounted(
107
+ it('triggers parent captured click events when target is a child of a disabled elements', async function () {
108
+ const element = await mounted(
109
<div onClickCapture={onClick}>
110
<button disabled={true}>
111
<span />
@@ -113,8 +118,8 @@ describe('SimpleEventPlugin', function () {
118
expect(onClick).toHaveBeenCalledTimes(1);
119
});
120
116
- it('triggers captured click events for children of disabled elements', function () {
117
- const element = mounted(
121
+ it('triggers captured click events for children of disabled elements', async function () {
122
+ const element = await mounted(
123
<button disabled={true}>
124
<span onClickCapture={onClick} />
125
</button>,
@@ -127,68 +132,76 @@ describe('SimpleEventPlugin', function () {
132
133
['button', 'input', 'select', 'textarea'].forEach(function (tagName) {
134
describe(tagName, function () {
130
- it('should forward clicks when it starts out not disabled', () => {
135
+ it('should forward clicks when it starts out not disabled', async () => {
136
const element = React.createElement(tagName, {
137
onClick: onClick,
138
});
139
135
- expectClickThru(mounted(element));
140
+ await expectClickThru(await mounted(element));
141
});
142
138
- it('should not forward clicks when it starts out disabled', () => {
143
+ it('should not forward clicks when it starts out disabled', async () => {
144
const element = React.createElement(tagName, {
145
onClick: onClick,
146
disabled: true,
147
});
148
144
- expectNoClickThru(mounted(element));
149
+ await expectNoClickThru(await mounted(element));
150
});
151
147
- it('should forward clicks when it becomes not disabled', () => {
152
+ it('should forward clicks when it becomes not disabled', async () => {
153
container = document.createElement('div');
154
document.body.appendChild(container);
150
- let element = ReactDOM.render(
151
- React.createElement(tagName, {onClick: onClick, disabled: true}),
152
- container,
153
- );
154
- element = ReactDOM.render(
155
- React.createElement(tagName, {onClick: onClick}),
156
- container,
157
- );
158
- expectClickThru(element);
155
+ const root = ReactDOMClient.createRoot(container);
156
+ await act(() => {
157
+ root.render(
158
+ React.createElement(tagName, {onClick: onClick, disabled: true}),
159
+ );
160
+ });
161
+ await act(() => {
162
+ root.render(React.createElement(tagName, {onClick: onClick}));
163
+ });
164
+ const element = container.firstChild;
165
+ await expectClickThru(element);
166
});
167
161
- it('should not forward clicks when it becomes disabled', () => {
168
+ it('should not forward clicks when it becomes disabled', async () => {
169
container = document.createElement('div');
170
document.body.appendChild(container);
164
- let element = ReactDOM.render(
165
- React.createElement(tagName, {onClick: onClick}),
166
- container,
167
- );
168
- element = ReactDOM.render(
169
- React.createElement(tagName, {onClick: onClick, disabled: true}),
170
- container,
171
- );
171
+ const root = ReactDOMClient.createRoot(container);
172
+ await act(() => {
173
+ root.render(React.createElement(tagName, {onClick: onClick}));
174
+ });
175
+ await act(() => {
176
+ root.render(
177
+ React.createElement(tagName, {onClick: onClick, disabled: true}),
178
+ );
179
+ });
180
+ const element = container.firstChild;
181
expectNoClickThru(element);
182
});
183
175
- it('should work correctly if the listener is changed', () => {
184
+ it('should work correctly if the listener is changed', async () => {
185
container = document.createElement('div');
186
document.body.appendChild(container);
178
- let element = ReactDOM.render(
179
- React.createElement(tagName, {onClick: onClick, disabled: true}),
180
- container,
181
- );
182
- element = ReactDOM.render(
183
- React.createElement(tagName, {onClick: onClick, disabled: false}),
184
- container,
185
- );
186
- expectClickThru(element);
187
+ const root = ReactDOMClient.createRoot(container);
188
+ await act(() => {
189
+ root.render(
190
+ React.createElement(tagName, {onClick: onClick, disabled: true}),
191
+ );
192
+ });
193
+ await act(() => {
194
+ root.render(
195
+ React.createElement(tagName, {onClick: onClick, disabled: false}),
196
+ );
197
+ });
198
+ const element = container.firstChild;
199
+ await expectClickThru(element);
200
});
201
});
202
});
203
191
- it('batches updates that occur as a result of a nested event dispatch', () => {
204
+ it('batches updates that occur as a result of a nested event dispatch', async () => {
205
container = document.createElement('div');
206
document.body.appendChild(container);
207
@@ -226,12 +239,17 @@ describe('SimpleEventPlugin', function () {
239
);
240
}
241
229
- ReactDOM.render(<Button />, container);
242
+ const root = ReactDOMClient.createRoot(container);
243
+ await act(() => {
244
+ root.render(<Button />);
245
+ });
246
+
247
expect(button.textContent).toEqual('Count: 0');
248
assertLog([]);
249
233
- click();
234
-
250
+ await act(() => {
251
+ click();
252
+ });
253
// There should be exactly one update.
254
assertLog(['didUpdate - Count: 3']);
255
expect(button.textContent).toEqual('Count: 3');
@@ -242,7 +260,6 @@ describe('SimpleEventPlugin', function () {
260
jest.resetModules();
261
262
React = require('react');
245
- ReactDOM = require('react-dom');
263
ReactDOMClient = require('react-dom/client');
264
Scheduler = require('scheduler');
265
@@ -392,10 +409,13 @@ describe('SimpleEventPlugin', function () {
409
describe('iOS bubbling click fix', function () {
410
// See http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
411
395
- it('does not add a local click to interactive elements', function () {
412
+ it('does not add a local click to interactive elements', async function () {
413
container = document.createElement('div');
414
398
- ReactDOM.render(<button onClick={onClick} />, container);
415
+ const root = ReactDOMClient.createRoot(container);
416
+ await act(() => {
417
+ root.render(<button onClick={onClick} />);
418
+ });
419
420
const node = container.firstChild;
421
@@ -404,19 +424,24 @@ describe('SimpleEventPlugin', function () {
424
expect(onClick).toHaveBeenCalledTimes(0);
425
});
426
407
- it('adds a local click listener to non-interactive elements', function () {
427
+ it('adds a local click listener to non-interactive elements', async function () {
428
container = document.createElement('div');
429
410
- ReactDOM.render(<div onClick={onClick} />, container);
430
+ const root = ReactDOMClient.createRoot(container);
431
+ await act(() => {
432
+ root.render(<div onClick={onClick} />);
433
+ });
434
435
const node = container.firstChild;
436
414
- node.dispatchEvent(new MouseEvent('click'));
437
+ await act(() => {
438
+ node.dispatchEvent(new MouseEvent('click'));
439
+ });
440
441
expect(onClick).toHaveBeenCalledTimes(0);
442
});
443
419
- it('registers passive handlers for events affected by the intervention', () => {
444
+ it('registers passive handlers for events affected by the intervention', async () => {
445
container = document.createElement('div');
446
447
const passiveEvents = [];
@@ -430,7 +455,10 @@ describe('SimpleEventPlugin', function () {
455
return nativeAddEventListener.apply(this, arguments);
456
};
457
433
- ReactDOM.render(<div />, container);
458
+ const root = ReactDOMClient.createRoot(container);
459
+ await act(() => {
460
+ root.render(<div />);
461
+ });
462
463
expect(passiveEvents).toEqual([
464
'touchstart',