Skip to content

Commit 13aae52

Browse files
eps1loneps1lon
authored
Convert SimpleEventPlugin to createRoot (#28164)
1 parent 4171883 commit 13aae52

File tree

1 file changed

+91
-63
lines changed

1 file changed

+91
-63
lines changed

‎packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js

Lines changed: 91 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111

1212
describe('SimpleEventPlugin', function () {
1313
let React;
14-
let ReactDOM;
1514
let ReactDOMClient;
1615
let Scheduler;
1716
let act;
@@ -21,8 +20,10 @@ describe('SimpleEventPlugin', function () {
2120
let assertLog;
2221
let waitForAll;
2322

24-
function expectClickThru(element) {
25-
element.click();
23+
async function expectClickThru(element) {
24+
await act(() => {
25+
element.click();
26+
});
2627
expect(onClick).toHaveBeenCalledTimes(1);
2728
}
2829

@@ -31,23 +32,27 @@ describe('SimpleEventPlugin', function () {
3132
expect(onClick).toHaveBeenCalledTimes(0);
3233
}
3334

34-
function mounted(element) {
35+
async function mounted(element) {
3536
container = document.createElement('div');
3637
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;
3843
return element;
3944
}
4045

4146
beforeEach(function () {
4247
jest.resetModules();
4348
React = require('react');
44-
ReactDOM = require('react-dom');
4549
ReactDOMClient = require('react-dom/client');
4650
Scheduler = require('scheduler');
4751

4852
const InternalTestUtils = require('internal-test-utils');
4953
assertLog = InternalTestUtils.assertLog;
5054
waitForAll = InternalTestUtils.waitForAll;
55+
act = InternalTestUtils.act;
5156

5257
onClick = jest.fn();
5358
});
@@ -59,13 +64,13 @@ describe('SimpleEventPlugin', function () {
5964
}
6065
});
6166

62-
it('A non-interactive tags click when disabled', function () {
67+
it('A non-interactive tags click when disabled', async function () {
6368
const element = <div onClick={onClick} />;
64-
expectClickThru(mounted(element));
69+
await expectClickThru(await mounted(element));
6570
});
6671

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(
6974
<div onClick={onClick}>
7075
<div />
7176
</div>,
@@ -75,8 +80,8 @@ describe('SimpleEventPlugin', function () {
7580
expect(onClick).toHaveBeenCalledTimes(1);
7681
});
7782

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(
8085
<button onClick={onClick} disabled={true}>
8186
<span />
8287
</button>,
@@ -87,8 +92,8 @@ describe('SimpleEventPlugin', function () {
8792
expect(onClick).toHaveBeenCalledTimes(0);
8893
});
8994

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(
9297
<button disabled={true}>
9398
<span onClick={onClick} />
9499
</button>,
@@ -99,8 +104,8 @@ describe('SimpleEventPlugin', function () {
99104
expect(onClick).toHaveBeenCalledTimes(1);
100105
});
101106

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(
104109
<div onClickCapture={onClick}>
105110
<button disabled={true}>
106111
<span />
@@ -113,8 +118,8 @@ describe('SimpleEventPlugin', function () {
113118
expect(onClick).toHaveBeenCalledTimes(1);
114119
});
115120

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(
118123
<button disabled={true}>
119124
<span onClickCapture={onClick} />
120125
</button>,
@@ -127,68 +132,76 @@ describe('SimpleEventPlugin', function () {
127132

128133
['button', 'input', 'select', 'textarea'].forEach(function (tagName) {
129134
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 () => {
131136
const element = React.createElement(tagName, {
132137
onClick: onClick,
133138
});
134139

135-
expectClickThru(mounted(element));
140+
await expectClickThru(await mounted(element));
136141
});
137142

138-
it('should not forward clicks when it starts out disabled', () => {
143+
it('should not forward clicks when it starts out disabled', async () => {
139144
const element = React.createElement(tagName, {
140145
onClick: onClick,
141146
disabled: true,
142147
});
143148

144-
expectNoClickThru(mounted(element));
149+
await expectNoClickThru(await mounted(element));
145150
});
146151

147-
it('should forward clicks when it becomes not disabled', () => {
152+
it('should forward clicks when it becomes not disabled', async () => {
148153
container = document.createElement('div');
149154
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);
159166
});
160167

161-
it('should not forward clicks when it becomes disabled', () => {
168+
it('should not forward clicks when it becomes disabled', async () => {
162169
container = document.createElement('div');
163170
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;
172181
expectNoClickThru(element);
173182
});
174183

175-
it('should work correctly if the listener is changed', () => {
184+
it('should work correctly if the listener is changed', async () => {
176185
container = document.createElement('div');
177186
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);
187200
});
188201
});
189202
});
190203

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 () => {
192205
container = document.createElement('div');
193206
document.body.appendChild(container);
194207

@@ -226,12 +239,17 @@ describe('SimpleEventPlugin', function () {
226239
);
227240
}
228241

229-
ReactDOM.render(<Button />, container);
242+
const root = ReactDOMClient.createRoot(container);
243+
await act(() => {
244+
root.render(<Button />);
245+
});
246+
230247
expect(button.textContent).toEqual('Count: 0');
231248
assertLog([]);
232249

233-
click();
234-
250+
await act(() => {
251+
click();
252+
});
235253
// There should be exactly one update.
236254
assertLog(['didUpdate - Count: 3']);
237255
expect(button.textContent).toEqual('Count: 3');
@@ -242,7 +260,6 @@ describe('SimpleEventPlugin', function () {
242260
jest.resetModules();
243261

244262
React = require('react');
245-
ReactDOM = require('react-dom');
246263
ReactDOMClient = require('react-dom/client');
247264
Scheduler = require('scheduler');
248265

@@ -392,10 +409,13 @@ describe('SimpleEventPlugin', function () {
392409
describe('iOS bubbling click fix', function () {
393410
// See http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
394411

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 () {
396413
container = document.createElement('div');
397414

398-
ReactDOM.render(<button onClick={onClick} />, container);
415+
const root = ReactDOMClient.createRoot(container);
416+
await act(() => {
417+
root.render(<button onClick={onClick} />);
418+
});
399419

400420
const node = container.firstChild;
401421

@@ -404,19 +424,24 @@ describe('SimpleEventPlugin', function () {
404424
expect(onClick).toHaveBeenCalledTimes(0);
405425
});
406426

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 () {
408428
container = document.createElement('div');
409429

410-
ReactDOM.render(<div onClick={onClick} />, container);
430+
const root = ReactDOMClient.createRoot(container);
431+
await act(() => {
432+
root.render(<div onClick={onClick} />);
433+
});
411434

412435
const node = container.firstChild;
413436

414-
node.dispatchEvent(new MouseEvent('click'));
437+
await act(() => {
438+
node.dispatchEvent(new MouseEvent('click'));
439+
});
415440

416441
expect(onClick).toHaveBeenCalledTimes(0);
417442
});
418443

419-
it('registers passive handlers for events affected by the intervention', () => {
444+
it('registers passive handlers for events affected by the intervention', async () => {
420445
container = document.createElement('div');
421446

422447
const passiveEvents = [];
@@ -430,7 +455,10 @@ describe('SimpleEventPlugin', function () {
430455
return nativeAddEventListener.apply(this, arguments);
431456
};
432457

433-
ReactDOM.render(<div />, container);
458+
const root = ReactDOMClient.createRoot(container);
459+
await act(() => {
460+
root.render(<div />);
461+
});
434462

435463
expect(passiveEvents).toEqual([
436464
'touchstart',

0 commit comments

Comments
 (0)