UNPKG

dijit

Version:

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

470 lines (442 loc) 16.8 kB
<html> <head> <title>testing widgetsInTemplate support</title> <style type="text/css"> @import "../themes/claro/document.css"; @import "../themes/claro/claro.css"; </style> <script type="text/javascript" src="../../dojo/dojo.js" djConfig="isDebug: true"></script> <script type="text/javascript"> dojo.require("doh.runner"); dojo.require("dojo.parser"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dijit.form.Button"); dojo.require("dijit.form.CheckBox"); dojo.require("dijit.ProgressBar"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit._Container"); dojo.require("dijit._Contained"); dojo.require("dijit.layout._LayoutWidget"); dojo.ready(function(){ var testW; dojo.declare('Test1Widget', [dijit._Widget, dijit._Templated], { templateString: dojo.byId('Test1Template').textContent || dojo.byId('Test1Template').innerText, onClick: function(e){ if(e.target){ alert('onClick widgetId='+e.target.id); }else{ if(e._counter == undefined){ e._counter = 1; }else{ e._counter++; } } } }); dojo.declare('Test2Widget', [dijit._Widget, dijit._Templated], { templateString: dojo.byId('Test2Template').textContent || dojo.byId('Test2Template').innerText }); dojo.declare('Test4Widget', [dijit._Widget, dijit._Templated], { templateString: dojo.byId('Test4Template').textContent || dojo.byId('Test4Template').innerText }); function validateTest4Widget(t, testW){ var selectedTab = dojo.query(".dijitTabChecked", testW.domNode)[0]; var selectedPane = dojo.query(".dijitVisible > .dijitTabPane", testW.domNode)[0]; var tabBox = selectedTab ? dojo.contentBox(selectedTab) : null; var paneBox = selectedPane ? dojo.contentBox(selectedPane) : null; t.t(tabBox && tabBox.w > 0 && tabBox.h > 0, "tabBox && tabBox.w > 0 && tabBox.h > 0"); t.t(paneBox && paneBox.w > 0 && paneBox.h > 0, "paneBox && paneBox.w > 0 && paneBox.h"); // Check that everything got started t.t(testW._started, "testW._started"); t.t(testW.tabCont._started, "tabCont._started"); t.t(testW.tab1._started, "tab1._started"); t.t(testW.tab2._started, "tab2._started"); } dojo.declare('TestLayoutWidget', dijit.layout._LayoutWidget, { startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); dojo.declare('TestCtnrWidget', [dijit._Widget, dijit._Container], { startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); dojo.declare('TestCtndWidget', [dijit._Widget, dijit._Contained], { startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); dojo.declare('TestNonCtnrWidget', [dijit._Widget, dijit._Templated], { templateString: "<div dojoAttachPoint=containerNode></div>", startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); dojo.declare('TestStubWidget', dijit._Widget, { startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); dojo.declare('Test5Widget', [dijit._Widget, dijit._Templated], { templateString: dojo.byId('Test5Template').textContent || dojo.byId('Test5Template').innerText, startup: function(){ if(this._started){ this._doubleStarted = true; } this.inherited(arguments); }, destroy: function(){ if(this._destroyed){ this._doubleDestroyed = true; } this.inherited(arguments); this._destroyed = true; } }); function getTestWidgets(testW){ return [ testW, testW.layout, testW.layChild1, testW.layChild2, testW.container, testW.contained1, testW.contained2, testW.nonContainer, testW.nonContained1, testW.nonContained2, testW.threeLevel, testW.secondLevel, testW.bottomLevel, testW.anotherThree, testW.anotherSecond, testW.anotherBottom, testW.stub1 ]; } function validateTest5Widget(t, testW){ // Check that everything got started, but not double-started dojo.forEach(getTestWidgets(testW), function(w){ t.t(w._started, "w._started: " + w); t.is(undefined, w._doubleStarted, "w._doubleStarted: " + w); }); } function validateTest5WidgetDestroy(t, testW){ var savedWidgets = getTestWidgets(testW); testW.destroy(); dojo.forEach(savedWidgets, function(w, idx){ t.t(w._destroyed, "w._destroyed: " + w); t.is(undefined, w._doubleDestroyed, "w._doubleDestroyed: " + w); }); } dojo.declare("Missing", [dijit._Widget, dijit._Templated], { templateString: '<div>' + '<div dojoType="dijit.layout.ContentPane">' + '<div dojoType="dijit.form.Button" id="missingButtonId" ' + 'dojoAttachPoint="missingButton">Missing...</div>' + '</div>' + '</div>' }); doh.register("parse", function(){ dojo.parser.parse(); }); doh.register("_Templated-widgetsInTemplate1.x", [ { name: "dojoAttachPoint", runTest: function(t){ var testW = dijit.byId("test1Widget"); t.t(testW.normalNode, "normalNode"); t.f(isNaN(testW.normalNode.nodeType), "normalNode.nodeType"); t.t(testW.buttonWidget instanceof dijit.form.Button, "buttonWidget is Button"); t.t(testW.checkboxWidget instanceof dijit.form.CheckBox, "checkboxWidget is CheckBox"); t.t(testW.progressBarWidget instanceof dijit.ProgressBar, "progressBarWidget is ProgressBar"); testW = dijit.byId("test2Widget"); t.t(testW.containerNode, "containerNode"); t.f(isNaN(testW.containerNode.nodeType), "containerNode nodeType"); t.is(undefined,testW.buttonWidget, "buttonWidget undefined"); t.t(testW.checkboxWidget instanceof dijit.form.CheckBox, "checkboxWidget is still CheckBox"); } }, { name: "dojoAttachEvent", runTest: function(t){ var testW = dijit.byId("test1Widget"); testW.buttonWidget._counter=0; testW.buttonWidget.onClick(testW.buttonWidget); testW.checkboxWidget._counter=0; testW.checkboxWidget.onClick(testW.checkboxWidget); testW.progressBarWidget._counter=0; testW.progressBarWidget.onChange(testW.progressBarWidget); t.is(1,testW.buttonWidget._counter, "buttonWidget._counter"); t.is(1,testW.checkboxWidget._counter, "checkboxWidget._counter"); t.is(1,testW.progressBarWidget._counter, "progressBarWidget._counter"); } }, { // Test that getDescendants () // finds direct descendants but skips widgetsInTemplates // and also nested widgets (if direct==true) name: "destruction", runTest: function(t){ var testW = dijit.byId("test3Widget"); /*** performance tests var start = new Date(); for(var i=0; i<1000; i++) testW.getChildren(); console.log("*** time for getChildren(): " + (new Date()-start)); var start = new Date(); for(var i=0; i<1000; i++) testW.getDescendants(); console.log("*** time for getDescendants(false): " + (new Date()-start)); ***/ var chil = testW.getChildren(); t.is(5, chil.length, "number of direct descendants"); t.is(chil[0].id, "3.1"); t.is(chil[1].id, "3.2"); t.is(chil[2].id, "3.3"); t.is(chil[3].id, "3.4"); t.is(chil[4].id, "3.5"); var desc = testW.getDescendants(); t.is(7, desc.length, "number of descendants (including nested ones)"); t.is(desc[0].id, "3.1"); t.is(desc[1].id, "3.2"); t.is(desc[2].id, "3.3"); t.is(desc[3].id, "3.nested"); t.is(desc[4].id, "3.nested2"); t.is(desc[5].id, "3.4"); t.is(desc[6].id, "3.5"); } }, { // Check that declarative widget with layout widgets in template is correctly created and rendered name: "declarative widget with layout widgets", runTest: function(t){ validateTest4Widget(t, dijit.byId("test4Widget")); } }, { // Check that programmatic widget with layout widgets in template is correctly created and rendered name: "programmatic widget with layout widgets", runTest: function(t){ test4WidgetProgrammatic = new Test4Widget({}).placeAt("test4Widget", "after"); test4WidgetProgrammatic.startup(); validateTest4Widget(t, test4WidgetProgrammatic); } }, { // Compare programmatic and declaratively created widget with layout widgets in template name: "programmatic vs declarative with layout widgets", runTest: function(t){ // Focus unrelated element, so that we don't have different classes on our two widgets dojo.byId("plainInput").focus(); var declW = dijit.byId("test4Widget"); var progW = test4WidgetProgrammatic; // Check that generated HTML in DOM is same var declNeutralHtml = declW.domNode.innerHTML.replace(/_\d+/g, ""); var progNeutralHtml = progW.domNode.innerHTML.replace(/_\d+/g, ""); t.is(declNeutralHtml, progNeutralHtml, "progNeutralHtml"); // Check that dimensions are same var declBox = dojo.contentBox(declW.domNode); var progBox = dojo.contentBox(progW.domNode); t.is(declBox.h, progBox.h, "progBox.h"); t.is(declBox.w, progBox.w, "progBox.w"); } }, { // Check that declarative widget with other widgets in template is correctly started name: "declarative widget with many child widgets", runTest: function(t){ validateTest5Widget(t, dijit.byId("test5Widget")); } }, { // Check that programmatic widget with other widgets in template is correctly started name: "programmatic widget with many child widgets", runTest: function(t){ test5WidgetProgrammatic = new Test5Widget().placeAt("test5Widget", "after"); test5WidgetProgrammatic.startup(); validateTest5Widget(t, test5WidgetProgrammatic); } }, { // Check that destroying our declarative widget works correctly name: "declarative widget destruction", runTest: function(t){ validateTest5WidgetDestroy(t, dijit.byId("test5Widget")); } }, { // Check that destroying our programmatic widget works correctly name: "programmatic widget destruction", runTest: function(t){ validateTest5WidgetDestroy(t, test5WidgetProgrammatic); } }, { // Test that dojoAttachPoint inside of a ContentPane (inside of a template) works name: "ContentPane", runTest: function(){ var testW = dijit.byId("missing"); doh.t(testW, "widget was created"); doh.t(testW.missingButton, "dojoAttachPoint created"); doh.is("dijit.form.Button", testW.missingButton.declaredClass, "and it's to a widget"); doh.t(dijit.byId("missingButtonId"), "nested widget also registered by id"); } } ] ); doh.run(); }); </script> </head> <body class="claro"> <h1>testing widgetsInTemplate support</h1> <xmp id="Test1Template" style="display:none;"> <div> <div dojoAttachPoint="normalNode" >normal node</div> <button dojoAttachPoint="buttonWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.Button">button #1</button> <div dojoAttachPoint="checkboxWidget" dojoAttachEvent="onClick:onClick" dojoType="dijit.form.CheckBox"></div> checkbox #1 <div dojoAttachPoint="progressBarWidget" dojoAttachEvent="onChange:onClick" style="width:400px" maximum="200" progress="20" dojoType="dijit.ProgressBar"></div> </div> </xmp> <div dojoType="Test1Widget" id="test1Widget" ></div> <!-- TODO: this is a strange test; the containerNode shouldn't have any contents as they will be overwritten --> <xmp id="Test2Template" style="display:none;"> <div> <div dojoAttachPoint="containerNode" > <div dojoAttachPoint="checkboxWidget" dojoType="dijit.form.CheckBox"></div> checkbox #2 </div> </div> </xmp> <div dojoType="Test2Widget" id="test2Widget" ><button dojoAttachPoint="buttonWidget" dojoType="dijit.form.Button">button #2</button></div> <xmp id="Test3Template" style="display:none;"> <div> <div dojoAttachPoint="checkboxWidget" dojoType="dijit.form.CheckBox"></div> checkbox #3 <div dojoAttachPoint="containerNode" ></div> </div> </xmp> <script> dojo.declare('Test3Widget', [dijit._Widget, dijit._Templated], { templateString: dojo.byId('Test3Template').textContent || dojo.byId('Test3Template').innerText }); </script> <div dojoType="Test3Widget" id="test3Widget" > <span>hello world</span> <b style="border: 1px solid blue;">this is my <button dojoType="dijit.form.Button" id="3.1">first button</button> </b> <button dojoType="dijit.form.Button" id="3.2">another button</button> <i>and some more</i> <div style="border: 1px solid red;"> <div dojoType="dijit.layout.ContentPane" style="border: 1px solid gray;" id="3.3"> <button dojoType="dijit.form.Button" id="3.nested">a nested button</button> <button dojoType="dijit.form.Button" id="3.nested2">another nested button</button> </div> <button dojoType="dijit.form.Button" id="3.4">yet another button</button> <button dojoType="dijit.form.Button" id="3.5">yet yet another button</button> </div> </div> <!-- Test templated widget containing layout widgets in template --> <xmp id="Test4Template" style="display:none;"> <div> <div dojoType="dijit.layout.TabContainer" dojoAttachPoint="tabCont" style="height: 5em;"> <div dojoType="dijit.layout.ContentPane" dojoAttachPoint="tab1" title="Tab 1"> pane 1 </div> <div dojoType="dijit.layout.ContentPane" dojoAttachPoint="tab2" title="Tab 2"> pane 2 </div> </div> </div> </xmp> <div dojoType="Test4Widget" id="test4Widget" ></div> <!-- Test templated widget containing container and nested widgets in template --> <xmp id="Test5Template" style="display:none;"> <div> <div dojoType="TestLayoutWidget" dojoAttachPoint="layout"> <div dojoType="TestCtndWidget" dojoAttachPoint="layChild1"></div> <div dojoType="TestCtndWidget" dojoAttachPoint="layChild2"></div> </div> <div dojoType="TestCtnrWidget" dojoAttachPoint="container"> <div dojoType="TestCtndWidget" dojoAttachPoint="contained1"></div> <div dojoType="TestCtndWidget" dojoAttachPoint="contained2"></div> </div> <div dojoType="TestStubWidget" dojoAttachPoint="stub1"></div> <div dojoType="TestNonCtnrWidget" dojoAttachPoint="nonContainer"> <div dojoType="TestStubWidget" dojoAttachPoint="nonContained1"></div> <div dojoType="TestStubWidget" dojoAttachPoint="nonContained2"></div> </div> <div dojoType="TestCtnrWidget" dojoAttachPoint="threeLevel"> <div dojoType="TestNonCtnrWidget" dojoAttachPoint="secondLevel"> <div dojoType="TestStubWidget" dojoAttachPoint="bottomLevel"></div> </div> </div> <div dojoType="TestNonCtnrWidget" dojoAttachPoint="anotherThree"> <div dojoType="TestCtnrWidget" dojoAttachPoint="anotherSecond"> <div dojoType="TestCtndWidget" dojoAttachPoint="anotherBottom"></div> </div> </div> </div> </xmp> <div dojoType="Test5Widget" id="test5Widget" ></div> <div dojoType="Missing" id="missing"></div> <input id="plainInput"/> </body> </html>