event-custom/tests/customevent.html

	customevent.html revision 3f3aa287185afb5d48d7ef0717054a154c372dc9
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2739add8add66e21526ce27f83c2ae133d089070rbb<html>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<head>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<title>YUI Event Tests</title>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj</head>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<body class="yui-skin-sam">
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<h1>Event Tests</h1>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<p><input type="button" value="Run Tests" id="btnRun" disabled="true" /></p>
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj<script type="text/javascript">
4065b438067f3f08d0bd98b31ac4085b581b931dstoddard
7ba24263a36323ecaf0685758f44001c0800d012stoddard(function() {
7ba24263a36323ecaf0685758f44001c0800d012stoddard    //YUI.add("selector-native", function(){});
7ba24263a36323ecaf0685758f44001c0800d012stoddard    YUI({
7ba24263a36323ecaf0685758f44001c0800d012stoddard        base: "/build/",
4065b438067f3f08d0bd98b31ac4085b581b931dstoddard        filter: "debug",
2739add8add66e21526ce27f83c2ae133d089070rbb        // combine: false,
2739add8add66e21526ce27f83c2ae133d089070rbb        useConsole: true,
4065b438067f3f08d0bd98b31ac4085b581b931dstoddard        onCSS: function(Y) {
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard            Y.log('CSS is done loading');
7ba24263a36323ecaf0685758f44001c0800d012stoddard        },
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard        // logInclude: ['event', 'test']
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard        logExclude: {
7ba24263a36323ecaf0685758f44001c0800d012stoddard            Dom: true,
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj            Selector: true,
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj            Node: true,
369edcdd0a9c5516c61e736ec2a6fc8fb0d92fe2manoj            yui: true,
369edcdd0a9c5516c61e736ec2a6fc8fb0d92fe2manoj            get: true,
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj            attribute: true, base: true, event: true, widget: true},
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
7ba24263a36323ecaf0685758f44001c0800d012stoddard        filters: {
7ba24263a36323ecaf0685758f44001c0800d012stoddard            base: 'raw',
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard            dom: null,
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard            attribute: 'min'
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard        }
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard    }).use("dump", "test", "console", function(Y) {
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        // Y.Global.on('yui:log', function(e) {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        //     console.log('GLOBAL LOG: ' + e.msg);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        // });
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        var button = Y.get('#btnRun');
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        // Set up the page
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        button.set("disabled", false);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj        Y.on("click", function() {
56ca30c968906053ae61acb218420667bb58d996rbb            Y.Test.Runner.run();
56ca30c968906053ae61acb218420667bb58d996rbb        }, button);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
56ca30c968906053ae61acb218420667bb58d996rbb        var myConsole = new Y.Console().render();
56ca30c968906053ae61acb218420667bb58d996rbb        Y.log('{}');
56ca30c968906053ae61acb218420667bb58d996rbb
56ca30c968906053ae61acb218420667bb58d996rbb        var testEventTarget = new Y.Test.Case({
56ca30c968906053ae61acb218420667bb58d996rbb            name: "EventTarget tests",
56ca30c968906053ae61acb218420667bb58d996rbb
56ca30c968906053ae61acb218420667bb58d996rbb            testAugment: function() {
56ca30c968906053ae61acb218420667bb58d996rbb
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                var fired = false;
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                var O = function(id) {
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    this.id = id;
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    Y.log('O constructor executed ' + id);
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                }
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
7ba24263a36323ecaf0685758f44001c0800d012stoddard                O.prototype = {
7ba24263a36323ecaf0685758f44001c0800d012stoddard                    oOo: function(ok) {
7ba24263a36323ecaf0685758f44001c0800d012stoddard                        Y.log('oOo');
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    }
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                }
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                // pass configuration info into EventTarget with the following
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                // construct
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                Y.augment(O, Y.EventTarget, null, null, {
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    emitFacade: true
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                });
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                var o = new O(),
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                handle = o.on('testAugment', function(e, arg1, arg2) {
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    Y.Assert.isTrue(this instanceof O);
7ba24263a36323ecaf0685758f44001c0800d012stoddard                    Y.Assert.isTrue(e instanceof Y.Event.Facade);
7ba24263a36323ecaf0685758f44001c0800d012stoddard                    Y.Assert.isTrue(e.foo === 'afoo');
9c09943bad734ebd5c7cc10bd6d63b75c4c6e056stoddard                    Y.Assert.isTrue(e.details[1] === 1);
aa1faea36e4ae357bc603a2337b6adc54f5daec1manoj                    Y.Assert.isTrue(arg1 === 1);
aa1faea36e4ae357bc603a2337b6adc54f5daec1manoj                    Y.Assert.isTrue(arg2 === 2);
aa1faea36e4ae357bc603a2337b6adc54f5daec1manoj                    fired = true;
aa1faea36e4ae357bc603a2337b6adc54f5daec1manoj                });
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
302dc1f7b3feee23a91ad8f3cf3cb2edd95a557bmanoj                o.fire('testAugment', { foo: 'afoo' }, 1, 2);
302dc1f7b3feee23a91ad8f3cf3cb2edd95a557bmanoj
302dc1f7b3feee23a91ad8f3cf3cb2edd95a557bmanoj                Y.Assert.isTrue(fired);
302dc1f7b3feee23a91ad8f3cf3cb2edd95a557bmanoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                handle.detach();
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                // if the first argument is not an object, the
d5defd5a0c5cdbaf74b85939484dc2b6c8317d19manoj                // event facade is moved in front of the args rather
d5defd5a0c5cdbaf74b85939484dc2b6c8317d19manoj                // than overwriting existing object.
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                o.on('testAugment', function(e, arg1, arg2) {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.Assert.areEqual(1, arg1);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.Assert.areEqual(2, arg2);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                });
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                o.fire('testAugment', 1, 2);
d6b3cb141f0667101c1bca883ad15b383402c93bfielding
d6b3cb141f0667101c1bca883ad15b383402c93bfielding            },
d5defd5a0c5cdbaf74b85939484dc2b6c8317d19manoj
fbfdb4a45ff0e32dbfef0d414c8d75fe8aebcbb9manoj            testExtend: function() {
fbfdb4a45ff0e32dbfef0d414c8d75fe8aebcbb9manoj
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                var fired = false;
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                var Base = function() {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.log('Base constructor executed');
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    arguments.callee.superclass.constructor.apply(this, arguments);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                }
dbf0c7bef06259486cd2748a2d0e82f27e099d6efielding
dbf0c7bef06259486cd2748a2d0e82f27e099d6efielding                Y.extend(Base, Y.EventTarget, {
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                    base: function() {
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                        Y.log('all your base...');
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    }
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                });
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                var b = new Base();
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                b.on('testExtend', function(arg1, arg2) {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.Assert.isTrue(this instanceof Base);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.Assert.isTrue(arg1 === 1);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    Y.Assert.isTrue(arg2 === 2);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    fired = true;
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                });
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                b.fire('testExtend', 1, 2);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                Y.Assert.isTrue(fired);
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj            },
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj            testPrefix: function() {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                var fired1 = false,
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                    fired2 = false;
d6b3cb141f0667101c1bca883ad15b383402c93bfielding
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                var O = function(id) {
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                    this.id = id;
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                    Y.log('O constructor executed ' + id);
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                }
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                O.prototype = {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    oOo: function(ok) {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                        Y.log('oOo');
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    }
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                }
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                // pass configuration info into EventTarget with the following
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                // construct
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                Y.augment(O, Y.EventTarget, null, null, {
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    emitFacade: true,
2a6c49cfaef5979a5a06098f3ce987cd76769409manoj                    prefix: 'prefix'
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                });
d6b3cb141f0667101c1bca883ad15b383402c93bfielding
d6b3cb141f0667101c1bca883ad15b383402c93bfielding                var o = new O();
                o.on('testPrefix', function(e, arg1, arg2) {
                    Y.Assert.isTrue(this instanceof O);
                    fired1 = true;
                });

                o.on('prefix:testPrefix', function(e, arg1, arg2) {
                    Y.Assert.isTrue(this instanceof O);
                    fired2 = true;
                });

                o.fire('testPrefix', { foo: 'afoo' }, 1, 2);

                Y.Assert.isTrue(fired1);
                // Y.Assert.isTrue(fired2);

                fired1 = false;
                fired2 = false;

                o.fire('prefix:testPrefix', { foo: 'afoo' }, 1, 2);
                Y.Assert.isTrue(fired1);
                Y.Assert.isTrue(fired2);
            },

            testDetachKey: function() {

                var fired1 = false,
                    fired2 = false;

                Y.on('handle|test:event', function() {
                    fired1 = true;
                });

                // one listener
                Y.fire('test:event');
                Y.Assert.isTrue(fired1);
                Y.Assert.isFalse(fired2);

                Y.detach('handle|test:event');

                fired1 = false;
                fired2 = false;

                Y.on('handle|test:event', function() {
                    fired2 = true;
                });

                // first lisener detached, added a new listener
                Y.fire('test:event');
                Y.Assert.isFalse(fired1);
                Y.Assert.isTrue(fired2);

                Y.detach('handle|test:event');
                fired1 = false;
                fired2 = false;

                Y.after('handle|test:event', function(arg1) {
                    Y.Assert.areEqual('orange', arg1);
                    Y.Assert.isTrue(fired1);
                    fired2 = true;
                });

                // comma or pipe
                Y.on('handle|test:event', function(arg1) {
                    Y.Assert.areEqual('orange', arg1);
                    Y.Assert.isFalse(fired2);
                    fired1 = true;
                });

                // testing on and after order
                Y.fire('test:event', 'orange');

                fired1 = false;
                fired2 = false;

                // spaces after the comma or lack thereof should have
                // no effect on the addition or removal of listeners
                Y.detach('handle|test:event');

                // added both an on listener and an after listener,
                // then detached both
                Y.fire('test:event', 'orange');
                Y.Assert.isFalse(fired1);
                Y.Assert.isFalse(fired2);

            },

            testDetachAllByKey: function() {

                var fired1 = false,
                    fired2 = false;

                Y.after('handle|test:event2', function() {
                    fired2 = true;
                });

                Y.on('handle|test:event2', function() {
                    fired1 = true;
                });

                // detachAll
                Y.detach('handle|*');

                Y.fire('test:event2');

                Y.Assert.isFalse(fired1, 'fired1, the after listener should not have fired.');
                Y.Assert.isFalse(fired2, 'fired2, the on listener should not have fired.');

            },

            testChain: function() {

                var fired1 = false,
                    fired2 = false,
                    fired3 = false,
                    fired4 = false,
                    fired5 = false;

                // should be executed once, after f2
                var f1 = function() {
                    Y.Assert.isTrue(fired2);
                    fired1 = true;
                };

                // should be executed once, before f1
                var f2 = function() {
                    Y.Assert.isFalse(fired1);
                    fired2 = true;
                };

                // should be executed once, different event from f1 and f2
                var f3 = function() {
                    fired3 = true;
                };

                // detached before fired, should not executed
                var f4 = function() {
                    fired4 = true;
                };

                // should fire once, preserving the custom prefix rather
                // than using the configured event target prefix
                var f5 = function() {
                    fired5 = true;
                };

                // configure chaining via global default or on the event target
                YUI({ /* chain: true */
                    base:'/build/'
                }).use('*', function(Y2) {

                    var o = new Y2.EventTarget({
                        prefix: 'foo',
                        chain : true
                    });

                    // without event target prefix manipulation (incomplete now)
                    // @TODO an error here is throwing an uncaught exception rather than failing the test
                    // Y2.after('p:e', f1).on('p:e', f2).on('p:e2', f3).on('detach, p:e', f4).detach('detach, p:e').fire('p:e').fire('p:e2');

                    // with event target prefix manipulation ('e' is the same event as 'foo:e',
                    // but 'pre:e' is a different event only accessible by using that exact name)
o.after('e', f1).on('foo:e', f2).on('foo:e2', f3).on('detach, e', f4).detach('detach,e').fire('foo:e').fire('e2').on('pre:e', f5).fire('pre:e');

                    Y.Assert.isTrue(fired1);  // verifies chaining, on/after order, and adding the event target prefix
                    Y.Assert.isTrue(fired2);  // verifies chaining, on/after order, and accepting the prefix in the event name
                    Y.Assert.isTrue(fired3);  // verifies no interaction between events, and prefix manipulation
                    Y.Assert.isFalse(fired4); // verifies detach works (regardless of spaces after comma)
                    Y.Assert.isTrue(fired5);  // verifies custom prefix

                });

            },

            testObjType: function() {
                var f1, f2;
                Y.on({
                    'y:click': function() {f1 = true},
                    'y:clack': function() {f2 = true}
                });

                Y.fire('y:click');
                Y.fire('y:clack');

                Y.Assert.isTrue(f1);
                Y.Assert.isTrue(f2);
            },

            testBubble: function() {
                var count = 0,
                    ret,
                    config = {
                        emitFacade: true,
                        bubbles: true
                    },
                    a = new Y.EventTarget(config),
                    b = new Y.EventTarget(config);

                b.addTarget(a);

                // this should not be necessary
                b.publish('test:foo');

                a.on('test:foo', function() {
                    count++;
                });

                ret = b.fire('test:foo', {}, b);

                Y.Assert.areEqual(1, count);
                Y.Assert.isTrue(ret);

                b.on('test:foo', function(e) {
                    e.stopPropagation();
                });

                ret = b.fire('test:foo', {}, b);

                Y.Assert.areEqual(1, count);
                Y.Assert.isFalse(ret);
            },

            testPreventFnOnce: function() {
                var count = 0;
                Y.publish('y:foo1', {
                    emitFacade: true,
                    preventedFn: function() {
                        count++;
                        Y.Assert.isTrue(this instanceof YUI);
                    }
                });

                Y.on('y:foo1', function(e) {
                    e.preventDefault();
                });

                Y.on('y:foo1', function(e) {
                    e.preventDefault();
                });

                Y.fire('y:foo1');

                Y.Assert.areEqual(1, count);
            },

            testDetachHandle: function() {
                var count = 0, handle, handle2;
                Y.publish('y:foo', {
                    emitFacade: true
                });

                Y.on('y:foo', function(e) {
                    count++;
                    handle2.detach();
                });

                handle = Y.on('y:foo', function(e) {
                    count += 100;
                });

                handle2 = Y.on('y:foo', function(e) {
                    count += 1000;
                });

                Y.detach(handle);

                Y.fire('y:foo');

                Y.Assert.areEqual(1, count);

                count = 0;

                var handle3 = Y.on('y:click', function() {
                    count++;
                    handle3.detach();
                });

                Y.fire('y:click');
                Y.fire('y:click');

                count = 0;
                Y.on('y:foo', function(e) {
                    count++;
                });
                Y.on('y:foo', function(e) {
                    count++;
                });

                Y.detachAll('y:click');

                Y.fire('y:click');

                Y.Assert.areEqual(0, count);

            },

            testBroadcast: function() {
                var o = new Y.EventTarget(), s1, s2, s3, s4;

                o.publish('y:foo2', {
                    emitFacade: true,
                    broadcast: 1
                });

                Y.on('y:foo2', function() {
                    Y.log('Y foo2 executed');
                    s1 = 1;
                });

                Y.Global.on('y:foo2', function() {
                    Y.log('GLOBAL foo2 executed');
                    s2 = 1;
                });

                o.fire('y:foo2');

                Y.Assert.areEqual(1, s1);
                Y.Assert.areNotEqual(1, s2);

                s1 = 0;
                s2 = 0;

                o.publish('y:bar', {
                    emitFacade: true,
                    broadcast: 2
                });

                Y.on('y:bar', function() {
                    Y.log('Y bar executed');
                    s3 = 1;
                });

                Y.Global.on('y:bar', function() {
                    Y.log('GLOBAL bar executed');
                    s4 = 1;
                });

                o.fire('y:bar');

                Y.Assert.areEqual(1, s3);
                Y.Assert.areEqual(1, s4);
            }

        });

        Y.Test.Runner.add(testEventTarget);
        Y.Test.Runner.run();
    });

    YUI({
        base: "/build/",
        filter: "debug",
        combine: false,
        useConsole: true,
        logExclude: {Dom: true, Selector: true, Node: true, attribute: true, base: true, event: true, widget: true}
    }).use("datasource", function(Y) {
        Y.log('loaded datasource: ' + Y.DataSource);
    });


})();
</script>
</body>
</html>