git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/layout/ContentPane.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Test ContentPane</title>
   6         <style type="text/css">
   7                 @import "../../../dojo/resources/dojo.css";
   8                 @import "../../themes/tundra/tundra.css";
   9                 @import "../css/dijitTests.css";
  10
  11                 .box {
  12                         border: 1px solid black;
  13                         padding: 8px;
  14                 }
  15
  16                 .dijitTestWidget {
  17                         border: 1px dashed red;
  18                         background-color: #C0E209 ;
  19                 }
  20         </style>
  21
  22         <script type="text/javascript" src="../../../dojo/dojo.js"
  23                 djConfig="isDebug: true"></script>
  24         <script type="text/javascript">
  25                 dojo.require("doh.runner");
  26                 dojo.require("dijit.layout.ContentPane");
  27                 dojo.require("dijit._Container");
  28                 dojo.require("dijit._Templated");
  29                 dojo.require("dijit.layout.StackContainer");
  30
  31                 // create a do nothing, only for test widget
  32                 dojo.declare("dijit.TestWidget",
  33                         [dijit._Widget, dijit._Templated], {
  34                         templateString: "<span class='dijitTestWidget'></span>"
  35                 });
  36
  37
  38                 dojo.addOnLoad(function(){
  39                         doh.register("pane1",
  40                                 [
  41                                         {
  42                                                 name: "no_autoparse",
  43                                                 runTest: function(t){
  44                                                         if(dijit.byId("pane1")){
  45                                                                 throw doh._AssertFailure("Page got autoparsed when it shouldn't");
  46                                                         }
  47                                                 }
  48                                         }
  49                                 ]
  50                         );
  51
  52                         var pane2;
  53
  54                         doh.registerGroup("pane2",
  55                                 [
  56                                         {
  57                                                 name: "clear_content",
  58                                                 setUp: function(t){
  59                                                         pane2 = new dijit.layout.ContentPane({
  60                                                                 preventCache: true
  61                                                         }, dojo.byId("pane2"));
  62                                                         pane2.setContent();// pass undefined on purpose
  63                                                 },
  64                                                 runTest: function(t){
  65                                                         t.assertEqual(0, dijit._Container.prototype.getChildren.call(pane2).length);
  66                                                         t.assertEqual("", pane2.domNode.innerHTML)
  67                                                 }
  68                                         },
  69                                         {
  70                                                 name: "setContent_String",
  71                                                 setUp: function(){
  72                                                         pane2.setContent();
  73                                                 },
  74                                                 runTest: function(t){
  75                                                         var msg = "<h3>a simple html string</h3>";
  76                                                         pane2.setContent(msg);
  77                                                         t.assertEqual(msg, pane2.domNode.innerHTML.toLowerCase());
  78                                                 }
  79                                         },
  80                                         {
  81                                                 name: "setContent_DOMNode",
  82                                                 setUp: function(t){
  83                                                         var div = dojo.doc.createElement('div');
  84                                                         div.innerHTML = "setContent( [DOMNode] )";
  85                                                         div.setAttribute('dojoType', 'dijit.TestWidget');
  86                                                         pane2.setContent(div);
  87                                                 },
  88                                                 runTest: function(t){
  89                                                         t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length);
  90                                                 },
  91                                                 tearDown: function(t){
  92                                                         pane2.setContent(); // clear content for next test
  93                                                 }
  94                                         },
  95                                         {
  96                                                 name: "setContent_NodeList",
  97                                                 setUp: function(t){
  98                                                         var div = dojo.doc.createElement('div');
  99                                                         div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>"
 100                                                                                         +"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
 101                                                                                         +"<div dojotype='dijit.TestWidget'>below</div>";
 102
 103                                                         var list = div.childNodes;
 104                                                         pane2.setContent(div.childNodes);
 105                                                 },
 106                                                 runTest: function(t){
 107                                                         t.assertEqual(2, dijit._Container.prototype.getChildren.call(pane2).length);
 108
 109                                                         //regular DOM check
 110                                                         var children = pane2.domNode.childNodes;
 111                                                         t.assertEqual(4, children.length);
 112                                                         t.assertEqual("Testing!", children[1].nodeValue);
 113                                                         t.assertEqual("div", children[2].nodeName.toLowerCase());
 114                                                         t.assertEqual("<p><span><b>deep nested</b></span></p>", children[2].innerHTML.toLowerCase());
 115                                                 }
 116                                         },
 117                                         {
 118                                                 name: "setContent_dojo_NodeList",
 119                                                 setUp: function(t){
 120                                                         pane2.setContent();
 121                                                 },
 122                                                 runTest: function(t){
 123                                                         var div = dojo.doc.createElement('div');
 124                                                         div.innerHTML = "<div dojotype='dijit.TestWidget'>above</div>"
 125                                                                                 +"Testing!<div><p><span><b>Deep nested</b></span></p></div>"
 126                                                                                 +"<div dojotype='dijit.TestWidget'>below</div>";
 127
 128                                                         var list = new dojo.NodeList();
 129                                                         dojo.forEach(div.childNodes, function(n){
 130                                                                 list.push(n.cloneNode(true));
 131                                                         });
 132
 133                                                         pane2.setContent(list);
 134                                                         t.assertEqual(4, pane2.domNode.childNodes.length);
 135                                                 }
 136                                         },
 137                                         {
 138                                                 name: "extractContent",
 139                                                 runTest: function(t){
 140                                                         var def = pane2.extractContent;
 141                                                         t.assertFalse(def);
 142
 143                                                         // test that it's actually working
 144                                                         pane2.extractContent = true;
 145                                                         pane2.setContent('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" '
 146                                                                 +'"http://www.w3.org/TR/html4/strict.dtd">'
 147                                                                 +'<html><head><style>body{font-weight:bold;}</style></head>'
 148                                                                 +'<body>extractContent test</body></html>');
 149
 150                                                         t.assertEqual("extractContent test", pane2.domNode.innerHTML);
 151
 152                                                         // reset back to default
 153                                                         pane2.extractContent = def;
 154                                                 }
 155                                         },
 156
 157                                         /////////////////////////////////////////////////////////////////////////
 158                                         // We assume that our network connection has a maximum of 1.5 sec latency
 159                                         /////////////////////////////////////////////////////////////////////////
 160                                         {
 161                                                 name: "setHref_loading",
 162                                                 timeout: 1800,
 163                                                 setUp: function(t){
 164                                                         pane2.setHref('getResponse.php?messId=1');
 165                                                 },
 166                                                 runTest: function(t){
 167                                                         var d = new tests.Deferred();
 168                                                         setTimeout(d.getTestCallback(
 169                                                                 function(){
 170                                                                         t.assertEqual(1, dijit._Container.prototype.getChildren.call(pane2).length);
 171                                                                 })
 172                                                         , 1500);
 173                                                         return d;
 174                                                 }
 175                                         },
 176                                         {
 177                                                 name: "setHref_then_cancel",
 178                                                 timeout: 2800,
 179                                                 setUp: function(t){
 180                                                         pane2.setContent();// clear previous
 181                                                 },
 182                                                 runTest: function(t){
 183                                                         var msg = "This should NEVER be seen!";
 184                                                         pane2.setHref('getResponse.php?delay=1000&message='+encodeURI(msg));
 185                                                         var d = new t.Deferred();
 186                                                         setTimeout(d.getTestCallback(
 187                                                                 function(){
 188                                                                         t.assertFalse(pane2.domNode.innerHTML == msg);
 189                                                                 }
 190                                                         ), 2500);
 191
 192                                                         pane2.cancel();
 193
 194                                                         return d;
 195                                                 }
 196                                         },
 197                                         {
 198                                                 // test that setHref cancels a inflight setHref
 199                                                 name: "setHref_cancels_previous_setHref",
 200                                                 timeout: 2800,
 201                                                 setUp: function(t){
 202                                                         pane2.setContent();
 203                                                 },
 204                                                 runTest: function(t){
 205                                                         var msgCanceled = "This should be canceled";
 206                                                         pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
 207
 208                                                         var msg = "This message should win over the previous";
 209                                                         setTimeout(function(){
 210                                                                 pane2.setHref("getResponse.php?message="+encodeURI(msg));
 211                                                         }, 900);
 212
 213                                                         var d = new t.Deferred();
 214                                                         setTimeout(d.getTestCallback(
 215                                                                 function(){
 216                                                                         t.assertEqual(msg, pane2.domNode.innerHTML);
 217                                                                 }
 218                                                         ), 2500);
 219                                                         return d;
 220                                                 }
 221                                         },
 222                                         {
 223                                                 name: "setContent_cancels_setHref",
 224                                                 timeout: 2800,
 225                                                 setUp: function(t){
 226                                                         pane2.setContent();
 227                                                 },
 228                                                 runTest: function(t){
 229                                                         var msgCanceled = "This message be canceled";
 230                                                         pane2.setHref("getResponse.php?delay=1000&message="+encodeURI(msgCanceled));
 231
 232                                                         var msg = "This message should win over the inflight one";
 233                                                         setTimeout(function(){
 234                                                                 pane2.setContent(msg);
 235                                                         }, 900);
 236
 237                                                         var d = new t.Deferred();
 238                                                         setTimeout(d.getTestCallback(
 239                                                                 function(){
 240                                                                         t.assertEqual(msg, pane2.domNode.innerHTML);
 241                                                                 }
 242                                                         ), 2500);
 243                                                         return d;
 244                                                 }
 245                                         },
 246                                         {
 247                                                 name: "refresh",
 248                                                 timeout: 1900,
 249                                                 setUp: function(t){
 250                                                         pane2.setHref("getResponse.php?message="+encodeURI('initial load'));
 251                                                 },
 252                                                 runTest: function(t){
 253                                                         var msg = 'refreshed load'
 254                                                         setTimeout(function(){
 255                                                                 pane2.href = "getResponse.php?message="+encodeURI(msg);
 256                                                                 pane2.refresh();
 257                                                         }, 100);
 258
 259                                                         var d = new t.Deferred();
 260                                                         setTimeout(d.getTestCallback(
 261                                                                 function(){
 262                                                                         t.assertEqual(msg, pane2.domNode.innerHTML);
 263                                                                 }
 264                                                         ), 1600);
 265                                                         return d;
 266
 267                                                 }
 268                                         },
 269                                         {
 270                                                 name: "isLoaded",
 271                                                 timeout: 1800,
 272                                                 setUp: function(t){
 273                                                         pane2.setContent();
 274                                                 },
 275                                                 runTest: function(t){
 276                                                         t.assertTrue(pane2.isLoaded);
 277
 278                                                         pane2.setHref("getResponse.php?delay=300&message=test");
 279
 280                                                         t.assertFalse(pane2.isLoaded);
 281
 282                                                         var ilObj = {}; // a object to get a reference instead of copy
 283
 284                                                         // probe after 200ms
 285                                                         setTimeout(function(){
 286                                                                 ilObj.probed = pane2.isLoaded;
 287                                                         }, 200);
 288
 289                                                         var d = new t.Deferred();
 290                                                         setTimeout(d.getTestCallback(
 291                                                                 function(){
 292                                                                         t.assertTrue(pane2.isLoaded);
 293                                                                         t.assertFalse(ilObj.probed);
 294                                                                 }
 295                                                         ), 1500);
 296                                                         return d;
 297                                                 }
 298                                         },
 299                                         {
 300                                                 // test that we does'nt load a response if we are hidden
 301                                                 name: "wait_with_load_when_domNode_hidden",
 302                                                 timeout: 1800,
 303                                                 setUp: function(t){
 304                                                         pane2.domNode.style.display = 'none';
 305                                                         pane2.setContent();
 306                                                 },
 307                                                 runTest: function(t){
 308                                                         pane2._msg = "This text should not be loaded until after widget is shown";
 309                                                         pane2.setHref("getResponse.php?message="+encodeURI(pane2._msg));
 310                                                         var d = new t.Deferred();
 311                                                         setTimeout(d.getTestCallback(
 312                                                                 function(){
 313                                                                         t.assertFalse(pane2.domNode.innerHTML == pane2._msg);
 314                                                                 }
 315                                                         ), 1500);
 316                                                         return d;
 317                                                 },
 318                                                 tearDown: function(t){
 319                                                         pane2.domNode.style.display = "";
 320                                                 }
 321                                         },
 322                                         {
 323                                                 name: "onDownloadError",
 324                                                 timeout: 1800,
 325                                                 setUp: function(t){
 326                                                         pane2.setContent();
 327                                                 },
 328                                                 runTest: function(t){
 329                                                         var res = {};
 330                                                         var msg = "Error downloading modified message";
 331                                                         var orig = pane2.onDownloadError;
 332
 333
 334                                                         pane2.onDownloadError = function(){
 335                                                                 return msg;
 336                                                         }
 337
 338                                                         this.onError = function(e){
 339                                                                 res.onError = true;
 340                                                                 res.onError_Arg = !!e;
 341                                                                 return "This message should be ignored as it gets invoked by dojo.connect";
 342                                                         }
 343
 344                                                         var evtHandle = dojo.connect(pane2, 'onDownloadError', this, 'onError');
 345
 346                                                         // test onDownloadError
 347                                                         pane2.setHref('nonexistant');
 348
 349                                                         // do the test
 350                                                         var d = new t.Deferred();
 351                                                         setTimeout(function(){
 352                                                                 try{
 353                                                                         if(!res.onError){
 354                                                                                 d.errback(new doh._AssertFailure("onDownloadError was never invoked"));
 355                                                                         }
 356                                                                         if(!res.onError_Arg){
 357                                                                                 d.errback(new doh._AssertFailure("onDownloadError did'nt get any argument on invokation"));
 358                                                                         }
 359                                                                         if(pane2.domNode.innerHTML != msg){
 360                                                                                 d.errback(new doh._AssertFailure("custom errortext not set"));
 361                                                                         }
 362                                                                         d.callback(true);
 363                                                                 }catch(e){
 364                                                                         d.errback(e);
 365                                                                 }finally{
 366                                                                         // reset to default
 367                                                                         dojo.disconnect(evtHandle);
 368                                                                         pane2.onDownloadError = orig;
 369                                                                 }
 370                                                         }, 1500);
 371
 372                                                         return d;
 373                                                 }
 374                                         },
 375                                         {
 376                                                 name: "onLoad|Unload_onDownloadStart|End",
 377                                                 timeout: 2400,
 378                                                 setUp:function(t){
 379                                                         pane2.setContent();
 380                                                 },
 381                                                 runTest:function(t){
 382                                                         var obj = {
 383                                                                 start:function(){
 384                                                                         this.start_called = 1;
 385                                                                         // check that custom message gets set
 386                                                                         setTimeout(function(){
 387                                                                                 obj.start_msg = (pane2.domNode.innerHTML == msg);
 388                                                                         }, 20);
 389                                                                 },
 390                                                                 end: function(){ this.end_called = 1; },
 391                                                                 load: function(){ this.load_called = 1; },
 392                                                                 unload: function(){ this.unload_called = 1; }
 393                                                         };
 394
 395                                                         //set custom message
 396                                                         var origStart = pane2.onDownloadStart;
 397                                                         var msg = "custom downloadstart message";
 398                                                         pane2.onDownloadStart = function(){ return msg; };
 399
 400                                                         var startHandler = dojo.connect(pane2, 'onDownloadStart', obj, 'start');
 401                                                         var endHandler = dojo.connect(pane2, 'onDownloadEnd', obj, 'end');
 402                                                         var loadHandler = dojo.connect(pane2, 'onLoad', obj, 'load');
 403                                                         var unloadHandler = dojo.connect(pane2, 'onUnload', obj, 'unload');
 404
 405                                                         pane2.setHref('getResponse.php?delay=400');
 406
 407                                                         var d = new t.Deferred();
 408                                                         setTimeout(function(){
 409                                                                 try{
 410                                                                         if(!obj.start_called){
 411                                                                                 d.errback(new doh._AssertFailure('onDownloadStart not called'));
 412                                                                         }
 413                                                                         if(!obj.start_msg){
 414                                                                                 d.errback(new doh._AssertFailure('custom download message not set'));
 415                                                                         }
 416                                                                         if(!obj.end_called){
 417                                                                                 d.errback(new doh._AssertFailure('onDownloadEnd not called'));
 418                                                                         }
 419                                                                         if(!obj.unload_called){
 420                                                                                 d.errback(new doh._AssertFailure('onUnload not called'));
 421                                                                         }
 422                                                                         if(!obj.load_called){
 423                                                                                 d.errback(new doh._AssertFailure('onLoad not called'));
 424                                                                         }
 425                                                                         d.callback(true);
 426                                                                 }catch(e){
 427                                                                         d.errback(e);
 428                                                                 }finally{
 429                                                                         dojo.disconnect(endHandler);
 430                                                                         dojo.disconnect(startHandler);
 431                                                                         dojo.disconnect(unloadHandler);
 432                                                                         dojo.disconnect(loadHandler);
 433
 434                                                                         pane2.onDownloadStart = origStart;
 435                                                                 }
 436                                                         }, 1900);
 437
 438                                                         return d;
 439                                                 }
 440                                         }
 441
 442                                 ]
 443                         );
 444
 445                         var pane3, st, tmp;
 446
 447                         doh.registerGroup("child_to_StackContainer",
 448                                 [
 449                                         {
 450                                                 // TODO: this test should be moved to registerGroup setUp when #3504 is fixed
 451                                                 //              We actually dont need to test anything here, just setUp
 452                                                 name: "setUp_StackContainer",
 453                                                 setUp:function(t){
 454                                                         st = dojo.byId('stackcontainer');
 455                                                         dojo.addClass(st, 'box');
 456                                                         st = new dijit.layout.StackContainer({}, st);
 457
 458                                                         st.addChild(new dijit.TestWidget());
 459                                                         pane3 = new dijit.layout.ContentPane({
 460                                                                 href:'getResponse.php?delay=300&message=Loaded!',
 461                                                                 preventCache: true
 462                                                         }, dojo.doc.createElement('div'));
 463                                                         st.addChild(pane3);
 464
 465                                                         pane3.startup(); // starts the ContentPane
 466                                                 },
 467                                                 runTest:function(t){
 468                                                         t.assertTrue(st);
 469                                                         t.assertEqual(2, st.getChildren().length);
 470                                                 }
 471                                         },
 472                                         {
 473                                                 name: "preload_false_by_default",
 474                                                 runTest: function(t){
 475                                                         t.assertFalse(pane3.isLoaded);
 476                                                         t.assertEqual('', pane3.domNode.innerHTML);
 477                                                 }
 478                                         },
 479                                         {
 480                                                 name: "startLoad when selected",
 481                                                 timeout: 2100,
 482                                                 runTest: function(t){
 483                                                         st.selectChild(pane3);
 484
 485                                                         var d = new t.Deferred();
 486                                                         setTimeout(d.getTestCallback(
 487                                                                 function(){
 488                                                                         t.assertTrue(pane3.isLoaded);
 489                                                                         t.assertEqual('Loaded!', pane3.domNode.innerHTML);
 490                                                                 }
 491                                                         ), 1800);
 492
 493                                                         return d;
 494                                                 }
 495                                         },
 496                                         {
 497                                                 name: "refreshOnShow",
 498                                                 timeout: 2100,
 499                                                 setUp: function(t){
 500                                                         tmp = {
 501                                                                 onUnload: function(){ this._unload_fired = 1; },
 502                                                                 onLoad: function(){ this._load_fired = 1; }
 503                                                         };
 504                                                         tmp.unload = dojo.connect(pane3, 'onUnload', tmp, 'onUnload');
 505                                                         tmp.load = dojo.connect(pane3, 'onLoad', tmp, 'onLoad');
 506
 507                                                         pane3.refreshOnShow = true;
 508                                                 },
 509                                                 runTest: function(t){
 510                                                         var d = new t.Deferred();
 511                                                         st.back();
 512                                                         st.forward();
 513
 514                                                         setTimeout(d.getTestCallback(function(){
 515                                                                 t.assertTrue(tmp._unload_fired);
 516                                                                 t.assertTrue(tmp._load_fired);
 517                                                                 t.assertEqual('Loaded!', pane3.domNode.innerHTML);
 518                                                         }), 1800);
 519
 520                                                         return d;
 521                                                 },
 522                                                 tearDown: function(){
 523                                                         dojo.disconnect(tmp.unload);
 524                                                         dojo.disconnect(tmp.load);
 525                                                         pane3.refreshOnShow = pane3.constructor.prototype.refreshOnShow;
 526                                                 }
 527                                         },
 528                                         {
 529                                                 name: "downloadTriggeredOnStartup",
 530                                                 timeout: 1800,
 531                                                 runTest: function(t){
 532                                                         var href = 'getResponse.php?message=Loaded!'
 533                                                         var pane4 = new dijit.layout.ContentPane({
 534                                                                 href:href,
 535                                                                 preventCache: true
 536                                                         }, dojo.doc.createElement('div'));
 537
 538                                                         dojo.place(pane4.domNode, pane3.domNode, 'after');
 539
 540                                                         pane4.startup(); // parser should call startup when djConfig.parseOnLoad=true
 541
 542                                                         var d = new t.Deferred();
 543                                                         setTimeout(d.getTestCallback(function(){
 544                                                                 t.assertEqual('Loaded!', pane4.domNode.innerHTML);
 545                                                                 pane4.destroy();
 546                                                         }), 1500);
 547                                                         return d;
 548                                                 }
 549                                         }
 550                                 ]
 551                         );
 552
 553                         doh.run();
 554                 });
 555         </script>
 556 </head>
 557 <body class="tundra">
 558         <h2>dijit.layout.ContentPane test</h2>
 559         <h3>Test designed to run on localhost (minimize impact from network latency)</h3>
 560
 561         <h4>This should NOT be parsed automatically</h4>
 562         <div dojoType="dijit.layout.ContentPane" class="box" hasShadow="true" id="pane1">
 563                 <div dojoType='dijit.TestWidget'>If this has a different background and a red border, the page parsed when it shouldn't</div>
 564         </div>
 565         <br/><h3>Testing ContentPane</h3>
 566         <div id='pane2' class='box'>
 567                 Even tough the entire page isn't scanned for widgets,
 568                 any sub widgets of a ContentPane will be created when a ContentPane is created<br/>
 569                 <span id="zero" dojoType='dijit.TestWidget'>This should have a backgroundcolor and a border</span>
 570                 <div id="one" dojoType="dijit._Widget"></div>
 571                 <div id="two" dojoType="dijit._Widget"></div>
 572                 <div id="three" dojoType="dijit._Widget"></div>
 573         </div>
 574         <br/><br/>
 575         <div id='stackcontainer'></div>
 576 </body>
 577 </html>