Skip to content

Commit

Permalink
Update getEventKey tests to use public API (facebook#11299) (facebook…
Browse files Browse the repository at this point in the history 
…#11317)

* Add flow annotation to getEventKey.

* Remove Simulate and SimulateNative for native events.

* Style nits

* Oops
  • Loading branch information
@mwilc0x @Ethan-Arrowood
mwilc0x authored and Ethan-Arrowood committed Dec 8, 2017
1 parent 69f03ee commit 77c655d
Show file tree
Hide file tree
Showing 2 changed files with 162 additions and 67 deletions.
153 changes: 123 additions & 30 deletions packages/react-dom/src/events/__tests__/getEventKey-test.js
View file
Expand Up @@ -9,71 +9,164 @@

'use strict';

// TODO: can we express this test with only public API?
var getEventKey = require('../getEventKey').default;

describe('getEventKey', () => {
var React;
var ReactDOM;

beforeEach(() => {
React = require('react');
ReactDOM = require('react-dom');
});

describe('when key is implemented in a browser', () => {
describe('when key is not normalized', () => {
it('returns a normalized value', () => {
var nativeEvent = new KeyboardEvent('keypress', {key: 'Del'});

expect(getEventKey(nativeEvent)).toBe('Delete');
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyDown={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keydown', {
key: 'Del',
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('Delete');
document.body.removeChild(container);
});
});

describe('when key is normalized', () => {
it('returns a key', () => {
var nativeEvent = new KeyboardEvent('keypress', {key: 'f'});

expect(getEventKey(nativeEvent)).toBe('f');
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyDown={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keydown', {
key: 'f',
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('f');
document.body.removeChild(container);
});
});
});

describe('when key is not implemented in a browser', () => {
describe('when event type is keypress', () => {
describe('when charCode is 13', () => {
it("returns 'Enter'", () => {
var nativeEvent = new KeyboardEvent('keypress', {charCode: 13});

expect(getEventKey(nativeEvent)).toBe('Enter');
it('returns "Enter"', () => {
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyPress={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keypress', {
charCode: 13,
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('Enter');
document.body.removeChild(container);
});
});

describe('when charCode is not 13', () => {
it('returns a string from a charCode', () => {
var nativeEvent = new KeyboardEvent('keypress', {charCode: 65});

expect(getEventKey(nativeEvent)).toBe('A');
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyPress={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keypress', {
charCode: 65,
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('A');
document.body.removeChild(container);
});
});
});

describe('when event type is keydown or keyup', () => {
describe('when keyCode is recognized', () => {
it('returns a translated key', () => {
var nativeEvent = new KeyboardEvent('keydown', {keyCode: 45});

expect(getEventKey(nativeEvent)).toBe('Insert');
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyDown={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keydown', {
keyCode: 45,
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('Insert');
document.body.removeChild(container);
});
});

describe('when keyCode is not recognized', () => {
it('returns Unidentified', () => {
var nativeEvent = new KeyboardEvent('keydown', {keyCode: 1337});

expect(getEventKey(nativeEvent)).toBe('Unidentified');
let key = null;
class Comp extends React.Component {
render() {
return <input onKeyDown={e => (key = e.key)} />;
}
}

var container = document.createElement('div');
ReactDOM.render(<Comp />, container);
document.body.appendChild(container);

var nativeEvent = new KeyboardEvent('keydown', {
keyCode: 1337,
bubbles: true,
cancelable: true,
});
container.firstChild.dispatchEvent(nativeEvent);
expect(key).toBe('Unidentified');
document.body.removeChild(container);
});
});
});

describe('when event type is unknown', () => {
it('returns an empty string', () => {
var nativeEvent = new KeyboardEvent('keysmack');

expect(getEventKey(nativeEvent)).toBe('');
});
});
});
});
76 changes: 39 additions & 37 deletions packages/react-dom/src/events/getEventKey.js
View file
Expand Up @@ -3,6 +3,8 @@
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/

import getEventCharCode from './getEventCharCode';
Expand Down Expand Up @@ -32,49 +34,49 @@ var normalizeKey = {
* @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
*/
var translateToKey = {
8: 'Backspace',
9: 'Tab',
12: 'Clear',
13: 'Enter',
16: 'Shift',
17: 'Control',
18: 'Alt',
19: 'Pause',
20: 'CapsLock',
27: 'Escape',
32: ' ',
33: 'PageUp',
34: 'PageDown',
35: 'End',
36: 'Home',
37: 'ArrowLeft',
38: 'ArrowUp',
39: 'ArrowRight',
40: 'ArrowDown',
45: 'Insert',
46: 'Delete',
112: 'F1',
113: 'F2',
114: 'F3',
115: 'F4',
116: 'F5',
117: 'F6',
118: 'F7',
119: 'F8',
120: 'F9',
121: 'F10',
122: 'F11',
123: 'F12',
144: 'NumLock',
145: 'ScrollLock',
224: 'Meta',
'8': 'Backspace',
'9': 'Tab',
'12': 'Clear',
'13': 'Enter',
'16': 'Shift',
'17': 'Control',
'18': 'Alt',
'19': 'Pause',
'20': 'CapsLock',
'27': 'Escape',
'32': ' ',
'33': 'PageUp',
'34': 'PageDown',
'35': 'End',
'36': 'Home',
'37': 'ArrowLeft',
'38': 'ArrowUp',
'39': 'ArrowRight',
'40': 'ArrowDown',
'45': 'Insert',
'46': 'Delete',
'112': 'F1',
'113': 'F2',
'114': 'F3',
'115': 'F4',
'116': 'F5',
'117': 'F6',
'118': 'F7',
'119': 'F8',
'120': 'F9',
'121': 'F10',
'122': 'F11',
'123': 'F12',
'144': 'NumLock',
'145': 'ScrollLock',
'224': 'Meta',
};

/**
* @param {object} nativeEvent Native browser event.
* @return {string} Normalized `key` property.
*/
function getEventKey(nativeEvent) {
function getEventKey(nativeEvent: KeyboardEvent): string {
if (nativeEvent.key) {
// Normalize inconsistent values reported by browsers due to
// implementations of a working draft specification.
Expand Down

0 comments on commit 77c655d

Please sign in to comment.