/
Keyboard-test.internal.js
125 lines (109 loc) · 3.26 KB
/
Keyboard-test.internal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
let React;
let ReactFeatureFlags;
let ReactDOM;
let useKeyboardResponder;
import {keydown, keyup} from '../test-utils';
function initializeModules(hasPointerEvents) {
jest.resetModules();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableFlareAPI = true;
React = require('react');
ReactDOM = require('react-dom');
useKeyboardResponder = require('react-events/keyboard').useKeyboardResponder;
}
describe('Keyboard event responder', () => {
let container;
beforeEach(() => {
initializeModules();
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
ReactDOM.render(null, container);
document.body.removeChild(container);
container = null;
});
describe('disabled', () => {
let onKeyDown, onKeyUp, ref;
beforeEach(() => {
onKeyDown = jest.fn();
onKeyUp = jest.fn();
ref = React.createRef();
const Component = () => {
const listener = useKeyboardResponder({
disabled: true,
onKeyDown,
onKeyUp,
});
return <div ref={ref} listeners={listener} />;
};
ReactDOM.render(<Component />, container);
});
it('prevents custom events being dispatched', () => {
const target = ref.current;
target.dispatchEvent(keydown());
target.dispatchEvent(keyup());
expect(onKeyDown).not.toBeCalled();
expect(onKeyUp).not.toBeCalled();
});
});
describe('onKeyDown', () => {
let onKeyDown, ref;
beforeEach(() => {
onKeyDown = jest.fn();
ref = React.createRef();
const Component = () => {
const listener = useKeyboardResponder({
onKeyDown,
});
return <div ref={ref} listeners={listener} />;
};
ReactDOM.render(<Component />, container);
});
it('is called after "keydown" event', () => {
ref.current.dispatchEvent(keydown({key: 'Q'}));
expect(onKeyDown).toHaveBeenCalledTimes(1);
expect(onKeyDown).toHaveBeenCalledWith(
expect.objectContaining({key: 'Q', type: 'keydown'}),
);
});
});
describe('onKeyUp', () => {
let onKeyDown, onKeyUp, ref;
beforeEach(() => {
onKeyDown = jest.fn();
onKeyUp = jest.fn();
ref = React.createRef();
const Component = () => {
const listener = useKeyboardResponder({
onKeyDown,
onKeyUp,
});
return <div ref={ref} listeners={listener} />;
};
ReactDOM.render(<Component />, container);
});
it('is called after "keydown" event', () => {
const target = ref.current;
target.dispatchEvent(keydown({key: 'Q'}));
target.dispatchEvent(keyup({key: 'Q'}));
expect(onKeyDown).toHaveBeenCalledTimes(1);
expect(onKeyDown).toHaveBeenCalledWith(
expect.objectContaining({key: 'Q', type: 'keydown'}),
);
expect(onKeyUp).toHaveBeenCalledTimes(1);
expect(onKeyUp).toHaveBeenCalledWith(
expect.objectContaining({key: 'Q', type: 'keyup'}),
);
});
});
});