Convert SelectEventPlugin to createRoot (#28076)
Sebastian Silbermann committed
Jan 26, 2024 at 10:17 UTC
0c45e8307135dc275b18b3a8fa5c85ba97d20a42
1 file changed
+54
-31
packages/react-dom/src/events/plugins/__tests__/SelectEventPlugin-test.js
+54
-31
@@ -10,15 +10,16 @@
10
'use strict';
11
12
let React;
13
-let ReactDOM;
13
+let ReactDOMClient;
14
+let act;
15
16
describe('SelectEventPlugin', () => {
17
let container;
18
19
beforeEach(() => {
20
React = require('react');
20
- ReactDOM = require('react-dom');
21
-
21
+ ReactDOMClient = require('react-dom/client');
22
+ act = require('internal-test-utils').act;
23
container = document.createElement('div');
24
document.body.appendChild(container);
25
});
@@ -29,7 +30,7 @@ describe('SelectEventPlugin', () => {
30
});
31
32
// See https://github.com/facebook/react/pull/3639 for details.
32
- it('does not get confused when dependent events are registered independently', () => {
33
+ it('does not get confused when dependent events are registered independently', async () => {
34
const select = jest.fn();
35
const onSelect = event => {
36
expect(typeof event).toBe('object');
@@ -38,11 +39,14 @@ describe('SelectEventPlugin', () => {
39
select(event.currentTarget);
40
};
41
41
- // Pass `onMouseDown` so React registers a top-level listener.
42
- const node = ReactDOM.render(
43
- <input type="text" onMouseDown={function () {}} />,
44
- container,
45
- );
42
+ const root = ReactDOMClient.createRoot(container);
43
+ const node = await (async function () {
44
+ await act(() => {
45
+ // Pass `onMouseDown` so React registers a top-level listener.
46
+ root.render(<input type="text" onMouseDown={function () {}} />);
47
+ });
48
+ return container.firstChild;
49
+ })();
50
51
// Trigger `mousedown` and `mouseup`. Note that
52
// React is not currently listening to `mouseup`.
@@ -59,8 +63,10 @@ describe('SelectEventPlugin', () => {
63
}),
64
);
65
62
- // Now subscribe to `onSelect`.
63
- ReactDOM.render(<input type="text" onSelect={onSelect} />, container);
66
+ await act(() => {
67
+ // Now subscribe to `onSelect`
68
+ root.render(<input type="text" onSelect={onSelect} />);
69
+ });
70
node.focus();
71
72
// This triggers a `select` event in our polyfill.
@@ -74,7 +80,7 @@ describe('SelectEventPlugin', () => {
80
expect(select).toHaveBeenCalledTimes(1);
81
});
82
77
- it('should fire `onSelect` when a listener is present', () => {
83
+ it('should fire `onSelect` when a listener is present', async () => {
84
const select = jest.fn();
85
const onSelect = event => {
86
expect(typeof event).toBe('object');
@@ -83,10 +89,14 @@ describe('SelectEventPlugin', () => {
89
select(event.currentTarget);
90
};
91
86
- const node = ReactDOM.render(
87
- <input type="text" onSelect={onSelect} />,
88
- container,
89
- );
92
+ const node = await (async function () {
93
+ const root = ReactDOMClient.createRoot(container);
94
+ await act(() => {
95
+ root.render(<input type="text" onSelect={onSelect} />);
96
+ });
97
+ return container.firstChild;
98
+ })();
99
+
100
node.focus();
101
102
let nativeEvent = new MouseEvent('focus', {
@@ -108,7 +118,7 @@ describe('SelectEventPlugin', () => {
118
expect(select).toHaveBeenCalledTimes(1);
119
});
120
111
- it('should fire `onSelectCapture` when a listener is present', () => {
121
+ it('should fire `onSelectCapture` when a listener is present', async () => {
122
const select = jest.fn();
123
const onSelectCapture = event => {
124
expect(typeof event).toBe('object');
@@ -117,10 +127,14 @@ describe('SelectEventPlugin', () => {
127
select(event.currentTarget);
128
};
129
120
- const node = ReactDOM.render(
121
- <input type="text" onSelectCapture={onSelectCapture} />,
122
- container,
123
- );
130
+ const node = await (async function () {
131
+ const root = ReactDOMClient.createRoot(container);
132
+ await act(() => {
133
+ root.render(<input type="text" onSelectCapture={onSelectCapture} />);
134
+ });
135
+ return container.firstChild;
136
+ })();
137
+
138
node.focus();
139
140
let nativeEvent = new MouseEvent('focus', {
@@ -143,7 +157,7 @@ describe('SelectEventPlugin', () => {
157
});
158
159
// Regression test for https://github.com/facebook/react/issues/11379
146
- it('should not wait for `mouseup` after receiving `dragend`', () => {
160
+ it('should not wait for `mouseup` after receiving `dragend`', async () => {
161
const select = jest.fn();
162
const onSelect = event => {
163
expect(typeof event).toBe('object');
@@ -152,10 +166,14 @@ describe('SelectEventPlugin', () => {
166
select(event.currentTarget);
167
};
168
155
- const node = ReactDOM.render(
156
- <input type="text" onSelect={onSelect} />,
157
- container,
158
- );
169
+ const node = await (async function () {
170
+ const root = ReactDOMClient.createRoot(container);
171
+ await act(() => {
172
+ root.render(<input type="text" onSelect={onSelect} />);
173
+ });
174
+ return container.firstChild;
175
+ })();
176
+
177
node.focus();
178
179
let nativeEvent = new MouseEvent('focus', {
@@ -177,12 +195,17 @@ describe('SelectEventPlugin', () => {
195
expect(select).toHaveBeenCalledTimes(1);
196
});
197
180
- it('should handle selectionchange events', function () {
198
+ it('should handle selectionchange events', async function () {
199
const onSelect = jest.fn();
182
- const node = ReactDOM.render(
183
- <input type="text" onSelect={onSelect} />,
184
- container,
185
- );
200
+
201
+ const node = await (async function () {
202
+ const root = ReactDOMClient.createRoot(container);
203
+ await act(() => {
204
+ root.render(<input type="text" onSelect={onSelect} />);
205
+ });
206
+ return container.firstChild;
207
+ })();
208
+
209
node.focus();
210
211
// Make sure the event was not called before we emit the selection change event