event/tests/delegate.html

	delegate.html revision f647f9c7909e84a0b19f09de42ce82a715e2d52a
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber<html>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber<head>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <title>YUI Event Delegate Tests</title>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber</head>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber<body class="yui-skin-sam">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <div id="doc">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber        <div id="mod1">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            <div id="mod-header" class="hd"><h3 class="title">H3 - Title</h3></div>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            <div id="mod-body" class="bd">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber                <p>simple paragraph with a link <a href="#"id="firstlink">simple link</a></p>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber                <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>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            </div>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber        </div>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    </div>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <!-- YUI3 Core //-->
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <script type="text/javascript" src="/build/yui/yui-debug.js"></script>
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <!-- Initialization process //-->
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber    <script type="text/javascript">
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber        YUI({
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            base: "/build/",
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            filter: 'debug',
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            combine: false,
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            useConsole: true,
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            logExclude: {deprecated: 1,
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber            Dom: true, Selector: true, Node: true, attribute: true, base: true, event: true, widget: true}
250b1eec71b074acdff1c5f6b5a1f0d7d2c20b77Stéphane Graber        }).use('console', 'test', 'event', 'event-simulate', function (Y) {
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber            // creating the console...
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber            // (new Y.Console()).render();
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber            // starting the testing process
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber            // add the test cases and suites
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber            Y.Test.Runner.add(new Y.Test.Case({
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                name: "Event Delegate Tests",
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                test_simple_delegate_for_anchors: function(){
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    var foo = false, t, ct, boundEl;
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.on('delegate', function(e) {
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                        foo = true;
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                        t = e.target;
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                        ct = e.currentTarget;
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                        boundEl = e.container;
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    }, '#mod1', 'click', 'a');
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.Event.simulate (document.getElementById('firstlink'), 'click');
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.Assert.isTrue(foo, "simple delegation fails, mod1 should pickup the event and test target [firstlink]");
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    // Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the matching node");
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.Assert.areEqual(ct, Y.get('#firstlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the actual click target");
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                    Y.Assert.areEqual(boundEl, Y.get('#mod1'), "event delegate works but the container property should be the bound element");
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber
1ba0013f21e1953ae4a59cdf61562fbe843077e9Stéphane Graber                },

                test_multiple_selectors: function () {

                    var foo = false, t, ct, boundEl;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                        ct = e.currentTarget;
                        boundEl = e.container;
                    }, '#mod1', 'click', '.hd,.bd');


                    Y.Event.simulate(document.getElementById('mod-header'), 'click');

                    Y.Assert.areEqual(ct, Y.get('#mod-header'), "event delegate works but the matched element is an incorrect node, should be the matching node");

                    Y.Event.simulate(document.getElementById('mod-body'), 'click');

                    Y.Assert.areEqual(ct, Y.get('#mod-body'), "event delegate works but the matched element is an incorrect node, should be the matching node");

                },

                test_document_as_container: function () {

                    var foo = false, t, ct, boundEl;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                        ct = e.currentTarget;
                        boundEl = e.container;
                    }, Y.get('#mod1').get('ownerDocument'), 'click', 'a');

                    Y.Event.simulate (document.getElementById('firstlink'), 'click');
                    Y.Assert.isTrue(foo, "simple delegation fails, mod1 should pickup the event and test target [firstlink]");

                    Y.Assert.areEqual(ct, Y.get('#firstlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
                    Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the actual click target");
                    Y.Assert.areEqual(boundEl, Y.get('#mod1').get('ownerDocument'), "event delegate works but the container property should be the bound element");

                },

                test_checking_delegation_target: function(){

                    var foo = false, t, ct, boundEl;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                        ct = e.currentTarget;
                        boundEl = e.container;
                    }, '#mod1', 'click', 'a');

                    Y.Event.simulate (document.getElementById('fakeimage'), 'click');
                    Y.Assert.isTrue(foo, "delegation fails for an image within an anchor, mod1 should pickup the event and test target [secondlink]");
                    // in this case, the target should be the anchor, and not the image
                    // Y.Assert.areEqual(t, Y.get('#secondlink'), "event delegate works but the target is an incorrect node, should be the matching node");

                    // this has been changed.  the target is unchanged, the anchor is

                    Y.Assert.areEqual(ct, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching node");
                    Y.Assert.areEqual(t, Y.get('#fakeimage'), "event delegate works but the target is an incorrect node, should be the actual click target");
                    Y.Assert.areEqual(boundEl, Y.get('#mod1'), "event delegate works but the container property should be the bound element");

                },

                test_including_container_in_selector: function(){

                    var foo = false, t;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                    }, '#mod1', 'click', '#mod1 a');

                    Y.Event.simulate (document.getElementById('firstlink'), 'click');
                    Y.Assert.isFalse(foo, "delegation fails, the container (specified in the on) can not be part of the selectors");

                },

                test_targeting_container_without_selectors: function(){

                    var foo = false, t;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                    }, '#mod1', 'click');

                    Y.Event.simulate (document.getElementById('firstlink'), 'click');
                    Y.Assert.isFalse(foo, "delegation fails, delegation without at least one selector should never trigger an event");
                },

                test_multiple_selectors_one_match: function(){

                    var foo = false, t;

                    Y.on('delegate', function(e) {
                        foo = true;
                        t = e.target;
                    }, '#mod1', 'click', 'a,a span');

                    Y.Event.simulate (document.getElementById('firstlink'), 'click');
                    Y.Assert.isTrue(foo, "multiple selectors fails, delegate should be able to match different selectors");
                    Y.Assert.areEqual(t, Y.get('#firstlink'), "event delegate works but the target is an incorrect node, should be the matching selector");

                },

                test_multiple_delegate_matches: function(){

                    var foo1 = false, foo2 = false, t1, t2, ct1, ct2;

                    Y.on('delegate', function(e) {
                        foo1 = true;
                        t1 = e.target;
                        ct1 = e.currentTarget;
                    }, '#mod1', 'click', 'a');

                    Y.on('delegate', function(e) {
                        foo2 = true;
                        t2 = e.target;
                        ct2 = e.currentTarget;
                    }, '#mod1', 'click', 'a span');

                    Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
                    Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
                    Y.Assert.isTrue(foo2, "second match fail, delegate should be able to match [a span]");
                    Y.Assert.areEqual(ct1, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching selector");
                    Y.Assert.areEqual(t1, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the clicked node");
                    Y.Assert.areEqual(ct2, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the matching selector");
                    Y.Assert.areEqual(t2, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the clicked");

                },

                test_bubble_up_after_delegate: function(){

                    var foo1 = false, foo2 = false, t1, t2, ct;

                    Y.on('delegate', function(e) {
                        foo1 = true;
                        t1 = e.target;
                        ct = e.currentTarget;
                    }, '#mod1', 'click', 'a');

                    Y.on('click', function(e) {
                        foo2 = true;
                        t2 = e.target;
                    }, '#doc');

                    Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
                    Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
                    Y.Assert.isTrue(foo2, "second match fail, the event doesn't bubble up after the delegate routine");
                    // changed
                    // Y.Assert.areEqual(t1, Y.get('#secondlink'), "event delegate works but the target is an incorrect node, should be the matching selector");
                    Y.Assert.areEqual(ct, Y.get('#secondlink'), "event delegate works but the currentTarget is an incorrect node, should be the matching selector");
                    Y.Assert.areEqual(t1, Y.get('#spanwithinlink'), "event delegate works but the target is an incorrect node, should be the actual target");

                    // obsolete
                    Y.Assert.areEqual(t2, Y.get('#spanwithinlink'), "event delegate works but it doesn't restore e.target to the original value.");
                },

                test_bubble_up_after_delegate_halt: function(){

                    var foo1 = false, foo2 = false;

                    Y.on('delegate', function(e) {
                        foo1 = true;
                        e.halt();
                    }, '#mod1', 'click', 'a');

                    Y.on('click', function(e) {
                        foo2 = true;
                    }, '#doc');

                    Y.Event.simulate (document.getElementById('spanwithinlink'), 'click');
                    Y.Assert.isTrue(foo1, "first match fail, delegate should be able to match [a]");
                    Y.Assert.isFalse(foo2, "the listener for 'doc' got executed, which means that e.halt fails during the delegate routine");
                }

                /*
                 * 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>