main
js 184 lines 4.73 KB
Raw
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 ReactDOMClient;
14
15 let act;
16
17 describe('getEventKey', () => {
18 let container;
19 let root;
20
21 beforeEach(() => {
22 React = require('react');
23 ReactDOMClient = require('react-dom/client');
24
25 act = require('internal-test-utils').act;
26
27 // The container has to be attached for events to fire.
28 container = document.createElement('div');
29 root = ReactDOMClient.createRoot(container);
30 document.body.appendChild(container);
31 });
32
33 afterEach(() => {
34 document.body.removeChild(container);
35 container = null;
36 root = null;
37 });
38
39 describe('when key is implemented in a browser', () => {
40 describe('when key is not normalized', () => {
41 it('returns a normalized value', async () => {
42 let key = null;
43 class Comp extends React.Component {
44 render() {
45 return <input onKeyDown={e => (key = e.key)} />;
46 }
47 }
48
49 await act(() => {
50 root.render(<Comp />);
51 });
52
53 const nativeEvent = new KeyboardEvent('keydown', {
54 key: 'Del',
55 bubbles: true,
56 cancelable: true,
57 });
58 container.firstChild.dispatchEvent(nativeEvent);
59 expect(key).toBe('Delete');
60 });
61 });
62
63 describe('when key is normalized', () => {
64 it('returns a key', async () => {
65 let key = null;
66 class Comp extends React.Component {
67 render() {
68 return <input onKeyDown={e => (key = e.key)} />;
69 }
70 }
71
72 await act(() => {
73 root.render(<Comp />);
74 });
75
76 const nativeEvent = new KeyboardEvent('keydown', {
77 key: 'f',
78 bubbles: true,
79 cancelable: true,
80 });
81 container.firstChild.dispatchEvent(nativeEvent);
82 expect(key).toBe('f');
83 });
84 });
85 });
86
87 describe('when key is not implemented in a browser', () => {
88 describe('when event type is keypress', () => {
89 describe('when charCode is 13', () => {
90 it('returns "Enter"', async () => {
91 let key = null;
92 class Comp extends React.Component {
93 render() {
94 return <input onKeyPress={e => (key = e.key)} />;
95 }
96 }
97
98 await act(() => {
99 root.render(<Comp />);
100 });
101
102 const nativeEvent = new KeyboardEvent('keypress', {
103 charCode: 13,
104 bubbles: true,
105 cancelable: true,
106 });
107 container.firstChild.dispatchEvent(nativeEvent);
108 expect(key).toBe('Enter');
109 });
110 });
111
112 describe('when charCode is not 13', () => {
113 it('returns a string from a charCode', async () => {
114 let key = null;
115 class Comp extends React.Component {
116 render() {
117 return <input onKeyPress={e => (key = e.key)} />;
118 }
119 }
120
121 await act(() => {
122 root.render(<Comp />);
123 });
124
125 const nativeEvent = new KeyboardEvent('keypress', {
126 charCode: 65,
127 bubbles: true,
128 cancelable: true,
129 });
130 container.firstChild.dispatchEvent(nativeEvent);
131 expect(key).toBe('A');
132 });
133 });
134 });
135
136 describe('when event type is keydown or keyup', () => {
137 describe('when keyCode is recognized', () => {
138 it('returns a translated key', async () => {
139 let key = null;
140 class Comp extends React.Component {
141 render() {
142 return <input onKeyDown={e => (key = e.key)} />;
143 }
144 }
145
146 await act(() => {
147 root.render(<Comp />);
148 });
149
150 const nativeEvent = new KeyboardEvent('keydown', {
151 keyCode: 45,
152 bubbles: true,
153 cancelable: true,
154 });
155 container.firstChild.dispatchEvent(nativeEvent);
156 expect(key).toBe('Insert');
157 });
158 });
159
160 describe('when keyCode is not recognized', () => {
161 it('returns Unidentified', async () => {
162 let key = null;
163 class Comp extends React.Component {
164 render() {
165 return <input onKeyDown={e => (key = e.key)} />;
166 }
167 }
168
169 await act(() => {
170 root.render(<Comp />);
171 });
172
173 const nativeEvent = new KeyboardEvent('keydown', {
174 keyCode: 1337,
175 bubbles: true,
176 cancelable: true,
177 });
178 container.firstChild.dispatchEvent(nativeEvent);
179 expect(key).toBe('Unidentified');
180 });
181 });
182 });
183 });
184 });