Skip to content

Commit 2296e94

Browse files
jayzelenkovjayzelenkov
committed
adding even more integration tests
1 parent ec298a5 commit 2296e94

File tree

3 files changed

+250
-0
lines changed

3 files changed

+250
-0
lines changed

‎demo/custom-command_test.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
6+
<title>Custom Command Types Demo - jQuery contextMenu Plugin</title>
7+
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
8+
9+
<script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
10+
<script src="../src/jquery.ui.position.js" type="text/javascript"></script>
11+
<script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
12+
<script src="../prettify/prettify.js" type="text/javascript"></script>
13+
<script src="../screen.js" type="text/javascript"></script>
14+
15+
<link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
16+
<link href="../screen.css" rel="stylesheet" type="text/css" />
17+
<link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
18+
19+
<script type="text/javascript">
20+
21+
var _gaq = _gaq || [];
22+
_gaq.push(['_setAccount', 'UA-8922143-3']);
23+
_gaq.push(['_trackPageview']);
24+
25+
(function() {
26+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
27+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
28+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
29+
})();
30+
31+
</script>
32+
</head>
33+
<body>
34+
<a id="github-forkme" href="https://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
35+
<div id="container">
36+
<h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
37+
38+
<ul class="menu">
39+
<li><a href="../index.html">About</a></li>
40+
<li class="active"><a href="../demo.html">Demo</a></li>
41+
<li><a href="../docs.html">Documentation</a></li>
42+
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
43+
</ul>
44+
45+
<h2 id="demo">Demo: Custom Command Types</h2>
46+
<p><code>jQuery.contextMenu</code> allows you to create your own &lt;comand&gt;s and leverage the simple UI handling.</p>
47+
<div class="inline-spaces">
48+
<div class="context-menu-custom box menu-1">
49+
<strong>right click me</strong>
50+
</div>
51+
</div>
52+
53+
<h3 id="code">Example code: Custom Command Types</h3>
54+
<script type="text/javascript" class="showcase">
55+
$(function(){
56+
/**************************************************
57+
* Custom Command Handler
58+
**************************************************/
59+
$.contextMenu.types.label = function(item, opt, root) {
60+
// this === item.$node
61+
62+
$('<span>Label</span><ul>'
63+
+ '<li class="label1" title="label 1">label 1</li>'
64+
+ '<li class="label2" title="label 2">label 2</li>'
65+
+ '<li class="label3" title="label 3">label 3</li>'
66+
+ '<li class="label4" title="label 4">label 4</li></ul>')
67+
.appendTo(this)
68+
.on('click', 'li', function() {
69+
// do some funky stuff
70+
var message = "text: " + $(this).text();
71+
$('#msg').text($('#msg').text() + ' | ' + message);
72+
// hide the menu
73+
root.$menu.trigger('contextmenu:hide');
74+
});
75+
76+
this.addClass('labels').on('contextmenu:focus', function(e) {
77+
// setup some awesome stuff
78+
}).on('contextmenu:blur', function(e) {
79+
// tear down whatever you did
80+
}).on('keydown', function(e) {
81+
// some funky key handling, maybe?
82+
});
83+
};
84+
85+
/**************************************************
86+
* Context-Menu with custom command "label"
87+
**************************************************/
88+
$.contextMenu({
89+
selector: '.context-menu-custom',
90+
callback: function(key, options) {
91+
var message = "clicked: " + key;
92+
$('#msg').text(message);
93+
},
94+
items: {
95+
open: {name: "Open", callback: $.noop},
96+
label: {type: "label", customName: "Label"},
97+
edit: {name: "Edit", callback: $.noop}
98+
}
99+
});
100+
});
101+
</script>
102+
103+
<h3 id="css">Example CSS: Custom Command Types</h3>
104+
<style type="text/css" class="showcase">
105+
.labels > ul {
106+
margin: 0;
107+
padding: 0;
108+
list-style: none;
109+
display: block;
110+
float: none;
111+
}
112+
.labels > ul > li {
113+
display: inline-block;
114+
width: 20px;
115+
height: 20px;
116+
border: 1px solid #CCC;
117+
overflow: hidden;
118+
text-indent: -2000px;
119+
}
120+
.labels > ul > li.selected,
121+
.labels > ul > li:hover { border: 1px solid #000; }
122+
.labels > ul > li + li { margin-left: 5px; }
123+
.labels > ul > li.label1 { background: red; }
124+
.labels > ul > li.label2 { background: green; }
125+
.labels > ul > li.label3 { background: blue; }
126+
.labels > ul > li.label4 { background: yellow; }
127+
</style>
128+
129+
<h3 id="html">Example HTML: Custom Command Types</h3>
130+
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
131+
132+
<h2>jQuery Context Menu Demo Gallery</h2>
133+
<ul id="demo-list">
134+
<li><a href="../demo.html">Simple Context Menu</a></li>
135+
<li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
136+
<li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
137+
<li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
138+
<li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>
139+
140+
<li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
141+
<li><a href="callback.html">Command's action (callbacks)</a></li>
142+
143+
<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
144+
<li><a href="trigger-swipe.html">Swipe Trigger</a></li>
145+
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
146+
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
147+
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
148+
149+
<li><a href="disabled-menu.html">Disabled Menu</a></li>
150+
<li><a href="disabled.html">Disabled Command</a></li>
151+
<li><a href="disabled-callback.html">Disabled Callback Command</a></li>
152+
<li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
153+
154+
<li><a href="accesskeys.html">Accesskeys</a></li>
155+
<li><a href="sub-menus.html">Submenus</a></li>
156+
157+
<li><a href="input.html">Input Commands</a></li>
158+
<li class="current"><a href="custom-command.html">Custom Command Types</a></li>
159+
160+
<li><a href="menu-title.html">Menus with titles</a></li>
161+
162+
<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
163+
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
164+
<li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
165+
</ul>
166+
</div>
167+
<div id="msg"></div>
168+
</body>
169+
</html>

‎test/integration/custom-command.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
var pwd = process.cwd();
2+
var helper = require('../integration_test_helper.js');
3+
4+
// this test uses custom HTML because PhantomJS
5+
// has problems showing alert modal dialogs.
6+
// We are testing callbacks against simple DOM
7+
// manipulations instead.
8+
module.exports = {
9+
'Click custom comand menu item triggers menu callback': function (test) {
10+
test
11+
.open('file://' + pwd + '/demo/custom-command_test.html')
12+
.execute(helper.rightClick, '.context-menu-custom')
13+
.waitForElement('#context-menu-layer')
14+
.assert.numberOfElements('.context-menu-root>li')
15+
.is(3, '3 context menu items are shown')
16+
.click('.context-menu-root li.labels')
17+
.assert.text('#msg').to.contain('clicked: label', 'contextMenu callback was triggered')
18+
.done();
19+
},
20+
21+
'Click custom comand menu item label triggers custom action - red': function (test) {
22+
test
23+
.open('file://' + pwd + '/demo/custom-command_test.html')
24+
.execute(helper.rightClick, '.context-menu-custom')
25+
.waitForElement('#context-menu-layer')
26+
.wait(100)
27+
.click('.context-menu-root li.labels .label1')
28+
.assert.text('#msg', 'clicked: label | text: label 1', 'custom action was triggered')
29+
.done();
30+
},
31+
32+
'Click custom comand menu item label triggers custom action - blue': function (test) {
33+
test
34+
.open('file://' + pwd + '/demo/custom-command_test.html')
35+
.execute(helper.rightClick, '.context-menu-custom')
36+
.waitForElement('#context-menu-layer')
37+
.wait(100)
38+
.click('.context-menu-root li.labels .label3')
39+
.assert.text('#msg', 'clicked: label | text: label 3', 'custom action was triggered')
40+
.done();
41+
}
42+
};

‎test/integration/input.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var pwd = process.cwd();
2+
var helper = require('../integration_test_helper.js');
3+
var text_1 = '.context-menu-root input[name="context-menu-input-name"]';
4+
var text_area_1 = '.context-menu-root textarea[name="context-menu-input-area1"]';
5+
var text_area_2 = '.context-menu-root textarea[name="context-menu-input-area2"]';
6+
7+
module.exports = {
8+
'HTML5 input-based menu is shown correctly': function (test) {
9+
test
10+
.open('file://' + pwd + '/demo/input.html')
11+
.execute(helper.rightClick, '.context-menu-one')
12+
.waitForElement('#context-menu-layer')
13+
.assert.visible('.context-menu-root', 'Menu is present')
14+
.assert.exists('.context-menu-root', 'It opens context menu')
15+
.assert.numberOfElements('.context-menu-root li')
16+
.is(14, '14 context menu items are shown')
17+
.assert.numberOfElements('.context-menu-root input')
18+
.is(6, '6 HTML input items are shown')
19+
.assert.width('.context-menu-root').is.gt(100)
20+
.done();
21+
},
22+
23+
'HTML5 input-based menu stores state when closed': function (test) {
24+
test
25+
.open('file://' + pwd + '/demo/input.html')
26+
.execute(helper.rightClick, '.context-menu-one')
27+
.waitForElement('#context-menu-layer')
28+
.type(text_1, 'lorem ipsum')
29+
.type(text_area_1, 'test area with height')
30+
.type(text_area_2, 'shots go off')
31+
.execute(helper.closeMenu, '.context-menu-one')
32+
.execute(helper.rightClick, '.context-menu-one')
33+
.waitForElement('#context-menu-layer')
34+
.assert.val(text_1, 'lorem ipsum', 'Input text should contain entered text')
35+
.assert.val(text_area_1, 'test area with height', 'Text area 1 should contain entered text')
36+
.assert.val(text_area_2, 'shots go off', 'Text area 2 should contain entered text')
37+
.done();
38+
}
39+
};

0 commit comments

Comments
 (0)