widget.html revision d4a90de3308f343c5d935b5f9b6bcc9f5bc4d05f
335N/A<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1186N/A<html>
1186N/A<head>
0N/A <title>Widget Test Suite</title>
0N/A
0N/A <script src="/build/yui/yui.js"></script>
335N/A
0N/A <style type="text/css">
0N/A #console .yui3-console-entry {
0N/A padding:2px;
0N/A margin:0px;
0N/A min-height:0;
0N/A }
0N/A
0N/A #console .yui3-console-entry-fail .yui3-console-entry-cat {
0N/A background-color:red;
0N/A }
0N/A
0N/A #console .yui3-console-entry-pass .yui3-console-entry-cat {
0N/A background-color:green;
1244N/A }
1186N/A
1186N/A #console .yui3-console-entry-perf .yui3-console-entry-cat {
1325N/A background-color:blue;
1186N/A }
1355N/A
1355N/A #console {
1186N/A position:static;
1186N/A }
1186N/A
1186N/A html, body {
1325N/A height:100%;
1325N/A }
1186N/A </style>
1186N/A</head>
1186N/A<body class="yui3-skin-sam">
1186N/A<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
1186N/A<div id="testbed" class="yui3-skin-foo"></div>
1127N/A<div id="widgetRenderToContainer" style="height:300px;width:300px"></div>
0N/A <script>
1186N/A YUI({
1186N/A useBrowserConsole:false,
1355N/A filter: (window.location.search.match(/[?&]filter=([^&]+)/) || [])[1] || 'min'
1325N/A }).use('test', 'widget', 'node-event-simulate', 'console', function (Y) {
1355N/A
1355N/A var suite = new Y.Test.Suite("Widget Tests");
1281N/A
1108N/A suite.add(new Y.Test.Case({
1281N/A
1281N/A name : "Core",
1281N/A
1281N/A "testInstantiation" : function() {
1281N/A var w = new Y.Widget();
1281N/A Y.Assert.isTrue(w instanceof Y.Widget);
1281N/A
1354N/A // Basic API
1354N/A Y.Assert.isFunction(w.render);
1281N/A Y.Assert.isFunction(w.init);
1281N/A Y.Assert.isFunction(w.destroy);
1281N/A Y.Assert.isFunction(w.get);
1281N/A Y.Assert.isFunction(w.set);
1281N/A Y.Assert.isFunction(w.show);
1145N/A Y.Assert.isFunction(w.hide);
1281N/A Y.Assert.isFunction(w.disable);
1108N/A Y.Assert.isFunction(w.enable);
1186N/A Y.Assert.isFunction(w.focus);
335N/A Y.Assert.isFunction(w.blur);
1364N/A
1186N/A w.destroy();
1186N/A },
1281N/A
1281N/A "testInitState" : function() {
1281N/A var w = new Y.Widget();
1281N/A
1281N/A Y.Assert.areEqual("div", w.get("boundingBox").get("tagName").toLowerCase());
1281N/A Y.Assert.areEqual("div", w.get("contentBox").get("tagName").toLowerCase());
1281N/A
1281N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
1281N/A Y.Assert.isFalse(w.get("focused"), "focused should be false");
1281N/A Y.Assert.areSame("", w.get("height"), "height should be empty string");
1281N/A Y.Assert.areSame("", w.get("width"), "width should be empty string");
1281N/A Y.Assert.isString(w.get("id"), "id should be a string");
1281N/A Y.Assert.isTrue(w.get("initialized"), "initialized should be true");
1281N/A Y.Assert.isFalse(w.get("destroyed"), "destroyed should be false");
1281N/A Y.Assert.isFalse(w.get("rendered"), "rendered should be false");
1281N/A Y.Assert.isTrue(w.get("visible"), "visible should be true");
1281N/A Y.Assert.isNull(w.get("tabIndex"), "tabIndex should be null");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testNonRenderedStateUpdate" : function() {
1281N/A var w = new Y.Widget({
1281N/A // WRITE ONCE
1281N/A id: "foobar",
1281N/A boundingBox: Y.Node.create("<span id='bb'></span>"),
1281N/A srcNode: Y.Node.create("<span id='cb'></span>")
1281N/A });
1325N/A
1325N/A w.set("disabled", true);
1281N/A w.set("height", 100);
1281N/A w.set("width", 200);
1325N/A w.set("visible", false);
1325N/A w.set("tabIndex", 5);
1325N/A
1325N/A Y.Assert.areEqual("span", w.get("boundingBox").get("tagName").toLowerCase());
1325N/A Y.Assert.areEqual("span", w.get("contentBox").get("tagName").toLowerCase());
1325N/A Y.Assert.areEqual("bb", w.get("boundingBox").get("id"));
1325N/A Y.Assert.areEqual("cb", w.get("contentBox").get("id"));
1325N/A
1325N/A Y.Assert.isTrue(w.get("disabled"), "disabled should be true");
1325N/A Y.Assert.isFalse(w.get("focused"), "focused should be false"); // focused is READONLY
1325N/A Y.Assert.areEqual("100", w.get("height"), "height should be 100px");
1325N/A Y.Assert.areEqual("200", w.get("width"), "width should be 200px");
1325N/A Y.Assert.areEqual("foobar", w.get("id"), "id should be foobar");
1325N/A Y.Assert.isFalse(w.get("visible"), "visible should be false");
1325N/A Y.Assert.areEqual(5, w.get("tabIndex"), "tabIndex should be 5");
1325N/A
1325N/A w.destroy();
1325N/A },
1325N/A
1325N/A "testValidationReadonlyWriteonce" : function() {
1325N/A
1325N/A var w = new Y.Widget();
1325N/A
1325N/A // READONLY
1325N/A w.set("focused", true);
1325N/A w.set("rendered", true);
1325N/A
1325N/A // WRITE ONCE
1325N/A w.set("boundingBox", Y.Node.create("<span id='bb'></span>"));
1325N/A w.set("contentBox", Y.Node.create("<span id='cb'></span>"));
1325N/A w.set("render", true);
1325N/A
1325N/A // INVALID
1325N/A w.set("tabIndex", "foo");
1325N/A
1325N/A // State should be the same as the initial state
1325N/A Y.Assert.areEqual("div", w.get("boundingBox").get("tagName").toLowerCase());
1325N/A Y.Assert.areEqual("div", w.get("contentBox").get("tagName").toLowerCase());
1325N/A
1325N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
1325N/A Y.Assert.isFalse(w.get("focused"), "focused should be false");
1325N/A Y.Assert.areSame("", w.get("height"), "height should be empty string");
1325N/A Y.Assert.areSame("", w.get("width"), "width should be empty string");
1325N/A Y.Assert.isString(w.get("id"), "id should be a string");
1325N/A Y.Assert.isTrue(w.get("initialized"), "initialized should be true");
1325N/A Y.Assert.isFalse(w.get("destroyed"), "destroyed should be false");
1325N/A Y.Assert.isFalse(w.get("rendered"), "rendered should be false");
1325N/A Y.Assert.isTrue(w.get("visible"), "visible should be true");
1325N/A Y.Assert.isNull(w.get("tabIndex"), "tabIndex should be null");
1325N/A
1325N/A w.destroy();
1325N/A },
1325N/A
1325N/A "testRender" : function() {
1325N/A
1325N/A var w = new Y.Widget({
1325N/A id: "widgetRender"
1325N/A });
1325N/A w.render();
1325N/A
1325N/A var bbFromDom = Y.Node.one("#widgetRender");
1325N/A
1325N/A Y.Assert.isTrue(w.get("boundingBox").compareTo(bbFromDom), "boundingBox not found in DOM");
1325N/A Y.Assert.isTrue(bbFromDom.get("firstChild").compareTo(w.get("contentBox")), "contentBox not first child of boundingBox");
1325N/A Y.Assert.isTrue(bbFromDom.compareTo(Y.Node.one("body").get("firstChild")), "widget not inserted to body");
1325N/A Y.Assert.isTrue(w.get("rendered"), "Rendered flag not set");
1325N/A
1325N/A w.destroy();
1325N/A },
1325N/A
1325N/A "testRenderTo" : function() {
1281N/A
1281N/A var w = new Y.Widget({
1281N/A id: "widgetRenderTo"
1281N/A });
1281N/A w.render("#widgetRenderToContainer");
1186N/A
1186N/A var bbFromDom = Y.Node.one("#widgetRenderTo");
1281N/A
1281N/A Y.Assert.isTrue(bbFromDom.get("parentNode").compareTo(Y.Node.one("#widgetRenderToContainer")), "widget not rendered to container passed to render()");
1281N/A Y.Assert.isTrue(w.get("boundingBox").compareTo(bbFromDom), "boundingBox not found in DOM");
1186N/A Y.Assert.isTrue(bbFromDom.get("firstChild").compareTo(w.get("contentBox")), "contentBox not first child of boundingBox");
1281N/A Y.Assert.isTrue(w.get("rendered"), "Rendered flag not set");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testBaseClassNames" : function() {
1281N/A
1281N/A var w = new Y.Widget();
1281N/A w.render();
1281N/A
1281N/A var bb = w.get("boundingBox");
1281N/A var cb = w.get("contentBox");
1281N/A
1281N/A Y.Assert.isTrue(bb.hasClass("yui3-widget"), "bb missing yui3-widget marker");
1281N/A Y.Assert.isTrue(cb.hasClass("yui3-widget-content"), "cb missing yui3-widget-content marker");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testExtendedClassNames" : function() {
1281N/A function MyWidget() {
1281N/A MyWidget.superclass.constructor.apply(this, arguments);
1281N/A }
1281N/A
1281N/A MyWidget.NAME = "myWidget";
1186N/A
1186N/A Y.extend(MyWidget, Y.Widget);
1281N/A
1281N/A var myWidget = new MyWidget();
1186N/A myWidget.render();
1281N/A
1186N/A var bb = myWidget.get("boundingBox");
1186N/A var cb = myWidget.get("contentBox");
1281N/A
1281N/A Y.Assert.isTrue(bb.hasClass("yui3-widget"), "bb missing generic yui3-widget marker");
1281N/A Y.Assert.isTrue(bb.hasClass("yui3-mywidget"), "bb missing yui3-mywidget marker");
1281N/A Y.Assert.isTrue(cb.hasClass("yui3-mywidget-content"), "cb missing yui3-mywidget-content marker");
1281N/A Y.Assert.isFalse(cb.hasClass("yui3-widget-content"), "cb shouldn't have yui3-widget-content marker");
1281N/A
1281N/A myWidget.destroy();
1281N/A },
1281N/A
1281N/A "testHeight" : function() {
1281N/A
1281N/A var w = new Y.Widget({
1281N/A height:100,
1281N/A render:"#widgetRenderToContainer"
1281N/A });
1281N/A
1281N/A var bb = w.get("boundingBox"),
1281N/A cb = w.get("contentBox");
1281N/A
1281N/A // Default CSS has no border/padding/margin on BB/CB so this should be fine in all browsers
1281N/A Y.Assert.areEqual(100, bb.get("offsetHeight"), "100 height not set correctly in DOM");
1281N/A Y.Assert.areEqual(100, cb.get("offsetHeight"), "100 height not set correctly in DOM");
1281N/A
1281N/A w.set("height", "200px");
1281N/A
1281N/A Y.Assert.areEqual(200, bb.get("offsetHeight"), "200px height not set correctly in DOM");
1281N/A Y.Assert.areEqual(200, cb.get("offsetHeight"), "200px height not set correctly in DOM");
1281N/A
1281N/A w.set("height", "50%");
1281N/A
1281N/A Y.Assert.areEqual(150, bb.get("offsetHeight"), "% height not set correctly in DOM");
1281N/A Y.Assert.areEqual(150, cb.get("offsetHeight"), "% height not set correctly in DOM");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testWidth" : function() {
1186N/A var w = new Y.Widget({
1281N/A width:100,
1186N/A render:"#widgetRenderToContainer"
1186N/A });
1281N/A
1186N/A var bb = w.get("boundingBox"),
1186N/A cb = w.get("contentBox");
1281N/A
1281N/A // Default CSS has no border/padding/margin on BB/CB so this should be fine in all browsers
1281N/A Y.Assert.areEqual(100, bb.get("offsetWidth"), "100 width not set correctly in DOM");
1186N/A Y.Assert.areEqual(100, cb.get("offsetWidth"), "100 width not set correctly in DOM");
1186N/A
1281N/A w.set("width", "200px");
1186N/A
1281N/A Y.Assert.areEqual(200, bb.get("offsetWidth"), "200px width not set correctly in DOM");
1186N/A Y.Assert.areEqual(200, cb.get("offsetWidth"), "200px width not set correctly in DOM");
1186N/A
1281N/A w.set("width", "50%");
1281N/A
1186N/A Y.Assert.areEqual(150, bb.get("offsetWidth"), "% width not set correctly in DOM");
1281N/A Y.Assert.areEqual(150, cb.get("offsetWidth"), "% width not set correctly in DOM");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testDisabled" : function() {
1281N/A var w = new Y.Widget({render:true});
1281N/A var bb = w.get("boundingBox");
1186N/A
1186N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false by default");
1281N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-disabled"), "bb should not have a disabled marker class");
1281N/A
1281N/A w.set("disabled", true);
1186N/A
1281N/A Y.Assert.isTrue(w.get("disabled"), "disabled should be true");
1281N/A Y.Assert.isTrue(bb.hasClass("yui3-widget-disabled"), "bb should have a disabled marker");
1281N/A
1281N/A w.set("disabled", false);
1281N/A
1281N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
1281N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-disabled"), "bb should not have a disabled marker class");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1281N/A "testDisableEnable" : function() {
1186N/A var w = new Y.Widget({render:true});
1186N/A var bb = w.get("boundingBox");
1281N/A
1186N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false by default");
1281N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-disabled"), "bb should not have a disabled marker class");
1281N/A
1281N/A w.disable();
1281N/A
1186N/A Y.Assert.isTrue(w.get("disabled"), "disabled should be true");
1186N/A Y.Assert.isTrue(bb.hasClass("yui3-widget-disabled"), "bb should have a disabled marker");
1281N/A
1281N/A w.enable();
1281N/A
1281N/A Y.Assert.isFalse(w.get("disabled"), "disabled should be false");
1281N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-disabled"), "bb should not have a disabled marker class");
1281N/A
1281N/A w.destroy();
1281N/A },
1281N/A
1186N/A "testFocusBlur" : function() {
1281N/A
1186N/A // The focused attribute is read-only, so we test through the public api
1186N/A
1281N/A var w = new Y.Widget({render:true});
1281N/A var bb = w.get("boundingBox");
1281N/A
1281N/A // TODO ENH REQUEST: This doesn't seem right. We should focus on render.
1281N/A Y.Assert.isFalse(w.get("focused"), "focused should be false by default");
1281N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-focused"), "bb should not have a disabled marker class");
1281N/A
1281N/A w.focus();
1281N/A
1281N/A Y.Assert.isTrue(w.get("focused"), "focused should be true");
1281N/A Y.Assert.isTrue(bb.hasClass("yui3-widget-focused"), "bb should have a focused marker");
1281N/A
1281N/A w.blur();
1186N/A
1186N/A Y.Assert.isFalse(w.get("focused"), "focused should be false");
1186N/A Y.Assert.isFalse(bb.hasClass("yui3-widget-focused"), "bb should not have a focused marker class");
477N/A
1186N/A w.destroy();
335N/A },
1186N/A
"testTabIndex" : function() {
var w = new Y.Widget({render:true});
var bb = w.get("boundingBox");
Y.Assert.isNull(w.get("tabIndex"), "tabIndex should be null by default");
Y.Assert.isTrue(bb.get("tabIndex") <= 0, "tabIndex should not be set by default"); // default varies across browsers 0 or -1
w.set("tabIndex", 6);
Y.Assert.areSame(6, w.get("tabIndex"), "tabIndex should be 6");
// FIXME: See http://yuilibrary.com/projects/yui3/ticket/2531105
// Y.Assert.areSame(6, bb.get("tabIndex"), "tabIndex should be 6");
w.destroy();
},
"testId" : function() {
var w = new Y.Widget({
id: "testId",
render:true
});
var bb = w.get("boundingBox");
// ID is writeOnce. Cannot reset ID
w.set("id", "resetTestId");
Y.Assert.areSame("testId", w.get("id"), "id not set");
Y.Assert.areSame("testId", bb.get("id"), "id not reflected in DOM");
w.destroy();
},
"testVisible" : function() {
var w = new Y.Widget({render:true});
var bb = w.get("boundingBox");
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass("yui3-widget-hidden"), "bb should not have a hidden marker class");
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.set("visible", false);
Y.Assert.isFalse(w.get("visible"), "visible should be false");
Y.Assert.isTrue(bb.hasClass("yui3-widget-hidden"), "bb should have an hidden marker");
Y.Assert.areEqual("none", bb.getStyle("display"), "Default CSS should hide widget using display:none");
w.set("visible", true);
Y.Assert.isTrue(w.get("visible"), "visible should be true by default");
Y.Assert.isFalse(bb.hasClass("yui3-widget-hidden"), "bb should not have a hidden marker class");
Y.Assert.areNotEqual("none", bb.getStyle("display"), "widget should not be display:none");
w.destroy();
},
"testBoundingBox" : function() {
var container = Y.one("#widgetRenderToContainer");
container.append("<div id='bbTest'></div>");
var bb = Y.one("#bbTest");
var w = new Y.Widget({
boundingBox: "#bbTest",
render:true
});
Y.Assert.isTrue(w.get("boundingBox").compareTo(bb), "bb passed to constructor, not used");
Y.Assert.isTrue(w.get("contentBox").compareTo(bb.get("firstChild")), "Missing contentBox");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "boundingBox moved from it's place in the DOM");
w.destroy();
},
"testContentBox" : function() {
var container = Y.one("#widgetRenderToContainer");
container.append("<div id='cbTest'></div>");
var cb = Y.one("#cbTest");
var w = new Y.Widget({
contentBox: "#cbTest",
render:true
});
Y.Assert.isTrue(w.get("contentBox").compareTo(cb), "cb passed to constructor, not used");
Y.Assert.isTrue(w.get("boundingBox").compareTo(cb.get("parentNode")), "Missing boundingBox");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "contentBox moved from it's place in the DOM");
w.destroy();
},
"testBoundingBoxContentBox" : function() {
var container = Y.one("#widgetRenderToContainer");
container.append("<div id='bbTest'></div>");
var bb = Y.one("#bbTest");
bb.append("<div id='cbTest'></div>");
var cb = Y.one("#cbTest");
var w = new Y.Widget({
boundingBox: "#bbTest",
contentBox: "#cbTest",
render:true
});
Y.Assert.isTrue(w.get("boundingBox").compareTo(bb), "bb passed to constructor, not used");
Y.Assert.isTrue(w.get("contentBox").compareTo(cb), "cb passed to constructor, not used");
Y.Assert.isTrue(w.get("boundingBox").compareTo(cb.get("parentNode")), "bb not not cb's parent");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "bb moved from it's place in the DOM");
Y.Assert.isTrue(w.get("boundingBox").get("firstChild").compareTo(cb), "cb not bb's firstChild");
w.destroy();
},
"testBoundingBoxRenderTo" : function() {
var container = Y.one("#widgetRenderToContainer");
// NOTE: PE content sits in body, not container
Y.one("body").append("<div id='bbTest'></div>");
var bb = Y.one("#bbTest");
var w = new Y.Widget({
boundingBox: "#bbTest",
render:container
});
Y.Assert.isTrue(w.get("boundingBox").compareTo(bb), "bb passed to constructor, not used");
Y.Assert.isTrue(w.get("contentBox").compareTo(bb.get("firstChild")), "Missing contentBox");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "boundingBox moved from it's place in the DOM");
w.destroy();
},
"testContentBoxRenderTo" : function() {
var container = Y.one("#widgetRenderToContainer");
Y.one("body").append("<div id='cbTest'></div>");
var cb = Y.one("#cbTest");
var w = new Y.Widget({
contentBox: "#cbTest",
render:container
});
Y.Assert.isTrue(w.get("contentBox").compareTo(cb), "cb passed to constructor, not used");
Y.Assert.isTrue(w.get("boundingBox").compareTo(cb.get("parentNode")), "Missing boundingBox");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "contentBox moved from it's place in the DOM");
w.destroy();
},
"testBoundingBoxContentBoxRenderTo" : function() {
var container = Y.one("#widgetRenderToContainer");
Y.one("body").append("<div id='bbTest'></div>");
var bb = Y.one("#bbTest");
bb.append("<div id='cbTest'></div>");
var cb = Y.one("#cbTest");
var w = new Y.Widget({
boundingBox: "#bbTest",
contentBox: "#cbTest",
render:container
});
Y.Assert.isTrue(w.get("boundingBox").compareTo(bb), "bb passed to constructor, not used");
Y.Assert.isTrue(w.get("contentBox").compareTo(cb), "cb passed to constructor, not used");
Y.Assert.isTrue(w.get("boundingBox").compareTo(cb.get("parentNode")), "bb not not cb's parent");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "bb moved from it's place in the DOM");
Y.Assert.isTrue(w.get("boundingBox").get("firstChild").compareTo(cb), "cb not bb's firstChild");
w.destroy();
},
"testSrcNode" : function() {
var container = Y.one("#widgetRenderToContainer");
container.append("<div id='srcNode'><div id='foo'></div></div>");
var sn = Y.one("#srcNode");
var w = new Y.Widget({
srcNode: "#srcNode",
render:true
});
Y.Assert.isTrue(w.get("contentBox").compareTo(sn), "srcNode should end up being cb");
Y.Assert.isTrue(w.get("srcNode").compareTo(sn), "srcNode should still be accessible from srcNode attribute");
Y.Assert.isTrue(w.get("boundingBox").compareTo(sn.get("parentNode")), "Missing boundingBox");
Y.Assert.isTrue(w.get("boundingBox").get("parentNode").compareTo(container), "srcNode moved from it's place in the DOM");
Y.Assert.isNotNull(w.get("contentBox").one("#foo"), "contents of srcNode not maintained");
w.destroy(true);
},
"testGetByNode" : function() {
var o = new Y.Widget({
id:"outer"
});
o.render();
var ocb = o.get("contentBox");
ocb.append("<div><div id='outerContent'>Outer</div></div>");
var i = new Y.Widget({
id:"inner"
});
i.render();
var icb = i.get("contentBox");
icb.append("<div><div id='innerContent'>Inner</div></div>");
var outerContent = ocb.one("#outerContent");
var innerContent = icb.one("#innerContent");
Y.Assert.areSame(o, Y.Widget.getByNode(outerContent), "Couldn't find outer widget from content");
Y.Assert.areSame(i, Y.Widget.getByNode(innerContent), "Couldn't find inner widget from content");
Y.Assert.areSame(o, Y.Widget.getByNode(o.get("contentBox")), "Couldn't find outer widget from outer contentBox");
Y.Assert.areSame(o, Y.Widget.getByNode(o.get("boundingBox")), "Couldn't find outer widget from outer boundingBox");
Y.Assert.areSame(i, Y.Widget.getByNode(i.get("contentBox")), "Couldn't find inner widget from inner contentBox");
Y.Assert.areSame(i, Y.Widget.getByNode(i.get("boundingBox")), "Couldn't find inner widget from inner boundingBox");
i.destroy(true);
o.destroy(true);
},
"todoTestStrings" : function() {
},
"todoTestLoading" : function() {
var n = Y.Node.create('<div id="srcNode" class="yui3-widget-loading">Src Node Content</div>');
var w = new Y.Widget({
srcNode:"#srcNode"
});
w.render();
Y.Assert.areSame(n, w.get("contentBox"), "srcNode not used as content box");
Y.Assert.isFalse(n.hasClass("yui3-widget-loading"), "yui3-widget-loading should have removed");
}
}));
suite.add(new Y.Test.Case({
name : "getSkinName",
"getSkinName should return null if not rendered" : function () {
var w = new Y.Widget();
Y.Assert.isNull( w.getSkinName() );
},
"getSkinName should return name from BB if available": function () {
var bb = Y.Node.create( '<div class="yui3-skin-foo"><div></div></div>' ),
cb = bb.one( 'div' ),
w = new Y.Widget( {
boundingBox: bb,
contentBox: cb
} );
Y.Assert.areEqual( "foo", w.getSkinName() );
},
"getSkinName should return name from body or null": function () {
var w = new Y.Widget().render(),
body = Y.one( 'body' );
Y.Assert.areEqual( "sam", w.getSkinName() );
body.removeClass( "yui3-skin-sam" );
Y.Assert.isNull( w.getSkinName() );
body.addClass( "yui3-skin-sam" );
},
"getSkinName should return name from ancestor if both ancestor and body are classed": function () {
var w = new Y.Widget().render( '#testbed' ),
body = Y.one( 'body' );
body.addClass( "yui3-skin-sam" );
Y.Assert.areEqual( "foo", w.getSkinName() );
}
}));
suite.add(new Y.Test.Case({
name:"destroy",
testRenderedDestroy: function() {
var w = new Y.Widget({id:"foo"}).render();
try {
w.destroy();
Y.Assert.isNull(Y.Node.one("#foo"), "Bounding box still in DOM");
} catch(e) {
Y.Assert.fail("w.destroy() on a rendered widget threw an exception" + e);
}
},
testRenderedDeepDestroy: function() {
var w = new Y.Widget({id:"foo"}).render();
var nref = Y.Node.create('<div id="deep">Foo</div>');
w.get("contentBox").appendChild(nref);
try {
w.destroy(true);
Y.Assert.isNull(Y.Node.one("#foo"), "Bounding box still in DOM");
Y.Assert.isNull(Y.Node.one("#deep"), "Deep content box still in DOM");
Y.Assert.isNull(Y.Node.getDOMNode(nref), "Deep content still in Node cache");
} catch(e) {
Y.Assert.fail("w.destroy(true) on a rendered widget threw an exception" + e);
}
},
testUnrenderedDestroy: function() {
var w = new Y.Widget();
try {
w.destroy();
} catch(e) {
Y.Assert.fail("w.destroy() on an unrendered widget threw an exception" + e);
}
},
testSingleBoxDestroy: function() {
function MyWidget() {
MyWidget.superclass.constructor.apply(this, arguments);
};
MyWidget.NAME = "myWidget";
Y.extend(MyWidget, Y.Widget, {
CONTENT_TEMPLATE:null
});
var w = new MyWidget({
id:"foo"
});
w.render();
try {
w.destroy();
Y.Assert.isNull(Y.Node.one("#foo"), "Bounding box still in DOM");
} catch(e) {
Y.Assert.fail("w.destroy() on a single box widget threw an exception" + e);
}
},
testSingleBoxDeepDestroy: function() {
function MyWidget() {
MyWidget.superclass.constructor.apply(this, arguments);
};
MyWidget.NAME = "myWidget";
Y.extend(MyWidget, Y.Widget, {
CONTENT_TEMPLATE:null
});
var w = new MyWidget({
id:"foo"
});
w.render();
var nref = Y.Node.create('<div id="deep_single">Foo</div>');
w.get("contentBox").appendChild(nref);
try {
w.destroy(true);
Y.Assert.isNull(Y.Node.one("#foo"), "Bounding box still in DOM");
Y.Assert.isNull(Y.Node.one("#deep_single"), "Deep content box still in DOM");
Y.Assert.isNull(Y.Node.getDOMNode(nref), "Deep content still in Node cache");
} catch(e) {
Y.Assert.fail("w.destroy(true) on a single box widget threw an exception" + e);
}
}
}));
suite.add(new Y.Test.Case({
name:"UI Events",
testSingleSimple: function() {
var w, h, cb,
actualEvents = [],
expectedEvents = ["widget:click"];
w = new Y.Widget();
cb = w.get("contentBox");
cb.append("<p class='et'>Some Content For My Widget</p>");
h = function(e) { actualEvents.push(e.type); };
w.on("click", h);
w.render();
cb.one(".et").simulate("click");
Y.ArrayAssert.itemsAreEqual(expectedEvents, actualEvents);
w.destroy();
},
testSingleComplex: function() {
var w, h, cb
actualEvents = [],
expectedEvents = ["widget:render",
"widget:renderedChange",
"widget:render",
"widget:mousedown",
"widget:mouseup",
"widget:mouseup",
"widget:mouseup",
"widget:mouseup",
"widget:mouseup",
"widget:mouseup",
"widget:click"];
w = new Y.Widget();
cb = w.get("contentBox");
cb.append("<p class='et'>Some Content For My Widget</p>");
h = function(e) { actualEvents.push(e.type); };
w.on({
"click": h,
"render": h,
"renderedChange": h
});
w.on("widget:mouseup", h);
w.on("foo|widget:mouseup", h);
w.on("mouseup", h);
w.after("widget:mouseup", h);
w.after("foo|widget:mouseup", h);
w.after("mouseup", h);
w.after({
"mousedown" : h,
"render" : h
});
w.render();
cb.one(".et").simulate("mousedown");
cb.one(".et").simulate("mouseup");
cb.one(".et").simulate("click");
Y.ArrayAssert.itemsAreEqual(expectedEvents, actualEvents);
w.destroy();
},
testNested: function() {
var outer = new Y.Widget();
var inner = new Y.Widget();
var ocb = outer.get('contentBox');
var icb = inner.get('contentBox');
var expectedEvents = ["outerClick", "innerClick", "outerClick"];
var actualEvents = [];
outer.render();
ocb.setContent("<span class='oet'>Outer Content</span>");
inner.render(ocb);
icb.setContent("<span class='iet'>Inner Content</span>");
inner.after('click', function() {actualEvents.push("innerClick");});
outer.after('click', function() {actualEvents.push("outerClick");});
// Only outer
ocb.one(".oet").simulate("click");
// One Inner, One Outer
ocb.one(".iet").simulate("click");
Y.ArrayAssert.itemsAreEqual(expectedEvents, actualEvents);
outer.destroy();
inner.destroy();
},
testMultipleInstances : function() {
var actualEvents = [],
expectedEvents = ["clickOuter", "clickInner", "clickOuter"],
w1,
w2;
YUI().use('widget', function (Y) {
w1 = new Y.Widget({render:true});
w1.get('contentBox').append('<div class="w2-container"></div><span class="miouter">Outer</span>');
w1.on('click', function (e) {
actualEvents.push("clickOuter");
});
YUI().use('widget', function (Y1) {
w2 = new Y1.Widget({render:".w2-container"});
w2.get('contentBox').append('<span class="miinner">Inner</span>');
w2.on('click', function (e) {
actualEvents.push("clickInner");
});
});
});
Y.Node.one(".miouter").simulate("click"); // only outer, once.
Y.Node.one(".miinner").simulate("click"); // inner, bubbled to outer (once each, without JS errors)
Y.ArrayAssert.itemsAreEqual(expectedEvents, actualEvents);
w1.destroy();
w2.destroy();
}
}));
suite.add(new Y.Test.Case({
name:"clone",
testWidgetClone : function() {
var a = new Y.Widget();
var b = new Y.Widget();
var c = new Y.Widget();
var a1 = Y.clone(a);
var a2 = Y.clone(a1);
var a3 = Y.clone(a2);
Y.Assert.isTrue(a instanceof Y.Widget);
Y.Assert.isTrue(a1 instanceof Y.Widget);
Y.Assert.isTrue(a2 instanceof Y.Widget);
Y.Assert.isTrue(a3 instanceof Y.Widget);
var b1 = Y.clone(b);
var b2 = Y.clone(b1);
var b3 = Y.clone(b2);
Y.Assert.isTrue(b instanceof Y.Widget);
Y.Assert.isTrue(b1 instanceof Y.Widget);
Y.Assert.isTrue(b2 instanceof Y.Widget);
Y.Assert.isTrue(b3 instanceof Y.Widget);
var c1 = Y.clone(c);
var c2 = Y.clone(c1);
var c3 = Y.clone(c2);
Y.Assert.isTrue(c instanceof Y.Widget);
Y.Assert.isTrue(c1 instanceof Y.Widget);
Y.Assert.isTrue(c2 instanceof Y.Widget);
Y.Assert.isTrue(c3 instanceof Y.Widget);
},
testWidgetHashClone : function() {
// When Widget's are properties of an object it seems to break apart
// something not passed to the recursive call maybe?
var a = new Y.Widget();
var b = new Y.Widget();
var c = new Y.Widget();
var o = {
a : a,
b : b,
c : c
};
var o1 = Y.clone(o);
var o2 = Y.clone(o1);
var o3 = Y.clone(o2);
Y.Assert.isTrue(o3.a instanceof Y.Widget);
Y.Assert.isTrue(o3.b instanceof Y.Widget);
Y.Assert.isTrue(o3.c instanceof Y.Widget);
},
testBaseClone : function() {
var a = new Y.Base();
var b = new Y.Base();
var c = new Y.Base();
// Base works fine
var a1 = Y.clone(a);
var a2 = Y.clone(a1);
var a3 = Y.clone(a2);
Y.Assert.isTrue(a instanceof Y.Base);
Y.Assert.isTrue(a1 instanceof Y.Base);
Y.Assert.isTrue(a2 instanceof Y.Base);
Y.Assert.isTrue(a3 instanceof Y.Base);
var b1 = Y.clone(b);
var b2 = Y.clone(b1);
var b3 = Y.clone(b2);
Y.Assert.isTrue(b instanceof Y.Base);
Y.Assert.isTrue(b1 instanceof Y.Base);
Y.Assert.isTrue(b2 instanceof Y.Base);
Y.Assert.isTrue(b3 instanceof Y.Base);
var c1 = Y.clone(c);
var c2 = Y.clone(c1);
var c3 = Y.clone(c2);
Y.Assert.isTrue(c instanceof Y.Base);
Y.Assert.isTrue(c1 instanceof Y.Base);
Y.Assert.isTrue(c2 instanceof Y.Base);
Y.Assert.isTrue(c3 instanceof Y.Base);
},
testBaseHashClone : function() {
var a = new Y.Base();
var b = new Y.Base();
var c = new Y.Base();
var o = {
a : a,
b : b,
c : c
};
var o1 = Y.clone(o);
var o2 = Y.clone(o1);
var o3 = Y.clone(o2);
Y.Assert.isTrue(o3.a instanceof Y.Base);
Y.Assert.isTrue(o3.b instanceof Y.Base);
Y.Assert.isTrue(o3.c instanceof Y.Base);
}
}));
Y.Test.Runner.setName("Widget Tests");
Y.Test.Runner.add(suite);
Y.Test.Runner.disableLogging();
Y.Test.Runner.run();
var console;
Y.one("#btnRun").set("disabled", false).on("click", function() {
if (!console) {
console = new Y.Console({
id:"console",
width:"100%",
height:"90%",
verbose : false,
printTimeout: 0,
newestOnTop : false,
entryTemplate: '<pre class="{entry_class} {cat_class} {src_class}">'+
'<span class="{entry_cat_class}">{label}</span>'+
'<span class="{entry_content_class}">{message}</span>'+
'</pre>'
}).render();
}
Y.Test.Runner.enableLogging();
Y.Test.Runner.run();
});
});
</script>
</body>
</html>