From 77c655d9d098a504ee21d9a8e210aaf17b025c89 Mon Sep 17 00:00:00 2001 From: Mike Wilcox Date: Sat, 4 Nov 2017 13:11:49 -0400 Subject: [PATCH] Update getEventKey tests to use public API (#11299) (#11317) * Add flow annotation to getEventKey. * Remove Simulate and SimulateNative for native events. * Style nits * Oops --- .../src/events/__tests__/getEventKey-test.js | 153 ++++++++++++++---- packages/react-dom/src/events/getEventKey.js | 76 ++++----- 2 files changed, 162 insertions(+), 67 deletions(-) diff --git a/packages/react-dom/src/events/__tests__/getEventKey-test.js b/packages/react-dom/src/events/__tests__/getEventKey-test.js index fd720630a150d..a49866d6ab50c 100644 --- a/packages/react-dom/src/events/__tests__/getEventKey-test.js +++ b/packages/react-dom/src/events/__tests__/getEventKey-test.js @@ -9,24 +9,61 @@ '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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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); }); }); }); @@ -34,18 +71,50 @@ describe('getEventKey', () => { 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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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); }); }); }); @@ -53,27 +122,51 @@ describe('getEventKey', () => { 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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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 (key = e.key)} />; + } + } + + var container = document.createElement('div'); + ReactDOM.render(, 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(''); - }); - }); }); }); diff --git a/packages/react-dom/src/events/getEventKey.js b/packages/react-dom/src/events/getEventKey.js index 074cf3bee8ab4..b224b30580c74 100644 --- a/packages/react-dom/src/events/getEventKey.js +++ b/packages/react-dom/src/events/getEventKey.js @@ -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'; @@ -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.