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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
|
<!DOCTYPE html>
<html>
<!--
Copyright 2011 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>Closure Unit Tests - goog.fx.DragListGroup</title>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.BrowserEvent');
goog.require('goog.events.BrowserFeature');
goog.require('goog.events.Event');
goog.require('goog.fx.DragEvent');
goog.require('goog.fx.DragListGroup');
goog.require('goog.object');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
</script>
<style>
.opacity-40 {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.cursor_move {
cursor: move;
-moz-user-select: none;
-webkit-user-select: none;
}
.cursor_pointer {
cursor: pointer;
}
.blue_bg {
background-color: #0000CC;
}
</style>
</head>
<body>
<div id="sandbox"></div>
<script>
/** @type {goog.fx.DragListGroup} */
var dlg;
/** @type {goog.dom.Element} */
var list;
/** @type {goog.events.BrowserEvent} */
var event;
/**
* The number of event listeners registered by the DragListGroup after the
* init() call.
* @type {number}
*/
var initialListenerCount;
/**
* Type of events fired by the DragListGroup.
* @type {!Array.<string>}
*/
var firedEventTypes;
function setUp() {
var sandbox = goog.dom.getElement('sandbox');
list = goog.dom.createDom('div', {'id': 'horiz_div'});
list.appendChild(
goog.dom.createDom('div', null, goog.dom.createTextNode('1')));
list.appendChild(
goog.dom.createDom('div', null, goog.dom.createTextNode('2')));
list.appendChild(
goog.dom.createDom('div', null, goog.dom.createTextNode('3')));
sandbox.appendChild(list);
dlg = new goog.fx.DragListGroup();
dlg.setDragItemHoverClass('opacity_40', 'cursor_move');
dlg.setDragItemHandleHoverClass('opacity_40', 'cursor_pointer');
dlg.setCurrDragItemClass('blue_bg', 'opacity_40');
dlg.setDraggerElClass('cursor_move', 'blue_bg');
dlg.addDragList(list, goog.fx.DragListDirection.RIGHT);
dlg.init();
initialListenerCount = goog.object.getCount(dlg.eventHandler_.keys_);
event = new goog.events.BrowserEvent();
event.currentTarget = list.getElementsByTagName('div')[0];
firedEventTypes = [];
goog.events.listen(dlg,
goog.object.getValues(goog.fx.DragListGroup.EventType),
function(e) {
firedEventTypes.push(e.type);
});
}
function tearDown() {
dlg.dispose();
goog.dom.getElement('sandbox').innerHTML = '';
assertEquals('all event listeners have been removed', 0,
goog.events.getTotalListenerCount());
}
/**
* Test the initial assumptions.
*
* Verify that the setter methods work properly, i.e., the CSS classes are
* stored in the private arrays after init() but are not added yet to target.
* (Since initially, we are not yet hovering over any list, in particular,
* over this target.)
*/
function testSettersAfterInit() {
assertTrue(goog.array.equals(dlg.dragItemHoverClasses_,
['opacity_40', 'cursor_move']));
assertTrue(goog.array.equals(dlg.dragItemHandleHoverClasses_,
['opacity_40', 'cursor_pointer']));
assertTrue(goog.array.equals(dlg.currDragItemClasses_,
['blue_bg', 'opacity_40']));
assertFalse('Should have no cursor_move class after init',
goog.dom.classes.has(event.currentTarget, 'cursor_move'));
assertFalse('Should have no cursor_pointer class after init',
goog.dom.classes.has(event.currentTarget, 'cursor_pointer'));
assertFalse('Should have no opacity_40 class after init',
goog.dom.classes.has(event.currentTarget, 'opacity_40'));
assertFalse('Should not have blue_bg class after init',
goog.dom.classes.has(event.currentTarget, 'blue_bg'));
}
/**
* Test the effect of hovering over a list.
*
* Check that after the MOUSEOVER browser event these classes are added to
* the current target of the event.
*/
function testAddDragItemHoverClasses() {
dlg.handleDragItemMouseover_(event);
assertTrue('Should have cursor_move class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'cursor_move'));
assertTrue('Should have opacity_40 class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'opacity_40'));
assertFalse('Should not have cursor_pointer class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'cursor_pointer'));
assertFalse('Should not have blue_bg class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'blue_bg'));
}
function testAddDragItemHandleHoverClasses() {
dlg.handleDragItemHandleMouseover_(event);
assertFalse('Should not have cursor_move class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'cursor_move'));
assertTrue('Should have opacity_40 class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'opacity_40'));
assertTrue('Should have cursor_pointer class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'cursor_pointer'));
assertFalse('Should not have blue_bg class after MOUSEOVER',
goog.dom.classes.has(event.currentTarget, 'blue_bg'));
}
/**
* Test the effect of stopping hovering over a list.
*
* Check that after the MOUSEOUT browser event all CSS classes are removed
* from the target (as we are no longer hovering over the it).
*/
function testRemoveDragItemHoverClasses() {
dlg.handleDragItemMouseover_(event);
dlg.handleDragItemMouseout_(event);
assertFalse('Should have no cursor_move class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'cursor_move'));
assertFalse('Should have no cursor_pointer class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'cursor_pointer'));
assertFalse('Should have no opacity_40 class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'opacity_40'));
assertFalse('Should have no blue_bg class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'blue_bg'));
}
function testRemoveDragItemHandleHoverClasses() {
dlg.handleDragItemHandleMouseover_(event);
dlg.handleDragItemHandleMouseout_(event);
assertFalse('Should have no cursor_move class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'cursor_move'));
assertFalse('Should have no cursor_pointer class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'cursor_pointer'));
assertFalse('Should have no opacity_40 class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'opacity_40'));
assertFalse('Should have no blue_bg class after MOUSEOUT',
goog.dom.classes.has(event.currentTarget, 'blue_bg'));
}
/**
* Test the effect of dragging an item. (DRAGSTART event.)
*
* Check that after the MOUSEDOWN browser event is handled by the
* handlePotentialDragStart_() method the currDragItem has the CSS classes
* set by the setter method.
*/
function testAddCurrentDragItemClasses() {
var be = new goog.events.BrowserEvent({
type: goog.events.EventType.MOUSEDOWN,
button: goog.events.BrowserFeature.HAS_W3C_BUTTON ? 0 : 1
});
event.event_ = be;
dlg.handlePotentialDragStart_(event);
assertFalse('Should have no cursor_move class after MOUSEDOWN',
goog.dom.classes.has(dlg.currDragItem_, 'cursor_move'));
assertFalse('Should have no cursor_pointer class after MOUSEDOWN',
goog.dom.classes.has(dlg.currDragItem_, 'cursor_pointer'));
assertTrue('Should have opacity_40 class after MOUSEDOWN',
goog.dom.classes.has(dlg.currDragItem_, 'opacity_40'));
assertTrue('Should have blue_bg class after MOUSEDOWN',
goog.dom.classes.has(dlg.currDragItem_, 'blue_bg'));
}
/**
* Test the effect of dragging an item. (DRAGEND event.)
*
* Check that after the MOUSEUP browser event handled by the handleDragEnd_()
* method the currDragItem has no CSS classes set in the dispatched event.
*/
function testRemoveCurrentDragItemClasses() {
var be = new goog.events.BrowserEvent({
type: goog.events.EventType.MOUSEDOWN,
button: goog.events.BrowserFeature.HAS_W3C_BUTTON ? 0 : 1
});
event.event_ = be;
dlg.handlePotentialDragStart_(event);
// Need to catch the dispatched event because the temporary fields
// including dlg.currentDragItem_ are cleared after the dragging has ended.
var currDragItem = goog.dom.createDom(
'div', ['cursor_move', 'blue_bg'], goog.dom.createTextNode('4'));
goog.events.listen(dlg, goog.fx.DragListGroup.EventType.DRAGEND,
function(e) {currDragItem = dlg.currDragItem_;});
var dragger = new goog.fx.Dragger(event.currentTarget);
be.type = goog.events.EventType.MOUSEUP;
be.clientX = 1;
be.clientY = 2;
var dragEvent = new goog.fx.DragEvent(
goog.fx.Dragger.EventType.END, dragger, be.clientX, be.clientY, be);
dlg.handleDragEnd_(dragEvent); // this method dispatches the DRAGEND event
dragger.dispose();
assertFalse('Should have no cursor_move class after MOUSEUP',
goog.dom.classes.has(currDragItem, 'cursor_move'));
assertFalse('Should have no cursor_pointer class after MOUSEUP',
goog.dom.classes.has(currDragItem, 'cursor_pointer'));
assertFalse('Should have no opacity_40 class after MOUSEUP',
goog.dom.classes.has(currDragItem, 'opacity_40'));
assertFalse('Should have no blue_bg class after MOUSEUP',
goog.dom.classes.has(currDragItem, 'blue_bg'));
}
/**
* Asserts that the DragListGroup is in idle state.
* @param {!goog.fx.DragListGroup} dlg The DragListGroup to examine.
*/
function assertIdle(dlg) {
assertNull('dragger element has been cleaned up', dlg.draggerEl_);
assertNull('dragger has been cleaned up', dlg.dragger_);
assertEquals('the additional event listeners have been removed',
initialListenerCount, goog.object.getCount(dlg.eventHandler_.keys_));
}
function testFiredEvents() {
goog.testing.events.fireClickSequence(list.firstChild);
assertArrayEquals('event types in case of zero distance dragging', [
goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
goog.fx.DragListGroup.EventType.DRAGSTART,
goog.fx.DragListGroup.EventType.BEFOREDRAGEND,
goog.fx.DragListGroup.EventType.DRAGEND
], firedEventTypes);
assertIdle(dlg);
}
function testFiredEventsWithHysteresis() {
dlg.setHysteresis(2);
goog.testing.events.fireClickSequence(list.firstChild);
assertArrayEquals('no events fired on click if hysteresis is enabled', [],
firedEventTypes);
assertIdle(dlg);
goog.testing.events.fireMouseDownEvent(list.firstChild, null,
new goog.math.Coordinate(0, 0));
goog.testing.events.fireMouseMoveEvent(list.firstChild,
new goog.math.Coordinate(1, 0));
assertArrayEquals('no events fired below hysteresis distance', [],
firedEventTypes);
goog.testing.events.fireMouseMoveEvent(list.firstChild,
new goog.math.Coordinate(3, 0));
assertArrayEquals('start+move events are fired over hysteresis distance', [
goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
goog.fx.DragListGroup.EventType.DRAGSTART,
goog.fx.DragListGroup.EventType.BEFOREDRAGMOVE,
goog.fx.DragListGroup.EventType.DRAGMOVE
], firedEventTypes);
firedEventTypes.length = 0;
goog.testing.events.fireMouseUpEvent(list.firstChild, null,
new goog.math.Coordinate(3, 0));
assertArrayEquals('end events are fired on mouseup', [
goog.fx.DragListGroup.EventType.BEFOREDRAGEND,
goog.fx.DragListGroup.EventType.DRAGEND
], firedEventTypes);
assertIdle(dlg);
}
function testPreventDefaultBeforeDragStart() {
goog.events.listen(dlg, goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
goog.events.Event.preventDefault);
goog.testing.events.fireMouseDownEvent(list.firstChild);
assertArrayEquals('event types if dragging is prevented',
[goog.fx.DragListGroup.EventType.BEFOREDRAGSTART], firedEventTypes);
assertIdle(dlg);
}
function testPreventDefaultBeforeDragStartWithHysteresis() {
dlg.setHysteresis(5);
goog.events.listen(dlg, goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
goog.events.Event.preventDefault);
goog.testing.events.fireMouseDownEvent(list.firstChild, null,
new goog.math.Coordinate(0, 0));
goog.testing.events.fireMouseMoveEvent(list.firstChild,
new goog.math.Coordinate(10, 0));
assertArrayEquals('event types if dragging is prevented',
[goog.fx.DragListGroup.EventType.BEFOREDRAGSTART], firedEventTypes);
assertIdle(dlg);
}
function testRightClick() {
goog.testing.events.fireMouseDownEvent(list.firstChild,
goog.events.BrowserEvent.MouseButton.RIGHT);
goog.testing.events.fireMouseUpEvent(list.firstChild,
goog.events.BrowserEvent.MouseButton.RIGHT);
assertArrayEquals('no events fired', [], firedEventTypes);
assertIdle(dlg);
}
</script>
</body>
</html>
|
