Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<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 &gt; 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 &gt; 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 &gt;&lt;"\' 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>