hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert SyntheticKeyboardEvent-test to createRoot (#28007)

Browse Source 
Convert SyntheticKeyboardEvent-test to createRoot
This commit is contained in:
Jan Kassens
2024-01-19 13:36:05 -05:00
committed by GitHub
parent df8c0f0954
commit bd8ef8a7d2
1 changed files with 230 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom/src/events/__tests__/SyntheticKeyboardEvent-test.js
Vendored
+230 -203
View File
@@ -10,20 +10,30 @@
'use strict';
let React;
let ReactDOM;
let ReactDOMClient;
let act;
describe('SyntheticKeyboardEvent', () => {
let container;
let root;
beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;
// The container has to be attached for events to fire.
container = document.createElement('div');
root = ReactDOMClient.createRoot(container);
document.body.appendChild(container);
});
afterEach(() => {
afterEach(async () => {
await act(() => {
root.unmount();
});
document.body.removeChild(container);
container = null;
});
@@ -32,17 +42,18 @@ describe('SyntheticKeyboardEvent', () => {
describe('charCode', () => {
describe('when event is `keypress`', () => {
describe('when charCode is present in nativeEvent', () => {
it('when charCode is 0 and keyCode is 13, returns 13', () => {
it('when charCode is 0 and keyCode is 13, returns 13', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 0,
keyCode: 13,
@@ -53,17 +64,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(charCode).toBe(13);
});
it('when charCode is 32 or bigger and keyCode is missing, returns charCode', () => {
it('when charCode is 32 or bigger and keyCode is missing, returns charCode', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 32,
bubbles: true,
@@ -73,17 +85,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(charCode).toBe(32);
});
it('when charCode is 13 and keyCode is missing, returns charCode', () => {
it('when charCode is 13 and keyCode is missing, returns charCode', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 13,
bubbles: true,
@@ -96,17 +109,18 @@ describe('SyntheticKeyboardEvent', () => {
// Firefox creates a keypress event for function keys too. This removes
// the unwanted keypress events. Enter is however both printable and
// non-printable. One would expect Tab to be as well (but it isn't).
it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', () => {
it('when charCode is smaller than 32 but is not 13, and keyCode is missing, ignores keypress', async () => {
let called = false;
const node = ReactDOM.render(
<input
onKeyPress={() => {
called = true;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={() => {
called = true;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 31,
bubbles: true,
@@ -116,17 +130,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(called).toBe(false);
});
it('when charCode is 10, returns 13', () => {
it('when charCode is 10, returns 13', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 10,
bubbles: true,
@@ -136,17 +151,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(charCode).toBe(13);
});
it('when charCode is 10 and ctrl is pressed, returns 13', () => {
it('when charCode is 10 and ctrl is pressed, returns 13', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 10,
ctrlKey: true,
@@ -181,17 +197,18 @@ describe('SyntheticKeyboardEvent', () => {
charCodeDescriptor = null;
});
it('when keyCode is 32 or bigger, returns keyCode', () => {
it('when keyCode is 32 or bigger, returns keyCode', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
keyCode: 32,
bubbles: true,
@@ -201,17 +218,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(charCode).toBe(32);
});
it('when keyCode is 13, returns 13', () => {
it('when keyCode is 13, returns 13', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
keyCode: 13,
bubbles: true,
@@ -221,17 +239,18 @@ describe('SyntheticKeyboardEvent', () => {
expect(charCode).toBe(13);
});
it('when keyCode is smaller than 32 and is not 13, ignores keypress', () => {
it('when keyCode is smaller than 32 and is not 13, ignores keypress', async () => {
let called = false;
const node = ReactDOM.render(
<input
onKeyPress={e => {
called = true;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
called = true;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
keyCode: 31,
bubbles: true,
@@ -244,28 +263,29 @@ describe('SyntheticKeyboardEvent', () => {
});
describe('when event is not `keypress`', () => {
it('returns 0', () => {
it('returns 0', async () => {
let charCodeDown = null;
let charCodeUp = null;
const node = ReactDOM.render(
<input
onKeyDown={e => {
charCodeDown = e.charCode;
}}
onKeyUp={e => {
charCodeUp = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyDown={e => {
charCodeDown = e.charCode;
}}
onKeyUp={e => {
charCodeUp = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
key: 'Del',
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
key: 'Del',
bubbles: true,
@@ -277,17 +297,18 @@ describe('SyntheticKeyboardEvent', () => {
});
});
it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', () => {
it('when charCode is smaller than 32 but is not 13, and keyCode is missing, charCode is 0', async () => {
let charCode = null;
const node = ReactDOM.render(
<input
onKeyDown={e => {
charCode = e.charCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyDown={e => {
charCode = e.charCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
charCode: 31,
bubbles: true,
@@ -300,28 +321,29 @@ describe('SyntheticKeyboardEvent', () => {
describe('keyCode', () => {
describe('when event is `keydown` or `keyup`', () => {
it('returns a passed keyCode', () => {
it('returns a passed keyCode', async () => {
let keyCodeDown = null;
let keyCodeUp = null;
const node = ReactDOM.render(
<input
onKeyDown={e => {
keyCodeDown = e.keyCode;
}}
onKeyUp={e => {
keyCodeUp = e.keyCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyDown={e => {
keyCodeDown = e.keyCode;
}}
onKeyUp={e => {
keyCodeUp = e.keyCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
keyCode: 40,
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
keyCode: 40,
bubbles: true,
@@ -334,17 +356,18 @@ describe('SyntheticKeyboardEvent', () => {
});
describe('when event is `keypress`', () => {
it('returns 0', () => {
it('returns 0', async () => {
let keyCode = null;
const node = ReactDOM.render(
<input
onKeyPress={e => {
keyCode = e.keyCode;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyPress={e => {
keyCode = e.keyCode;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 65,
bubbles: true,
@@ -358,19 +381,20 @@ describe('SyntheticKeyboardEvent', () => {
describe('which', () => {
describe('when event is `keypress`', () => {
it('is consistent with `charCode`', () => {
it('is consistent with `charCode`', async () => {
let calls = 0;
const node = ReactDOM.render(
<input
onKeyPress={e => {
expect(e.which).toBe(e.charCode);
calls++;
}}
/>,
container,
);
await act(() => {
root.render(
<input
onKeyPress={e => {
expect(e.which).toBe(e.charCode);
calls++;
}}
/>,
);
});
// Try different combinations from other tests.
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 0,
keyCode: 13,
@@ -378,14 +402,14 @@ describe('SyntheticKeyboardEvent', () => {
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 32,
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 13,
bubbles: true,
@@ -397,50 +421,51 @@ describe('SyntheticKeyboardEvent', () => {
});
describe('when event is `keydown` or `keyup`', () => {
it('is consistent with `keyCode`', () => {
it('is consistent with `keyCode`', async () => {
let calls = 0;
const node = ReactDOM.render(
<input
onKeyDown={e => {
expect(e.which).toBe(e.keyCode);
calls++;
}}
onKeyUp={e => {
expect(e.which).toBe(e.keyCode);
calls++;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyDown={e => {
expect(e.which).toBe(e.keyCode);
calls++;
}}
onKeyUp={e => {
expect(e.which).toBe(e.keyCode);
calls++;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
key: 'Del',
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
charCode: 31,
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
keyCode: 40,
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
key: 'Del',
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
keyCode: 40,
bubbles: true,
@@ -453,39 +478,40 @@ describe('SyntheticKeyboardEvent', () => {
});
describe('code', () => {
it('returns code on `keydown`, `keyup` and `keypress`', () => {
it('returns code on `keydown`, `keyup` and `keypress`', async () => {
let codeDown = null;
let codeUp = null;
let codePress = null;
const node = ReactDOM.render(
<input
onKeyDown={e => {
codeDown = e.code;
}}
onKeyUp={e => {
codeUp = e.code;
}}
onKeyPress={e => {
codePress = e.code;
}}
/>,
container,
);
node.dispatchEvent(
await act(() => {
root.render(
<input
onKeyDown={e => {
codeDown = e.code;
}}
onKeyUp={e => {
codeUp = e.code;
}}
onKeyPress={e => {
codePress = e.code;
}}
/>,
);
});
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
code: 'KeyQ',
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
code: 'KeyQ',
bubbles: true,
cancelable: true,
}),
);
node.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
code: 'KeyQ',
charCode: 113,
@@ -501,7 +527,7 @@ describe('SyntheticKeyboardEvent', () => {
});
describe('EventInterface', () => {
it('is able to `preventDefault` and `stopPropagation`', () => {
it('is able to `preventDefault` and `stopPropagation`', async () => {
let expectedCount = 0;
const eventHandler = event => {
expect(event.isDefaultPrevented()).toBe(false);
@@ -513,30 +539,31 @@ describe('SyntheticKeyboardEvent', () => {
expect(event.isPropagationStopped()).toBe(true);
expectedCount++;
};
const div = ReactDOM.render(
<div
onKeyDown={eventHandler}
onKeyUp={eventHandler}
onKeyPress={eventHandler}
/>,
container,
);
await act(() => {
root.render(
<div
onKeyDown={eventHandler}
onKeyUp={eventHandler}
onKeyPress={eventHandler}
/>,
);
});
div.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keydown', {
keyCode: 40,
bubbles: true,
cancelable: true,
}),
);
div.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keyup', {
keyCode: 40,
bubbles: true,
cancelable: true,
}),
);
div.dispatchEvent(
container.firstChild.dispatchEvent(
new KeyboardEvent('keypress', {
charCode: 40,
keyCode: 40,