pjax/tests/lib/events.js

var tape = require("tape");

var on = require("../../lib/events/on");
var off = require("../../lib/events/off");
var trigger = require("../../lib/events/trigger");

var el = document.createElement("div");
var el2 = document.createElement("span");
var els = [el, el2];

var classCb = function() {
  this.className += "on";
};
var attrCb = function() {
  this.setAttribute("data-state", this.getAttribute("data-state") + "ON");
};

tape("test events on/off/trigger for one element, one event", function(t) {
  el.className = "";
  on(el, "click", classCb);
  trigger(el, "click");
  t.equal(el.className, "on", "attached callback has been fired properly");

  el.className = "off";
  off(el, "click", classCb);
  trigger(el, "click");
  t.equal(el.className, "off", "triggered event didn't fire detached callback");

  t.end();
});

tape("test events on/off/trigger for multiple elements, one event", function(
  t
) {
  el.className = "";
  el2.className = "";

  on(els, "click", classCb);
  trigger(els, "click");
  t.equal(
    el.className,
    "on",
    "attached callback has been fired properly on the first element"
  );
  t.equal(
    el2.className,
    "on",
    "attached callback has been fired properly on the second element"
  );

  el.className = "off";
  el2.className = "off";
  off(els, "click", classCb);
  trigger(els, "click");
  t.equal(
    el.className,
    "off",
    "triggered event didn't fire detached callback on the first element"
  );
  t.equal(
    el2.className,
    "off",
    "triggered event didn't fire detached callback on the second element"
  );

  t.end();
});

tape("test events on/off/trigger for one element, multiple events", function(
  t
) {
  el.className = "";
  on(el, "click mouseover", classCb);
  trigger(el, "click mouseover");
  t.equal(el.className, "onon", "attached callbacks have been fired properly");

  el.className = "off";
  off(el, "click mouseover", classCb);
  trigger(el, "click mouseover");
  t.equal(
    el.className,
    "off",
    "triggered events didn't fire detached callback"
  );

  t.end();
});

tape(
  "test events on/off/trigger for multiple elements, multiple events",
  function(t) {
    el.className = "";
    el2.className = "";
    el.setAttribute("data-state", "");
    el2.setAttribute("data-state", "");
    on(els, "click mouseover", classCb);
    on(els, "resize scroll", attrCb);
    trigger(els, "click mouseover resize scroll");
    t.equal(
      el.className,
      "onon",
      "attached callbacks has been fired properly on the first element"
    );
    t.equal(
      el.getAttribute("data-state"),
      "ONON",
      "attached callbacks has been fired properly on the first element"
    );
    t.equal(
      el2.className,
      "onon",
      "attached callbacks has been fired properly on the second element"
    );
    t.equal(
      el2.getAttribute("data-state"),
      "ONON",
      "attached callbacks has been fired properly on the second element"
    );

    el.className = "off";
    el2.className = "off";
    el.setAttribute("data-state", "off");
    el2.setAttribute("data-state", "off");
    off(els, "click mouseover", classCb);
    off(els, "resize scroll", attrCb);
    trigger(els, "click mouseover resize scroll");
    t.equal(
      el.className,
      "off",
      "triggered events didn't fire detached callbacks on the first element"
    );
    t.equal(
      el.getAttribute("data-state"),
      "off",
      "triggered events didn't fire detached callbacks on the first element"
    );
    t.equal(
      el2.className,
      "off",
      "triggered events didn't fire detached callbacks on the first element"
    );
    t.equal(
      el2.getAttribute("data-state"),
      "off",
      "triggered events didn't fire detached callbacks on the first element"
    );

    t.end();
  }
);

tape("test events on top level elements", function(t) {
  var el = document;

  el.className = "";
  on(el, "click", classCb);
  trigger(el, "click");
  t.equal(
    el.className,
    "on",
    "attached callback has been fired properly on document"
  );

  el = window;

  el.className = "";
  // With jsdom, the default this is global, not window, so we need to explicitly bind to window.
  on(el, "click", classCb.bind(window));
  trigger(el, "click");
  t.equal(
    el.className,
    "on",
    "attached callback has been fired properly on window"
  );

  t.end();
});