Skip to content

Commit 51c101f

Browse files
mwilc0xgaearon
mwilc0x
authored and
gaearon
committed
Update getEventKey tests to use public API (#11299) (#11317)
* Add flow annotation to getEventKey. * Remove Simulate and SimulateNative for native events. * Style nits * Oops
1 parent 646781b commit 51c101f

File tree

2 files changed

+162
-67
lines changed

2 files changed

+162
-67
lines changed

‎packages/react-dom/src/events/__tests__/getEventKey-test.js‎

Lines changed: 123 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,71 +9,164 @@
99

1010
'use strict';
1111

12-
// TODO: can we express this test with only public API?
13-
var getEventKey = require('../getEventKey').default;
14-
1512
describe('getEventKey', () => {
13+
var React;
14+
var ReactDOM;
15+
16+
beforeEach(() => {
17+
React = require('react');
18+
ReactDOM = require('react-dom');
19+
});
20+
1621
describe('when key is implemented in a browser', () => {
1722
describe('when key is not normalized', () => {
1823
it('returns a normalized value', () => {
19-
var nativeEvent = new KeyboardEvent('keypress', {key: 'Del'});
20-
21-
expect(getEventKey(nativeEvent)).toBe('Delete');
24+
let key = null;
25+
class Comp extends React.Component {
26+
render() {
27+
return <input onKeyDown={e => (key = e.key)} />;
28+
}
29+
}
30+
31+
var container = document.createElement('div');
32+
ReactDOM.render(<Comp />, container);
33+
document.body.appendChild(container);
34+
35+
var nativeEvent = new KeyboardEvent('keydown', {
36+
key: 'Del',
37+
bubbles: true,
38+
cancelable: true,
39+
});
40+
container.firstChild.dispatchEvent(nativeEvent);
41+
expect(key).toBe('Delete');
42+
document.body.removeChild(container);
2243
});
2344
});
2445

2546
describe('when key is normalized', () => {
2647
it('returns a key', () => {
27-
var nativeEvent = new KeyboardEvent('keypress', {key: 'f'});
28-
29-
expect(getEventKey(nativeEvent)).toBe('f');
48+
let key = null;
49+
class Comp extends React.Component {
50+
render() {
51+
return <input onKeyDown={e => (key = e.key)} />;
52+
}
53+
}
54+
55+
var container = document.createElement('div');
56+
ReactDOM.render(<Comp />, container);
57+
document.body.appendChild(container);
58+
59+
var nativeEvent = new KeyboardEvent('keydown', {
60+
key: 'f',
61+
bubbles: true,
62+
cancelable: true,
63+
});
64+
container.firstChild.dispatchEvent(nativeEvent);
65+
expect(key).toBe('f');
66+
document.body.removeChild(container);
3067
});
3168
});
3269
});
3370

3471
describe('when key is not implemented in a browser', () => {
3572
describe('when event type is keypress', () => {
3673
describe('when charCode is 13', () => {
37-
it("returns 'Enter'", () => {
38-
var nativeEvent = new KeyboardEvent('keypress', {charCode: 13});
39-
40-
expect(getEventKey(nativeEvent)).toBe('Enter');
74+
it('returns "Enter"', () => {
75+
let key = null;
76+
class Comp extends React.Component {
77+
render() {
78+
return <input onKeyPress={e => (key = e.key)} />;
79+
}
80+
}
81+
82+
var container = document.createElement('div');
83+
ReactDOM.render(<Comp />, container);
84+
document.body.appendChild(container);
85+
86+
var nativeEvent = new KeyboardEvent('keypress', {
87+
charCode: 13,
88+
bubbles: true,
89+
cancelable: true,
90+
});
91+
container.firstChild.dispatchEvent(nativeEvent);
92+
expect(key).toBe('Enter');
93+
document.body.removeChild(container);
4194
});
4295
});
4396

4497
describe('when charCode is not 13', () => {
4598
it('returns a string from a charCode', () => {
46-
var nativeEvent = new KeyboardEvent('keypress', {charCode: 65});
47-
48-
expect(getEventKey(nativeEvent)).toBe('A');
99+
let key = null;
100+
class Comp extends React.Component {
101+
render() {
102+
return <input onKeyPress={e => (key = e.key)} />;
103+
}
104+
}
105+
106+
var container = document.createElement('div');
107+
ReactDOM.render(<Comp />, container);
108+
document.body.appendChild(container);
109+
110+
var nativeEvent = new KeyboardEvent('keypress', {
111+
charCode: 65,
112+
bubbles: true,
113+
cancelable: true,
114+
});
115+
container.firstChild.dispatchEvent(nativeEvent);
116+
expect(key).toBe('A');
117+
document.body.removeChild(container);
49118
});
50119
});
51120
});
52121

53122
describe('when event type is keydown or keyup', () => {
54123
describe('when keyCode is recognized', () => {
55124
it('returns a translated key', () => {
56-
var nativeEvent = new KeyboardEvent('keydown', {keyCode: 45});
57-
58-
expect(getEventKey(nativeEvent)).toBe('Insert');
125+
let key = null;
126+
class Comp extends React.Component {
127+
render() {
128+
return <input onKeyDown={e => (key = e.key)} />;
129+
}
130+
}
131+
132+
var container = document.createElement('div');
133+
ReactDOM.render(<Comp />, container);
134+
document.body.appendChild(container);
135+
136+
var nativeEvent = new KeyboardEvent('keydown', {
137+
keyCode: 45,
138+
bubbles: true,
139+
cancelable: true,
140+
});
141+
container.firstChild.dispatchEvent(nativeEvent);
142+
expect(key).toBe('Insert');
143+
document.body.removeChild(container);
59144
});
60145
});
61146

62147
describe('when keyCode is not recognized', () => {
63148
it('returns Unidentified', () => {
64-
var nativeEvent = new KeyboardEvent('keydown', {keyCode: 1337});
65-
66-
expect(getEventKey(nativeEvent)).toBe('Unidentified');
149+
let key = null;
150+
class Comp extends React.Component {
151+
render() {
152+
return <input onKeyDown={e => (key = e.key)} />;
153+
}
154+
}
155+
156+
var container = document.createElement('div');
157+
ReactDOM.render(<Comp />, container);
158+
document.body.appendChild(container);
159+
160+
var nativeEvent = new KeyboardEvent('keydown', {
161+
keyCode: 1337,
162+
bubbles: true,
163+
cancelable: true,
164+
});
165+
container.firstChild.dispatchEvent(nativeEvent);
166+
expect(key).toBe('Unidentified');
167+
document.body.removeChild(container);
67168
});
68169
});
69170
});
70-
71-
describe('when event type is unknown', () => {
72-
it('returns an empty string', () => {
73-
var nativeEvent = new KeyboardEvent('keysmack');
74-
75-
expect(getEventKey(nativeEvent)).toBe('');
76-
});
77-
});
78171
});
79172
});

‎packages/react-dom/src/events/getEventKey.js‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
*
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
68
*/
79

810
import getEventCharCode from './getEventCharCode';
@@ -32,49 +34,49 @@ var normalizeKey = {
3234
* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
3335
*/
3436
var translateToKey = {
35-
8: 'Backspace',
36-
9: 'Tab',
37-
12: 'Clear',
38-
13: 'Enter',
39-
16: 'Shift',
40-
17: 'Control',
41-
18: 'Alt',
42-
19: 'Pause',
43-
20: 'CapsLock',
44-
27: 'Escape',
45-
32: ' ',
46-
33: 'PageUp',
47-
34: 'PageDown',
48-
35: 'End',
49-
36: 'Home',
50-
37: 'ArrowLeft',
51-
38: 'ArrowUp',
52-
39: 'ArrowRight',
53-
40: 'ArrowDown',
54-
45: 'Insert',
55-
46: 'Delete',
56-
112: 'F1',
57-
113: 'F2',
58-
114: 'F3',
59-
115: 'F4',
60-
116: 'F5',
61-
117: 'F6',
62-
118: 'F7',
63-
119: 'F8',
64-
120: 'F9',
65-
121: 'F10',
66-
122: 'F11',
67-
123: 'F12',
68-
144: 'NumLock',
69-
145: 'ScrollLock',
70-
224: 'Meta',
37+
'8': 'Backspace',
38+
'9': 'Tab',
39+
'12': 'Clear',
40+
'13': 'Enter',
41+
'16': 'Shift',
42+
'17': 'Control',
43+
'18': 'Alt',
44+
'19': 'Pause',
45+
'20': 'CapsLock',
46+
'27': 'Escape',
47+
'32': ' ',
48+
'33': 'PageUp',
49+
'34': 'PageDown',
50+
'35': 'End',
51+
'36': 'Home',
52+
'37': 'ArrowLeft',
53+
'38': 'ArrowUp',
54+
'39': 'ArrowRight',
55+
'40': 'ArrowDown',
56+
'45': 'Insert',
57+
'46': 'Delete',
58+
'112': 'F1',
59+
'113': 'F2',
60+
'114': 'F3',
61+
'115': 'F4',
62+
'116': 'F5',
63+
'117': 'F6',
64+
'118': 'F7',
65+
'119': 'F8',
66+
'120': 'F9',
67+
'121': 'F10',
68+
'122': 'F11',
69+
'123': 'F12',
70+
'144': 'NumLock',
71+
'145': 'ScrollLock',
72+
'224': 'Meta',
7173
};
7274

7375
/**
7476
* @param {object} nativeEvent Native browser event.
7577
* @return {string} Normalized `key` property.
7678
*/
77-
function getEventKey(nativeEvent) {
79+
function getEventKey(nativeEvent: KeyboardEvent): string {
7880
if (nativeEvent.key) {
7981
// Normalize inconsistent values reported by browsers due to
8082
// implementations of a working draft specification.

0 commit comments

Comments
 (0)