delegate.html revision 03fb873fb498b91f5def3bb608de5d01374f1e07
0N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2362N/A<html>
0N/A<head>
0N/A <title>YUI Event Delegate Tests</title>
0N/A</head>
0N/A<body class="yui-skin-sam">
0N/A <div id="doc">
0N/A
0N/A <div id="mod1">
0N/A <div id="mod-header" class="hd"><h3 class="title">H3 - Title</h3></div>
0N/A <div id="mod-body" class="bd">
0N/A <p>simple paragraph with a link <a href="#"id="firstlink">simple link</a></p>
0N/A <p>another paragraph with a complex link <a href="#" id="secondlink"><strong>strong within link</strong><img alt="fake image" id="fakeimage" /> - complex <span id="spanwithinlink">link</span></a></p>
0N/A </div>
0N/A </div>
0N/A
0N/A <div id="container">
0N/A <ul id="list-1">
2362N/A <li id="item-1"><em>Item Type One</em></li>
2362N/A <li id="item-2"><em>Item Type Two</em></li>
2362N/A <li id="item-3"><em>Item Type Three</em></li>
0N/A </ul>
0N/A </div>
0N/A
0N/A <ul id="list-2">
0N/A <li id="list-2-li-1"><em><em>Item One</em></em></li>
0N/A <li id="list-2-li-2"><em>Item Two</em></li>
0N/A <li id="list-2-li-3"><em>Item Three</em>
0N/A <ul id="list-3">
0N/A <li id="list-3-li-1"><em>Item Three - One</em></li>
0N/A <li id="list-3-li-1"><em>Item Three - Two</em></li>
0N/A <li id="list-3-li-1"><em>Item Three - Three</em></li>
0N/A </ul>
0N/A </li>
0N/A </ul>
0N/A
0N/A <div id="div-1" class="div-a">
0N/A <div id="div-1-1" class="div-b">
0N/A <div id="div-1-1-1" class="div-c"><em>Item One</em></div>
0N/A </div>
0N/A <div id="div-1-2" class="div-x">
0N/A <em>Item Two</em>
0N/A <div id="div-1-2-1" class="div-b">
0N/A <em>Item Two - One</em>
0N/A <div id="div-1-2-1-1" class="div-c"><em>Item Two - Two</em></div>
0N/A </div>
0N/A </div>
0N/A </div>
0N/A
0N/A </div>
0N/A <!-- YUI3 Core //-->
0N/A <script type="text/javascript" src="/build/yui/yui-debug.js"></script>
0N/A <!-- Initialization process //-->
0N/A <script type="text/javascript">
0N/A YUI({
0N/A base: "/build/",
0N/A filter: 'debug',
0N/A combine: false,
0N/A useConsole: true,
0N/A logExclude: {deprecated: 1,
0N/A Dom: true, Selector: true, Node: true, attribute: true, base: true, event: true, widget: true}
0N/A }).use('console', 'test', 'event', 'event-simulate', function (Y) {
0N/A
0N/A // creating the console...
0N/A (new Y.Console()).render();
0N/A
0N/A // starting the testing process
0N/A
0N/A // add the test cases and suites
0N/A Y.Test.Runner.add(new Y.Test.Case({
0N/A
0N/A name: "Event Delegate Tests",
0N/A
0N/A test_simple_delegate_for_anchors: function(){
0N/A
0N/A var foo = false, t, ct, boundEl;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A ct = e.currentTarget;
0N/A boundEl = e.container;
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isTrue(foo, "simple delegation fails, mod1 should pickup the event and test target [firstlink]");
0N/A // Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the matching node");
0N/A
0N/A Y.Assert.areEqual(ct, Y.get('#firstlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
0N/A Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the actual click target");
0N/A Y.Assert.areEqual(boundEl, Y.get('#mod1'), "event delegate works but the container property should be the bound element");
0N/A
0N/A },
0N/A
0N/A test_multiple_selectors: function () {
0N/A
0N/A var foo = false, t, ct, boundEl;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A ct = e.currentTarget;
0N/A boundEl = e.container;
0N/A }, '#mod1', '.hd,.bd');
0N/A
0N/A
0N/A Y.Event.simulate(document.getElementById('mod-header'), 'click');
0N/A
0N/A Y.Assert.areEqual(ct, Y.get('#mod-header'), "event delegate works but the matched element is an incorrect node, should be the matching node");
0N/A
0N/A Y.Event.simulate(document.getElementById('mod-body'), 'click');
0N/A
0N/A Y.Assert.areEqual(ct, Y.get('#mod-body'), "event delegate works but the matched element is an incorrect node, should be the matching node");
0N/A
0N/A },
0N/A
0N/A test_document_as_container: function () {
0N/A
0N/A var foo = false, t, ct, boundEl;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A ct = e.currentTarget;
0N/A boundEl = e.container;
0N/A }, Y.get('#mod1').get('ownerDocument'), 'a');
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isTrue(foo, "simple delegation fails, mod1 should pickup the event and test target [firstlink]");
0N/A
0N/A Y.Assert.areEqual(ct, Y.get('#firstlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
0N/A Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the actual click target");
0N/A Y.Assert.areEqual(boundEl, Y.get('#mod1').get('ownerDocument'), "event delegate works but the container property should be the bound element");
0N/A
0N/A },
0N/A
0N/A test_checking_delegation_target: function(){
0N/A
0N/A var foo = false, t, ct, boundEl;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A ct = e.currentTarget;
0N/A boundEl = e.container;
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.Event.simulate (document.getElementById('fakeimage'), 'click');
0N/A Y.Assert.isTrue(foo, "delegation fails for an image within an anchor, mod1 should pickup the event and test target [secondlink]");
0N/A // in this case, the target should be the anchor, and not the image
0N/A // Y.Assert.areEqual(t, Y.get('#secondlink'), "event delegate works but the target is an incorrect node, should be the matching node");
0N/A
0N/A // this has been changed. the target is unchanged, the anchor is
0N/A
0N/A Y.Assert.areEqual(ct, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
0N/A Y.Assert.areEqual(t, Y.get('#fakeimage'), "event delegate works but the target is an incorrect node, should be the actual click target");
0N/A Y.Assert.areEqual(boundEl, Y.get('#mod1'), "event delegate works but the container property should be the bound element");
0N/A
0N/A },
0N/A
0N/A test_including_container_in_selector: function(){
0N/A
0N/A var foo = false, t;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A }, '#mod1', '#mod1 a');
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isFalse(foo, "delegation fails, the container (specified in the on) can not be part of the selectors");
0N/A
0N/A },
0N/A
0N/A test_targeting_container_without_selectors: function(){
0N/A
0N/A var foo = false, t;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A }, '#mod1');
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isFalse(foo, "delegation fails, delegation without at least one selector should never trigger an event");
0N/A },
0N/A
0N/A test_multiple_selectors_one_match: function(){
0N/A
0N/A var foo = false, t;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo = true;
0N/A t = e.target;
0N/A }, '#mod1', 'a,a span');
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isTrue(foo, "multiple selectors fails, delegate should be able to match different selectors");
0N/A Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the matching selector");
0N/A
0N/A },
0N/A
0N/A test_multiple_delegate_matches: function(){
0N/A
0N/A var foo1 = false, foo2 = false, t1, t2, ct1, ct2;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo1 = true;
0N/A t1 = e.target;
0N/A ct1 = e.currentTarget;
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo2 = true;
0N/A t2 = e.target;
0N/A ct2 = e.currentTarget;
0N/A }, '#mod1', 'a span');
0N/A
0N/A Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
0N/A Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
0N/A Y.Assert.isTrue(foo2, "second match fail, delegate should be able to match [a span]");
0N/A Y.Assert.areEqual(ct1, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching selector");
0N/A Y.Assert.areEqual(t1, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the clicked node");
0N/A Y.Assert.areEqual(ct2, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the matching selector");
0N/A Y.Assert.areEqual(t2, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the clicked");
0N/A
0N/A },
0N/A
0N/A test_bubble_up_after_delegate: function(){
0N/A
0N/A var foo1 = false, foo2 = false, t1, t2, ct;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo1 = true;
0N/A t1 = e.target;
0N/A ct = e.currentTarget;
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.on('click', function(e) {
0N/A foo2 = true;
0N/A t2 = e.target;
0N/A }, '#doc');
0N/A
0N/A Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
0N/A Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
0N/A Y.Assert.isTrue(foo2, "second match fail, the event doesn't bubble up after the delegate routine");
0N/A // changed
0N/A // Y.Assert.areEqual(t1, Y.get('#secondlink'), "event delegate works but the target is an incorrect node, should be the matching selector");
0N/A Y.Assert.areEqual(ct, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching selector");
0N/A Y.Assert.areEqual(t1, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the actual target");
0N/A
0N/A // obsolete
0N/A Y.Assert.areEqual(t2, Y.get('#spanwithinlink'), "event delegate works but it doesn't restore e.target to the original value.");
0N/A },
0N/A
0N/A test_bubble_up_after_delegate_halt: function(){
0N/A
0N/A var foo1 = false, foo2 = false;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A foo1 = true;
0N/A e.halt();
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.on('click', function(e) {
0N/A foo2 = true;
0N/A }, '#doc');
0N/A
0N/A Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
0N/A Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
0N/A Y.Assert.isFalse(foo2, "the listener for 'doc' got executed, which means that e.halt fails during the delegate routine");
0N/A },
0N/A
0N/A test_direct_descendant_combinator: function () {
0N/A
0N/A var matchID = null;
0N/A
0N/A Y.one("#list-2").delegate("click", function (e) {
0N/A matchID = this.get("id");
0N/A }, ">li");
0N/A
0N/A Y.Event.simulate(document.getElementById('list-3-li-1'), 'click');
0N/A Y.Assert.areEqual('list-2-li-3', matchID, "The currentTarget is an incorrect node, should be the matching node.");
0N/A
0N/A
0N/A matchID = null;
0N/A
0N/A Y.one("#div-1").delegate("click", function (e) {
0N/A matchID = this.get("id");
0N/A }, ">.div-b");
0N/A
0N/A Y.Event.simulate(document.getElementById('div-1-1-1'), 'click');
0N/A Y.Assert.areEqual('div-1-1', matchID, "The currentTarget is an incorrect node, should be the matching node.");
0N/A
0N/A
0N/A matchID = null;
0N/A
0N/A Y.Event.simulate(document.getElementById('div-1-2-1'), 'click');
0N/A Y.Assert.isNull(matchID, "The currentTarget is an incorrect node, should be the matching node.");
0N/A
0N/A },
0N/A
0N/A
0N/A test_successful_purge: function () {
0N/A
0N/A var bHandler1Called = false,
0N/A bHandler2Called = false;
0N/A
0N/A Y.delegate('click', function(e) {
0N/A bHandler1Called = true;
0N/A }, '#mod1', 'a');
0N/A
0N/A Y.Event.purgeElement('#mod1');
0N/A
0N/A // Test #1: Make sure first handler is not called after
0N/A // calling Y.Event.purgeElement
0N/A
0N/A Y.Event.simulate (document.getElementById('firstlink'), 'click');
0N/A Y.Assert.isFalse(bHandler1Called, "No delegated listeners should be called after a call to Y.Event.purgeElement");
// Test #2: Make sure second handler is called after
// calling Y.Event.purgeElement
Y.delegate('click', function(e) {
bHandler2Called = true;
}, '#mod1', 'a');
Y.Event.simulate(document.getElementById('firstlink'), 'click');
Y.Assert.isFalse(bHandler1Called, "The first listener should not be be called.");
Y.Assert.isTrue(bHandler2Called, "The second delegated listener should be called.");
bHandler1Called = false;
bHandler2Called = false;
// Test #3: Make sure first handler is not called after
// calling Y.Event.purgeElement and passing in a type
Y.Event.purgeElement('#mod1', false, 'click');
Y.Event.simulate(document.getElementById('firstlink'), 'click');
Y.Assert.isFalse(bHandler2Called, "The second listener should not be be called.");
// Test #4: Make sure that it is possible to delegate
// a listener to a new element with the same id of
// an element that used to exist in the DOM.
bHandler1Called = false;
bHandler2Called = false;
Y.delegate("click", function () {
bHandler1Called = true;
}, "#list-1", ">li");
Y.Event.purgeElement('#list-1');
Y.one("#container").setContent('<ul id="list-1"><li id="item-1"><em>Item Type One</em></li><li id="item-2"><em>Item Type Two</em></li><li id="item-3"><em>Item Type Three</em></li></ul>');
Y.delegate("click", function () {
bHandler2Called = true;
}, "#list-1", ">li");
Y.Event.simulate(document.getElementById('item-1'), 'click');
Y.Assert.isFalse(bHandler1Called, "The first listener should not be be called.");
Y.Assert.isTrue(bHandler2Called, "The second delegated listener should be called.");
},
test_successful_detach: function () {
var bHandler1Called = false,
bHandler2Called = false;
var handle = Y.delegate('click', function(e) {
bHandler1Called = true;
}, '#mod1', 'a');
handle.detach();
// Test #1: Make sure first handler is not called after
// being detached
Y.Event.simulate (document.getElementById('firstlink'), 'click');
Y.Assert.isFalse(bHandler1Called, "Listener should not be called after being detached.");
// Test #2: Make sure second handler is called after
// detaching the first.
Y.delegate('click', function(e) {
bHandler2Called = true;
}, '#mod1', 'a');
Y.Event.simulate(document.getElementById('firstlink'), 'click');
Y.Assert.isFalse(bHandler1Called, "The first listener should not be be called.");
Y.Assert.isTrue(bHandler2Called, "The second delegated listener should be called.");
// Test #3: Make sure that it is possible to delegate
// a listener to a new element with the same id of
// an element that used to exist in the DOM.
bHandler1Called = false;
bHandler2Called = false;
handle = Y.delegate("click", function () {
bHandler1Called = true;
}, "#list-1", ">li");
handle.detach();
Y.one("#container").setContent('<ul id="list-1"><li id="item-1"><em>Item Type One</em></li><li id="item-2"><em>Item Type Two</em></li><li id="item-3"><em>Item Type Three</em></li></ul>');
Y.delegate("click", function () {
bHandler2Called = true;
}, "#list-1", ">li");
Y.Event.simulate(document.getElementById('item-1'), 'click');
Y.Assert.isFalse(bHandler1Called, "The first listener should not be be called.");
Y.Assert.isTrue(bHandler2Called, "The second delegated listener should be called.");
}
/*
* Other things that I consider should be tested in the future:
* - stopping the event, verifying the event ourside of the container
* - stopping the event and verify what happen with multiple matches
*/
}));
//run all tests
Y.Test.Runner.run();
/* finishing the testing process */
});
</script>
</body>
</html>