source: Dev/trunk/src/client/dijit/tests/_Widget-attr.html @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 10.8 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2                "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4<head>
5        <title>widget attribute unit test (in constructor and get()/set())</title>
6        <style type="text/css">
7                @import "../themes/claro/document.css";
8                @import "css/dijitTests.css";
9        </style>
10        <script type="text/javascript" src="../../dojo/dojo.js"
11                data-dojo-config="isDebug: true, async: true"></script>
12
13        <script type="text/javascript">
14                require([
15                        "doh/runner", "dojo/_base/declare",
16                        "dojo/dom", "dojo/dom-attr", "dojo/dom-class", "dojo/dom-style", "dojo/sniff",
17                        "dijit/_WidgetBase", "dijit/_Widget",
18                        "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
19                        "dojo/domReady!"
20                ], function(doh, declare, dom, domAttr, domClass, domStyle, has,
21                                        _WidgetBase, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin){
22
23                        doh.register("attributes", [
24                                // Test attributes mapped to DOMNodes
25                                function domMapping(){
26                                        var IndividualMaps = declare([_WidgetBase, _TemplatedMixin], {
27                                                // Mapping foo to this.domNode.foo
28                                                foo:"",
29                                                _setFooAttr: "",
30               
31                                                // Mapping bar to this.buttonNode.bar
32                                                bar: "",
33                                                _setBarAttr: "buttonNode",
34               
35                                                // Mapping plainText to this.plainTextNode.innerHTML
36                                                plainText: "",
37                                                _setPlainTextAttr: {node: "plainTextNode", type: "innerText"},
38
39                                                templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
40                                                                                        "<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
41                                                                                        '<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
42                                                                                        "<span data-dojo-attach-point='containerNode'></span>" +
43                                                                                        "<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
44                                                                                "</div>"
45                                        });
46
47                                        var widget = new IndividualMaps({
48                                                foo:"value1",
49                                                bar:"value2",
50                                                "class":"class2",
51                                                style:"height: 123px",
52                                                plainText: "hello world <>&;",
53                                                "name-with-dashes": "name with dashes"
54                                        }).placeAt(dom.byId("wrapper"));
55
56                                        // test attributes specified to constructor were copied over to DOM
57                                        doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
58                                        doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
59                                        doh.t(domClass.contains(widget.domNode, "class1"), "class1");
60                                        doh.t(domClass.contains(widget.domNode, "class2"), "class2");
61                                        doh.is("123px", widget.domNode.style.height, "height");
62                                        doh.is("456px", widget.domNode.style.width, "width");
63                                        doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
64                                },
65
66                                // Test attributes mapped to subwidgets
67                                function subwidgetMapping(){
68                                        declare("MySubWidget", [_WidgetBase], {
69                                                _setFooAttr: function(val){
70                                                        this.foo = val;
71                                                        this.gotValue = true;   // set flag for testing purposes
72                                                }
73                                        });
74                                        var IndividualMaps = declare(
75                                                        [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
76
77                                                // Mapping foo to this.subwidget.foo
78                                                foo:"",
79                                                _setFooAttr: "subwidget",
80
81                                                templateString:
82                                                        "<div class='class1' style='border: 1px solid red; width: 456px'>" +
83                                                                "<button data-dojo-type='MySubWidget' data-dojo-attach-point='subwidget'>hi</button>" +
84                                                        "</div>"
85                                        });
86
87                                        var widget = new IndividualMaps({
88                                                foo: "value1"
89                                        }).placeAt(dom.byId("wrapper"));
90
91                                        // test attribute specified to constructor was copied over to subwidget
92                                        doh.is("value1", widget.subwidget.get("foo"), "widget.subwidget.get('foo')");
93                                        doh.t(widget.subwidget.gotValue, "gotValue");
94                                },
95
96                                // Test that certain attributes are automatically applied to focusNode or domNode.
97                                // These are attributes that aren't mentioned at all in _WidgetBase.
98                                function autoDomMapping(){
99                                        // Mapping to this.domNode
100                                        var w = new _WidgetBase({
101                                                title: "dom title",
102                                                "aria-labelledby": "foo",
103                                                role: "button"
104                                        });
105                                        doh.is("dom title", domAttr.get(w.domNode, "title"), "domNode title");
106                                        doh.is("foo", w.domNode.getAttribute("aria-labelledby", "domNode labelledby"));
107                                        doh.is("button", domAttr.get(w.domNode, "role"), "domNode role");
108
109                                        // Mapping to this.focusNode
110                                        var fw = new (declare([_WidgetBase, _TemplatedMixin], {
111                                                templateString: "<div><input data-dojo-attach-point='focusNode'/></div>"
112                                        }))({
113                                                title: "my title",
114                                                "aria-labelledby": "foo"
115                                        });
116                                        doh.is("my title", domAttr.get(fw.focusNode, "title"), "focusNode title");
117                                        doh.is("foo", fw.focusNode.getAttribute("aria-labelledby"), "focusNode labelledby");
118
119                                        // Mapping attributes with dashes and mixed case
120                                        var mc = new (declare([_WidgetBase, _TemplatedMixin], {
121                                                templateString: "<form></form>"
122                                        }))({
123                                                "accept-charset": "utf8",
124                                                "novalidate": "true"    // parser delivers as lowercase even though it's noValidate in JS obj
125                                        });
126                                        doh.is("utf8", mc.domNode.getAttribute("accept-charset"), "accept-charset");
127                                        if(has("ff") >= 4 || has("ie") >= 10 || has("webkit")){
128                                                // only works for HTML5 compliant browsers where novalidate is understood
129                                                // (also, hasAttribute() is not available on IE6/7)
130                                                doh.t(mc.domNode.hasAttribute("novalidate"), "noValidate");
131                                        }
132                                },
133
134                                // Test custom setters/getter methods
135                                function customSetters(){
136                                        var CustomSetters = declare([_WidgetBase], {
137                                                foo: 0,
138                                                _setFooAttr: function(val){ this._set("foo", val + 5); },
139                                                _getFooAttr: function(val){ return this._get("foo") - 10; }
140                                        });
141
142                                        var widget = new CustomSetters({
143                                                foo: 100
144                                        });
145
146                                        doh.is(105, widget._get("foo"), "custom setter called at initialize time");
147                                        doh.is(95, widget.get("foo"), "custom getter called");
148
149                                        widget.set("foo", 50);
150                                        doh.is(55, widget._get("foo"), "custom setter called dynamically");
151                                        doh.is(45, widget.get("foo"), "custom getter still called");
152                                },
153
154                                // Test setters for attribute names with dashes
155                                function settersForNamesWithDashes(){
156                                        var MyWidget = declare([_WidgetBase, _TemplatedMixin], {
157                                                "name-with-dashes": "",
158                                                _setNameWithDashesAttr: {node: "dashNode", type: "innerHTML"},
159
160                                                templateString: "<div>" +
161                                                                                        "<span data-dojo-attach-point='dashNode'></span>" +
162                                                                                "</div>"
163                                        });
164
165                                        var widget = new MyWidget({
166                                                "name-with-dashes": "name with dashes"
167                                        }).placeAt(dom.byId("wrapper"));
168
169                                        doh.is("name with dashes", widget.get("name-with-dashes"), "get()");
170                                        doh.is("name with dashes", widget.dashNode.innerHTML, "innerHTML");
171
172                                        widget.set("name-with-dashes", "hello");
173                                        doh.is("hello", widget.dashNode.innerHTML);
174                                },
175
176                                // Test deprecated attr() method (remove for 2.0)
177                                function attr(){
178                                        var MyWidget = new declare([_Widget, _TemplatedMixin], {
179                                                templateString: "<div><span data-dojo-attach-point=nameNode></span></div>",
180                                                _setNameAttr:  {node: "nameNode", type: "innerHTML"}
181                                        });
182
183                                        var b = new MyWidget();
184
185                                        // simple setting
186                                        b.attr("name", "thinger");
187                                        doh.is("thinger", b.attr("name"), "b.attr('name')");
188                                        doh.is("thinger", b.nameNode.innerHTML, "innerHTML");
189
190                                        // hash setting
191                                        b.attr({
192                                                name: "bang",
193                                                foo: "zap"
194                                        });
195                                        doh.is("bang", b.attr("name"), "hash set of bang");
196                                        doh.is("zap", b.attr("foo"), "hash set of zap");
197                                },
198                               
199                                // Test deprecated attributeMap (remove for 2.0)
200                                function attributeMap(){
201                                        var AttrMap = declare([_WidgetBase, _TemplatedMixin], {
202                                                attributeMap: {foo: "", bar: "buttonNode", plainText: {node: "plainTextNode", type: "innerText"}},
203                                                templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
204                                                                                        "<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
205                                                                                        '<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
206                                                                                        "<span data-dojo-attach-point='containerNode'></span>" +
207                                                                                        "<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
208                                                                                "</div>"
209                                        });
210
211                                        var widget = new AttrMap({
212                                                foo:"value1",
213                                                bar:"value2",
214                                                "class":"class2",
215                                                style:"height: 123px",
216                                                plainText: "hello world <>&;"
217                                        }).placeAt(dom.byId("wrapper"));
218
219                                        // test that attributes specified to constructor were copied over to the DOM
220                                        doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
221                                        doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
222                                        doh.t(domClass.contains(widget.domNode, "class1"), "class1");
223                                        doh.t(domClass.contains(widget.domNode, "class2"), "class2");
224                                        doh.is("123px", widget.domNode.style.height, "height");
225                                        doh.is("456px", widget.domNode.style.width, "width");
226                                        doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
227                                },
228
229                                // Test that attributes set in the ctor when side effects setter exist
230                                // are correctly applied
231                                function ctorDependentAttributes(){
232                                        var TestWidget = declare(_WidgetBase, {
233                                                single: null,
234                                                multiple: [],
235                                                _setSingleAttr: function(value){
236                                                        this._set("multiple", value != null ? [value] : null);
237                                                        this._set("single", value);
238                                                },
239                                                _setMultipleAttr: function(value){
240                                                        this._set("single", value ? (value.length > 0 ? value[0] : null) : null);
241                                                        this._set("multiple", value);
242                                                }
243                                        });
244
245                                        var w1 = new TestWidget({
246                                                        single : 5
247                                        });
248                                        var w2 = new TestWidget({
249                                                        multiple: [5]
250                                        });
251                                        doh.is(5, w1.get("single"), "w1.single");
252                                        doh.is([5], w1.get("multiple"), "w1.multiple");
253                                        doh.is(5, w2.get("single"), "w2.single");
254                                        doh.is([5], w2.get("multiple"), "w2.multiple");
255                                },
256
257                                function moreCorrelatedProperties(){
258                                        var Widget = declare([_WidgetBase], {
259                                                foo: 10,
260                                                _setFooAttr: function(val){
261                                                        this._set("foo", val);
262                                                        this._set("bar", val + 1);
263                                                },
264
265                                                bar: 11,
266                                                _setBarAttr: function(val){
267                                                        this._set("bar", val);
268                                                        this._set("foo", val - 1);
269                                                }
270                                        });
271
272                                        var w1 = new Widget({foo: 30});
273                                        doh.is(30, w1.get("foo"), "w1.foo");
274                                        doh.is(31, w1.get("bar"), "w1.bar");
275
276                                        var w2 = new Widget({bar: 30});
277                                        doh.is(30, w2.get("bar"), "w2.bar");
278                                        doh.is(29, w2.get("foo"), "w2.foo");
279
280                                        var w3 = new Widget({});
281                                        doh.is(10, w3.get("foo"), "w3.foo");
282                                        doh.is(11, w3.get("bar"), "w3.bar");
283                                },
284
285                                function widgetWatch() {
286                                        var widget = new _WidgetBase({}),
287                                                expected = [ 'a', NaN ],
288                                                actual = [];
289
290                                        widget.watch('foo', function (key, oldValue, value) {
291                                                actual.push(value);
292                                        });
293
294                                        widget.set('foo', 'a');
295                                        widget.set('foo', 'a');
296                                        widget.set('foo', NaN);
297                                        widget.set('foo', NaN);
298
299                                        doh.is(expected, actual);
300
301                                        widget.destroyRecursive();
302                                }
303                        ]);     // doh.register()
304
305                        doh.run();
306
307                });     // require()
308
309        </script>
310</head>
311<body>
312        <h1>Dijit widget.get()/set() Unit Test</h1>
313        <div id="wrapper"></div>
314</body>
315</html>
Note: See TracBrowser for help on using the repository browser.