Skip to content

Commit

Permalink
adding even more integration tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzelenkov
jzelenkov committed Nov 7, 2014
1 parent ec298a5 commit 2296e94
Show file tree
Hide file tree
Showing 3 changed files with 250 additions and 0 deletions.
169 changes: 169 additions & 0 deletions demo/custom-command_test.html
View file
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Custom Command Types Demo - jQuery contextMenu Plugin</title>
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />

<script src="../jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../src/jquery.ui.position.js" type="text/javascript"></script>
<script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
<script src="../prettify/prettify.js" type="text/javascript"></script>
<script src="../screen.js" type="text/javascript"></script>

<link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="../screen.css" rel="stylesheet" type="text/css" />
<link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8922143-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>
<body>
<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>
<div id="container">
<h1><a href="https://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>

<ul class="menu">
<li><a href="../index.html">About</a></li>
<li class="active"><a href="../demo.html">Demo</a></li>
<li><a href="../docs.html">Documentation</a></li>
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
</ul>

<h2 id="demo">Demo: Custom Command Types</h2>
<p><code>jQuery.contextMenu</code> allows you to create your own &lt;comand&gt;s and leverage the simple UI handling.</p>
<div class="inline-spaces">
<div class="context-menu-custom box menu-1">
<strong>right click me</strong>
</div>
</div>

<h3 id="code">Example code: Custom Command Types</h3>
<script type="text/javascript" class="showcase">
$(function(){
/**************************************************
* Custom Command Handler
**************************************************/
$.contextMenu.types.label = function(item, opt, root) {
// this === item.$node

$('<span>Label</span><ul>'
+ '<li class="label1" title="label 1">label 1</li>'
+ '<li class="label2" title="label 2">label 2</li>'
+ '<li class="label3" title="label 3">label 3</li>'
+ '<li class="label4" title="label 4">label 4</li></ul>')
.appendTo(this)
.on('click', 'li', function() {
// do some funky stuff
var message = "text: " + $(this).text();
$('#msg').text($('#msg').text() + ' | ' + message);
// hide the menu
root.$menu.trigger('contextmenu:hide');
});

this.addClass('labels').on('contextmenu:focus', function(e) {
// setup some awesome stuff
}).on('contextmenu:blur', function(e) {
// tear down whatever you did
}).on('keydown', function(e) {
// some funky key handling, maybe?
});
};

/**************************************************
* Context-Menu with custom command "label"
**************************************************/
$.contextMenu({
selector: '.context-menu-custom',
callback: function(key, options) {
var message = "clicked: " + key;
$('#msg').text(message);
},
items: {
open: {name: "Open", callback: $.noop},
label: {type: "label", customName: "Label"},
edit: {name: "Edit", callback: $.noop}
}
});
});
</script>

