source: Dev/branches/rest-dojo-ui/client/dijit/tests/_Widget-attr.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 7.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.get()/set() unit test</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                djConfig="isDebug: true"></script>
12        <script type="text/javascript" src="_testCommon.js"></script>
13
14        <script type="text/javascript">
15                dojo.require("doh.runner");
16
17                dojo.require("dijit._Widget");
18                dojo.require("dijit._TemplatedMixin");
19
20                dojo.ready(function(){
21                        doh.register("attribute set/get",
22                                [
23                                        // Test attributes mapped to DOMNodes
24                                        function domMapping(){
25                                                var IndividualMaps = dojo.declare([dijit._Widget, dijit._TemplatedMixin], {
26                                                        // Mapping foo to this.domNode.foo
27                                                        foo:"",
28                                                        _setFooAttr: "",
29                       
30                                                        // Mapping bar to this.buttonNode.bar
31                                                        bar: "",
32                                                        _setBarAttr: "buttonNode",
33                       
34                                                        // Mapping plainText to this.plainTextNode.innerHTML
35                                                        plainText: "",
36                                                        _setPlainTextAttr: {node: "plainTextNode", type: "innerText"},
37       
38                                                        templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
39                                                                                                "<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
40                                                                                                '<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
41                                                                                                "<span data-dojo-attach-point='containerNode'></span>" +
42                                                                                                "<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
43                                                                                        "</div>"
44                                                });
45
46                                                var widget = new IndividualMaps({
47                                                        foo:"value1",
48                                                        bar:"value2",
49                                                        "class":"class2",
50                                                        style:"height: 123px",
51                                                        plainText: "hello world <>&;",
52                                                        "name-with-dashes": "name with dashes"
53                                                }).placeAt(dojo.byId("wrapper"));
54
55                                                // test attributes specified to constructor were copied over to DOM
56                                                doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
57                                                doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
58                                                doh.t(dojo.hasClass(widget.domNode, "class1"), "class1");
59                                                doh.t(dojo.hasClass(widget.domNode, "class2"), "class2");
60                                                doh.is("123px", dojo.style(widget.domNode).height, "height");
61                                                doh.is("456px", dojo.style(widget.domNode).width, "width");
62                                                doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
63                                        },
64
65                                        // Test that certain attributes are automatically applied to focusNode or domNode.
66                                        // These are attributes that aren't mentioned at all in _Widget.
67                                        function autoDomMapping(){
68                                                // Mapping to this.domNode
69                                                var w = new dijit._Widget({
70                                                        title: "dom title",
71                                                        "aria-labelledby": "foo",
72                                                        role: "button"
73                                                });
74                                                doh.is("dom title", dojo.attr(w.domNode, "title"), "domNode title");
75                                                doh.is("foo", w.domNode.getAttribute("aria-labelledby", "domNode labelledby"));
76                                                doh.is("button", dojo.attr(w.domNode, "role"), "domNode role");
77
78                                                // Mapping to this.focusNode
79                                                var fw = (new dojo.declare([dijit._WidgetBase, dijit._TemplatedMixin], {
80                                                        templateString: "<div><input data-dojo-attach-point='focusNode'/></div>"
81                                                }))({
82                                                        title: "my title",
83                                                        "aria-labelledby": "foo"
84                                                });
85                                                doh.is("my title", dojo.attr(fw.focusNode, "title"), "focusNode title");
86                                                doh.is("foo", fw.focusNode.getAttribute("aria-labelledby"), "focusNode labelledby");
87
88                                                // Mapping attributes with dashes and mixed case
89                                                var mc = (new dojo.declare([dijit._WidgetBase, dijit._TemplatedMixin], {
90                                                        templateString: "<form></form>"
91                                                }))({
92                                                        "accept-charset": "utf8",
93                                                        "novalidate": "true"    // parser delivers as lowercase even though it's noValidate in JS obj
94                                                });
95                                                doh.is("utf8", mc.domNode.getAttribute("accept-charset"), "accept-charset");
96                                                if(dojo.isFF >= 4 || dojo.isIE >= 10 || dojo.isWebKit){
97                                                        // only works for HTML5 compliant browsers where novalidate is understood
98                                                        doh.t(mc.domNode.hasAttribute("novalidate"), "noValidate");
99                                                }
100                                        },
101
102                                        // Test custom setters/getter methods
103                                        function customSetters(){
104                                                var CustomSetters = dojo.declare([dijit._Widget], {
105                                                        foo: 0,
106                                                        _setFooAttr: function(val){ this.foo = val + 5; },
107                                                        _getFooAttr: function(val){ return this.foo - 10; }
108                                                });
109
110                                                var widget = new CustomSetters({
111                                                        foo: 100
112                                                });
113
114                                                doh.is(105, widget.foo, "custom setter called at initialize time");
115                                                doh.is(95, widget.get("foo"), "custom getter called");
116
117                                                widget.set("foo", 50);
118                                                doh.is(55, widget.foo, "custom setter called dynamically");
119                                                doh.is(45, widget.get("foo"), "custom getter still called");
120                                        },
121
122                                        // Test setters for attribute names with dashes
123                                        function settersForNamesWithDashes(){
124                                                var MyWidget = dojo.declare([dijit._Widget, dijit._TemplatedMixin], {
125                                                        "name-with-dashes": "",
126                                                        _setNameWithDashesAttr: {node: "dashNode", type: "innerHTML"},
127       
128                                                        templateString: "<div>" +
129                                                                                                "<span data-dojo-attach-point='dashNode'></span>" +
130                                                                                        "</div>"
131                                                });
132
133                                                var widget = new MyWidget({
134                                                        "name-with-dashes": "name with dashes"
135                                                }).placeAt(dojo.byId("wrapper"));
136
137                                                doh.is("name with dashes", widget.get("name-with-dashes"), "get()");
138                                                doh.is("name with dashes", widget.dashNode.innerHTML, "innerHTML");
139
140                                                widget.set("name-with-dashes", "hello");
141                                                doh.is("hello", widget.dashNode.innerHTML);
142                                        },
143
144                                        // Test deprecated attr() method                               
145                                        function attr(){
146                                                var MyWidget = new dojo.declare([dijit._Widget, dijit._TemplatedMixin], {
147                                                        templateString: "<div><span data-dojo-attach-point=nameNode></span></div>",
148                                                        _setNameAttr:  {node: "nameNode", type: "innerHTML"}
149                                                });
150
151                                                var b = new MyWidget();
152
153                                                // simple setting
154                                                b.attr("name", "thinger");
155                                                doh.is("thinger", b.attr("name"), "b.attr('name')");
156                                                doh.is("thinger", b.nameNode.innerHTML, "innerHTML");
157
158                                                // hash setting
159                                                b.attr({
160                                                        name: "bang",
161                                                        foo: "zap"
162                                                });
163                                                doh.is("bang", b.attr("name"), "hash set of bang");
164                                                doh.is("zap", b.attr("foo"), "hash set of zap");
165                                        },
166                                       
167                                        // Test deprecated attributeMap
168                                        function attributeMap(){
169                                                var AttrMap = dojo.declare([dijit._Widget, dijit._TemplatedMixin], {
170                                                        attributeMap: {foo: "", bar: "buttonNode", plainText: {node: "plainTextNode", type: "innerText"}},
171                                                        templateString: "<div class='class1' style='border: 1px solid red; width: 456px'>" +
172                                                                                                "<button data-dojo-attach-point='buttonNode,focusNode'>hi</button>" +
173                                                                                                '<span><input data-dojo-attach-point="inputNode" value="input"></span>' +
174                                                                                                "<span data-dojo-attach-point='containerNode'></span>" +
175                                                                                                "<span data-dojo-attach-point='plainTextNode'>original plain text</span>" +
176                                                                                        "</div>"
177                                                });
178
179                                                var widget = new AttrMap({
180                                                        foo:"value1",
181                                                        bar:"value2",
182                                                        "class":"class2",
183                                                        style:"height: 123px",
184                                                        plainText: "hello world <>&;"
185                                                }).placeAt(dojo.byId("wrapper"));
186
187                                                // test that attributes specified to constructor were copied over to the DOM
188                                                doh.is("value1", widget.domNode.getAttribute("foo"), "widget.domNode.getAttribute('foo')");
189                                                doh.is("value2", widget.buttonNode.getAttribute("bar"), "widget.domNode.getAttribute('bar')");
190                                                doh.t(dojo.hasClass(widget.domNode, "class1"), "class1");
191                                                doh.t(dojo.hasClass(widget.domNode, "class2"), "class2");
192                                                doh.is("123px", dojo.style(widget.domNode).height, "height");
193                                                doh.is("456px", dojo.style(widget.domNode).width, "width");
194                                                doh.is("hello world &lt;&gt;&amp;;", widget.plainTextNode.innerHTML, "innerHTML");
195                                        }
196
197                                ]
198                        );
199
200                        doh.run();
201                });
202
203        </script>
204</head>
205<body>
206        <h1>Dijit widget.get()/set() Unit Test</h1>
207        <div id="wrapper"></div>
208</body>
209</html>
Note: See TracBrowser for help on using the repository browser.