3 <title>_Templated tests</title>
4 <script type="text/javascript" src="../../dojo/dojo.js"
5 djConfig="parseOnLoad: true, isDebug: true"></script>
6 <script type="text/javascript">
7 dojo.require("doh.runner");
9 dojo.require("dijit._Widget");
10 dojo.require("dijit._Templated");
12 function getOuterHTML(/*DomNode*/ node){
13 var wrapper = dojo.doc.createElement("div");
14 wrapper.appendChild(node);
15 return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it.
18 dojo.addOnLoad(function(){
19 // Template with no variables (should be cached as a DOM tree)
20 dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], {
23 templateString: "<button><span>hello > world</span></button>"
26 // Template with variables
27 dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], {
31 text: "hello ><\"' world",
33 templateString: "<button><span num=\"${num}\">${text}</span></button>"
36 // Template that starts with special node (has to be constructed inside a <tbody>)
37 dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], {
41 templateString: "<tr><td>${text}</td></tr>"
44 // Illegal subsitition variable name
45 dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], {
46 templateString: "<tr><td>${fake}</td></tr>"
50 dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], {
51 attributeMap: {foo: "", style: "", bar: "buttonNode"},
52 templateString: "<div style='border: 1px solid red'>" +
53 "<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" +
54 '<span><input dojoAttachPoint="inputNode" value="input"></span>' +
55 "<span dojoAttachPoint='containerNode'></span>" +
60 dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], {
61 click: function(){ this.clickCalled=true; },
62 onfocus: function(){ this.focusCalled=true; },
63 focus2: function(){ this.focus2Called=true; },
64 templateString: "<table style='border: 1px solid blue'><tr>" +
65 "<td><button dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" +
66 "<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" +
74 doh.register("dijit.tests._Templated.html",
77 var widget=new SimpleTemplate();
78 var wrapper=dojo.byId("simpleWrapper");
79 wrapper.appendChild(widget.domNode);
80 t.is('<button widgetid=\"test1\"><span>hello > world</span></button>', wrapper.innerHTML.toLowerCase());
82 function variables(t){
83 var widget=new VariableTemplate();
84 var wrapper=dojo.byId("variables1Wrapper");
85 wrapper.appendChild(widget.domNode);
86 t.is('<button widgetid=\"test2\"><span num="5">hello ><"\' world</span></button>', wrapper.innerHTML.toLowerCase());
89 function variables2(t){
90 var widget = new VariableTemplate({id: "myid", num: -5, text: ""});
91 var wrapper=dojo.byId("variables2Wrapper");
92 wrapper.appendChild(widget.domNode);
93 t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase());
96 var widget=new TableRowTemplate({text: "hello"});
97 var wrapper = dojo.byId("trWrapper");
98 wrapper.appendChild(widget.domNode);
99 var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, "");
100 t.is('<tr widgetid="test3"><td>hello</td></tr>', actual);
103 var hadException=false;
105 var widget=new IllegalSubstitution();
112 function attachPoint(t){
113 var widget=new AttachPoint();
114 var wrapper = dojo.byId("attachPointWrapper");
115 wrapper.appendChild(widget.domNode);
116 t.is(widget.containerNode.tagName.toLowerCase(), "span");
117 t.is(widget.buttonNode.tagName.toLowerCase(), "button");
118 t.is(widget.focusNode.tagName.toLowerCase(), "button");
119 t.is(widget.inputNode.tagName.toLowerCase(), "input");
121 function attributeMap(t){
122 var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"});
123 var wrapper = dojo.byId("attributeMapWrapper");
124 wrapper.appendChild(widget.domNode);
125 t.is("value1", widget.domNode.getAttribute("foo"));
126 t.is("value2", widget.buttonNode.getAttribute("bar"));
127 // TODO: this is() check is unreliable, IE returns a string like
128 // border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid
129 // t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase());
131 function attachEvent(t){
132 var deferred = new doh.Deferred();
133 var widget=new AttachEvent();
134 var wrapper = dojo.byId("attachEventWrapper");
135 wrapper.appendChild(widget.domNode);
137 widget.right.focus();
138 setTimeout(function(){
139 t.t(widget.focusCalled);
140 t.t(widget.focus2Called);
141 deferred.callback(true);
150 <style type="text/css">
151 @import "../themes/tundra/tundra.css";
155 <h1>_Templated test</h1>
156 <div id="simpleWrapper"></div>
157 <div id="variables1Wrapper"></div>
158 <div id="variables2Wrapper"></div>
159 <table><tbody id="trWrapper"></tbody></table>
160 <div id="attachPointWrapper"></div>
161 <div id="attributeMapWrapper"></div>
162 <div id="attachEventWrapper"></div>