jQuery UI Widget Testing

by markallgood

HTML

<div id="test" class="testClass">Testing</div>
<p id="setter">Set attribute</p>

JavaScript

(function ($, undefined) {
    $.widget("ent.titleBar", {
        options: {
            a: null,
            b: null
       },

        _create: function () {
            if (this.options.a) {
                this._setOption("a", this.options.a);
            }
            if (this.options.b) {
                this._setOption("b", this.options.b);
            }
        },

        _setOption: function (key, value) {
            switch (key) {
                case "a":
                    alert("Option a was set to [" + value + "]");
                    this.element.css("background-color", value);
                    break;
                case "b":
                    alert("Option b was set to [" + value + "]");
                    break;
            }

            // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
            $.Widget.prototype._setOption.apply(this, arguments);
            // In jQuery UI 1.9 and above, you use the _super method instead
            //this._super( "_setOption", key, value );
        },
        
        doAlert: function(options) {
            if (options.test && options.test === true) {
                alert("True test widget method option")
            } else {
                alert("Untrue alert from a widget method");
            }
        },

        destroy: function () {
            // In jQuery UI 1.8, you must invoke the destroy method from the base widget
            $.Widget.prototype.destroy.call(this);
            // In jQuery UI 1.9 and above, you would define _destroy instead of destroy and not call the base method
        }
    });
})(jQuery);

$( function() {
    $("div#test").titleBar({ a: "yellow"});
    $("p#setter").click(function() {
        $("div#test").titleBar("doAlert");
        //$("div#test").titleBar("doAlert");
        //alert($("div#test").titleBar("element").attr("class"));
        //$("div#test").titleBar("option", "a", "blue");
       ...