--- /dev/null
+<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>
projects / eow / blobdiff