Update getEventKey tests to use public API (#11299) (#11317)
* Add flow annotation to getEventKey. * Remove Simulate and SimulateNative for native events. * Style nits * Oops
Mike Wilcox committed
Nov 4, 2017 at 13:11 UTC
51c101fc48088b9c1a379fbec41ffaebf3212972
2 files changed
+162
-67
packages/react-dom/src/events/__tests__/getEventKey-test.js
+123
-30
@@ -9,24 +9,61 @@
9
10
'use strict';
11
12
-// TODO: can we express this test with only public API?
13
-var getEventKey = require('../getEventKey').default;
14
-
12
describe('getEventKey', () => {
13
+ var React;
14
+ var ReactDOM;
15
+
16
+ beforeEach(() => {
17
+ React = require('react');
18
+ ReactDOM = require('react-dom');
19
+ });
20
+
21
describe('when key is implemented in a browser', () => {
22
describe('when key is not normalized', () => {
23
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);
43
});
44
});
45
46
describe('when key is normalized', () => {
47
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);
67
});
68
});
69
});
@@ -34,18 +71,50 @@ describe('getEventKey', () => {
71
describe('when key is not implemented in a browser', () => {
72
describe('when event type is keypress', () => {
73
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);
94
});
95
});
96
97
describe('when charCode is not 13', () => {
98
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);
118
});
119
});
120
});
@@ -53,27 +122,51 @@ describe('getEventKey', () => {
122
describe('when event type is keydown or keyup', () => {
123
describe('when keyCode is recognized', () => {
124
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);
144
});
145
});
146
147
describe('when keyCode is not recognized', () => {
148
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);
168
});
169
});
170
});
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
- });
171
});
172
});
packages/react-dom/src/events/getEventKey.js
+39
-37
@@ -3,6 +3,8 @@
3
*
4
* This source code is licensed under the MIT license found in the
5
* LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
*/
9
10
import getEventCharCode from './getEventCharCode';
@@ -32,49 +34,49 @@ var normalizeKey = {
34
* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
35
*/
36
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',
73
};
74
75
/**
76
* @param {object} nativeEvent Native browser event.
77
* @return {string} Normalized `key` property.
78
*/
77
-function getEventKey(nativeEvent) {
79
+function getEventKey(nativeEvent: KeyboardEvent): string {
80
if (nativeEvent.key) {
81
// Normalize inconsistent values reported by browsers due to
82
// implementations of a working draft specification.