[Summary view] [Print] [Text view]

   1  if ($.support.pjax) {
   2    module("$.pjax", {
   3      setup: function() {
   4        var self = this
   5        stop()
   6        window.iframeLoad = function(frame) {
   7          self.frame = frame
   8          window.iframeLoad = $.noop
   9          start()
  10        }
  11        $("#qunit-fixture").append("<iframe src='home.html'>")
  12        this.iframe = $("iframe")[0]
  13      },
  14      teardown: function() {
  15        delete window.iframeLoad
  16      }
  17    })
  18  
  19  
  20    asyncTest("pushes new url", function() {
  21      var frame = this.frame
  22  
  23      frame.$.pjax({
  24        url: "hello.html",
  25        container: "#main",
  26        success: function() {
  27          equal(frame.location.pathname, "/hello.html")
  28          start()
  29        }
  30      })
  31    })
  32  
  33    asyncTest("replaces container html from response data", function() {
  34      var frame = this.frame
  35  
  36      frame.$.pjax({
  37        url: "hello.html",
  38        container: "#main",
  39        success: function() {
  40          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
  41          start()
  42        }
  43      })
  44    })
  45  
  46    asyncTest("sets title to response title tag", function() {
  47      var frame = this.frame
  48  
  49      frame.$.pjax({
  50        url: "hello.html",
  51        container: "#main",
  52        success: function() {
  53          equal(frame.document.title, "Hello")
  54          ok(!frame.$("#main title").length)
  55          start()
  56        }
  57      })
  58    })
  59  
  60    asyncTest("sets title to response nested title tag", function() {
  61      var frame = this.frame
  62  
  63      frame.$.pjax({
  64        url: "nested_title.html",
  65        container: "#main",
  66        success: function() {
  67          equal(frame.document.title, "Hello")
  68          ok(!frame.$("#main title").length)
  69          start()
  70        }
  71      })
  72    })
  73  
  74    asyncTest("sets title to response last title tag", function() {
  75      var frame = this.frame
  76  
  77      frame.$.pjax({
  78        url: "double_title.html",
  79        container: "#main",
  80        success: function() {
  81          equal(frame.document.title, "World!")
  82          ok(!frame.$("#main title").length)
  83          start()
  84        }
  85      })
  86    })
  87  
  88    asyncTest("scrolls to top of page", function() {
  89      var frame = this.frame
  90  
  91      frame.window.scrollTo(0, 100)
  92      equal(frame.window.scrollY, 100)
  93  
  94      frame.$.pjax({
  95        url: "long.html",
  96        container: "#main",
  97        success: function() {
  98          equal(frame.window.scrollY, 0)
  99          start()
 100        }
 101      })
 102    })
 103  
 104    asyncTest("preserves current scroll position", function() {
 105      var frame = this.frame
 106  
 107      frame.window.scrollTo(0, 100)
 108      equal(frame.window.scrollY, 100)
 109  
 110      frame.$.pjax({
 111        url: "long.html",
 112        container: "#main",
 113        scrollTo: false,
 114        success: function() {
 115          equal(frame.window.scrollY, 100)
 116          start()
 117        }
 118      })
 119    })
 120  
 121  
 122    asyncTest("container option accepts String selector", function() {
 123      var frame = this.frame
 124  
 125      frame.$.pjax({
 126        url: "hello.html",
 127        container: "#main",
 128        success: function() {
 129          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 130          start()
 131        }
 132      })
 133    })
 134  
 135    asyncTest("container option accepts jQuery object", function() {
 136      var frame = this.frame
 137  
 138      frame.$.pjax({
 139        url: "hello.html",
 140        container: frame.$("#main"),
 141        success: function() {
 142          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 143          start()
 144        }
 145      })
 146    })
 147  
 148    asyncTest("container option accepts Element with ID", function() {
 149      var frame = this.frame
 150  
 151      frame.$.pjax({
 152        url: "hello.html",
 153        container: frame.document.getElementById("main"),
 154        success: function() {
 155          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 156          start()
 157        }
 158      })
 159    })
 160  
 161    asyncTest("url option accepts function", function() {
 162      var frame = this.frame
 163  
 164      frame.$.pjax({
 165        url: function() { return "hello.html" },
 166        container: "#main",
 167        success: function() {
 168          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 169          start()
 170        }
 171      })
 172    })
 173  
 174  
 175    asyncTest("sets X-PJAX header on XHR request", function() {
 176      var frame = this.frame
 177  
 178      frame.$.pjax({
 179        url: "env.html",
 180        container: "#main",
 181        success: function() {
 182          var env = JSON.parse(frame.$("#env").text())
 183          ok(env['HTTP_X_PJAX'])
 184          start()
 185        }
 186      })
 187    })
 188  
 189    asyncTest("sets X-PJAX-Container header to container on XHR request", function() {
 190      var frame = this.frame
 191  
 192      frame.$.pjax({
 193        url: "env.html",
 194        container: "#main",
 195        success: function() {
 196          var env = JSON.parse(frame.$("#env").text())
 197          equal(env['HTTP_X_PJAX_CONTAINER'], "#main")
 198          start()
 199        }
 200      })
 201    })
 202  
 203    asyncTest("sets hidden _pjax param on XHR GET request", function() {
 204      var frame = this.frame
 205  
 206      frame.$.pjax({
 207        url: "env.html",
 208        container: "#main",
 209        success: function() {
 210          var env = JSON.parse(frame.$("#env").text())
 211          equal(env['rack.request.query_hash']['_pjax'], '#main')
 212          start()
 213        }
 214      })
 215    })
 216  
 217    asyncTest("preserves query string on GET request", function() {
 218      var frame = this.frame
 219  
 220      frame.$.pjax({
 221        url: "env.html?foo=1&bar=2",
 222        container: "#main",
 223        complete: function() {
 224          equal(frame.location.pathname, "/env.html")
 225          equal(frame.location.search, "?foo=1&bar=2")
 226  
 227          var env = JSON.parse(frame.$("#env").text())
 228          equal(env['rack.request.query_hash']['foo'], '1')
 229          equal(env['rack.request.query_hash']['bar'], '2')
 230          start()
 231        }
 232      })
 233    })
 234  
 235  
 236    asyncTest("only fragment is inserted", function() {
 237      var frame = this.frame
 238  
 239      frame.$.pjax({
 240        url: "hello.html?layout=true",
 241        fragment: "#main",
 242        container: "#main",
 243        success: function(data) {
 244          equal(typeof data, 'string')
 245          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 246          start()
 247        }
 248      })
 249    })
 250  
 251    asyncTest("fragment sets title to response title tag", function() {
 252      var frame = this.frame
 253  
 254      frame.$.pjax({
 255        url: "hello.html?layout=true",
 256        fragment: "#main",
 257        container: "#main",
 258        success: function(data) {
 259          equal(frame.document.title, "Hello")
 260          start()
 261        }
 262      })
 263    })
 264  
 265    asyncTest("fragment sets title to response title attr", function() {
 266      var frame = this.frame
 267  
 268      frame.$.pjax({
 269        url: "fragment.html",
 270        fragment: "#foo",
 271        container: "#main",
 272        success: function(data) {
 273          equal(frame.document.title, "Foo")
 274          equal(frame.$("#main p").html(), "Foo")
 275          start()
 276        }
 277      })
 278    })
 279  
 280    asyncTest("fragment sets title to response data-title attr", function() {
 281      var frame = this.frame
 282  
 283      frame.$.pjax({
 284        url: "fragment.html",
 285        fragment: "#bar",
 286        container: "#main",
 287        success: function(data) {
 288          equal(frame.document.title, "Bar")
 289          equal(frame.$("#main p").html(), "Bar")
 290          start()
 291        }
 292      })
 293    })
 294  
 295    asyncTest("missing fragment falls back to full load", function() {
 296      var frame = this.frame
 297  
 298      frame.$.pjax({
 299        url: "hello.html?layout=true",
 300        fragment: "#missing",
 301        container: "#main"
 302      })
 303  
 304      this.iframe.onload = function() {
 305        equal(frame.$("#main p").html(), "Hello!")
 306        equal(frame.location.pathname, "/hello.html")
 307        start()
 308      }
 309    })
 310  
 311    asyncTest("missing data falls back to full load", function() {
 312      var frame = this.frame
 313  
 314      frame.$.pjax({
 315        url: "empty.html",
 316        container: "#main"
 317      })
 318  
 319      this.iframe.onload = function() {
 320        equal(frame.$("#main").html().trim(), "")
 321        equal(frame.location.pathname, "/empty.html")
 322        start()
 323      }
 324    })
 325  
 326    asyncTest("full html page falls back to full load", function() {
 327      var frame = this.frame
 328  
 329      frame.$.pjax({
 330        url: "hello.html?layout=true",
 331        container: "#main"
 332      })
 333  
 334      this.iframe.onload = function() {
 335        equal(frame.$("#main p").html(), "Hello!")
 336        equal(frame.location.pathname, "/hello.html")
 337        start()
 338      }
 339    })
 340  
 341  
 342    asyncTest("triggers pjax:start event from container", function() {
 343      var frame = this.frame
 344  
 345      var startCalled
 346  
 347      frame.$("#main").on("pjax:start", function(event, xhr, options) {
 348        startCalled = this
 349  
 350        ok(event)
 351        ok(xhr)
 352        equal(options.url, "hello.html")
 353      })
 354  
 355      frame.$.pjax({
 356        url: "hello.html",
 357        container: "#main",
 358        success: function() {
 359          equal(startCalled, frame.$("#main")[0])
 360          start()
 361        }
 362      })
 363    })
 364  
 365    asyncTest("triggers pjax:end event from container", function() {
 366      var frame = this.frame
 367  
 368      var endCalled
 369  
 370      frame.$("#main").on("pjax:end", function(event, xhr, options) {
 371        ok(event)
 372        equal(xhr.status, 200)
 373        equal(options.url, "hello.html")
 374  
 375        equal(this, frame.$("#main")[0])
 376  
 377        start()
 378      })
 379  
 380      frame.$.pjax({
 381        url: "hello.html",
 382        container: "#main"
 383      })
 384    })
 385  
 386    asyncTest("sets relatedTarget to target", function() {
 387      var frame = this.frame
 388  
 389      var endCalled
 390  
 391      frame.$("#main").on("pjax:end", function(event, xhr, options) {
 392        ok(event)
 393  
 394        equal(event.relatedTarget, frame.$("#main")[0])
 395        equal(this, frame.$("#main")[0])
 396  
 397        start()
 398      })
 399  
 400      frame.$.pjax({
 401        url: "hello.html",
 402        container: "#main",
 403        target: frame.$("#main")[0]
 404      })
 405    })
 406  
 407    asyncTest("triggers pjax:beforeSend event from container", function() {
 408      var frame = this.frame
 409  
 410      frame.$("#main").on("pjax:beforeSend", function(event, xhr, settings, options) {
 411        ok(event)
 412        ok(xhr)
 413        equal(settings.url, "hello.html?_pjax=%23main")
 414      })
 415  
 416      frame.$.pjax({
 417        url: "hello.html",
 418        container: "#main",
 419        beforeSend: function(xhr, settings) {
 420          ok(xhr)
 421          equal(settings.url, "hello.html?_pjax=%23main")
 422        },
 423        success: function(data, status, xhr) {
 424          start()
 425        }
 426      })
 427    })
 428  
 429    asyncTest("stopping pjax:beforeSend prevents the request", function() {
 430      var frame = this.frame
 431  
 432      frame.$("#main").on("pjax:beforeSend", function(event, xhr) {
 433        ok(true)
 434        setTimeout(start, 0)
 435        return false
 436      })
 437  
 438      this.iframe.onload = function() { ok(false) }
 439  
 440      frame.$.pjax({
 441        url: "hello.html",
 442        container: "#main",
 443        success: function() {
 444          ok(false)
 445        }
 446      })
 447    })
 448  
 449  
 450    asyncTest("triggers pjax:success event from container", function() {
 451      var frame = this.frame
 452  
 453      stop()
 454      frame.$("#main").on("pjax:success", function(event, data, status, xhr, options) {
 455        ok(event)
 456        ok(data)
 457        equal(status, 'success')
 458        equal(xhr.status, 200)
 459        equal(options.url, "hello.html")
 460        start()
 461      })
 462  
 463      frame.$.pjax({
 464        url: "hello.html",
 465        container: "#main",
 466        success: function(data, status, xhr) {
 467          ok(data)
 468          equal(status, 'success')
 469          equal(xhr.status, 200)
 470          start()
 471        }
 472      })
 473    })
 474  
 475    asyncTest("triggers pjax:complete event from container", function() {
 476      var frame = this.frame
 477  
 478      stop()
 479      frame.$("#main").on("pjax:complete", function(event, xhr, status, options) {
 480        ok(event)
 481        equal(xhr.status, 200)
 482        equal(status, 'success')
 483        equal(options.url, "hello.html")
 484        start()
 485      })
 486  
 487      frame.$.pjax({
 488        url: "hello.html",
 489        container: "#main",
 490        complete: function(xhr, status) {
 491          equal(xhr.status, 200)
 492          equal(status, 'success')
 493          start()
 494        }
 495      })
 496    })
 497  
 498    asyncTest("triggers pjax:error event from container", function() {
 499      var frame = this.frame
 500  
 501      stop()
 502      frame.$("#main").on("pjax:error", function(event, xhr, status, error, options) {
 503        ok(event)
 504        equal(xhr.status, 500)
 505        equal(status, 'error')
 506        equal(error.trim(), 'Internal Server Error')
 507        equal(options.url, "boom.html")
 508        start()
 509      })
 510  
 511      frame.$.pjax({
 512        url: "boom.html",
 513        container: "#main",
 514        error: function(xhr, status, error) {
 515          equal(xhr.status, 500)
 516          equal(status, 'error')
 517          equal(error.trim(), 'Internal Server Error')
 518          start()
 519        }
 520      })
 521    })
 522  
 523    asyncTest("stopping pjax:error disables default behavior", function() {
 524      var frame = this.frame
 525  
 526      frame.$("#main").on("pjax:error", function(event, xhr) {
 527        ok(true)
 528  
 529        setTimeout(function() {
 530          xhr.abort()
 531          start()
 532        }, 0)
 533  
 534        return false
 535      })
 536  
 537      this.iframe.onload = function() { ok(false) }
 538  
 539      frame.$.pjax({
 540        url: "boom.html",
 541        container: "#main"
 542      })
 543    })
 544  
 545    asyncTest("loads fallback if timeout event isn't handled", function() {
 546      var frame = this.frame
 547  
 548      frame.$.pjax({
 549        url: "timeout.html",
 550        container: "#main"
 551      })
 552  
 553      this.iframe.onload = function() {
 554        equal(frame.$("#main p").html(), "SLOW DOWN!")
 555        equal(frame.location.pathname, "/timeout.html")
 556        start()
 557      }
 558    })
 559  
 560    asyncTest("stopping pjax:timeout disables default behavior", function() {
 561      var frame = this.frame
 562  
 563      frame.$("#main").on("pjax:timeout", function(event, xhr) {
 564        ok(true)
 565  
 566        setTimeout(function() {
 567          xhr.abort()
 568          start()
 569        }, 0)
 570  
 571        return false
 572      })
 573  
 574      this.iframe.onload = function() { ok(false) }
 575  
 576      frame.$.pjax({
 577        url: "timeout.html",
 578        container: "#main"
 579      })
 580    })
 581  
 582    asyncTest("500 loads fallback", function() {
 583      var frame = this.frame
 584  
 585      frame.$.pjax({
 586        url: "boom.html",
 587        container: "#main"
 588      })
 589  
 590      this.iframe.onload = function() {
 591        equal(frame.$("#main p").html(), "500")
 592        equal(frame.location.pathname, "/boom.html")
 593        start()
 594      }
 595    })
 596  
 597  
 598    function goBack(frame, callback) {
 599      setTimeout(function() {
 600        frame.$("#main").one("pjax:end", callback)
 601        frame.history.back()
 602      }, 0)
 603    }
 604  
 605    function goForward(frame, callback) {
 606      setTimeout(function() {
 607        frame.$("#main").one("pjax:end", callback)
 608        frame.history.forward()
 609      }, 0)
 610    }
 611  
 612    asyncTest("popstate going back to page", function() {
 613      var frame = this.frame
 614  
 615      equal(frame.location.pathname, "/home.html")
 616      equal(frame.document.title, "Home")
 617  
 618      frame.$.pjax({
 619        url: "hello.html",
 620        container: "#main",
 621        complete: function() {
 622          equal(frame.location.pathname, "/hello.html")
 623          equal(frame.document.title, "Hello")
 624  
 625          ok(frame.history.length > 1)
 626          goBack(frame, function() {
 627            equal(frame.location.pathname, "/home.html")
 628            equal(frame.document.title, "Home")
 629            start()
 630          })
 631        }
 632      })
 633    })
 634  
 635    asyncTest("popstate going forward to page", function() {
 636      var frame = this.frame
 637  
 638      equal(frame.location.pathname, "/home.html")
 639      equal(frame.document.title, "Home")
 640  
 641      frame.$.pjax({
 642        url: "hello.html",
 643        container: "#main",
 644        complete: function() {
 645          equal(frame.location.pathname, "/hello.html")
 646          equal(frame.document.title, "Hello")
 647  
 648          ok(frame.history.length > 1)
 649          goBack(frame, function() {
 650            goForward(frame, function() {
 651              equal(frame.location.pathname, "/hello.html")
 652              equal(frame.document.title, "Hello")
 653              start()
 654            })
 655          })
 656        }
 657      })
 658    })
 659  
 660    asyncTest("popstate preserves scroll position", function() {
 661      var frame = this.frame
 662  
 663      equal(frame.location.pathname, "/home.html")
 664  
 665      frame.window.scrollTo(0, 100)
 666      equal(frame.window.scrollY, 100)
 667  
 668      frame.$.pjax({
 669        url: "long.html",
 670        container: "#main",
 671        complete: function() {
 672          equal(frame.location.pathname, "/long.html")
 673          equal(frame.window.scrollY, 0)
 674  
 675          ok(frame.history.length > 1)
 676          goBack(frame, function() {
 677            equal(frame.location.pathname, "/home.html")
 678  
 679            // PENDING: Popstate scroll position restore doesn't seem to
 680            // work inside an iframe.
 681            // equal(frame.window.scrollY, 100)
 682  
 683            start()
 684          })
 685        }
 686      })
 687    })
 688  
 689    asyncTest("popstate going back to page triggers pjax:popstate event", function() {
 690      var frame = this.frame
 691  
 692      equal(frame.location.pathname, "/home.html")
 693  
 694      frame.$('#main').on('pjax:popstate', function(event) {
 695        equal(frame.location.pathname, "/home.html")
 696        equal(event.state.container, '#main')
 697        equal(event.direction, 'back')
 698        start()
 699      })
 700  
 701      frame.$.pjax({
 702        url: "hello.html",
 703        container: "#main",
 704        complete: function() {
 705          equal(frame.location.pathname, "/hello.html")
 706  
 707          ok(frame.history.length > 1)
 708          goBack(frame, function() {})
 709        }
 710      })
 711    })
 712  
 713    asyncTest("popstate preserves GET data", function() {
 714      var frame = this.frame
 715  
 716      frame.$.pjax({
 717        url: "env.html?foo=1",
 718        data: { bar: 2 },
 719        container: "#main",
 720        complete: function() {
 721          equal(frame.location.pathname, "/env.html")
 722          equal(frame.location.search, "?foo=1&bar=2")
 723  
 724          var env = JSON.parse(frame.$("#env").text())
 725          equal(env['rack.request.query_hash']['foo'], '1')
 726          equal(env['rack.request.query_hash']['bar'], '2')
 727  
 728          frame.$.pjax({
 729            url: "hello.html",
 730            container: "#main",
 731            complete: function() {
 732              equal(frame.location.pathname, "/hello.html")
 733  
 734              ok(frame.history.length > 2)
 735              goBack(frame, function() {
 736                equal(frame.location.pathname, "/env.html")
 737                equal(frame.location.search, "?foo=1&bar=2")
 738  
 739                var env = JSON.parse(frame.$("#env").text())
 740                equal(env['rack.request.query_hash']['foo'], '1')
 741                equal(env['rack.request.query_hash']['bar'], '2')
 742  
 743                start()
 744              })
 745            }
 746          })
 747        }
 748      })
 749    })
 750  
 751    asyncTest("follows redirect with X-PJAX-URL header", function() {
 752      var frame = this.frame
 753  
 754      frame.$.pjax({
 755        url: "redirect.html",
 756        container: "#main",
 757        success: function() {
 758          equal(frame.location.pathname, "/hello.html")
 759          equal(frame.$("#main").html().trim(), "<p>Hello!</p>")
 760          start()
 761        }
 762      })
 763    })
 764  
 765    asyncTest("lazily sets initial $.pjax.state", function() {
 766      var frame = this.frame
 767  
 768      ok(!frame.$.pjax.state)
 769  
 770      frame.$.pjax({
 771        url: "hello.html",
 772        container: "#main",
 773        success: start
 774      })
 775  
 776      ok(frame.$.pjax.state.id)
 777      equal(frame.$.pjax.state.url, frame.location.origin + "/home.html")
 778      equal(frame.$.pjax.state.container, "#main")
 779    })
 780  
 781    asyncTest("updates $.pjax.state to new page", function() {
 782      var frame = this.frame
 783  
 784      frame.$.pjax({
 785        url: "hello.html",
 786        container: "#main",
 787        success: function() {
 788          ok(frame.$.pjax.state.id)
 789          equal(frame.$.pjax.state.url, frame.location.origin + "/hello.html")
 790          equal(frame.$.pjax.state.container, "#main")
 791          start()
 792        }
 793      })
 794    })
 795  
 796    asyncTest("new id is generated for new pages", function() {
 797      var frame = this.frame
 798  
 799      var oldId
 800  
 801      frame.$.pjax({
 802        url: "hello.html",
 803        container: "#main",
 804        success: function() {
 805          ok(frame.$.pjax.state.id)
 806          notEqual(oldId, frame.$.pjax.state.id)
 807          start()
 808        }
 809      })
 810  
 811      ok(frame.$.pjax.state.id)
 812      oldId = frame.$.pjax.state.id
 813    })
 814  
 815    asyncTest("id is the same going back", function() {
 816      var frame = this.frame
 817  
 818      var oldId
 819  
 820      equal(frame.location.pathname, "/home.html")
 821  
 822      frame.$.pjax({
 823        url: "hello.html",
 824        container: "#main",
 825        complete: function() {
 826          ok(frame.$.pjax.state.id)
 827          notEqual(oldId, frame.$.pjax.state.id)
 828  
 829          ok(frame.history.length > 1)
 830          goBack(frame, function() {
 831            ok(frame.$.pjax.state.id)
 832            equal(oldId, frame.$.pjax.state.id)
 833            start()
 834          })
 835        }
 836      })
 837  
 838      ok(frame.$.pjax.state.id)
 839      oldId = frame.$.pjax.state.id
 840    })
 841  }