-
Notifications
You must be signed in to change notification settings - Fork 45.6k
/
ReactDOMNestedEvents-test.js
75 lines (67 loc) · 2.14 KB
/
ReactDOMNestedEvents-test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
describe('ReactDOMNestedEvents', () => {
let React;
let ReactDOMClient;
let Scheduler;
let act;
let useState;
let assertLog;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');
act = require('internal-test-utils').act;
useState = React.useState;
const InternalTestUtils = require('internal-test-utils');
assertLog = InternalTestUtils.assertLog;
});
test('nested event dispatches should not cause updates to flush', async () => {
const buttonRef = React.createRef(null);
function App() {
const [isClicked, setIsClicked] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const onClick = () => {
setIsClicked(true);
const el = buttonRef.current;
el.focus();
// The update triggered by the focus event should not have flushed yet.
// Nor the click update. They would have if we had wrapped the focus
// call in `flushSync`, though.
Scheduler.log('Value right after focus call: ' + el.innerHTML);
};
const onFocus = () => {
setIsFocused(true);
};
return (
<>
<button ref={buttonRef} onFocus={onFocus} onClick={onClick}>
{`Clicked: ${isClicked}, Focused: ${isFocused}`}
</button>
</>
);
}
const container = document.createElement('div');
document.body.appendChild(container);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(<App />);
});
expect(buttonRef.current.innerHTML).toEqual(
'Clicked: false, Focused: false',
);
await act(() => {
buttonRef.current.click();
});
assertLog(['Value right after focus call: Clicked: false, Focused: false']);
expect(buttonRef.current.innerHTML).toEqual('Clicked: true, Focused: true');
});
});