<h3 id="css">Example CSS: Custom Command Types</h3>
<style type="text/css" class="showcase">
.labels > ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
float: none;
}
.labels > ul > li {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #CCC;
overflow: hidden;
text-indent: -2000px;
}
.labels > ul > li.selected,
.labels > ul > li:hover { border: 1px solid #000; }
.labels > ul > li + li { margin-left: 5px; }
.labels > ul > li.label1 { background: red; }
.labels > ul > li.label2 { background: green; }
.labels > ul > li.label3 { background: blue; }
.labels > ul > li.label4 { background: yellow; }
</style>

<h3 id="html">Example HTML: Custom Command Types</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>

<h2>jQuery Context Menu Demo Gallery</h2>
<ul id="demo-list">
<li><a href="../demo.html">Simple Context Menu</a></li>
<li><a href="on-dom-element.html">Context Menu on DOM Element</a></li>
<li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
<li><a href="dynamic-create.html">Create Context Menu on demand</a></li>
<li><a href="async-create.html">Create Context Menu (asynchronous)</a></li>

<li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
<li><a href="callback.html">Command's action (callbacks)</a></li>

<li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
<li><a href="trigger-swipe.html">Swipe Trigger</a></li>
<li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>

<li><a href="disabled-menu.html">Disabled Menu</a></li>
<li><a href="disabled.html">Disabled Command</a></li>
<li><a href="disabled-callback.html">Disabled Callback Command</a></li>
<li><a href="disabled-changing.html">Changing Command's disabled status</a></li>

<li><a href="accesskeys.html">Accesskeys</a></li>
<li><a href="sub-menus.html">Submenus</a></li>

<li><a href="input.html">Input Commands</a></li>
<li class="current"><a href="custom-command.html">Custom Command Types</a></li>

<li><a href="menu-title.html">Menus with titles</a></li>

<li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
<li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
<li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
</ul>
</div>
<div id="msg"></div>
</body>
</html>
42 changes: 42 additions & 0 deletions test/integration/custom-command.js
View file
@@ -0,0 +1,42 @@
var pwd = process.cwd();
var helper = require('../integration_test_helper.js');

// this test uses custom HTML because PhantomJS
// has problems showing alert modal dialogs.
// We are testing callbacks against simple DOM
// manipulations instead.
module.exports = {
'Click custom comand menu item triggers menu callback': function (test) {
test
.open('file://' + pwd + '/demo/custom-command_test.html')
.execute(helper.rightClick, '.context-menu-custom')
.waitForElement('#context-menu-layer')
.assert.numberOfElements('.context-menu-root>li')
.is(3, '3 context menu items are shown')
.click('.context-menu-root li.labels')
.assert.text('#msg').to.contain('clicked: label', 'contextMenu callback was triggered')
.done();
},

'Click custom comand menu item label triggers custom action - red': function (test) {
test
.open('file://' + pwd + '/demo/custom-command_test.html')
.execute(helper.rightClick, '.context-menu-custom')
.waitForElement('#context-menu-layer')
.wait(100)
.click('.context-menu-root li.labels .label1')
.assert.text('#msg', 'clicked: label | text: label 1', 'custom action was triggered')
.done();
},

'Click custom comand menu item label triggers custom action - blue': function (test) {
test
.open('file://' + pwd + '/demo/custom-command_test.html')
.execute(helper.rightClick, '.context-menu-custom')
.waitForElement('#context-menu-layer')
.wait(100)
.click('.context-menu-root li.labels .label3')
.assert.text('#msg', 'clicked: label | text: label 3', 'custom action was triggered')
.done();
}
};
39 changes: 39 additions & 0 deletions test/integration/input.js
View file
@@ -0,0 +1,39 @@
var pwd = process.cwd();
var helper = require('../integration_test_helper.js');
var text_1 = '.context-menu-root input[name="context-menu-input-name"]';
var text_area_1 = '.context-menu-root textarea[name="context-menu-input-area1"]';
var text_area_2 = '.context-menu-root textarea[name="context-menu-input-area2"]';

module.exports = {
'HTML5 input-based menu is shown correctly': function (test) {
test
.open('file://' + pwd + '/demo/input.html')
.execute(helper.rightClick, '.context-menu-one')
.waitForElement('#context-menu-layer')
.assert.visible('.context-menu-root', 'Menu is present')
.assert.exists('.context-menu-root', 'It opens context menu')
.assert.numberOfElements('.context-menu-root li')
.is(14, '14 context menu items are shown')
.assert.numberOfElements('.context-menu-root input')
.is(6, '6 HTML input items are shown')
.assert.width('.context-menu-root').is.gt(100)
.done();
},

'HTML5 input-based menu stores state when closed': function (test) {
test
.open('file://' + pwd + '/demo/input.html')
.execute(helper.rightClick, '.context-menu-one')
.waitForElement('#context-menu-layer')
.type(text_1, 'lorem ipsum')
.type(text_area_1, 'test area with height')
.type(text_area_2, 'shots go off')
.execute(helper.closeMenu, '.context-menu-one')
.execute(helper.rightClick, '.context-menu-one')
.waitForElement('#context-menu-layer')
.assert.val(text_1, 'lorem ipsum', 'Input text should contain entered text')
.assert.val(text_area_1, 'test area with height', 'Text area 1 should contain entered text')
.assert.val(text_area_2, 'shots go off', 'Text area 2 should contain entered text')
.done();
}
};

0 comments on commit 2296e94

Please sign in to comment.