10
10
'use strict' ;
11
11
12
12
let React ;
13
- let ReactDOM ;
13
+ let ReactDOMClient ;
14
14
let ReactDOMSelection ;
15
+ let act ;
15
16
16
17
let getModernOffsetsFromPoints ;
17
18
18
19
describe ( 'ReactDOMSelection' , ( ) => {
19
20
beforeEach ( ( ) => {
20
21
React = require ( 'react' ) ;
21
- ReactDOM = require ( 'react-dom' ) ;
22
+ ReactDOMClient = require ( 'react-dom/client ' ) ;
22
23
ReactDOMSelection = require ( 'react-dom-bindings/src/client/ReactDOMSelection' ) ;
24
+ act = require ( 'internal-test-utils' ) . act ;
23
25
24
26
( { getModernOffsetsFromPoints} = ReactDOMSelection ) ;
25
27
} ) ;
@@ -74,53 +76,57 @@ describe('ReactDOMSelection', () => {
74
76
75
77
// Complicated example derived from a real-world DOM tree. Has a bit of
76
78
// everything.
77
- function getFixture ( ) {
78
- return ReactDOM . render (
79
- < div >
79
+ async function getFixture ( ) {
80
+ const container = document . createElement ( 'div' ) ;
81
+ const root = ReactDOMClient . createRoot ( container ) ;
82
+ await act ( ( ) => {
83
+ root . render (
80
84
< div >
81
- < div >
82
- < div > xxxxxxxxxxxxxxxxxxxx</ div >
83
- </ div >
84
- x
85
85
< div >
86
86
< div >
87
- x
87
+ < div > xxxxxxxxxxxxxxxxxxxx</ div >
88
+ </ div >
89
+ x
90
+ < div >
88
91
< div >
92
+ x
89
93
< div >
90
- < div > xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</ div >
91
- < div />
92
- < div />
93
- < div > xxxxxxxxxxxxxxxxxx</ div >
94
+ < div >
95
+ < div > xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</ div >
96
+ < div />
97
+ < div />
98
+ < div > xxxxxxxxxxxxxxxxxx</ div >
99
+ </ div >
94
100
</ div >
95
101
</ div >
96
102
</ div >
103
+ < div />
97
104
</ div >
98
- < div />
99
- </ div >
100
- < div >
101
105
< div >
102
106
< div >
103
- < div > xxxx</ div >
104
- < div > xxxxxxxxxxxxxxxxxxx</ div >
107
+ < div >
108
+ < div > xxxx</ div >
109
+ < div > xxxxxxxxxxxxxxxxxxx</ div >
110
+ </ div >
105
111
</ div >
106
- </ div >
107
- < div > xxx</ div >
108
- < div > xxxxx</ div >
109
- < div > xxx</ div >
110
- < div >
112
+ < div > xxx</ div >
113
+ < div > xxxxx</ div >
114
+ < div > xxx</ div >
111
115
< div >
112
116
< div >
113
- < div > { [ 'x' , 'x' , 'xxx' ] } </ div >
117
+ < div >
118
+ < div > { [ 'x' , 'x' , 'xxx' ] } </ div >
119
+ </ div >
114
120
</ div >
115
121
</ div >
116
122
</ div >
117
- </ div >
118
- < div >
119
- < div > xxxxxx < /div >
120
- </ div >
121
- </ div > ,
122
- document . createElement ( 'div' ) ,
123
- ) ;
123
+ < div >
124
+ < div > xxxxxx </ div >
125
+ </ div >
126
+ </ div > ,
127
+ ) ;
128
+ } ) ;
129
+ return container . firstChild ;
124
130
}
125
131
126
132
it ( 'returns correctly for base case' , ( ) => {
@@ -135,8 +141,8 @@ describe('ReactDOMSelection', () => {
135
141
} ) ;
136
142
} ) ;
137
143
138
- it ( 'returns correctly for fuzz test' , ( ) => {
139
- const fixtureRoot = getFixture ( ) ;
144
+ it ( 'returns correctly for fuzz test' , async ( ) => {
145
+ const fixtureRoot = await getFixture ( ) ;
140
146
const allNodes = [ fixtureRoot ] . concat (
141
147
Array . from ( fixtureRoot . querySelectorAll ( '*' ) ) ,
142
148
) ;
0 commit comments