Update getEventKey tests to use public API (#11299) (#11317)

* Add flow annotation to getEventKey.

* Remove Simulate and SimulateNative for native events.

* Style nits

* Oops

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'});
+        let key = null;
+        class Comp extends React.Component {
+          render() {
+            return <input onKeyDown={e => (key = e.key)} />;
+          }
+        }
 
-        expect(getEventKey(nativeEvent)).toBe('Delete');
+        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'});
+        let key = null;
+        class Comp extends React.Component {
+          render() {
+            return <input onKeyDown={e => (key = e.key)} />;
+          }
+        }
 
-        expect(getEventKey(nativeEvent)).toBe('f');
+        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);
       });
     });
   });
@@ -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});
+        it('returns "Enter"', () => {
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyPress={e => (key = e.key)} />;
+            }
+          }
 
-          expect(getEventKey(nativeEvent)).toBe('Enter');
+          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});
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyPress={e => (key = e.key)} />;
+            }
+          }
 
-          expect(getEventKey(nativeEvent)).toBe('A');
+          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);
         });
       });
     });
@@ -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});
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyDown={e => (key = e.key)} />;
+            }
+          }
 
-          expect(getEventKey(nativeEvent)).toBe('Insert');
+          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});
+          let key = null;
+          class Comp extends React.Component {
+            render() {
+              return <input onKeyDown={e => (key = e.key)} />;
+            }
+          }
 
-          expect(getEventKey(nativeEvent)).toBe('Unidentified');
+          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('');
-      });
-    });
   });
 });

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.