1. /**

  2.  * Copyright (c) Meta Platforms, Inc. and affiliates.

  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.  * @emails react-core

  8.  */

  9. 

  10. 'use strict';

  11. 

  12. let React;

  13. let ReactDOM;

  14. 

  15. describe('getEventKey', () => {

  16.   let container;

  17. 

  18.   beforeEach(() => {

  19.     React = require('react');

  20.     ReactDOM = require('react-dom');

  21. 

  22.     // The container has to be attached for events to fire.

  23.     container = document.createElement('div');

  24.     document.body.appendChild(container);

  25.   });

  26. 

  27.   afterEach(() => {

  28.     document.body.removeChild(container);

  29.     container = null;

  30.   });

  31. 

  32.   describe('when key is implemented in a browser', () => {

  33.     describe('when key is not normalized', () => {

  34.       it('returns a normalized value', () => {

  35.         let key = null;

  36.         class Comp extends React.Component {

  37.           render() {

  38.             return <input onKeyDown={e => (key = e.key)} />;

  39.           }

  40.         }

  41. 

  42.         ReactDOM.render(<Comp />, container);

  43. 

  44.         const nativeEvent = new KeyboardEvent('keydown', {

  45.           key: 'Del',

  46.           bubbles: true,

  47.           cancelable: true,

  48.         });

  49.         container.firstChild.dispatchEvent(nativeEvent);

  50.         expect(key).toBe('Delete');

  51.       });

  52.     });

  53. 

  54.     describe('when key is normalized', () => {

  55.       it('returns a key', () => {

  56.         let key = null;

  57.         class Comp extends React.Component {

  58.           render() {

  59.             return <input onKeyDown={e => (key = e.key)} />;

  60.           }

  61.         }

  62. 

  63.         ReactDOM.render(<Comp />, container);

  64. 

  65.         const nativeEvent = new KeyboardEvent('keydown', {

  66.           key: 'f',

  67.           bubbles: true,

  68.           cancelable: true,

  69.         });

  70.         container.firstChild.dispatchEvent(nativeEvent);

  71.         expect(key).toBe('f');

  72.       });

  73.     });

  74.   });

  75. 

  76.   describe('when key is not implemented in a browser', () => {

  77.     describe('when event type is keypress', () => {

  78.       describe('when charCode is 13', () => {

  79.         it('returns "Enter"', () => {

  80.           let key = null;

  81.           class Comp extends React.Component {

  82.             render() {

  83.               return <input onKeyPress={e => (key = e.key)} />;

  84.             }

  85.           }

  86. 

  87.           ReactDOM.render(<Comp />, container);

  88. 

  89.           const nativeEvent = new KeyboardEvent('keypress', {

  90.             charCode: 13,

  91.             bubbles: true,

  92.             cancelable: true,

  93.           });

  94.           container.firstChild.dispatchEvent(nativeEvent);

  95.           expect(key).toBe('Enter');

  96.         });

  97.       });

  98. 

  99.       describe('when charCode is not 13', () => {

  100.         it('returns a string from a charCode', () => {

  101.           let key = null;

  102.           class Comp extends React.Component {

  103.             render() {

  104.               return <input onKeyPress={e => (key = e.key)} />;

  105.             }

  106.           }

  107. 

  108.           ReactDOM.render(<Comp />, container);

  109. 

  110.           const 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.         });

  118.       });

  119.     });

  120. 

  121.     describe('when event type is keydown or keyup', () => {

  122.       describe('when keyCode is recognized', () => {

  123.         it('returns a translated key', () => {

  124.           let key = null;

  125.           class Comp extends React.Component {

  126.             render() {

  127.               return <input onKeyDown={e => (key = e.key)} />;

  128.             }

  129.           }

  130. 

  131.           ReactDOM.render(<Comp />, container);

  132. 

  133.           const nativeEvent = new KeyboardEvent('keydown', {

  134.             keyCode: 45,

  135.             bubbles: true,

  136.             cancelable: true,

  137.           });

  138.           container.firstChild.dispatchEvent(nativeEvent);

  139.           expect(key).toBe('Insert');

  140.         });

  141.       });

  142. 

  143.       describe('when keyCode is not recognized', () => {

  144.         it('returns Unidentified', () => {

  145.           let key = null;

  146.           class Comp extends React.Component {

  147.             render() {

  148.               return <input onKeyDown={e => (key = e.key)} />;

  149.             }

  150.           }

  151. 

  152.           ReactDOM.render(<Comp />, container);

  153. 

  154.           const nativeEvent = new KeyboardEvent('keydown', {

  155.             keyCode: 1337,

  156.             bubbles: true,

  157.             cancelable: true,

  158.           });

  159.           container.firstChild.dispatchEvent(nativeEvent);

  160.           expect(key).toBe('Unidentified');

  161.         });

  162.       });

  163.     });

  164.   });

  165. });
About Sign Up Leave Feedback Contact