pjax/tests/lib/switch-selectors.js

var tape = require("tape")

var switchesSelectors = require("../../lib/switches-selectors.js")
var noop = require("../../lib/util/noop")

var pjax = {
  onSwitch: function() {
    console.log("Switched")
  },
  state: {},
  log: noop
}

// @author darylteo
tape("test switchesSelectors", function(t) {
  // switchesSelectors relies on a higher level function callback
  // should really be passed in instead so I'll leave it here as a TODO:
  var tmpEl = document.implementation.createHTMLDocument()

  // a div container is used because swapping the containers
  // will generate a new element, so things get weird
  // using "body" generates a lot of testling cruft that I don't
  // want so let's avoid that
  var container = document.createElement("div")
  container.innerHTML = "<p>Original Text</p><span>No Change</span>"
  document.body.appendChild(container)

  var container2 = tmpEl.createElement("div")
  container2.innerHTML = "<p>New Text</p><span>New Span</span>"
  tmpEl.body.appendChild(container2)

  switchesSelectors.bind(pjax)(
    {}, // switches
    {}, // switchesOptions
    ["p"], // selectors,
    tmpEl, // fromEl
    document, // toEl,
    {} // options
  )

  t.equals(container.innerHTML, "<p>New Text</p><span>No Change</span>", "Elements correctly switched")

  t.end()
})

tape("test switchesSelectors when number of elements don't match", function(t) {
  var newTempDoc = document.implementation.createHTMLDocument()
  var originalTempDoc = document.implementation.createHTMLDocument()

  // a div container is used because swapping the containers
  // will generate a new element, so things get weird
  // using "body" generates a lot of testling cruft that I don't
  // want so let's avoid that
  var container = originalTempDoc.createElement("div")
  container.innerHTML = "<p>Original text</p><span>No change</span>"
  originalTempDoc.body.appendChild(container)

  var container2 = newTempDoc.createElement("div")
  container2.innerHTML = "<p>New text</p><p>More new text</p><span>New span</span>"
  newTempDoc.body.appendChild(container2)

  var switchSelectorsFn = switchesSelectors.bind(pjax,
    {}, // switches
    {}, // switchesOptions
    ["p"], // selectors,
    newTempDoc, // fromEl
    originalTempDoc, // toEl,
    {} // options
  )

  t.throws(switchSelectorsFn, null, "error was thrown properly since number of elements don't match")

  t.end()
})