js-web-tools/lib/domEvent.test.js

Tools for Javascript develpers

"use strict";

var _domEvent = _interopRequireDefault(require("../domEvent"));

var _domEventTrigger = _interopRequireDefault(require("../domEventTrigger"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function injectHtml() {
  document.body.innerHTML = "\n    <div id=\"container\">\n      <ul>\n        <li class='green'>hello</li>\n        <li class='green'>world</li>\n        <li class='red'>again</li>\n        <li class='red'>from</li>\n        <li class='green'>cam</li>\n      </ul>\n    </div>\n  ";
}

function clearHtml() {
  document.body.innerHTML = '';
}

describe('Events', function () {
  beforeEach(function () {
    injectHtml();
  });
  afterEach(function () {
    clearHtml();
  });
  it('on should invoke callback when event fired', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('on bind same callback twice will only invoke once', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    _domEvent["default"].on(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('on can bind two events', function () {
    var callback1 = jest.fn();
    var callback2 = jest.fn();
    var callback3 = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback1);

    _domEvent["default"].on(el, 'click', callback2);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback1).toHaveBeenCalledTimes(1);
    expect(callback2).toHaveBeenCalledTimes(1);
    expect(callback3).toHaveBeenCalledTimes(0);
  });
  it('off can remove on event', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    _domEvent["default"].off(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(0);
  });
});
describe('once', function () {
  beforeEach(function () {
    injectHtml();
  });
  afterEach(function () {
    clearHtml();
  });
  it('once will only invoke callback once', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].once(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('on will invoke callback many times as you trigger', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    (0, _domEventTrigger["default"])(el, 'click');
    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(3);
  });
  it('off can unbind once', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].once(el, 'click', callback);

    _domEvent["default"].off(el, 'click');

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(0);
  });
});
describe('with namespace', function () {
  beforeEach(function () {
    injectHtml();
  });
  afterEach(function () {
    clearHtml();
  });
  it('on can bind with namespace', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click.testns', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('off can remove event with namespace', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click.testns', callback);

    _domEvent["default"].off(el, 'click', callback);

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(0);
  });
  it('off with namespace only remove that namespace', function () {
    var callback1 = jest.fn();
    var callback2 = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click.testns', callback1);

    _domEvent["default"].on(el, 'click.anotherns', callback2);

    _domEvent["default"].off(el, 'click.anotherns');

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback1).toHaveBeenCalledTimes(1);
    expect(callback2).toHaveBeenCalledTimes(0);
  });
  it('off without namespace will remove all events', function () {
    var callback1 = jest.fn();
    var callback2 = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click.testns', callback1);

    _domEvent["default"].on(el, 'click.anotherns', callback2);

    _domEvent["default"].off(el, 'click');

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback1).toHaveBeenCalledTimes(0);
    expect(callback2).toHaveBeenCalledTimes(0);
  });
});
describe('event delegation', function () {
  beforeEach(function () {
    injectHtml();
  });
  afterEach(function () {
    clearHtml();
  });
  it('delegate can bind event', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].delegate(el, 'li.red', 'click', callback);

    (0, _domEventTrigger["default"])(document.querySelector('#container ul li.red'), 'click');
    expect(callback).toHaveBeenCalledTimes(1);
    (0, _domEventTrigger["default"])(document.querySelector('#container ul li.green'), 'click');
    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('undelegate can remove event delegation', function () {
    var el = document.querySelector('#container ul');
    var callback1 = jest.fn();
    var callback2 = jest.fn();

    _domEvent["default"].delegate(el, 'li.red', 'click', callback1);

    _domEvent["default"].delegate(el, 'li.green', 'click', callback2);

    _domEvent["default"].undelegate(el, 'li.red', 'click');

    (0, _domEventTrigger["default"])(document.querySelector('#container ul li.red'), 'click');
    (0, _domEventTrigger["default"])(document.querySelector('#container ul li.green'), 'click');
    expect(callback1).toHaveBeenCalledTimes(0);
    expect(callback2).toHaveBeenCalledTimes(1);
  });
  it('off can also remove event delegation', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].delegate(el, 'li.red', 'click', callback);

    _domEvent["default"].off(el, 'li.red', 'click');

    (0, _domEventTrigger["default"])(el, 'click');
    expect(callback).toHaveBeenCalledTimes(0);
  });
  it('off with namespace only remove that namespace', function () {
    var callback1 = jest.fn();
    var callback2 = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].delegate(el, 'li.red', 'click.testns', callback1);

    _domEvent["default"].delegate(el, 'li.red', 'click.anotherns', callback2);

    _domEvent["default"].off(el, 'click.anotherns');

    (0, _domEventTrigger["default"])(el.querySelector('li.red'), 'click');
    expect(callback1).toHaveBeenCalledTimes(1);
    expect(callback2).toHaveBeenCalledTimes(0);
  });
  it('off without namespace will remove all events', function () {
    var callback1 = jest.fn();
    var callback2 = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].delegate(el, 'li.red', 'click.testns', callback1);

    _domEvent["default"].delegate(el, 'li.red', 'click.anotherns', callback2);

    _domEvent["default"].off(el, 'click.anotherns');

    (0, _domEventTrigger["default"])(el.querySelector('li.red'), 'click');
    expect(callback1).toHaveBeenCalledTimes(1);
    expect(callback2).toHaveBeenCalledTimes(0);
  });
});
describe('trigger', function () {
  beforeEach(function () {
    injectHtml();
  });
  afterEach(function () {
    clearHtml();
  });
  it('can trigger events', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    _domEvent["default"].trigger(el, 'click');

    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('can trigger scroll events', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'scroll', callback);

    _domEvent["default"].trigger(el, 'scroll');

    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('can trigger resize events', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'resize', callback);

    _domEvent["default"].trigger(el, 'resize');

    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('can trigger with params', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'resize', callback);

    _domEvent["default"].trigger(el, 'resize', {
      foo: 'bar'
    });

    expect(callback).toHaveBeenCalledTimes(1);
  });
  it('can trigger with bubbles', function () {
    var callback = jest.fn();
    var el = document.querySelector('#container ul');

    _domEvent["default"].on(el, 'click', callback);

    _domEvent["default"].trigger(el, 'click', {
      bubbles: true
    });

    expect(callback).toHaveBeenCalledTimes(1);
  });
});