diff options
Diffstat (limited to 'includes/js/dijit/tests/_Templated.html')
| -rw-r--r-- | includes/js/dijit/tests/_Templated.html | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/_Templated.html b/includes/js/dijit/tests/_Templated.html new file mode 100644 index 0000000..de6dc59 --- /dev/null +++ b/includes/js/dijit/tests/_Templated.html @@ -0,0 +1,164 @@ +<html> + <head> + <title>_Templated tests</title> + <script type="text/javascript" src="../../dojo/dojo.js" + djConfig="parseOnLoad: true, isDebug: true"></script> + <script type="text/javascript"> + dojo.require("doh.runner"); + + dojo.require("dijit._Widget"); + dojo.require("dijit._Templated"); + + function getOuterHTML(/*DomNode*/ node){ + var wrapper = dojo.doc.createElement("div"); + wrapper.appendChild(node); + return wrapper.innerHTML.toLowerCase(); // IE prints <BUTTON> rather than <button>; normalize it. + } + + dojo.addOnLoad(function(){ + // Template with no variables (should be cached as a DOM tree) + dojo.declare("SimpleTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test1", + templateString: "<button><span>hello > world</span></button>" + }); + + // Template with variables + dojo.declare("VariableTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test2", + num: 5, + text: "hello ><\"' world", + + templateString: "<button><span num=\"${num}\">${text}</span></button>" + }); + + // Template that starts with special node (has to be constructed inside a <tbody>) + dojo.declare("TableRowTemplate", [dijit._Widget, dijit._Templated], { + attributeMap: {}, + id: "test3", + text: "bar", + templateString: "<tr><td>${text}</td></tr>" + }); + + // Illegal subsitition variable name + dojo.declare("IllegalSubstitution", [dijit._Widget, dijit._Templated], { + templateString: "<tr><td>${fake}</td></tr>" + }); + + // dojoAttachPoint + dojo.declare("AttachPoint", [dijit._Widget, dijit._Templated], { + attributeMap: {foo: "", style: "", bar: "buttonNode"}, + templateString: "<div style='border: 1px solid red'>" + + "<button dojoAttachPoint='buttonNode,focusNode'>hi</button>" + + '<span><input dojoAttachPoint="inputNode" value="input"></span>' + + "<span dojoAttachPoint='containerNode'></span>" + + "</div>" + }); + + // dojoAttachEvent + dojo.declare("AttachEvent", [dijit._Widget, dijit._Templated], { + click: function(){ this.clickCalled=true; }, + onfocus: function(){ this.focusCalled=true; }, + focus2: function(){ this.focus2Called=true; }, + templateString: "<table style='border: 1px solid blue'><tr>" + + "<td><button dojoAttachPoint='left' dojoAttachEvent='onclick: click, onfocus'>left</button></td>" + + "<td><button dojoAttachPoint='right' dojoAttachEvent='onclick: click, onfocus: focus2'>right</button></td>" + + "</tr></table>" + }); + + // TODO: + // TemplatePath + + var testW; + doh.register("dijit.tests._Templated.html", + [ + function simple(t){ + var widget=new SimpleTemplate(); + var wrapper=dojo.byId("simpleWrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"test1\"><span>hello > world</span></button>', wrapper.innerHTML.toLowerCase()); + }, + function variables(t){ + var widget=new VariableTemplate(); + var wrapper=dojo.byId("variables1Wrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"test2\"><span num="5">hello ><"\' world</span></button>', wrapper.innerHTML.toLowerCase()); + }, + + function variables2(t){ + var widget = new VariableTemplate({id: "myid", num: -5, text: ""}); + var wrapper=dojo.byId("variables2Wrapper"); + wrapper.appendChild(widget.domNode); + t.is('<button widgetid=\"myid\"><span num="-5"></span></button>', wrapper.innerHTML.toLowerCase()); + }, + function table(t){ + var widget=new TableRowTemplate({text: "hello"}); + var wrapper = dojo.byId("trWrapper"); + wrapper.appendChild(widget.domNode); + var actual = wrapper.innerHTML.toLowerCase().replace(/\r/g, "").replace(/\n/g, ""); + t.is('<tr widgetid="test3"><td>hello</td></tr>', actual); + }, + function illegal(t){ + var hadException=false; + try{ + var widget=new IllegalSubstitution(); + }catch(e){ + console.log(e); + hadException=true; + } + t.t(hadException); + }, + function attachPoint(t){ + var widget=new AttachPoint(); + var wrapper = dojo.byId("attachPointWrapper"); + wrapper.appendChild(widget.domNode); + t.is(widget.containerNode.tagName.toLowerCase(), "span"); + t.is(widget.buttonNode.tagName.toLowerCase(), "button"); + t.is(widget.focusNode.tagName.toLowerCase(), "button"); + t.is(widget.inputNode.tagName.toLowerCase(), "input"); + }, + function attributeMap(t){ + var widget=new AttachPoint({foo:"value1", bar:"value2", style:"color: blue"}); + var wrapper = dojo.byId("attributeMapWrapper"); + wrapper.appendChild(widget.domNode); + t.is("value1", widget.domNode.getAttribute("foo")); + t.is("value2", widget.buttonNode.getAttribute("bar")); + // TODO: this is() check is unreliable, IE returns a string like + // border-right: red 1px solid; border-top: red 1px solid; border-left: red 1px solid; color: blue; border-bottom: red 1px solid + // t.is("border: 1px solid red; color: blue;", widget.domNode.style.cssText.toLowerCase()); + }, + function attachEvent(t){ + var deferred = new doh.Deferred(); + var widget=new AttachEvent(); + var wrapper = dojo.byId("attachEventWrapper"); + wrapper.appendChild(widget.domNode); + widget.left.focus(); + widget.right.focus(); + setTimeout(function(){ + t.t(widget.focusCalled); + t.t(widget.focus2Called); + deferred.callback(true); + }, 0); + return deferred; + } + ] + ); + doh.run(); + }); + </script> + <style type="text/css"> + @import "../themes/tundra/tundra.css"; + </style> + </head> + <body> + <h1>_Templated test</h1> + <div id="simpleWrapper"></div> + <div id="variables1Wrapper"></div> + <div id="variables2Wrapper"></div> + <table><tbody id="trWrapper"></tbody></table> + <div id="attachPointWrapper"></div> + <div id="attributeMapWrapper"></div> + <div id="attachEventWrapper"></div> + </body> +</html> |