event-custom/tests/customevent.html

	customevent.html revision eab87f0881fdf3e80c2a1af9224c50f0bf033644
98N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
98N/A<html>
98N/A<head>
98N/A<title>YUI Event Tests</title>
1445N/A</head>
98N/A
98N/A<body class="yui-skin-sam">
919N/A<h1>Event Tests</h1>
919N/A<p><input type="button" value="Run Tests" id="btnRun" disabled="true" /></p>
919N/A
919N/A<script type="text/javascript" src="/build/yui/yui.js"></script>
919N/A<script type="text/javascript">
919N/A
919N/A(function() {
919N/A    YUI({
919N/A        base: "/build/",
919N/A        filter: "debug",
919N/A        useConsole: true,
919N/A        // logInclude: ['event', 'test']
919N/A        logExclude: {Dom: true, Selector: true, Node: true, attribute: true, base: true, event: true, widget: true}
919N/A    }).use("dump", "test", "console", "event-custom", function(Y) {
919N/A
919N/A        var button = Y.get('#btnRun');
919N/A
98N/A        // Set up the page
98N/A        button.set("disabled", false);
98N/A        Y.on("click", function() {
98N/A            Y.Test.Runner.run();
493N/A        }, button);
98N/A
98N/A        var myConsole = new Y.Console().render();
1445N/A
98N/A        var testEventTarget = new Y.Test.Case({
911N/A            name: "Event.Target tests",
1445N/A
1445N/A            testAugment: function() {
1445N/A
911N/A                var fired = false;
98N/A
1445N/A                var O = function(id) {
98N/A                    this.id = id;
98N/A                    Y.log('O constructor executed ' + id);
98N/A                }
493N/A
98N/A                O.prototype = {
768N/A                    oOo: function(ok) {
768N/A                        Y.log('oOo');
768N/A                    }
98N/A                }
493N/A
1097N/A                // pass configuration info into Event.Target with the following
1097N/A                // construct
965N/A                Y.augment(O, Y.Event.Target, null, null, {
98N/A                    emitFacade: true
98N/A                });
1018N/A
1018N/A                var o = new O(),
1018N/A                handle = o.on('testAugment', function(e, arg1, arg2) {
1018N/A                    Y.Assert.isTrue(this instanceof O);
1018N/A                    Y.Assert.isTrue(e instanceof Y.Event.Facade);
1018N/A                    Y.Assert.isTrue(e.foo === 'afoo');
1018N/A                    Y.Assert.isTrue(e.details[1] === 1);
1018N/A                    Y.Assert.isTrue(arg1 === 1);
1018N/A                    Y.Assert.isTrue(arg2 === 2);
1018N/A                    fired = true;
1018N/A                });
1018N/A
                o.fire('testAugment', { foo: 'afoo' }, 1, 2);

                Y.Assert.isTrue(fired);

                handle.detach();

                // if the first argument is not an object, the
                // event facade is moved in front of the args rather
                // than overwriting existing object.
                o.on('testAugment', function(e, arg1, arg2) {
                    Y.Assert.areEqual(1, arg1);
                    Y.Assert.areEqual(2, arg2);
                });

                o.fire('testAugment', 1, 2);

            },

            testExtend: function() {

                var fired = false;

                var Base = function() {
                    Y.log('Base constructor executed');
                    arguments.callee.superclass.constructor.apply(this, arguments);
                }

                Y.extend(Base, Y.Event.Target, {
                    base: function() {
                        Y.log('all your base...');
                    }
                });

                var b = new Base();
                b.on('testExtend', function(arg1, arg2) {
                    Y.Assert.isTrue(this instanceof Base);
                    Y.Assert.isTrue(arg1 === 1);
                    Y.Assert.isTrue(arg2 === 2);
                    fired = true;
                });

                b.fire('testExtend', 1, 2);

                Y.Assert.isTrue(fired);
            },

            testPrefix: function() {

                var fired1 = false,
                    fired2 = false;

                var O = function(id) {
                    this.id = id;
                    Y.log('O constructor executed ' + id);
                }

                O.prototype = {
                    oOo: function(ok) {
                        Y.log('oOo');
                    }
                }

                // pass configuration info into Event.Target with the following
                // construct
                Y.augment(O, Y.Event.Target, null, null, {
                    emitFacade: true,
                    prefix: 'prefix'
                });

                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() {
                    Y.Assert.isTrue(fired1);
                    fired2 = true;
                });

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

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

                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');
                Y.Assert.isFalse(fired1);
                Y.Assert.isFalse(fired2);

            },

            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 */ }).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

                });
            }

        });


        Y.Test.Runner.add(testEventTarget);
        Y.Test.Runner.run();
    });
})();
</script>
</body>
</html>