app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
393 lines (305 loc) • 13.5 kB
JavaScript
System.register(['app-decorators/src/libs/element-to-function', '../../src/libs/eventhandler', 'sinon'], function (_export, _context) {
"use strict";
var _elementToFunc, Eventhandler, sinon;
return {
setters: [function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}, function (_srcLibsEventhandler) {
Eventhandler = _srcLibsEventhandler.Eventhandler;
}, function (_sinon) {
sinon = _sinon.default;
}],
execute: function () {
describe('Eventhandler Class', function () {
describe('Eventhandler.prepareEventDomain', function () {
it('should prepare eventDomain string into event and delegateSelector', function () {
var eventHandler = new Eventhandler({
element: document.createElement("div")
});
eventHandler._prepareEventdomain('click').should.containDeep(['click', null]);
eventHandler._prepareEventdomain('dbclick .abc').should.containDeep(['dbclick', '.abc']);
eventHandler._prepareEventdomain('mouseup .abc .def').should.containDeep(['mouseup', '.abc .def']);
});
});
// generic functions
var foo = function foo() {};
var bar = function bar() {};
var baz = function baz() {};
var boo = function boo() {};
var koo = function koo() {};
var naz = function naz() {};
describe('Evenhandler.prototype.getHandlers', function () {
it('should return callback/s by given event', function () {
var eventHandler = new Eventhandler({
events: [["a .foo", foo], ["a .bar", bar], ["b .baz", baz], ["b .boo", boo], ["c .koo", koo], ["d", naz]],
element: document.createElement("div"),
bind: {}
});
// test
eventHandler.getHandlers('a').should.have.length(2);
eventHandler.getHandlers('b').should.have.length(2);
eventHandler.getHandlers('c').should.have.length(1);
eventHandler.getHandlers('d').should.have.length(1);
// negativ test
var testObject = { f: eventHandler.getHandlers('f') };
testObject.should.have.propertyByPath('f').eql(null);
});
});
describe('Evenhandler._groupEvents', function () {
it('should groupby event type', function () {
var passedObject = [["click .foo", foo], ["mouseup .boo", boo], ["click .bar", bar], ["mouseup .koo", koo], ["click .baz", baz], ["mousedown", naz]];
/**
* #### Excepted grouped object ####
*
* groupedObject {
* "click" : [
* { ".foo": function foo(){} },
* { ".bar": function bar(){} },
* ],
* "mouseup": [
* { ".boo": function foo(){} },
* { ".koo": function koo(){} },
* ],
* "mousedown": [
* { null: function naz(){} },
* { null: function laz(){} },
* ],
* }
**/
// group events
var eventHandler = new Eventhandler({
element: document.createElement("div")
});
var groupedObject = eventHandler._groupEvents(passedObject);
// tests click group
groupedObject.should.have.propertyByPath("click", 0, ".foo").eql(foo);
groupedObject.should.have.propertyByPath("click", 1, ".bar").eql(bar);
groupedObject.should.have.propertyByPath("click", 2, ".baz").eql(baz);
// tests mouseup group
groupedObject.should.have.propertyByPath("mouseup", 0, ".boo").eql(boo);
groupedObject.should.have.propertyByPath("mouseup", 1, ".koo").eql(koo);
// test without delegateSelector
groupedObject.should.have.propertyByPath("mousedown", 0, null).equal(naz);
});
});
describe('Eventhandler.prototype._bindObjectToEventList(events, bindObject)', function () {
it('should bind new context without overwriting orginal events object', function () {
var testHandler = function testHandler() {
return this;
};
var events = [["a", testHandler]];
// Test 1 ( with new created clone context )
var div = document.createElement('div');
var eventHandler = new Eventhandler({
element: document.createElement("div")
});
div.innerHTML = 'Just Dom';
var newEvents = eventHandler._bindObjectToEventList(events, div);
newEvents[0][1]().should.be.equal(div);
newEvents[0][1]().innerHTML.should.be.equal('Just Dom');
// Test 2 ( original events object does not lose there context )
//events[0][1]().should.be.equal(events);
events[0][1]().should.not.have.propertyByPath('innerHTML');
});
});
describe('new Eventhandler and Eventhandler.prototype.off', function () {
var clickFoo = function clickFoo() {};
var mouseupBoo = function mouseupBoo() {};
var clickBar = function clickBar() {
this.someMethod();
};
var mouseupKoo = function mouseupKoo() {};
var clickBaz = function clickBaz() {};
var mouseDown = function mouseDown() {};
var element = document.createElement('div');
var bindObject = {
someMethod: function someMethod() {}
};
var clickCallbacks = null;
beforeEach(function () {
element = document.createElement("div");
element.innerHTML = '\n\t\t\t\t<!-- onClick -->\n\t\t\t\t<div class="foo">Foo</div>\n\t\t\t\t<div class="bar">Bar</div>\n\t\t\t\t<div class="baz">Baz</div>\n\t\t\t\t<!-- onMouseup -->\n\t\t\t\t<div class="boo">Boo</div>\n\t\t\t\t<div class="koo">Koo</div>\n\t\t\t';
document.body.appendChild(element);
});
afterEach(function () {
document.body.removeChild(element);
});
it('should trigger and remove events', function () {
var eventHandler = new Eventhandler({
events: [["click .foo", clickFoo], ["click .bar", clickBar], ["click .baz", clickBaz], ["mouseup .boo", mouseupBoo], ["mouseup .koo", mouseupKoo], ["mousedown", mouseDown]],
element: element,
bind: bindObject
});
/**
* INFO to the test:
* except click all other native events can not be easily simulated.
* Mouseup, Mousedown was tested manually.
*/
// setup tests (spying)
// test click
clickCallbacks = eventHandler.getHandlers('click');
sinon.spy(clickCallbacks[0], ".foo");
sinon.spy(clickCallbacks[1], ".bar");
sinon.spy(clickCallbacks[2], ".baz");
sinon.spy(bindObject, "someMethod");
// test click event
element.querySelector('.baz').click();
clickCallbacks[0][".foo"].callCount.should.eql(0);
clickCallbacks[1][".bar"].callCount.should.eql(0);
clickCallbacks[2][".baz"].callCount.should.eql(1);
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
clickCallbacks[1][".bar"].callCount.should.eql(0);
clickCallbacks[2][".baz"].callCount.should.eql(1);
element.querySelector('.bar').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
clickCallbacks[1][".bar"].callCount.should.eql(1);
clickCallbacks[2][".baz"].callCount.should.eql(1);
// test bind object
bindObject.someMethod.callCount.should.eql(1);
// cleanup spyies
clickCallbacks[0][".foo"].restore();
clickCallbacks[1][".bar"].restore();
clickCallbacks[2][".baz"].restore();
bindObject["someMethod"].restore();
// test off
eventHandler.off('click .foo');
eventHandler.getHandlers('click').should.have.length(2);
eventHandler.off('mouseup .boo');
eventHandler.getHandlers('mouseup').should.have.length(1);
eventHandler.off('click');
var clickTestObject = { click: eventHandler.getHandlers('click') };
clickTestObject.should.have.propertyByPath('click').eql(null);
eventHandler.off('mouseup .koo');
var mouseupTestObject = { mouseup: eventHandler.getHandlers('mouseup') };
mouseupTestObject.should.have.propertyByPath('mouseup').eql(null);
eventHandler.off('mousedown');
Object.keys(eventHandler._events).should.have.length(0);
});
it('should trigger and remove events if registered over on method', function () {
var eventHandler = new Eventhandler({ element: element, bind: bindObject });
eventHandler.on("click .foo", clickFoo);
eventHandler.on("click .bar", clickBar);
eventHandler.on("click .baz", clickBaz);
eventHandler.on("mouseup .boo", mouseupBoo);
eventHandler.on("mouseup .koo", mouseupKoo);
eventHandler.on("mousedown", mouseDown);
/**
* INFO to the test:
* except click all other native events can not be easily simulated.
* Mouseup, Mousedown was tested manually.
*/
// setup tests (spying)
// test click
clickCallbacks = eventHandler.getHandlers('click');
sinon.spy(clickCallbacks[0], ".foo");
sinon.spy(clickCallbacks[1], ".bar");
sinon.spy(clickCallbacks[2], ".baz");
sinon.spy(bindObject, "someMethod");
// test click event
element.querySelector('.baz').click();
clickCallbacks[0][".foo"].callCount.should.eql(0);
clickCallbacks[1][".bar"].callCount.should.eql(0);
clickCallbacks[2][".baz"].callCount.should.eql(1);
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
clickCallbacks[1][".bar"].callCount.should.eql(0);
clickCallbacks[2][".baz"].callCount.should.eql(1);
element.querySelector('.bar').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
clickCallbacks[1][".bar"].callCount.should.eql(1);
clickCallbacks[2][".baz"].callCount.should.eql(1);
// test bind object
bindObject.someMethod.callCount.should.eql(1);
// cleanup spyies
clickCallbacks[0][".foo"].restore();
clickCallbacks[1][".bar"].restore();
clickCallbacks[2][".baz"].restore();
bindObject["someMethod"].restore();
// test off
eventHandler.off('click .foo');
eventHandler.getHandlers('click').should.have.length(2);
eventHandler.off('mouseup .boo');
eventHandler.getHandlers('mouseup').should.have.length(1);
eventHandler.off('click');
var clickTestObject = { click: eventHandler.getHandlers('click') };
clickTestObject.should.have.propertyByPath('click').eql(null);
eventHandler.off('mouseup .koo');
var mouseupTestObject = { mouseup: eventHandler.getHandlers('mouseup') };
mouseupTestObject.should.have.propertyByPath('mouseup').eql(null);
eventHandler.off('mousedown');
Object.keys(eventHandler._events).should.have.length(0);
});
it('should not work when destroy called', function () {
var eventHandler = new Eventhandler({ element: element, bind: bindObject });
eventHandler.on("click .foo", clickFoo);
// setup tests (spying)
clickCallbacks = eventHandler.getHandlers('click');
sinon.spy(clickCallbacks[0], ".foo");
// test click event
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
eventHandler.destroy();
// test click event
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
//cleanup spy
clickCallbacks[0][".foo"].restore();
});
it('should work again when called destroy and reinit after again', function () {
var clickCount = 0;
var mockFunction = function mockFunction() {};
var eventHandler = new Eventhandler({ element: element, bind: bindObject });
eventHandler.on("click .foo", clickFoo);
// setup tests (spying)
clickCallbacks = eventHandler.getHandlers('click');
sinon.spy(clickCallbacks[0], ".foo");
// test click event
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
eventHandler.destroy();
// test click event
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
//cleanup spy
clickCallbacks[0][".foo"].restore();
eventHandler.destroy();
// reinit again on the same instance
eventHandler.reinit({
element: element,
events: [["click .foo", clickFoo]]
});
// setup tests (spying)
clickCallbacks = eventHandler.getHandlers('click');
sinon.spy(clickCallbacks[0], ".foo");
// test click event
element.querySelector('.foo').click();
clickCallbacks[0][".foo"].callCount.should.eql(1);
//cleanup spy and eventhandler
eventHandler.destroy();
clickCallbacks[0][".foo"].restore();
});
});
describe('Eventhandler.prototype.trigger', function () {
it('should trigger registered customevent', function () {
var triggerPassedValue = null;
var customCallback = function customCallback(e) {
triggerPassedValue = e.detail;
};
var eventHandler = new Eventhandler({ element: document.body });
eventHandler.on('customevent', customCallback);
var customeventCallbacks = eventHandler.getHandlers('customevent');
sinon.spy(customeventCallbacks[0], null);
// triger event without passing value
eventHandler.trigger('customevent');
customeventCallbacks[0][null].callCount.should.eql(1);
eventHandler.trigger('customevent', 1234);
triggerPassedValue.should.equal(1234);
customeventCallbacks[0][null].restore();
});
});
});
}
};
});
//# sourceMappingURL=eventhandler.spec.js.map