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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2008 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.
-->
<!--
@author nicksantos@google.com (Nick Santos)
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.Menu</title>
<style type='text/css'>
.goog-menu {
position: absolute;
color: #aaa;
}
</style>
<script src="../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.Event');
goog.require('goog.math');
goog.require('goog.testing.events');
goog.require('goog.testing.jsunit');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.Menu');
</script>
</head>
<body>
<script>
var menu;
var clonedMenuDom;
function setUp() {
clonedMenuDom = goog.dom.getElement('demoMenu').cloneNode(true);
menu = new goog.ui.Menu();
}
function tearDown() {
menu.dispose();
var element = goog.dom.getElement('demoMenu');
element.parentNode.replaceChild(clonedMenuDom, element);
}
/** @bug 1463524 */
function testMouseupDoesntActivateMenuItemImmediately() {
menu.decorate(goog.dom.getElement('demoMenu'));
var fakeEvent = {clientX: 42, clientY: 42};
var itemElem = goog.dom.getElement('menuItem2');
var coords = new goog.math.Coordinate(42, 42);
var menuItem = menu.getChildAt(1);
var actionDispatched = false;
goog.events.listen(menuItem, goog.ui.Component.EventType.ACTION,
function(e) {
actionDispatched = true;
});
menu.setVisible(true, false, fakeEvent);
// Makes the menu item active so it can be selected on mouseup.
menuItem.setActive(true);
goog.testing.events.fireMouseUpEvent(itemElem, undefined, coords);
assertFalse('ACTION should not be dispatched after the initial mouseup',
actionDispatched);
goog.testing.events.fireMouseUpEvent(itemElem, undefined, coords);
assertTrue('ACTION should be dispatched after the second mouseup',
actionDispatched);
}
function testHoverBehavior() {
menu.decorate(goog.dom.getElement('demoMenu'));
goog.testing.events.fireMouseOverEvent(goog.dom.getElement('menuItem2'),
document.body);
assertEquals(1, menu.getHighlightedIndex());
menu.exitDocument();
assertEquals(-1, menu.getHighlightedIndex());
}
function testIndirectionDecoration() {
menu.decorate(goog.dom.getElement('complexMenu'));
goog.testing.events.fireMouseOverEvent(goog.dom.getElement('complexItem3'),
document.body);
assertEquals(2, menu.getHighlightedIndex());
menu.exitDocument();
assertEquals(-1, menu.getHighlightedIndex());
}
</script>
<p>
Here's a menu defined in markup:
</p>
<div id="demoMenu" class="goog-menu">
<div id='menuItem1' class="goog-menuitem">Annual Report.pdf</div>
<div id='menuItem2' class="goog-menuitem">Quarterly Update.pdf</div>
<div id='menuItem3' class="goog-menuitem">Enemies List.txt</div>
</div>
<p>
Here's a menu which has been rendered with an explicit content node:
</p>
<div id="complexMenu" class="goog-menu">
<div style="border:1px solid black;">
<div class="goog-menu-content">
<div id='complexItem1' class="goog-menuitem">Drizzle</div>
<div id='complexItem2' class="goog-menuitem">Rain</div>
<div id='complexItem3' class="goog-menuitem">Deluge</div>
</div>
</div>
</div>
</body>
</html>
|
