Wordpress/tests/qunit/editor/tinymce/dom/EventUtils.html

460 lines
11 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>Unit tests for the EventUtils class</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css" />
<script src="http://code.jquery.com/qunit/qunit-git.js"></script>
<script src="../../js/qunit/reporter.js"></script>
<script src="../../js/tinymce_loader.js"></script>
</head>
<body>
<script>
var eventUtils = tinymce.dom.Event;
QUnit.config.reorder = false;
module("tinymce.dom.Event", {
teardown: function() {
eventUtils.clean(window);
}
});
// Bind dummy ready so it gets the domLoaded ready state
eventUtils.bind(window, "ready", function() {});
test("unbind all", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click = true;
});
eventUtils.bind(window, 'keydown', function(e) {
result.keydown1 = true;
});
eventUtils.bind(window, 'keydown', function(e) {
result.keydown2 = true;
});
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {click: true, keydown1: true, keydown2: true});
eventUtils.unbind(window);
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {});
});
test("unbind event", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click = true;
});
eventUtils.bind(window, 'keydown', function(e) {
result.keydown1 = true;
});
eventUtils.bind(window, 'keydown', function(e) {
result.keydown2 = true;
});
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {click: true, keydown1: true, keydown2: true});
eventUtils.unbind(window, 'click');
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {keydown1: true, keydown2: true});
});
test("unbind event non existing", function() {
eventUtils.unbind(window, 'noevent');
ok(true, "No exception");
});
test("unbind callback", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click = true;
});
eventUtils.bind(window, 'keydown', function(e) {
result.keydown1 = true;
});
function callback2(e) {
result.keydown2 = true;
};
eventUtils.bind(window, 'keydown', callback2);
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {click: true, keydown1: true, keydown2: true});
eventUtils.unbind(window, 'keydown', callback2);
result = {};
eventUtils.fire(window, 'click');
eventUtils.fire(window, 'keydown');
deepEqual(result, {click: true, keydown1: true});
});
test("unbind multiple", function() {
var result;
eventUtils.bind(window, 'mouseup mousedown click', function(e) {
result[e.type] = true;
});
eventUtils.unbind(window, 'mouseup mousedown');
result = {};
eventUtils.fire(window, 'mouseup');
eventUtils.fire(window, 'mousedown');
eventUtils.fire(window, 'click');
deepEqual(result, {click: true});
});
test("bind multiple", function() {
var result;
eventUtils.bind(window, 'mouseup mousedown', function(e) {
result[e.type] = true;
});
result = {};
eventUtils.fire(window, 'mouseup');
eventUtils.fire(window, 'mousedown');
eventUtils.fire(window, 'click');
deepEqual(result, {mouseup: true, mousedown: true});
});
test("bind/fire bubbling", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.window = true;
});
eventUtils.bind(document, 'click', function() {
result.document = true;
});
eventUtils.bind(document.body, 'click', function() {
result.body = true;
});
eventUtils.bind(document.getElementById('content'), 'click', function() {
result.content = true;
});
eventUtils.bind(document.getElementById('inner'), 'click', function() {
result.inner = true;
});
result = {};
eventUtils.fire(window, 'click');
deepEqual(result, {window: true});
result = {};
eventUtils.fire(document, 'click');
deepEqual(result, {document: true, window: true});
result = {};
eventUtils.fire(document.body, 'click');
deepEqual(result, {body: true, document: true, window: true});
result = {};
eventUtils.fire(document.getElementById('content'), 'click');
deepEqual(result, {content: true, body: true, document: true, window: true});
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {inner: true, content: true, body: true, document: true, window: true});
});
test("bind/fire stopImmediatePropagation", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click1 = true;
});
eventUtils.bind(window, 'click', function(e) {
result.click2 = true;
e.stopImmediatePropagation();
});
eventUtils.bind(window, 'click', function(e) {
result.click3 = true;
});
result = {};
eventUtils.fire(window, 'click');
deepEqual(result, {click1: true, click2: true});
});
test("bind/fire stopPropagation", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click1 = true;
});
eventUtils.bind(document.body, 'click', function(e) {
result.click2 = true;
});
eventUtils.bind(document.getElementById('inner'), 'click', function(e) {
result.click3 = true;
e.stopPropagation();
});
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click3: true});
});
test("clean window", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click1 = true;
});
eventUtils.bind(document.body, 'click', function(e) {
result.click2 = true;
});
eventUtils.bind(document.getElementById('content'), 'click', function(e) {
result.click3 = true;
});
eventUtils.bind(document.getElementById('inner'), 'click', function(e) {
result.click4 = true;
});
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click1: true, click2: true, click3: true, click4: true});
eventUtils.clean(window);
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {});
});
test("clean document", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click1 = true;
});
eventUtils.bind(document, 'click', function(e) {
result.click2 = true;
});
eventUtils.bind(document.body, 'click', function(e) {
result.click3 = true;
});
eventUtils.bind(document.getElementById('content'), 'click', function(e) {
result.click4 = true;
});
eventUtils.bind(document.getElementById('inner'), 'click', function(e) {
result.click5 = true;
});
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click1: true, click2: true, click3: true, click4: true, click5: true});
eventUtils.clean(document);
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click1: true});
});
test("clean element", function() {
var result;
eventUtils.bind(window, 'click', function(e) {
result.click1 = true;
});
eventUtils.bind(document.body, 'click', function(e) {
result.click2 = true;
});
eventUtils.bind(document.getElementById('content'), 'click', function(e) {
result.click3 = true;
});
eventUtils.bind(document.getElementById('inner'), 'click', function(e) {
result.click4 = true;
});
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click1: true, click2: true, click3: true, click4: true});
eventUtils.clean(document.getElementById('content'));
result = {};
eventUtils.fire(document.getElementById('inner'), 'click');
deepEqual(result, {click1: true, click2: true});
});
test("mouseenter/mouseleave bind/unbind", function() {
var result = {};
eventUtils.bind(document.body, 'mouseenter mouseleave', function(e) {
result[e.type] = true;
});
eventUtils.fire(document.body, 'mouseenter');
eventUtils.fire(document.body, 'mouseleave');
deepEqual(result, {mouseenter: true, mouseleave: true});
result = {};
eventUtils.clean(document.body);
eventUtils.fire(document.body, 'mouseenter');
eventUtils.fire(document.body, 'mouseleave');
deepEqual(result, {});
});
test("focusin/focusout bind/unbind", function() {
var result = {};
eventUtils.bind(document.body, 'focusin focusout', function(e) {
// IE will fire a focusout on the parent element if you focus an element within not a big deal so lets detect it in the test
if (e.type == "focusout" && e.target.contains(document.activeElement)) {
return;
}
result[e.type] = result[e.type] ? ++result[e.type] : 1;
});
document.getElementById('inner').focus();
document.getElementById('content').focus();
deepEqual(result, {focusin: 2, focusout: 1});
});
test("bind unbind fire clean on null", function() {
eventUtils.bind(null, 'click', function() {});
eventUtils.unbind(null, 'click', function() {});
eventUtils.fire(null, {});
eventUtils.clean(null);
ok(true, "No exception");
});
test("bind ready when page is loaded", function() {
var ready;
eventUtils.bind(window, 'ready', function() {
ready = true;
});
ok(eventUtils.domLoaded, "DomLoaded state true");
ok(ready, "Window is ready.");
});
test("event states when event object is fired twice", function() {
var result = {};
eventUtils.bind(window, 'keydown', function(e) {result[e.type] = true;e.preventDefault();e.stopPropagation();});
eventUtils.bind(window, 'keyup', function(e) {result[e.type] = true;e.stopImmediatePropagation();});
var event = {};
eventUtils.fire(window, 'keydown', event);
eventUtils.fire(window, 'keyup', event);
ok(event.isDefaultPrevented(), "Default is prevented.");
ok(event.isPropagationStopped(), "Propagation is stopped.");
ok(event.isImmediatePropagationStopped(), "Immediate propagation is stopped.");
deepEqual(result, {keydown: true, keyup: true});
});
test("unbind inside callback", function() {
var data;
function append(value) {
return function() {
data += value;
};
}
function callback() {
eventUtils.unbind(window, 'click', callback);
data += 'b';
}
data = '';
eventUtils.bind(window, 'click', append("a"));
eventUtils.bind(window, 'click', callback);
eventUtils.bind(window, 'click', append("c"));
eventUtils.fire(window, 'click', {});
equal(data, 'abc');
data = '';
eventUtils.fire(window, 'click', {});
equal(data, 'ac');
});
test("ready/DOMContentLoaded (domLoaded = true)", function() {
var evt;
eventUtils.bind(window, "ready", function(e) {evt = e});
equal(evt.type, "ready");
});
test("ready/DOMContentLoaded (document.readyState check)", function() {
var evt;
try {
document.readyState = "loading";
} catch (e) {
ok(true, "IE doesn't allow us to set document.readyState");
return;
}
eventUtils.domLoaded = false;
document.readyState = "loading";
eventUtils.bind(window, "ready", function(e) {evt = e});
ok(typeof(evt) !== "undefined");
eventUtils.domLoaded = false;
document.readyState = "complete";
eventUtils.bind(window, "ready", function(e) {evt = e});
equal(evt.type, "ready");
});
</script>
<h1 id="qunit-header">Unit tests for DOM Selection IE implementation</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="content" tabindex="0">
<div id="inner" tabindex="0"></div>
</div>
</body>
</html>