openOnKeyDown-tests.js
4.9 KB
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
module('Selection containers - Open On Key Down');
var KEYS = require('select2/keys');
var $ = require('jquery');
/**
* Build a keydown event with the given key code and extra options.
*
* @param {Number} keyCode the keyboard code to be used for the 'which'
* attribute of the keydown event.
* @param {Object} eventProps extra properties to build the keydown event.
*
* @return {jQuery.Event} a 'keydown' type event.
*/
function buildKeyDownEvent (keyCode, eventProps) {
return $.Event('keydown', $.extend({}, { which: keyCode }, eventProps));
}
/**
* Wrapper function providing a select2 element with a given enabled/disabled
* state that will get a given keydown event triggered on it. Provide an
* assertion callback function to test the results of the triggered event.
*
* @param {Boolean} isEnabled the enabled state of the desired select2
* element.
* @param {String} testName name for the test.
* @param {Number} keyCode used to set the 'which' attribute of the
* keydown event.
* @param {Object} eventProps attributes to be used to build the keydown
* event.
* @param {Function} fn assertion callback to perform checks on the
* result of triggering the event, receives the
* 'assert' variable for the test and the select2
* instance behind the built <select> element.
* @return {null}
*/
function testAbled(isEnabled, testName, keyCode, eventProps, fn) {
test(testName, function (assert) {
var $element = $(
'<select>' +
'<option>one</option>' +
'<option>two</option>' +
'</select>'
);
$('#qunit-fixture').append($element);
$element.select2({ disabled: !isEnabled });
var select2 = $element.data('select2');
var $selection = select2.$selection;
assert.notOk(select2.isOpen(), 'The instance should not be open');
assert.equal(select2.isEnabled(), isEnabled);
var event = buildKeyDownEvent(keyCode, eventProps);
assert.ok(event.which, 'The event\'s key code (.which) should be set');
$selection.trigger(event);
fn(assert, select2);
});
}
/**
* Test the given keydown event on an enabled element. See #testAbled for
* params.
*/
function testEnabled (testName, keyCode, eventProps, fn) {
testAbled(true, testName, keyCode, eventProps, fn);
}
/**
* Test the given keydown event on a disabled element. See #testAbled for
* params.
*/
function testDisabled (testName, keyCode, eventProps, fn) {
testAbled(false, testName, keyCode, eventProps, fn);
}
/**
* Assertion function used by the above test* wrappers. Asserts that the given
* select2 instance is open.
*
* @param {Assert} assert
* @param {Select2} select
* @return {null}
*/
function assertOpened (assert, select2) {
assert.ok(select2.isOpen(), 'The element should be open');
}
/**
* Assertion function used by the above test* wrappers. Asserts that the given
* select2 instance is not open.
*
* @param {Assert} assert
* @param {Select2} select
* @return {null}
*/
function assertNotOpened (assert, select2) {
assert.notOk(select2.isOpen(), 'The element should not be open');
}
/**
* ENTER, SPACE, and ALT+DOWN should all open an enabled select2 element.
*/
testEnabled(
'enabled element will open on ENTER',
KEYS.ENTER, {},
assertOpened
);
testEnabled(
'enabled element will open on SPACE',
KEYS.SPACE, {},
assertOpened
);
testEnabled(
'enabled element will open on ALT+DOWN',
KEYS.DOWN, { altKey: true },
assertOpened
);
/**
* Some other keys triggered on an enabled select2 element should not open it.
*/
testEnabled(
'enabled element will not open on UP',
KEYS.UP, {},
assertNotOpened
);
testEnabled(
'enabled element will not open on DOWN',
KEYS.UP, {},
assertNotOpened
);
testEnabled(
'enabled element will not open on LEFT',
KEYS.UP, {},
assertNotOpened
);
testEnabled(
'enabled element will not open on RIGHT',
KEYS.UP, {},
assertNotOpened
);
/*
* The keys that will open an enabled select2 element should not open a disabled
* one.
*/
testDisabled(
'disabled element will not open on ENTER',
KEYS.ENTER, {},
assertNotOpened
);
testDisabled(
'disabled element will not open on SPACE',
KEYS.SPACE, {},
assertNotOpened
);
testDisabled(
'disabled element will not open on ALT+DOWN',
KEYS.DOWN, { altKey: true },
assertNotOpened
);
/**
* Other keys should continue to not open a disabled select2 element.
*/
testDisabled(
'disabled element will not open on UP',
KEYS.UP, {},
assertNotOpened
);
testDisabled(
'disabled element will not open on DOWN',
KEYS.UP, {},
assertNotOpened
);
testDisabled(
'disabled element will not open on LEFT',
KEYS.UP, {},
assertNotOpened
);
testDisabled(
'disabled element will not open on RIGHT',
KEYS.UP, {},
assertNotOpened
);