Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert SyntheticFocusEvent to createRoot (#28173)

Browse Source
This commit is contained in:
Sebastian Silbermann
2024-02-01 18:49:40 -05:00
committed by GitHub
parent bc219090e3
commit a7f1622117
1 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
Vendored
+42 -30
View File
@@ -9,13 +9,15 @@
describe('SyntheticFocusEvent', () => {
let React;
let ReactDOM;
let ReactDOMClient;
let act;
let container;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;
container = document.createElement('div');
document.body.appendChild(container);
@@ -26,44 +28,54 @@ describe('SyntheticFocusEvent', () => {
container = null;
});
test('onFocus events have the focus type', () => {
test('onFocus events have the focus type', async () => {
const log = [];
ReactDOM.render(
<button
onFocus={event => log.push(`onFocus: ${event.type}`)}
onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
/>,
container,
);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<button
onFocus={event => log.push(`onFocus: ${event.type}`)}
onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
/>,
);
});
const button = container.querySelector('button');
button.dispatchEvent(
new FocusEvent('focusin', {
bubbles: true,
cancelable: false,
}),
);
await act(() => {
button.dispatchEvent(
new FocusEvent('focusin', {
bubbles: true,
cancelable: false,
}),
);
});
expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
});
test('onBlur events have the blur type', () => {
test('onBlur events have the blur type', async () => {
const log = [];
ReactDOM.render(
<button
onBlur={event => log.push(`onBlur: ${event.type}`)}
onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
/>,
container,
);
const root = ReactDOMClient.createRoot(container);
await act(() => {
root.render(
<button
onBlur={event => log.push(`onBlur: ${event.type}`)}
onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
/>,
);
});
const button = container.querySelector('button');
button.dispatchEvent(
new FocusEvent('focusout', {
bubbles: true,
cancelable: false,
}),
);
await act(() => {
button.dispatchEvent(
new FocusEvent('focusout', {
bubbles: true,
cancelable: false,
}),
);
});
expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
});