You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
12 KiB
331 lines
12 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html> |
|
<head> |
|
<title>widget attribute unit test (in constructor and get()/set())</title> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", "dojo/_base/declare", |
|
"dojo/dom", "dojo/dom-attr", "dojo/dom-class", "dojo/dom-style", "dojo/sniff", |
|
"dijit/_WidgetBase", "dijit/_Widget", |
|
"dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", |
|
"dojo/domReady!" |
|
], function(doh, declare, dom, domAttr, domClass, domStyle, has, |
|
_WidgetBase, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin){ |
|
|
|
doh.register("attributes", [ |
|
// Test attributes mapped to DOMNodes |
|
function domMapping(){ |
|
var IndividualMaps = declare([_WidgetBase, _TemplatedMixin], { |
|
// Mapping foo to this.domNode.foo |
|
foo:"", |
|
_setFooAttr: "", |
|
|
|
// Mapping bar to this.buttonNode.bar |
|
bar: "", |
|
_setBarAttr: "buttonNode", |
|
|
|
// Mapping plainText to this.plainTextNode.innerHTML |
|
plainText: "", |
|
_setPlainTextAttr: {node: "plainTextNode", type: "innerText"}, |
|
|
|
teeny: false, |
|
_setTeenyAttr: {node: "teenyNode", type: "toggleClass"}, |
|
|
|
templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" + |
|
"<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" + |
|
'<span><input data-dojo-attach-point="inputNode" value="input"></span>' + |
|
"<span data-dojo-attach-point='containerNode'></span>" + |
|
"<span data-dojo-attach-point='plainTextNode'>original plain text</span>" + |
|
"<span data-dojo-attach-point='teenyNode'>teeny text</span>" + |
|
"</div>" |
|
}); |
|
|
|
var widget = new IndividualMaps({ |
|
foo:"value1", |
|
bar:"value2", |
|
"class":"class2", |
|
style:"height: 123px", |
|
plainText: "hello world <>&;", |
|
teeny: true, |
|
"name-with-dashes": "name with dashes" |
|
}).placeAt(dom.byId("wrapper")); |
|
|
|
// test attributes specified to constructor were copied over to DOM |
|
doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')"); |
|
doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')"); |
|
doh.t(domClass.contains(widget.domNode, "class1"), "class1"); |
|
doh.t(domClass.contains(widget.domNode, "class2"), "class2"); |
|
doh.is("123px", widget.domNode.style.height, "height"); |
|
doh.is("456px", widget.domNode.style.width, "width"); |
|
doh.is("hello world <>&;", widget.plainTextNode.innerHTML, "innerHTML"); |
|
doh.t(domClass.contains(widget.teenyNode, "teeny"), "teeny"); |
|
}, |
|
|
|
// Test attributes mapped to subwidgets |
|
function subwidgetMapping(){ |
|
declare("MySubWidget", [_WidgetBase], { |
|
_setFooAttr: function(val){ |
|
this.foo = val; |
|
this.gotValue = true; // set flag for testing purposes |
|
} |
|
}); |
|
var IndividualMaps = declare( |
|
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], { |
|
|
|
// Mapping foo to this.subwidget.foo |
|
foo:"", |
|
_setFooAttr: "subwidget", |
|
|
|
templateString: |
|
"<div class='class1' style='border: 1px solid red; width: 456px'>" + |
|
"<button data-dojo-type='MySubWidget' data-dojo-attach-point='subwidget'>hi</button>" + |
|
"</div>" |
|
}); |
|
|
|
var widget = new IndividualMaps({ |
|
foo: "value1" |
|
}).placeAt(dom.byId("wrapper")); |
|
|
|
// test attribute specified to constructor was copied over to subwidget |
|
doh.is("value1", widget.subwidget.get("foo"), "widget.subwidget.get('foo')"); |
|
doh.t(widget.subwidget.gotValue, "gotValue"); |
|
}, |
|
|
|
// Test that certain attributes are automatically applied to focusNode or domNode. |
|
// These are attributes that aren't mentioned at all in _WidgetBase. |
|
function autoDomMapping(){ |
|
// Mapping to this.domNode |
|
var w = new _WidgetBase({ |
|
title: "dom title", |
|
"aria-labelledby": "foo", |
|
role: "button" |
|
}); |
|
doh.is("dom title", domAttr.get(w.domNode, "title"), "domNode title"); |
|
doh.is("foo", w.domNode.getAttribute("aria-labelledby", "domNode labelledby")); |
|
doh.is("button", domAttr.get(w.domNode, "role"), "domNode role"); |
|
|
|
// Mapping to this.focusNode |
|
var fw = new (declare([_WidgetBase, _TemplatedMixin], { |
|
templateString: "<div><input data-dojo-attach-point='focusNode'/></div>" |
|
}))({ |
|
title: "my title", |
|
"aria-labelledby": "foo" |
|
}); |
|
doh.is("my title", domAttr.get(fw.focusNode, "title"), "focusNode title"); |
|
doh.is("foo", fw.focusNode.getAttribute("aria-labelledby"), "focusNode labelledby"); |
|
|
|
// Mapping attributes with dashes and mixed case |
|
var mc = new (declare([_WidgetBase, _TemplatedMixin], { |
|
templateString: "<form></form>" |
|
}))({ |
|
"accept-charset": "utf8", |
|
"novalidate": "true" // parser delivers as lowercase even though it's noValidate in JS obj |
|
}); |
|
doh.is("utf8", mc.domNode.getAttribute("accept-charset"), "accept-charset"); |
|
if(has("ff") >= 4 || has("ie") >= 10 || has("webkit")){ |
|
// only works for HTML5 compliant browsers where novalidate is understood |
|
// (also, hasAttribute() is not available on IE6/7) |
|
doh.t(mc.domNode.hasAttribute("novalidate"), "noValidate"); |
|
} |
|
}, |
|
|
|
// Test that creating a widget with type defined doesn't causes exceptions on IE6-8. |
|
// This is really trying to test that markup like <input dojoType=WidgetBase type=text> works. |
|
// (Todo: remove for 2.0) |
|
function typeException(){ |
|
var node = document.createElement("input"); |
|
document.body.appendChild(node); |
|
new _WidgetBase({ |
|
type: "text" |
|
}, node); |
|
}, |
|
|
|
// Test custom setters/getter methods |
|
function customSetters(){ |
|
var CustomSetters = declare([_WidgetBase], { |
|
foo: 0, |
|
_setFooAttr: function(val){ this._set("foo", val + 5); }, |
|
_getFooAttr: function(val){ return this._get("foo") - 10; } |
|
}); |
|
|
|
var widget = new CustomSetters({ |
|
foo: 100 |
|
}); |
|
|
|
doh.is(105, widget._get("foo"), "custom setter called at initialize time"); |
|
doh.is(95, widget.get("foo"), "custom getter called"); |
|
|
|
widget.set("foo", 50); |
|
doh.is(55, widget._get("foo"), "custom setter called dynamically"); |
|
doh.is(45, widget.get("foo"), "custom getter still called"); |
|
}, |
|
|
|
// Test setters for attribute names with dashes |
|
function settersForNamesWithDashes(){ |
|
var MyWidget = declare([_WidgetBase, _TemplatedMixin], { |
|
"name-with-dashes": "", |
|
_setNameWithDashesAttr: {node: "dashNode", type: "innerHTML"}, |
|
|
|
templateString: "<div>" + |
|
"<span data-dojo-attach-point='dashNode'></span>" + |
|
"</div>" |
|
}); |
|
|
|
var widget = new MyWidget({ |
|
"name-with-dashes": "name with dashes" |
|
}).placeAt(dom.byId("wrapper")); |
|
|
|
doh.is("name with dashes", widget.get("name-with-dashes"), "get()"); |
|
doh.is("name with dashes", widget.dashNode.innerHTML, "innerHTML"); |
|
|
|
widget.set("name-with-dashes", "hello"); |
|
doh.is("hello", widget.dashNode.innerHTML); |
|
}, |
|
|
|
// Test deprecated attr() method (remove for 2.0) |
|
function attr(){ |
|
var MyWidget = new declare([_Widget, _TemplatedMixin], { |
|
templateString: "<div><span data-dojo-attach-point=nameNode></span></div>", |
|
_setNameAttr: {node: "nameNode", type: "innerHTML"} |
|
}); |
|
|
|
var b = new MyWidget(); |
|
|
|
// simple setting |
|
b.attr("name", "thinger"); |
|
doh.is("thinger", b.attr("name"), "b.attr('name')"); |
|
doh.is("thinger", b.nameNode.innerHTML, "innerHTML"); |
|
|
|
// hash setting |
|
b.attr({ |
|
name: "bang", |
|
foo: "zap" |
|
}); |
|
doh.is("bang", b.attr("name"), "hash set of bang"); |
|
doh.is("zap", b.attr("foo"), "hash set of zap"); |
|
}, |
|
|
|
// Test deprecated attributeMap (remove for 2.0) |
|
function attributeMap(){ |
|
var AttrMap = declare([_WidgetBase, _TemplatedMixin], { |
|
attributeMap: {foo: "", bar: "buttonNode", plainText: {node: "plainTextNode", type: "innerText"}, teeny: {node: "teenyNode", type: "toggleClass"}}, |
|
templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" + |
|
"<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" + |
|
'<span><input data-dojo-attach-point="inputNode" value="input"></span>' + |
|
"<span data-dojo-attach-point='containerNode'></span>" + |
|
"<span data-dojo-attach-point='plainTextNode'>original plain text</span>" + |
|
"<span data-dojo-attach-point='teenyNode'>teeny text</span>" + |
|
"</div>" |
|
}); |
|
|
|
var widget = new AttrMap({ |
|
foo:"value1", |
|
bar:"value2", |
|
"class":"class2", |
|
style:"height: 123px", |
|
plainText: "hello world <>&;", |
|
teeny: true |
|
}).placeAt(dom.byId("wrapper")); |
|
|
|
// test that attributes specified to constructor were copied over to the DOM |
|
doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')"); |
|
doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')"); |
|
doh.t(domClass.contains(widget.domNode, "class1"), "class1"); |
|
doh.t(domClass.contains(widget.domNode, "class2"), "class2"); |
|
doh.is("123px", widget.domNode.style.height, "height"); |
|
doh.is("456px", widget.domNode.style.width, "width"); |
|
doh.is("hello world <>&;", widget.plainTextNode.innerHTML, "innerHTML"); |
|
doh.t(domClass.contains(widget.teenyNode, "teeny"), "teeny"); |
|
}, |
|
|
|
// Test that attributes set in the ctor when side effects setter exist |
|
// are correctly applied |
|
function ctorDependentAttributes(){ |
|
var TestWidget = declare(_WidgetBase, { |
|
single: null, |
|
multiple: [], |
|
_setSingleAttr: function(value){ |
|
this._set("multiple", value != null ? [value] : null); |
|
this._set("single", value); |
|
}, |
|
_setMultipleAttr: function(value){ |
|
this._set("single", value ? (value.length > 0 ? value[0] : null) : null); |
|
this._set("multiple", value); |
|
} |
|
}); |
|
|
|
var w1 = new TestWidget({ |
|
single : 5 |
|
}); |
|
var w2 = new TestWidget({ |
|
multiple: [5] |
|
}); |
|
doh.is(5, w1.get("single"), "w1.single"); |
|
doh.is([5], w1.get("multiple"), "w1.multiple"); |
|
doh.is(5, w2.get("single"), "w2.single"); |
|
doh.is([5], w2.get("multiple"), "w2.multiple"); |
|
}, |
|
|
|
function moreCorrelatedProperties(){ |
|
var Widget = declare([_WidgetBase], { |
|
foo: 10, |
|
_setFooAttr: function(val){ |
|
this._set("foo", val); |
|
this._set("bar", val + 1); |
|
}, |
|
|
|
bar: 11, |
|
_setBarAttr: function(val){ |
|
this._set("bar", val); |
|
this._set("foo", val - 1); |
|
} |
|
}); |
|
|
|
var w1 = new Widget({foo: 30}); |
|
doh.is(30, w1.get("foo"), "w1.foo"); |
|
doh.is(31, w1.get("bar"), "w1.bar"); |
|
|
|
var w2 = new Widget({bar: 30}); |
|
doh.is(30, w2.get("bar"), "w2.bar"); |
|
doh.is(29, w2.get("foo"), "w2.foo"); |
|
|
|
var w3 = new Widget({}); |
|
doh.is(10, w3.get("foo"), "w3.foo"); |
|
doh.is(11, w3.get("bar"), "w3.bar"); |
|
}, |
|
|
|
function widgetWatch() { |
|
var widget = new _WidgetBase({}), |
|
expected = [ 'a', NaN ], |
|
actual = []; |
|
|
|
widget.watch('foo', function (key, oldValue, value) { |
|
actual.push(value); |
|
}); |
|
|
|
widget.set('foo', 'a'); |
|
widget.set('foo', 'a'); |
|
widget.set('foo', NaN); |
|
widget.set('foo', NaN); |
|
|
|
doh.is(expected, actual); |
|
|
|
widget.destroyRecursive(); |
|
} |
|
]); // doh.register() |
|
|
|
doh.run(); |
|
|
|
}); // require() |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1>Dijit widget.get()/set() Unit Test</h1> |
|
<div id="wrapper"></div> |
|
</body> |
|
</html>
|
|
|