Fix bugs and add tests (#145)

* Fix bug when checking if elements were parsed already parse-element.js checks if the element was already parsed by checking for the `data-pjax-click-state` attribute. However, this attribute was not added until the link is clicked. Originally, there was a separate attribute, `data-pjax-enabled`, which tracked if the element was parsed already, but that was changed in 9a86044. This commit merges the attributes for mouse clicks and key presses into one and adds that attribute when the element is initially parsed. * More bug fixes * Fix documentation for currentUrlFullReload * Ignore lines from coverage if they can't be tested * Refactor attach-link and attach-form * Fix and refactors tests * Add tests * Add TS definitions for options.requestOptions * Code cleanup
2018-04-09 23:36:32 -04:00
parent 17d8262025
commit d6bf21ed22
22 changed files with 478 additions and 153 deletions
--- a/tests/lib/proto/attach-form.js
+++ b/tests/lib/proto/attach-form.js
@@ -4,20 +4,18 @@ var on = require("../../../lib/events/on")
 var trigger = require("../../../lib/events/trigger")
 var attachForm = require("../../../lib/proto/attach-form")

-var form = document.createElement("form")
-var attr = "data-pjax-click-state"
-var preventDefault = function(e) { e.preventDefault() }
+var attr = "data-pjax-state"

 tape("test attach form prototype method", function(t) {
-  t.plan(7)
+  var form = document.createElement("form")
+  var loadUrlCalled = false

  attachForm.call({
-    options: {},
-    reload: function() {
-      t.equal(form.getAttribute(attr), "reload", "triggering a simple reload will just submit the form")
+    options: {
+      currentUrlFullReload: true
    },
    loadUrl: function() {
-      t.equal(form.getAttribute(attr), "submit", "triggering a post to the next page")
+      loadUrlCalled = true
    }
  }, form)

@@ -29,50 +27,57 @@ tape("test attach form prototype method", function(t) {

  form.action = internalUri + "#anchor"
  trigger(form, "submit")
-  t.equal(form.getAttribute(attr), "anchor-present", "internal anchor stop behavior")
+  t.equal(form.getAttribute(attr), "anchor", "internal anchor stop behavior")

  window.location.hash = "#anchor"
  form.action = internalUri + "#another-anchor"
  trigger(form, "submit")
-  t.notEqual(form.getAttribute(attr), "anchor", "differents anchors stop behavior")
+  t.equal(form.getAttribute(attr), "anchor", "different anchors stop behavior")
  window.location.hash = ""

  form.action = internalUri + "#"
  trigger(form, "submit")
  t.equal(form.getAttribute(attr), "anchor-empty", "empty anchor stop behavior")

-  form.action = internalUri
+  form.action = window.location.href
  trigger(form, "submit")
-  // see reload defined above
+  t.equal(form.getAttribute(attr), "reload", "submitting when currentUrlFullReload is true will submit normally, without XHR")
+  t.equal(loadUrlCalled, false, "loadUrl() not called")

  form.action = window.location.protocol + "//" + window.location.host + "/internal"
  form.method = "POST"
  trigger(form, "submit")
-  // see post defined above
+  t.equal(form.getAttribute(attr), "submit", "triggering a POST request to the next page")
+  t.equal(loadUrlCalled, true, "loadUrl() called correctly")

+  loadUrlCalled = false
+  form.setAttribute(attr, "")
  form.action = window.location.protocol + "//" + window.location.host + "/internal"
  form.method = "GET"
  trigger(form, "submit")
-  // see post defined above
+  t.equal(form.getAttribute(attr), "submit", "triggering a GET request to the next page")
+  t.equal(loadUrlCalled, true, "loadUrl() called correctly")

  t.end()
 })

 tape("test attach form preventDefaulted events", function(t) {
-  var callbacked = false
+  var loadUrlCalled = false
  var form = document.createElement("form")

+  // This needs to be before the call to attachForm()
+  on(form, "submit", function(event) { event.preventDefault() })
+
  attachForm.call({
    options: {},
    loadUrl: function() {
-      callbacked = true
+      loadUrlCalled = true
    }
  }, form)

  form.action = "#"
-  on(form, "submit", preventDefault)
  trigger(form, "submit")
-  t.equal(callbacked, false, "events that are preventDefaulted should not fire callback")
+  t.equal(loadUrlCalled, false, "events that are preventDefaulted should not fire callback")

  t.end()
 })
@@ -93,3 +98,57 @@ tape("test options are not modified by attachForm", function(t) {

  t.end()
 })
+
+tape("test submit triggered by keyboard", function(t) {
+  var form = document.createElement("form")
+  var pjax = {
+    options: {},
+    loadUrl: function() {
+      t.equal(form.getAttribute(attr), "submit", "triggering a internal link actually submits the form")
+    }
+  }
+
+  t.plan(2)
+
+  attachForm.call(pjax, form)
+
+  form.action = window.location.protocol + "//" + window.location.host + "/internal"
+
+  trigger(form, "keyup", {keyCode: 14})
+  t.equal(form.getAttribute(attr), "", "keycode other than 13 doesn't trigger anything")
+
+  trigger(form, "keyup", {keyCode: 13})
+  // see loadUrl defined above
+
+  t.end()
+})
+
+tape("test form elements parsed correctly", function(t) {
+  t.plan(1)
+
+  var form = document.createElement("form")
+  var input = document.createElement("input")
+  input.name = "input"
+  input.value = "value"
+  form.appendChild(input)
+
+  var params = [{
+    name: "input",
+    value: "value"
+  }]
+  var pjax = {
+    options: {},
+    loadUrl: function(href, options) {
+      t.same(options.requestOptions.requestParams, params, "form elements parsed correctly")
+    }
+  }
+
+  attachForm.call(pjax, form)
+
+  form.action = window.location.protocol + "//" + window.location.host + "/internal"
+
+  trigger(form, "submit")
+  // see loadUrl defined above
+
+  t.end()
+})
--- a/tests/lib/proto/attach-link.js
+++ b/tests/lib/proto/attach-link.js
@@ -4,27 +4,22 @@ var on = require("../../../lib/events/on")
 var trigger = require("../../../lib/events/trigger")
 var attachLink = require("../../../lib/proto/attach-link")

-var a = document.createElement("a")
-var attr = "data-pjax-click-state"
-var preventDefault = function(e) { e.preventDefault() }
+var attr = "data-pjax-state"

 tape("test attach link prototype method", function(t) {
-  t.plan(7)
+  var a = document.createElement("a")
+  var loadUrlCalled = false

  attachLink.call({
    options: {},
-    reload: function() {
-      t.equal(a.getAttribute(attr), "reload", "triggering exact same url reload the page")
-    },
    loadUrl: function() {
-      t.equal(a.getAttribute(attr), "load", "triggering a internal link actually load the page")
+      loadUrlCalled = true
    }
  }, a)

  var internalUri = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search

  a.href = internalUri
-  on(a, "click", preventDefault) // to avoid link to be open (break testing env)
  trigger(a, "click", {metaKey: true})
  t.equal(a.getAttribute(attr), "modifier", "event key modifier stop behavior")

@@ -32,46 +27,47 @@ tape("test attach link prototype method", function(t) {
  trigger(a, "click")
  t.equal(a.getAttribute(attr), "external", "external url stop behavior")

+  window.location.hash = "#anchor"
  a.href = internalUri + "#anchor"
  trigger(a, "click")
-  t.equal(a.getAttribute(attr), "anchor-present", "internal anchor stop behavior")
+  t.equal(a.getAttribute(attr), "anchor", "internal anchor stop behavior")

-  window.location.hash = "#anchor"
  a.href = internalUri + "#another-anchor"
  trigger(a, "click")
-  t.notEqual(a.getAttribute(attr), "anchor", "differents anchors stop behavior")
+  t.equal(a.getAttribute(attr), "anchor", "different anchors stop behavior")
  window.location.hash = ""

  a.href = internalUri + "#"
  trigger(a, "click")
  t.equal(a.getAttribute(attr), "anchor-empty", "empty anchor stop behavior")

-  a.href = internalUri
-  trigger(a, "click")
-  // see reload defined above
-
  a.href = window.location.protocol + "//" + window.location.host + "/internal"
  trigger(a, "click")
-  // see loadUrl defined above
+  t.equals(a.getAttribute(attr), "load", "triggering an internal link sets the state attribute to 'load'")
+  t.equals(loadUrlCalled, true, "triggering an internal link actually loads the page")

  t.end()
 })

 tape("test attach link preventDefaulted events", function(t) {
-  var callbacked = false
+  var loadUrlCalled = false
  var a = document.createElement("a")

+  // This needs to be before the call to attachLink()
+  on(a, "click", function(event) {
+    event.preventDefault()
+  })
+
  attachLink.call({
    options: {},
    loadUrl: function() {
-      callbacked = true
+      loadUrlCalled = true
    }
  }, a)

  a.href = "#"
-  on(a, "click", preventDefault)
  trigger(a, "click")
-  t.equal(callbacked, false, "events that are preventDefaulted should not fire callback")
+  t.equal(loadUrlCalled, false, "events that are preventDefaulted should not fire callback")

  t.end()
 })
@@ -92,3 +88,56 @@ tape("test options are not modified by attachLink", function(t) {

  t.end()
 })
+
+tape("test link triggered by keyboard", function(t) {
+  var a = document.createElement("a")
+  var pjax = {
+    options: {},
+    loadUrl: function() {
+      t.equal(a.getAttribute(attr), "load", "triggering a internal link actually loads the page")
+    }
+  }
+
+  t.plan(3)
+
+  attachLink.call(pjax, a)
+
+  a.href = window.location.protocol + "//" + window.location.host + "/internal"
+
+  trigger(a, "keyup", {keyCode: 14})
+  t.equal(a.getAttribute(attr), "", "keycode other than 13 doesn't trigger anything")
+
+  trigger(a, "keyup", {keyCode: 13, metaKey: true})
+  t.equal(a.getAttribute(attr), "modifier", "event key modifier stop behavior")
+
+  trigger(a, "keyup", {keyCode: 13})
+  // see loadUrl defined above
+
+  t.end()
+})
+
+tape("test link with the same URL as the current one, when currentUrlFullReload set to true", function(t) {
+  var a = document.createElement("a")
+  var pjax = {
+    options: {
+      currentUrlFullReload: true
+    },
+    reload: function() {
+      t.pass("this.reload() was called correctly")
+    },
+    loadUrl: function() {
+      t.fail("loadUrl() was called wrongly")
+    }
+  }
+
+  t.plan(2)
+
+  attachLink.call(pjax, a)
+
+  a.href = window.location.href
+
+  trigger(a, "click")
+  t.equal(a.getAttribute(attr), "reload", "reload stop behavior")
+
+  t.end()
+})
--- a/tests/lib/proto/parse-element.js
+++ b/tests/lib/proto/parse-element.js
@@ -1,7 +1,8 @@
 var tape = require("tape")

 var parseElement = require("../../../lib/proto/parse-element")
-var protoMock = {
+
+var pjax = {
  attachLink: function() { return true },
  attachForm: function() { return true }
 }
@@ -9,13 +10,18 @@ var protoMock = {
 tape("test parse element prototype method", function(t) {
  t.doesNotThrow(function() {
    var a = document.createElement("a")
-    parseElement.call(protoMock, a)
+    parseElement.call(pjax, a)
  }, "<a> element can be parsed")

  t.doesNotThrow(function() {
    var form = document.createElement("form")
-    parseElement.call(protoMock, form)
+    parseElement.call(pjax, form)
  }, "<form> element can be parsed")

+  t.throws(function() {
+    var el = document.createElement("div")
+    parseElement.call(pjax, el)
+  }, "<div> element cannot be parsed")
+
  t.end()
 })