source: Dev/trunk/src/client/dijit/tests/layout/ContentPane-remote.html @ 483

Last change on this file since 483 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 19.1 KB
Line 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
5        <title>ContentPane Remote Loading Test</title>
6
7        <script src="../boilerplate.js"></script>
8
9        <script type="text/javascript">
10                require([
11                        "doh/runner",
12                        "dojo/_base/array",
13                        "dojo/aspect",
14                        "dojo/_base/declare",
15                        "dojo/dom",
16                        "dojo/dom-class",
17                        "dojo/_base/lang",
18                        "dojo/parser",
19                        "dojo/request",
20                        "dojo/when",
21                        "dijit/registry",
22                        "dijit/_WidgetBase",
23                        "dijit/_TemplatedMixin",
24                        "dijit/Tooltip",
25                        "dijit/TooltipDialog",
26                        "dijit/form/Button",
27                        "dijit/form/DropDownButton",
28                        "dijit/layout/ContentPane",
29                        "dijit/layout/StackContainer",
30                        "dijit/layout/TabContainer",
31                        "dijit/layout/AccordionContainer",
32                        "dijit/tests/helpers",
33                        "dojo/domReady!"
34                ], function(doh, array, aspect, declare, dom, domClass, lang, parser, request, when,
35                                registry, _WidgetBase, _TemplatedMixin, Tooltip, TooltipDialog, Button, DropDownButton,
36                                ContentPane, StackContainer, TabContainer, AccordionContainer, helpers){
37
38                        var tabCounter;
39                        testClose = function(pane, tab){
40                                // remove html from title
41                                var title = lang.trim(tab.title.replace(/<\/?[a-z][a-z0-9]*[^>]*>/ig, ""));
42                                return confirm("Please confirm that you want tab "+title+" closed");
43                        };
44
45
46                        createTab = function(){
47                                if(!tabCounter){ tabCounter = 3; }
48       
49                                var title = '<img src="../images/plus.gif" style="background-color:#95B7D3;"/> Tab ' +(++tabCounter);
50                                var refreshOnShow = !!(tabCounter % 2);
51       
52                                var newTab = new ContentPane({
53                                        id: "ttab" + tabCounter,
54                                        title: title + (refreshOnShow ? ' <i>refreshOnShow</i>': ''),
55                                        closable:true,
56                                        refreshOnShow: refreshOnShow,
57                                        href: 'getResponse.php?delay=1000&messId='+tabCounter
58                                                +"&message="+encodeURI("<h1>Programmatically created Tab "+tabCounter+"</h1>")
59                                }, document.createElement('div'));
60       
61                                registry.byId('ttabs').addChild(newTab);
62       
63                                newTab.startup();
64                        };
65
66                        // create a do nothing, only for test widget
67                        declare("TestWidget",
68                                [_WidgetBase, _TemplatedMixin], {
69                                templateString: "<span class='dijitTestWidget'></span>"
70                        });
71
72
73                        doh.register("parse", function parse(){
74                                console.log("parse");
75                                return parser.parse();
76                        });
77
78                        var cp;
79
80                        doh.register("ContentPane", [
81                                function create(){
82                                        cp = new ContentPane({}, dom.byId("cp"));
83                                },
84
85                                {
86                                        name: "setHref_loading",
87                                        timeout: 10000,
88                                        setUp: function(t){
89                                        },
90                                        runTest: function(t){
91                                                var d = new doh.Deferred();
92
93                                                cp.set('href', 'getResponse.php?messId=1').then(d.getTestCallback(function(){
94                                                        doh.is(1, _WidgetBase.prototype.getChildren.call(cp).length);
95                                                }));
96                                                return d;
97                                        }
98                                },
99                                {
100                                        name: "setHref_then_cancel",
101                                        timeout: 2800,
102                                        setUp: function(t){
103                                                cp.set("content", "");// clear previous
104                                        },
105                                        runTest: function(t){
106                                                var msg = "This should NEVER be seen!";
107                                                cp.set('href', 'getResponse.php?delay=1000&message='+encodeURI(msg));
108                                                var d = new t.Deferred();
109                                                setTimeout(d.getTestCallback(
110                                                        function(){
111                                                                doh.f(cp.domNode.innerHTML == msg);
112                                                        }
113                                                ), 2500);
114
115                                                cp.cancel();
116
117                                                return d;
118                                        }
119                                },
120                                {
121                                        // test that setHref cancels a inflight setHref
122                                        name: "setHref_cancels_previous_setHref",
123                                        timeout: 2800,
124                                        setUp: function(t){
125                                                cp.set("content", "");
126                                        },
127                                        runTest: function(t){
128                                                var msgCanceled = "This should be canceled";
129                                                cp.set('href', "getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
130
131                                                var msg = "This message should win over the previous";
132                                                setTimeout(function(){
133                                                        cp.set('href', "getResponse.php?message="+encodeURI(msg));
134                                                }, 900);
135
136                                                var d = new t.Deferred();
137                                                setTimeout(d.getTestCallback(
138                                                        function(){
139                                                                doh.is(msg, cp.domNode.innerHTML);
140                                                        }
141                                                ), 2500);
142                                                return d;
143                                        }
144                                },
145                                {
146                                        name: "setContent_cancels_setHref",
147                                        timeout: 2800,
148                                        setUp: function(t){
149                                                cp.set("content", "");
150                                        },
151                                        runTest: function(t){
152                                                cp.on("unload", function(){
153                                                        console.log("cp unload of: " + cp.get('content'));
154                                                });
155                                                cp.on("load", function(){
156                                                        console.log("cp load of: " + cp.get('content'));
157                                                });
158                                                var msgCanceled = "This message be canceled";
159                                                cp.set('href', "getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
160
161                                                var msg = "This message should win over (ie, cancel) the inflight one";
162                                                setTimeout(function(){
163                                                        cp.set("content", msg);
164                                                }, 500);
165
166                                                var d = new t.Deferred();
167                                                setTimeout(d.getTestCallback(
168                                                        function(){
169                                                                doh.is(msg, cp.domNode.innerHTML);
170                                                        }
171                                                ), 2500);
172                                                return d;
173                                        }
174                                },
175                                {
176                                        name: "refresh",
177                                        timeout: 1900,
178                                        setUp: function(t){
179                                                cp.set('href', "getResponse.php?message="+encodeURI('initial load'));
180                                        },
181                                        runTest: function(t){
182                                                var d = new doh.Deferred();
183
184                                                setTimeout(d.getTestErrback(function(){
185                                                        var msg = 'refreshed load';
186                                                        cp.href = "getResponse.php?message="+encodeURI(msg);
187                                                        cp.refresh().then(d.getTestCallback(function(){
188                                                                doh.is(msg, cp.domNode.innerHTML);
189                                                        }));
190                                                }), 100);
191
192                                                return d;
193                                        }
194                                },
195                                {
196                                        // Test isLoaded attribute lifecycle and that onLoad/onUnload callbacks
197                                        // are called at the right times
198                                        name: "isLoaded",
199
200                                        timeout: 10000,
201                                        setUp: function(t){
202                                                cp.set("content", "");
203                                        },
204                                        runTest: function(t){
205                                                doh.t(cp.isLoaded, "cp initially loaded");
206
207                                                // Setup handlers to track when onUnload and onLoad are called,
208                                                // including tracking if they get called repeatedly (they shouldn't)
209                                                var history = "";
210                                                var handles = [
211                                                        cp.on("unload", function(){ history += "unloaded"}),
212                                                        cp.on("load", function(){ history += " and reloaded"})
213                                                ];
214
215                                                cp.set('href', "getResponse.php?delay=300&message=test");
216
217                                                doh.f(cp.isLoaded, "immediately after href set, cp isLoaded == false");
218                                                doh.is("unloaded", history);
219
220                                                var ilObj = {}; // a object to get a reference instead of copy
221
222                                                // probe after 200ms
223                                                setTimeout(function(){
224                                                        ilObj.probed = cp.isLoaded;
225                                                }, 200);
226
227                                                var d = new t.Deferred();
228                                                handles.push(aspect.after(cp, "_setContent", d.getTestCallback(function(){
229                                                        doh.f(ilObj.probed, "200ms after href set, cp was not loaded");
230                                                        doh.t(cp.isLoaded, "eventually, cp was loaded");
231                                                        doh.is("unloaded and reloaded", history);
232
233                                                        array.forEach(handles, function(handle){
234                                                                handle.remove();
235                                                        });
236                                                }), true));
237                                                return d;
238                                        }
239                                },
240                                {
241                                        // test that we don't load a response if we are hidden
242                                        name: "wait_with_load_when_domNode_hidden",
243                                        timeout: 1800,
244                                        setUp: function(t){
245                                                cp.domNode.style.display = 'none';
246                                                cp.set("content", "");
247                                        },
248                                        runTest: function(t){
249                                                cp._msg = "This text should not be loaded until after widget is shown";
250                                                cp.set('href', "getResponse.php?message="+encodeURI(cp._msg));
251                                                var d = new t.Deferred();
252                                                setTimeout(d.getTestCallback(
253                                                        function(){
254                                                                doh.isNot(cp._msg, cp.domNode.innerHTML);
255                                                        }
256                                                ), 1500);
257                                                return d;
258                                        },
259                                        tearDown: function(t){
260                                                cp.domNode.style.display = "";
261                                        }
262                                },
263                                {
264                                        name: "onDownloadError",
265                                        timeout: 1800,
266                                        setUp: function(t){
267                                                cp.set("content", "");
268                                        },
269                                        runTest: function(t){
270                                                var msg = "Error downloading modified message";
271                                                orig = cp.onDownloadError;
272
273                                                cp.onDownloadError = function(){
274                                                        return msg;
275                                                };
276
277                                                var d = new doh.Deferred();
278
279                                                evtHandle = cp.on("downloaderror", d.getTestErrback(function(e){
280                                                        doh.t(e, "onDownloadError got event argument on invokation");
281                                                        setTimeout(d.getTestCallback(function(){
282                                                                doh.is(msg, cp.domNode.innerHTML, "custom errortext set");
283                                                        }), 1);
284                                                }));
285
286                                                // test onDownloadError
287                                                cp.set('href', 'nonexistant');
288
289                                                return d;
290                                        },
291                                        tearDown: function(){
292                                                evtHandle.remove();
293                                                cp.onDownloadError = orig;
294                                        }
295                                },
296
297                                // Test that setting an href calls onDownloadStart followed by onDownloadEnd,
298                                // and also setting of custom download message instead of "Loading..."
299                                {
300                                        name: "onDownloadStart|End",
301                                        timeout: 5000,
302                                        setUp:function(t){
303                                                cp.set("content", "");
304                                        },
305                                        runTest:function(t){
306                                                var d = new doh.Deferred();
307
308                                                // set custom message
309                                                origStart = cp.onDownloadStart;
310                                                var msg = "custom downloadstart message";
311                                                cp.onDownloadStart = function(){ return msg; };
312
313                                                startHandle = cp.on("downloadstart", d.getTestErrback(function(){
314                                                        setTimeout(d.getTestErrback(function(){
315                                                                // check that custom message was set
316                                                                doh.is(msg, cp.containerNode.innerHTML, "custom download message was set");
317
318                                                                // and then wait for the download to complete                                           
319                                                                endHandle = cp.on("downloadend", d.getTestCallback(function(){
320                                                                        // if this gets called (before the test timeout) then test succeeded
321                                                                }));
322                                                        }), 1);
323                                                }));
324                                                cp.set('href', 'getResponse.php?delay=400&messId=3');
325
326                                                return d;
327                                        },
328                                        tearDown: function(){
329                                                cp.onDownloadStart = origStart;
330                                                startHandle.remove();
331                                                endHandle.remove();
332                                        }
333                                },
334
335                                // Test that setting an href calls onUnload followed by onLoad
336                                {
337                                        name: "onLoad|onUnload",
338                                        timeout: 5000,
339                                        setUp:function(t){
340                                                cp.set("content", "");
341                                        },
342                                        runTest:function(t){
343                                                var d = new doh.Deferred();
344
345                                                loadHandle = cp.on("unload", d.getTestErrback(function(){                                                       
346                                                        unloadHandle = cp.on("load", d.getTestCallback(function(){
347                                                                // if this gets called (before the test timeout) then test succeeded
348                                                        }));
349                                                }));
350                                                cp.set('href', 'getResponse.php?delay=400&messId=2');
351
352                                                return d;
353                                        },
354                                        tearDown: function(){
355                                                loadHandle.remove();
356                                                unloadHandle.remove();
357                                        }
358                                }
359                        ]);
360
361                        function selectChildAndTestLoad(/*String*/ parentId, /*String*/ childId, /*String*/ startOfExpectedContent){
362                                // summary:
363                                //              Test deferred load of child of StackContainer widget
364
365                                var d = new doh.Deferred(),
366                                        loadingContent,
367                                        child = registry.byId(childId),
368                                        contentNode = dom.byId(childId);
369
370                                child.ioMethod = function(args){
371                                        loadingContent = helpers.innerText(contentNode);
372                                        delete child.ioMethod;
373                                        return request(args.url, args);
374                                };
375
376                                when(registry.byId(parentId).selectChild(child), function(){
377                                        setTimeout(d.getTestCallback(
378                                                function(){
379                                                        doh.is(child.loadingMessage.replace(/<[^>]*>/g, ""), loadingContent, "loading message");
380                                                        var startOfActualContent = helpers.innerText(contentNode).substring(0, startOfExpectedContent.length);
381                                                        doh.is(startOfExpectedContent, startOfActualContent, "expected content");
382                                                }
383                                        ), 1); // return from handler, then test
384                                });
385
386                                return d;
387                        }
388
389                        var st,         // stack container
390                                pane3, pane3UnloadCnt=0, pane3LoadCnt=0,        // second child of stack container (initially hidden)
391                                tmp;
392
393                        doh.register("ContentPane in StackContainer", [
394                                {
395                                        // TODO: this test should be moved to registerGroup setUp now that #3504 is fixed
396                                        //              We actually don't need to test anything here, just setUp
397                                        name: "setUp_StackContainer",
398                                        setUp:function(t){
399                                                // create a StackContainer
400                                                st = dom.byId('stackcontainer');
401                                                domClass.add(st, 'box');
402                                                st = new StackContainer({style: {height: "150px"}}, st);
403
404                                                // the first child (by default) is the one that will
405                                                // be shown
406                                                st.addChild(new TestWidget());
407
408                                                // the second child *won't* be shown until selected
409                                                pane3 = new ContentPane({
410                                                        id:"sc_pane2",
411                                                        href:'getResponse.php?delay=300&message=Loaded!',
412                                                        preventCache: true,
413                                                        onLoad: function(){ pane3LoadCnt++; },
414                                                        onUnload: function(){ pane3UnloadCnt++; }
415                                                }, document.createElement('div'));
416                                                st.addChild(pane3);
417
418                                                // start the StackContainer; shouldn't cause ContentPane to load.
419                                                st.startup();
420                                        },
421                                        runTest:function(t){
422                                                doh.t(st);
423                                                doh.is(2, st.getChildren().length);
424                                        }
425                                },
426                                {
427                                        name: "preload_false_by_default",
428                                        runTest: function(t){
429                                                doh.f(pane3.isLoaded);
430                                                doh.is('', pane3.domNode.innerHTML);
431                                        }
432                                },
433                                {
434                                        name: "unload event not called initially",
435                                        runTest: function(t){
436                                                doh.is(0, pane3UnloadCnt);
437                                        }
438                                },
439                                {
440                                        name: "load event fired when pane is shown",
441                                        timeout: 10000,
442                                        runTest: function(t){
443                                                doh.is(0, pane3LoadCnt, "onload hasn't been called yet");
444
445                                                var d = new doh.Deferred();
446
447                                                when(st.selectChild(pane3), function(){
448                                                        setTimeout(d.getTestCallback(function(){
449                                                                doh.t(pane3.isLoaded, "pane3.isLoaded");
450                                                                doh.is(1, pane3LoadCnt, "onload was called");
451                                                                doh.is('Loaded!', pane3.domNode.innerHTML);
452                                                                doh.is(0, pane3UnloadCnt,
453                                                                        "unload shouldn't have been called b/c no initial contents (#2)");
454                                                        }), 1);
455                                                });
456
457                                                doh.is(0, pane3UnloadCnt,
458                                                        "unload shouldn't have been called b/c no initial contents (#1)");
459
460                                                return d;
461                                        }
462                                },
463                                {
464                                        name: "refreshOnShow parameter works",
465                                        timeout: 10000,
466                                        setUp: function(t){
467                                                tmp = {
468                                                        onUnload: function(){ this._unload_fired = 1; },
469                                                        onLoad: function(){ this._load_fired = 1; }
470                                                };
471                                                tmp.unloadHandle = pane3.on("unload", lang.hitch(tmp, 'onUnload'));
472                                                tmp.loadHandle = pane3.on("load", lang.hitch(tmp, 'onLoad'));
473
474                                                pane3.refreshOnShow = true;
475                                        },
476                                        runTest: function(t){
477                                                var d = new doh.Deferred();
478
479                                                // Show pane 3 again and see if events fire
480                                                st.back();
481                                                st.forward().then(function(){
482                                                        setTimeout(d.getTestCallback(function(){
483                                                                doh.t(tmp._unload_fired, "unload was fired");
484                                                                doh.t(tmp._load_fired, "load was fired");
485                                                                doh.is('Loaded!', pane3.domNode.innerHTML);
486                                                        }), 1);
487                                                });
488
489                                                return d;
490                                        },
491                                        tearDown: function(){
492                                                tmp.unloadHandle.remove();
493                                                tmp.loadHandle.remove();
494                                                pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow;
495                                        }
496                                }
497                        ]);
498
499                        doh.register("ContentPane in TabContainer", [
500                                {
501                                        name: "tab1InitialLoading",
502                                        timeout: 9000,
503                                        runTest: function(){ return selectChildAndTestLoad("ttabs", "ttab1", "IT WAS"); }
504                                }
505                        ]);                     
506
507                        doh.register("ContentPane in AccordionContainer", [
508                                {
509                                        name: "pane3InitialLoading",
510                                        timeout: 9000,
511                                        runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane3", "There"); }
512                                },
513                                {
514                                        name: "cpInitialLoading",
515                                        timeout: 9000,
516                                        runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane2", "There"); }
517                                },
518                                {
519                                        name: "pane3Refresh",
520                                        timeout: 5000,
521                                        runTest: function(t){
522                                                var d = new doh.Deferred(),
523                                                wasLoading = false,
524                                                widget = registry.byId("ac_pane3"),
525                                                loadhandler = widget.connect(widget, "onDownloadStart",
526                                                        function(){
527                                                        loadhandler.remove();
528                                                                wasLoading = true;
529                                                        }
530                                                ),
531                                                showhandler = widget.connect(widget, "_onShow",
532                                                        function(){
533                                                        showhandler.remove();
534                                                                setTimeout(d.getTestCallback(
535                                                                        function(){
536                                                                                doh.f(wasLoading, "should not have reloaded")
537                                                                        }
538                                                                ), 1000);
539                                                        }
540                                                );
541
542                                                registry.byId("ac").selectChild("ac_pane3");
543                                               
544                                                return d;
545                                        }
546                                },
547                                {
548                                        name: "cpRefresh",
549                                        timeout: 9000,
550                                        runTest: function(){ return selectChildAndTestLoad("ac", "ac_pane2", "There"); }
551                                }
552                        ]);
553
554                        doh.register("TooltipDialog", [
555                                // The preload=true TooltipDialog should already be loaded, or at least be loading,
556                                // if it isn't already loading then this test will timeout.
557                                {
558                                        name: "preload=true",
559                                        timeout: 5000,
560                                        runTest: function(t){
561                                                var dlg = registry.byId("preloadTooltipDlg");
562                                                if(!dlg.isLoaded){
563                                                        doh.t(dlg.onLoadDeferred, "onLoadDeferred exists");
564                                                        return dlg.onLoadDeferred;
565                                                }
566                                        }
567                                },
568
569                                // The preload=false TooltipDialog shouldn't load until opened.
570                                {
571                                        name: "preload=false",
572                                        timeout: 5000,
573                                        runTest: function(){
574                                                // Check that it isn't loaded yet
575                                                var dlg = registry.byId("noPreloadTooltipDlg");
576                                                doh.f(dlg.isLoaded, "didn't load yet");
577       
578                                                // Open the dialog and then return Deferred waiting for it to load.
579                                                // If it doesn't load then this test will get a timeout.
580                                                var btn = registry.byId("noPreloadTooltipDlgBtn");
581                                                btn.openDropDown();
582                                                doh.t(dlg.onLoadDeferred, "onLoadDeferred exists");
583                                                return dlg.onLoadDeferred;
584                                        }
585                                }
586                        ]);
587
588                        doh.run();
589                });
590        </script>
591</head>
592<body class="claro" role="main">
593
594        <h1 class="testTitle">Dijit layout.ContentPane (delayed) remote tests</h1>
595
596        <h2>Plain ContentPane</h2>
597        <div id='cp' class='box'></div>
598
599        <h2>StackContainer</h2>
600        <div id='stackcontainer'></div>
601
602        <h2>TabContainer</h2>
603        <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/>
604        The tabs also tests to insert html in the Tab title
605        </p>
606
607        <div id="createTabButton" data-dojo-type='dijit/form/Button' data-dojo-props='onClick:function(){ createTab() }'>Create a Tab</div>
608        <div id="ttabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='tabPosition:"top", style:"width: 100%; height: 20em;"'>
609                <div id="ttab1" data-dojo-type="dijit/layout/ContentPane"
610                        data-dojo-props='href:"getResponse.php?messId=3&amp;delay=1000",
611                        closable:true'
612                title="Tab1"></div>
613                <div id="ttab2" data-dojo-type="dijit/layout/ContentPane"
614                        data-dojo-props='href:"getResponse.php?messId=4&amp;delay=1000",
615                        refreshOnShow:true, title:"Tab 2 ",
616                        selected:true,
617                        closable:true'
618                title="refreshOnShow"></div>
619                <div id="ttab3" data-dojo-type="dijit/layout/ContentPane"
620                        data-dojo-props='href:"getResponse.php?messId=5&amp;delay=1000",
621                        onClose:testClose,
622                        closable:true
623                ' title="Tab 3">
624                </div>
625        </div>
626
627        <h2>AccordionContainer</h2>
628        <div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props='id:"ac", style:"height:300px; width:400px;"'>
629                <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>
630                <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>
631                <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>
632        </div>
633
634        <h2>TooltipDialog</h2>
635        <div data-dojo-type="dijit/layout/ContentPane">
636                <div id="preloadTooltipDlgBtn" data-dojo-type="dijit/form/DropDownButton">
637                        <span>Show Preload TooltipDialog</span>
638                        <div id="preloadTooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information", preload: true, href: "doc1.html"'>
639                        </div>
640                </div>
641        </div>
642
643        <div id="noPreloadTooltipDlgBtn" data-dojo-type="dijit/form/DropDownButton">
644                <span>Show No-Preload TooltipDialog</span>
645                <div id="noPreloadTooltipDlg" data-dojo-type="dijit/TooltipDialog" data-dojo-props='title:"Enter Login information", preload: false, href: "doc1.html"'>
646                </div>
647        </div>
648
649</body>
650</html>
Note: See TracBrowser for help on using the repository browser.