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

701 lines (614 loc) 20.9 kB
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>ContentPane Remote Loading Test</title> <script src="../boilerplate.js"></script> <script type="text/javascript"> require([ "doh/runner", "dojo/_base/array", "dojo/aspect", "dojo/_base/declare", "dojo/dom", "dojo/dom-class", "dojo/_base/lang", "dojo/parser", "dojo/request", "dojo/when", "dijit/registry", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/Tooltip", "dijit/TooltipDialog", "dijit/form/Button", "dijit/form/DropDownButton", "dijit/layout/ContentPane", "dijit/layout/StackContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/tests/helpers", "dojo/domReady!" ], function(doh, array, aspect, declare, dom, domClass, lang, parser, request, when, registry, _WidgetBase, _TemplatedMixin, Tooltip, TooltipDialog, Button, DropDownButton, ContentPane, StackContainer, TabContainer, AccordionContainer, helpers){ var tabCounter; testClose = function(pane, tab){ // remove html from title var title = lang.trim(tab.title.replace(/<\/?[a-z][a-z0-9]*[^>]*>/ig, "")); return confirm("Please confirm that you want tab "+title+" closed"); }; createTab = function(){ if(!tabCounter){ tabCounter = 3; } var title = '<img src="../images/plus.gif" style="background-color:#95B7D3;"/> Tab ' +(++tabCounter); var refreshOnShow = !!(tabCounter % 2); var newTab = new ContentPane({ id: "ttab" + tabCounter, title: title + (refreshOnShow ? ' <i>refreshOnShow</i>': ''), closable:true, refreshOnShow: refreshOnShow, href: 'getResponse.php?delay=1000&messId='+tabCounter +"&message="+encodeURI("<h1>Programmatically created Tab "+tabCounter+"</h1>") }, document.createElement('div')); registry.byId('ttabs').addChild(newTab); newTab.startup(); }; // create a do nothing, only for test widget declare("TestWidget", [_WidgetBase, _TemplatedMixin], { templateString: "<span class='dijitTestWidget'></span>" }); doh.register("parse", function parse(){ console.log("parse"); return parser.parse(); }); var cp, cp1; doh.register("ContentPane", [ function create(){ cp = new ContentPane({}, dom.byId("cp")); cp1 = new declare(ContentPane, { preprocessContent: function(content){ if(typeof content === "string"){ // return a reversed string var reverse = ""; for(var i = content.length - 1; i >= 0; i--){ reverse += content[i]; } return reverse; }else{ // wrap the DocumentFragment in a div var frag = document.createDocumentFragment(); var div = document.createElement("div"); div.appendChild(content); frag.appendChild(div); return frag; } } })({}, dom.byId("cp1")); }, { name: "setHref_loading", timeout: 10000, setUp: function(t){ }, runTest: function(t){ var d = new doh.Deferred(); cp.set('href', 'getResponse.php?messId=1').then(d.getTestCallback(function(){ doh.is(1, _WidgetBase.prototype.getChildren.call(cp).length); })); return d; } }, { name: "setHref_then_cancel", timeout: 2800, setUp: function(t){ cp.set("content", "");// clear previous }, runTest: function(t){ var msg = "This should NEVER be seen!"; cp.set('href', 'getResponse.php?delay=1000&message='+encodeURI(msg)); var d = new t.Deferred(); setTimeout(d.getTestCallback( function(){ doh.f(cp.domNode.innerHTML == msg); } ), 2500); cp.cancel(); return d; } }, { // test that setHref cancels a inflight setHref name: "setHref_cancels_previous_setHref", timeout: 10000, setUp: function(t){ cp.set("content", ""); }, runTest: function(t){ var d = new t.Deferred(); var msgCanceled = "This should be canceled"; cp.set('href', "getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); setTimeout(d.getTestErrback(function(){ var msg = "This message should win over the previous"; cp.set('href', "getResponse.php?message="+encodeURI(msg)); setTimeout(d.getTestCallback( function(){ doh.is(msg, cp.domNode.innerHTML); } ), 1600); }), 900); return d; } }, { name: "setContent_cancels_setHref", timeout: 2800, setUp: function(t){ cp.set("content", ""); }, runTest: function(t){ cp.on("unload", function(){ console.log("cp unload of: " + cp.get('content')); }); cp.on("load", function(){ console.log("cp load of: " + cp.get('content')); }); var msgCanceled = "This message be canceled"; cp.set('href', "getResponse.php?delay=1000&message="+encodeURI(msgCanceled)); var msg = "This message should win over (ie, cancel) the inflight one"; setTimeout(function(){ cp.set("content", msg); }, 500); var d = new t.Deferred(); setTimeout(d.getTestCallback( function(){ doh.is(msg, cp.domNode.innerHTML); } ), 2500); return d; } }, { name: "refresh", timeout: 1900, setUp: function(t){ cp.set('href', "getResponse.php?message="+encodeURI('initial load')); }, runTest: function(t){ var d = new doh.Deferred(); setTimeout(d.getTestErrback(function(){ var msg = 'refreshed load'; cp.href = "getResponse.php?message="+encodeURI(msg); cp.refresh().then(d.getTestCallback(function(){ doh.is(msg, cp.domNode.innerHTML); })); }), 100); return d; } }, { // Test isLoaded attribute lifecycle and that onLoad/onUnload callbacks // are called at the right times name: "isLoaded", timeout: 10000, setUp: function(t){ cp.set("content", ""); }, runTest: function(t){ doh.t(cp.isLoaded, "cp initially loaded"); // Setup handlers to track when onUnload and onLoad are called, // including tracking if they get called repeatedly (they shouldn't) var history = ""; var handles = [ cp.on("unload", function(){ history += "unloaded"}), cp.on("load", function(){ history += " and reloaded"}) ]; cp.set('href', "getResponse.php?delay=300&message=test"); doh.f(cp.isLoaded, "immediately after href set, cp isLoaded == false"); doh.is("unloaded", history); var ilObj = {}; // a object to get a reference instead of copy // probe after 200ms setTimeout(function(){ ilObj.probed = cp.isLoaded; }, 200); var d = new t.Deferred(); handles.push(aspect.after(cp, "_setContent", d.getTestCallback(function(){ doh.f(ilObj.probed, "200ms after href set, cp was not loaded"); doh.t(cp.isLoaded, "eventually, cp was loaded"); doh.is("unloaded and reloaded", history); array.forEach(handles, function(handle){ handle.remove(); }); }), true)); return d; } }, { // test that we don't load a response if we are hidden name: "wait_with_load_when_domNode_hidden", timeout: 1800, setUp: function(t){ cp.domNode.style.display = 'none'; cp.set("content", ""); }, runTest: function(t){ cp._msg = "This text should not be loaded until after widget is shown"; cp.set('href', "getResponse.php?message="+encodeURI(cp._msg)); var d = new t.Deferred(); setTimeout(d.getTestCallback( function(){ doh.isNot(cp._msg, cp.domNode.innerHTML); } ), 1500); return d; }, tearDown: function(t){ cp.domNode.style.display = ""; } }, { name: "onDownloadError", timeout: 1800, setUp: function(t){ cp.set("content", ""); }, runTest: function(t){ var msg = "Error downloading modified message"; orig = cp.onDownloadError; cp.onDownloadError = function(){ return msg; }; var d = new doh.Deferred(); evtHandle = cp.on("downloaderror", d.getTestErrback(function(e){ doh.t(e, "onDownloadError got event argument on invokation"); setTimeout(d.getTestCallback(function(){ doh.is(msg, cp.domNode.innerHTML, "custom errortext set"); }), 1); })); // test onDownloadError cp.set('href', 'nonexistent'); return d; }, tearDown: function(){ evtHandle.remove(); cp.onDownloadError = orig; } }, // Test that setting an href calls onDownloadStart followed by onDownloadEnd, // and also setting of custom download message instead of "Loading..." { name: "onDownloadStart|End", timeout: 5000, setUp:function(t){ cp.set("content", ""); }, runTest:function(t){ var d = new doh.Deferred(); // set custom message origStart = cp.onDownloadStart; var msg = "custom downloadstart message"; cp.onDownloadStart = function(){ return msg; }; startHandle = cp.on("downloadstart", d.getTestErrback(function(){ setTimeout(d.getTestErrback(function(){ // check that custom message was set doh.is(msg, cp.containerNode.innerHTML, "custom download message was set"); // and then wait for the download to complete endHandle = cp.on("downloadend", d.getTestCallback(function(){ // if this gets called (before the test timeout) then test succeeded })); }), 1); })); cp.set('href', 'getResponse.php?delay=400&messId=3'); return d; }, tearDown: function(){ cp.onDownloadStart = origStart; startHandle.remove(); endHandle.remove(); } }, // Test that setting an href calls onUnload followed by onLoad { name: "onLoad|onUnload", timeout: 5000, setUp:function(t){ cp.set("content", ""); }, runTest:function(t){ var d = new doh.Deferred(); loadHandle = cp.on("unload", d.getTestErrback(function(){ unloadHandle = cp.on("load", d.getTestCallback(function(){ // if this gets called (before the test timeout) then test succeeded })); })); cp.set('href', 'getResponse.php?delay=400&messId=2'); return d; }, tearDown: function(){ loadHandle.remove(); unloadHandle.remove(); } }, // Test that preprocessContent returns as expected when setting // content as a string { name: "preprocessContent.string", timeout: 5000, setUp:function(t){ cp1.set("content", "foo"); }, runTest:function(t){ doh.is("oof", cp1.get("content"), "preprocessContent(string)"); } }, { name: "preprocessContent.DocumentFragment", timeout: 5000, setUp:function(t){ var docFrag = document.createDocumentFragment(); var span = document.createElement("span"); docFrag.appendChild(span); cp1.set("content", docFrag); }, runTest:function(t){ doh.is("<div><span></span></div>", cp1.get("content").toLowerCase(), "preprocessContent(DocumentFragment)"); } } ]); function selectChildAndTestLoad(/*String*/ parentId, /*String*/ childId, /*String*/ startOfExpectedContent){ // summary: // Test deferred load of child of StackContainer widget var d = new doh.Deferred(), loadingContent, child = registry.byId(childId), contentNode = dom.byId(childId); child.ioMethod = function(args){ loadingContent = helpers.innerText(contentNode); delete child.ioMethod; return request(args.url, args); }; when(registry.byId(parentId).selectChild(child), function(){ setTimeout(d.getTestCallback( function(){ doh.is(child.loadingMessage.replace(/<[^>]*>/g, ""), loadingContent, "loading message"); var startOfActualContent = helpers.innerText(contentNode).substring(0, startOfExpectedContent.length); doh.is(startOfExpectedContent, startOfActualContent, "expected content"); } ), 1); // return from handler, then test }); return d; } var st, // stack container pane3, pane3UnloadCnt=0, pane3LoadCnt=0, // second child of stack container (initially hidden) tmp; doh.register("ContentPane in StackContainer", [ { // TODO: this test should be moved to registerGroup setUp now that #3504 is fixed // We actually don't need to test anything here, just setUp name: "setUp_StackContainer", setUp:function(t){ // create a StackContainer st = dom.byId('stackcontainer'); domClass.add(st, 'box'); st = new StackContainer({style: {height: "150px"}}, st); // the first child (by default) is the one that will // be shown st.addChild(new TestWidget()); // the second child *won't* be shown until selected pane3 = new ContentPane({ id:"sc_pane2", href:'getResponse.php?delay=300&message=Loaded!', preventCache: true, onLoad: function(){ pane3LoadCnt++; }, onUnload: function(){ pane3UnloadCnt++; } }, document.createElement('div')); st.addChild(pane3); // start the StackContainer; shouldn't cause ContentPane to load. st.startup(); }, runTest:function(t){ doh.t(st); doh.is(2, st.getChildren().length); } }, { name: "preload_false_by_default", runTest: function(t){ doh.f(pane3.isLoaded); doh.is('', pane3.domNode.innerHTML); } }, { name: "unload event not called initially", runTest: function(t){ doh.is(0, pane3UnloadCnt); } }, { name: "load event fired when pane is shown", timeout: 10000, runTest: function(t){ doh.is(0, pane3LoadCnt, "onload hasn't been called yet"); var d = new doh.Deferred(); when(st.selectChild(pane3), function(){ setTimeout(d.getTestCallback(function(){ doh.t(pane3.isLoaded, "pane3.isLoaded"); doh.is(1, pane3LoadCnt, "onload was called"); doh.is('Loaded!', pane3.domNode.innerHTML); doh.is(0, pane3UnloadCnt, "unload shouldn't have been called b/c no initial contents (#2)"); }), 1); }); doh.is(0, pane3UnloadCnt, "unload shouldn't have been called b/c no initial contents (#1)"); return d; } }, { name: "refreshOnShow parameter works", timeout: 10000, setUp: function(t){ tmp = { onUnload: function(){ this._unload_fired = 1; }, onLoad: function(){ this._load_fired = 1; } }; tmp.unloadHandle = pane3.on("unload", lang.hitch(tmp, 'onUnload')); tmp.loadHandle = pane3.on("load", lang.hitch(tmp, 'onLoad')); pane3.refreshOnShow = true; }, runTest: function(t){ var d = new doh.Deferred(); // Show pane 3 again and see if events fire st.back(); st.forward().then(function(){ setTimeout(d.getTestCallback(function(){ doh.t(tmp._unload_fired, "unload was fired"); doh.t(tmp._load_fired, "load was fired"); doh.is('Loaded!', pane3.domNode.innerHTML); }), 1); }); return d; }, tearDown: function(){ tmp.unloadHandle.remove(); tmp.loadHandle.remove(); pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow; } } ]); doh.register("ContentPane in TabContainer", [ { name: "tab1InitialLoading", timeout: 9000, runTest: function(){ return selectChildAndTestLoad("ttabs", "ttab1", "IT WAS"); } } ]); doh.register("ContentPane in AccordionContainer", [ { name: "pane3InitialLoading", timeout: 9000, runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane3", "There"); } }, { name: "cpInitialLoading", timeout: 9000, runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane2", "There"); } }, { name: "pane3Refresh", timeout: 5000, runTest: function(t){ var d = new doh.Deferred(), wasLoading = false, widget = registry.byId("ac_pane3"), loadhandler = widget.on("downloadStart", function(){ loadhandler.remove(); wasLoading = true; }), showhandler = widget.on("show", function(){ showhandler.remove(); setTimeout(d.getTestCallback( function(){ doh.f(wasLoading, "should not have reloaded") } ), 1000); }); registry.byId("ac").selectChild("ac_pane3"); return d; } }, { name: "cpRefresh", timeout: 9000, runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane2", "There"); } } ]); doh.register("TooltipDialog", [ // The preload=true TooltipDialog should already be loaded, or at least be loading, // if it isn't already loading then this test will timeout. { name: "preload=true", timeout: 5000, runTest: function(t){ var dlg = registry.byId("preloadTooltipDlg"); if(!dlg.isLoaded){ doh.t(dlg.onLoadDeferred, "onLoadDeferred exists"); return dlg.onLoadDeferred; } } }, // The preload=false TooltipDialog shouldn't load until opened. { name: "preload=false", timeout: 5000, runTest: function(){ // Check that it isn't loaded yet var dlg = registry.byId("noPreloadTooltipDlg"); doh.f(dlg.isLoaded, "didn't load yet"); // Open the dialog and then return Deferred waiting for it to load. // If it doesn't load then this test will get a timeout. var btn = registry.byId("noPreloadTooltipDlgBtn"); btn.openDropDown(); doh.t(dlg.onLoadDeferred, "onLoadDeferred exists"); return dlg.onLoadDeferred; } } ]); doh.run(); }); </script> </head> <body class="claro" role="main"> <h1 class="testTitle">Dijit layout.ContentPane (delayed) remote tests</h1> <h2>Plain ContentPane</h2> <div id='cp' class='box'></div> <h2>preprocessContent ContentPane</h2> <div id='cp1' class='box'></div> <h2>StackContainer</h2> <div id='stackcontainer'></div> <h2>TabContainer</h2> <p>These tabs are made up of external content. Loading is delayed to make it easier to see if refreshOnShow and preload = 'false' is working.<br/> The tabs also tests to insert html in the Tab title </p> <div id="createTabButton" data-dojo-type='dijit/form/Button' data-dojo-props='onClick:function(){ createTab() }'>Create a Tab</div> <div id="ttabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabPosition:"top", style:"width: 100%; height: 20em;"'> <div id="ttab1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"getResponse.php?messId=3&amp;delay=1000", closable:true' title="Tab1"></div> <div id="ttab2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"getResponse.php?messId=4&amp;delay=1000", refreshOnShow:true, title:"Tab 2 ", selected:true, closable:true' title="refreshOnShow"></div> <div id="ttab3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='href:"getResponse.php?messId=5&amp;delay=1000", onClose:testClose, closable:true ' title="Tab 3"> </div> </div> <h2>AccordionContainer</h2> <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props='id:"ac", style:"height:300px; width:400px;"'> <div id="ac_pane1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"one", refreshOnShow:false, href:"getResponse.php?messId=4&amp;delay=1000"'></div> <div id="ac_pane2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"two", refreshOnShow:true, href:"getResponse.php?messId=4&amp;delay=4000"'></div> <div id="ac_pane3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"three", refreshOnShow:false, href:"getResponse.php?messId=4&amp;delay=4100"'></div> </div> <h2>TooltipDialog</h2> <div data-dojo-type="dijit/layout/ContentPane"> <div id="preloadTooltipDlgBtn" data-dojo-type="dijit/form/DropDownButton"> <span>Show Preload TooltipDialog</span> <div id="preloadTooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information", preload: true, href: "doc1.html"'> </div> </div> </div> <div id="noPreloadTooltipDlgBtn" data-dojo-type="dijit/form/DropDownButton"> <span>Show No-Preload TooltipDialog</span> <div id="noPreloadTooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information", preload: false, href: "doc1.html"'> </div> </div> </body> </html>