Convert useFocusWithin to createRoot (#28128)
Sebastian Silbermann committed
Jan 29, 2024 at 17:02 UTC
971b62f479a5dbd84688ba2b2c507de2a1d22dcc
1 file changed
+47
-26
packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+47
-26
@@ -13,7 +13,6 @@ import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
13
14
let React;
15
let ReactFeatureFlags;
16
-let ReactDOM;
16
let ReactDOMClient;
17
let useFocusWithin;
18
let act;
@@ -25,7 +24,6 @@ function initializeModules(hasPointerEvents) {
24
ReactFeatureFlags.enableScopeAPI = true;
25
ReactFeatureFlags.enableCreateEventHandleAPI = true;
26
React = require('react');
28
- ReactDOM = require('react-dom');
27
ReactDOMClient = require('react-dom/client');
28
act = require('internal-test-utils').act;
29
@@ -42,6 +40,7 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];
40
describe.each(table)(`useFocus`, hasPointerEvents => {
41
let container;
42
let container2;
43
+ let root;
44
45
beforeEach(() => {
46
initializeModules(hasPointerEvents);
@@ -49,10 +48,14 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
48
document.body.appendChild(container);
49
container2 = document.createElement('div');
50
document.body.appendChild(container2);
51
+ root = ReactDOMClient.createRoot(container);
52
});
53
54
- afterEach(() => {
55
- ReactDOM.render(null, container);
54
+ afterEach(async () => {
55
+ await act(() => {
56
+ root.render(null);
57
+ });
58
+
59
document.body.removeChild(container);
60
document.body.removeChild(container2);
61
container = null;
@@ -75,7 +78,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
78
return <div ref={focusWithinRef} />;
79
};
80
await act(() => {
78
- ReactDOM.render(<Component />, container);
81
+ root.render(<Component />);
82
});
83
};
84
@@ -111,7 +114,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
114
innerRef = React.createRef();
115
innerRef2 = React.createRef();
116
await act(() => {
114
- ReactDOM.render(<Component show={true} />, container);
117
+ root.render(<Component show={true} />);
118
});
119
};
120
@@ -188,7 +191,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
191
innerRef = React.createRef();
192
innerRef2 = React.createRef();
193
await act(() => {
191
- ReactDOM.render(<Component show={true} />, container);
194
+ root.render(<Component show={true} />);
195
});
196
};
197
@@ -314,7 +317,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
317
);
318
};
319
await act(() => {
317
- ReactDOM.render(<Component />, container);
320
+ root.render(<Component />);
321
});
322
323
const target = createEventTarget(inputRef.current);
@@ -354,7 +357,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
357
};
358
359
await act(() => {
357
- ReactDOM.render(<Component show={true} />, container);
360
+ root.render(<Component show={true} />);
361
});
362
363
const inner = innerRef.current;
@@ -363,7 +366,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
366
target.focus();
367
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
368
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
366
- ReactDOM.render(<Component show={false} />, container);
369
+ await act(() => {
370
+ root.render(<Component show={false} />);
371
+ });
372
+
373
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
374
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
375
expect(onAfterBlurWithin).toHaveBeenCalledWith(
@@ -391,7 +397,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
397
};
398
399
await act(() => {
394
- ReactDOM.render(<Component show={true} />, container);
400
+ root.render(<Component show={true} />);
401
});
402
403
const inner = innerRef.current;
@@ -400,7 +406,11 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
406
target.focus();
407
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
408
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
403
- ReactDOM.render(<Component show={false} />, container);
409
+
410
+ await act(() => {
411
+ root.render(<Component show={false} />);
412
+ });
413
+
414
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
415
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
416
expect(onAfterBlurWithin).toHaveBeenCalledWith(
@@ -433,13 +443,16 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
443
};
444
445
await act(() => {
436
- ReactDOM.render(<Component show={true} />, container);
446
+ root.render(<Component show={true} />);
447
});
448
449
inputRef.current.focus();
450
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
451
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
442
- ReactDOM.render(<Component show={false} />, container);
452
+ await act(() => {
453
+ root.render(<Component show={false} />);
454
+ });
455
+
456
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
457
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
458
});
@@ -469,7 +482,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
482
};
483
484
await act(() => {
472
- ReactDOM.render(<Component show={true} />, container);
485
+ root.render(<Component show={true} />);
486
});
487
488
const inner = innerRef.current;
@@ -477,7 +490,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
490
target.keydown({key: 'Tab'});
491
target.focus();
492
await act(() => {
480
- ReactDOM.render(<Component show={false} />, container);
493
+ root.render(<Component show={false} />);
494
});
495
expect(targetNodes).toEqual([targetNode]);
496
});
@@ -512,10 +525,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
525
);
526
};
527
515
- const root = ReactDOMClient.createRoot(container2);
528
+ const root2 = ReactDOMClient.createRoot(container2);
529
530
await act(() => {
518
- root.render(<Component />);
531
+ root2.render(<Component />);
532
});
533
expect(container2.innerHTML).toBe('<div><input></div>');
534
@@ -528,14 +541,18 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
541
542
suspend = true;
543
await act(() => {
531
- root.render(<Component />);
544
+ root2.render(<Component />);
545
});
546
expect(container2.innerHTML).toBe(
547
'<div><input style="display: none;">Loading...</div>',
548
);
549
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
550
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
538
- resolve();
551
+ await act(() => {
552
+ suspend = false;
553
+ resolve();
554
+ });
555
+ expect(container2.innerHTML).toBe('<div><input style=""></div>');
556
});
557
558
// @gate www
@@ -569,10 +586,10 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
586
);
587
};
588
572
- const root = ReactDOMClient.createRoot(container2);
589
+ const root2 = ReactDOMClient.createRoot(container2);
590
591
await act(() => {
575
- root.render(<Component />);
592
+ root2.render(<Component />);
593
});
594
595
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
@@ -580,13 +597,13 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
597
598
suspend = true;
599
await act(() => {
583
- root.render(<Component />);
600
+ root2.render(<Component />);
601
});
602
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
603
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
604
605
await act(() => {
589
- root.render(<Component />);
606
+ root2.render(<Component />);
607
});
608
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
609
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
@@ -594,12 +611,16 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
611
buttonRef.current.focus();
612
suspend = false;
613
await act(() => {
597
- root.render(<Component />);
614
+ root2.render(<Component />);
615
});
616
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
617
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
618
602
- resolve();
619
+ await act(() => {
620
+ suspend = false;
621
+ resolve();
622
+ });
623
+ expect(container2.innerHTML).toBe('<div><input style=""></div>');
624
});
625
});
626
});