@moomfe/zenjs
Version:
ZenJS 是一个高性能的 JavaScript 工具库。
970 lines (857 loc) • 40.6 kB
JavaScript
describes.push({
name: 'EventTarget.prototype',
describe: [
{
name: '$data',
describe: function(){
/** @type {Element} */
var div = window.div;
it( 'adding data', function(){
div.$data( 'Data', 'div' ).should.equals( div );
document.$data( 'Data', 'document' ).should.equals( document );
Object.$equals( window.$data( 'Data', 'window' ), window ).should.true;
});
it( 'Read data', function(){
div.$data( 'Data' ).should.equals( 'div' );
window.$data( 'Data' ).should.equals( 'window' );
document.$data( 'Data' ).should.equals( 'document' );
});
it( 'Read all data', function(){
Object.$equals( div.$data(), { Data: 'div' } );
Object.$equals( window.$data(), { Data: 'window' } );
Object.$equals( document.$data(), { Data: 'document' } );
});
it( 'Add data in bulk', function(){
div.$data({ a: 1, b: 2 }).should.equals( div );
document.$data({ a: 1, b: 2 }).should.equals( document );
Object.$equals( window.$data({ a: 1, b: 2 }), window ).should.true;
Object.$equals( div.$data(), { Data: 'div', a: 1, b: 2 } );
Object.$equals( window.$data(), { Data: 'window', a: 1, b: 2 } );
Object.$equals( document.$data(), { Data: 'document', a: 1, b: 2 } );
});
it( 'Initialize add method', function(){
div.$data( 'b', 3, true ).should.equals( 2 );
window.$data( 'b', 3, true ).should.equals( 2 );
document.$data( 'b', 3, true ).should.equals( 2 );
Object.$equals( div.$data(), { Data: 'div', a: 1, b: 2 } );
Object.$equals( window.$data(), { Data: 'window', a: 1, b: 2 } );
Object.$equals( document.$data(), { Data: 'document', a: 1, b: 2 } );
div.$data( 'c', 3, true ).should.equals( 3 );
window.$data( 'c', 3, true ).should.equals( 3 );
document.$data( 'c', 3, true ).should.equals( 3 );
Object.$equals( div.$data(), { Data: 'div', a: 1, b: 2, c: 3 } );
Object.$equals( window.$data(), { Data: 'window', a: 1, b: 2, c: 3 } );
Object.$equals( document.$data(), { Data: 'document', a: 1, b: 2, c: 3 } );
});
it( 'Use $data directly', function(){
$data( 'Data' ).should.equals( 'window' );
window.__ZENJS_DATA__ = {};
document.__ZENJS_DATA__ = {};
});
}
}, {
name: '$hasData',
describe: function(){
/** @type {Element} */
var div = window.div;
it( 'No incoming parameter detection has value', function(){
div.$hasData().should.false;
div.$data('Data','div').$hasData().should.true;
window.$hasData().should.false;
window.$data('Data','window').$hasData().should.true;
document.$hasData().should.false;
document.$data('Data','document').$hasData().should.true;
});
it( 'Incoming parameter detection for value', function(){
div.$hasData('Data').should.true;
window.$hasData('Data').should.true;
document.$hasData('Data').should.true;
div.$hasData('noData').should.false;
window.$hasData('noData').should.false;
document.$hasData('noData').should.false;
});
it( 'Use $hasData directly', function(){
$hasData('Data').should.true;
$hasData('noData').should.false;
window.__ZENJS_DATA__ = {};
document.__ZENJS_DATA__ = {};
});
}
}, {
name: '$deleteData',
describe: function(){
/** @type {Element} */
var div = window.div;
it( 'Delete single data', function(){
div.$data({ Data: 'div', a: 1, b: 2 });
window.$data({ Data: 'window', a: 1, b: 2 });
document.$data({ Data: 'document', a: 1, b: 2 });
div.$deleteData('Data').should.equals( div );
document.$deleteData('Data').should.equals( document );
Object.$equals( window.$deleteData('Data'), window ).should.true;
div.$hasData('Data').should.false;
window.$hasData('Data').should.false;
document.$hasData('Data').should.false;
div.$hasData('a').should.true;
window.$hasData('a').should.true;
document.$hasData('a').should.true;
});
it( 'Delete all data', function(){
div.$deleteData().should.equals( div );
document.$deleteData().should.equals( document );
Object.$equals( window.$deleteData(), window ).should.true;
div.$hasData().should.false;
window.$hasData().should.false;
document.$hasData().should.false;
});
}
}, {
name: '$on',
describe: [
{
name: 'Basic data storage',
it: function(){
var EventData = div.$on( 'click', false ).$data('events');
$typeof( EventData.click ).should.equals('array');
EventData.click.length.should.equals( 1 );
$typeof( EventData.click[0] ).should.equals('object');
}
}, {
name: 'Test if all parameters are received correctly - namespace',
it: function(){
var EventData;
var EventListener = function( event ){ return event };
EventData = div.$on( 'click.btn', EventListener ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', EventListener ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on({ 'click.btn.ripple': EventListener }).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
}
}, {
name: 'Test if all parameters are received correctly - options',
it: function(){
var EventData;
var EventListener = function( event ){ return event };
EventData = div.$on( 'click.btn.ripple', EventListener, true ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, { capture: true } ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', EventListener, { capture: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, { capture: true } ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', EventListener, { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( { 'click.btn.ripple': EventListener }, { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
/**
* @type {Boolean} 当前环境是否支持 addEventListener 的 passive 属性
*/
var supportsPassiveEvent = false;
try{
var options = defineProperty( {}, 'passive', {
get: function(){
supportsPassiveEvent = true;
}
});
window.addEventListener( 'test', null, options );
}catch(e){}
if( supportsPassiveEvent ){
EventData = div.$on( 'click.btn.ripple', EventListener, { passive: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, { passive: true } ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
}
}
}, {
name: 'Test if all parameters are received correctly - delegate',
it: function(){
var EventData;
var EventListener = function( event ){ return event };
EventData = div.$on( 'click.btn.ripple', '.div', EventListener, { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', EventListener, '.div', { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', EventListener, { one: true }, '.div' ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( { 'click.btn.ripple': EventListener }, '.div', { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( '.div', { 'click.btn.ripple': EventListener }, { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( { 'click.btn.ripple': EventListener }, { one: true }, '.div' ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
}
}, {
name: 'Test if all parameters are received correctly',
it: function(){
var EventData;
var EventListener = function( event ){ return event };
EventData = div.$on( 'click.btn.ripple', '.div', EventListener, { capture: false } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', '.div', false, { capture: false } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, ZenJS.returnFalse ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', '.div', false, false ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, ZenJS.returnFalse ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', false, false, '.div' ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, ZenJS.returnFalse ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', false, '.div', false ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, ZenJS.returnFalse ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector, '.div' ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$on( 'click.btn.ripple', false, false ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, ZenJS.returnFalse ).should.true;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
}
}, {
name: 'Event binding',
it: function(){
var div = window.$div;
var index = 0;
div.$on( 'click', function(){ index++ } );
div.click();
index.should.equals( 1 );
div.click();
div.click();
index.should.equals( 3 );
}
}, {
name: 'Event binding - delegate',
it: function(){
var div = window.$div;
var span = div.appendChild( window.span );
var index = 0;
div.$on( 'click', 'span', function(){ index++ } );
div.click();
index.should.equals( 0 );
span.click();
index.should.equals( 1 );
span.click();
span.click();
index.should.equals( 3 );
}
}, {
name: 'Event binding - modifiers - self',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener );
div.click();
index.should.equals( 1 );
span.click();
index.should.equals( 2 );
// ------
div = $div;
span = div.appendChild( window.span );
index = 0;
div.$on( 'click.self', EventListener );
div.click();
index.should.equals( 1 );
span.click();
index.should.equals( 1 );
}
}, {
name: 'Event binding - modifiers - one /once',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click.one', EventListener );
div.$on( 'click.one', EventListener );
div.click();
index.should.equals( 1 );
}
}, {
name: 'Event binding - modifiers - stop',
it: function(){
var div = $div;
var div2 = div.appendChild( $div );
var index = 0;
var EventListener = function( event ){
$off( event );
index++;
};
div.$on( 'click', EventListener );
div2.$on( 'click', EventListener );
div2.click();
index.should.equals( 2 );
index = 0;
div.$on( 'click', EventListener );
div2.$on( 'click.stop', EventListener );
div2.click();
index.should.equals( 1 );
}
}, {
name: 'Event binding - options - group',
it: function(){
var div = $div;
var div2 = $div;
var div3 = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener, { group: '123' } );
div2.$on( 'click', EventListener, { group: '123' } );
div3.$on( 'click', EventListener, { group: '123' } );
div.click();
index.should.equals( 1 );
div2.click();
index.should.equals( 2 );
div3.click();
index.should.equals( 3 );
window.$off({ group: '123' });
div.click();
div2.click();
div3.click();
index.should.equals( 3 );
}
}, {
name: 'Event binding - options - group ( 2 )',
it: function(){
var div = $div;
var div2 = $div;
var div3 = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener, { group: [ 'group', 'group-1' ] } );
div2.$on( 'click', EventListener, { group: [ 'group', 'group-2' ] } );
div3.$on( 'click', EventListener, { group: [ 'group', 'group-3' ] } );
div.click();
index.should.equals( 1 );
div2.click();
index.should.equals( 2 );
div3.click();
index.should.equals( 3 );
window.$off({ group: 'group' });
div.click();
index.should.equals( 4 );
div2.click();
index.should.equals( 5 );
div3.click();
index.should.equals( 6 );
window.$off({ group: [ 'group' ] });
div.click();
index.should.equals( 6 );
div2.click();
index.should.equals( 6 );
div3.click();
index.should.equals( 6 );
// ------ ------ ------ ------ ------ ------
div.$on( 'click', EventListener, { group: [ 'group', 'group-1' ] } );
div2.$on( 'click', EventListener, { group: [ 'group', 'group-2' ] } );
div3.$on( 'click', EventListener, { group: [ 'group', 'group-3' ] } );
div.click();
index.should.equals( 7 );
div2.click();
index.should.equals( 8 );
div3.click();
index.should.equals( 9 );
window.$off({ group: 'group-1' });
div.click();
index.should.equals( 9 );
div2.click();
index.should.equals( 10 );
div3.click();
index.should.equals( 11 );
window.$off({ group: [ 'group' ] });
div.click();
index.should.equals( 11 );
div2.click();
index.should.equals( 11 );
div3.click();
index.should.equals( 11 );
}
}, {
name: 'Exception without window',
it: function(){
var index = 0;
var EventListener = function( event ){ index++ };
window.$on( 'click', EventListener );
$on( 'click', EventListener );
window.$emit( 'click' );
$emit( 'click' );
window.$off( 'click' );
$off( 'click' );
}
}, {
name: 'The passed options will not be modified',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
var options = {
group: 'test-options'
};
div.$on( 'click', EventListener, options );
Object.$equals( options.group, 'test-options' ).should.true;
div.click();
index.should.equals( 1 );
$off( options );
div.click();
index.should.equals( 1 );
}
}, {
name: 'HandleOptions error when binding multiple events at the same time',
it: function(){
var obj = { 123: false, 456: false };
document.$on('mouseup.123 mouseup.456', function( event, eventName ){
obj[ eventName ] = event.handleOptions.namespaceStr === eventName;
});
document.$emit( 'mouseup.123', '123' );
document.$emit( 'mouseup.456', '456' );
document.$off( 'mouseup' );
Object.$equals( obj, { 123: true, 456: true } ).should.true;
}
}
]
}, {
name: '$one / $once / options.one / options.once',
describe: [
{
name: 'Test if all parameters are received correctly',
it: function(){
var EventData;
var EventListener = function( event ){ return event };
EventData = div.$on( 'click.btn.ripple', EventListener, { one: true } ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$one( 'click.btn.ripple', EventListener ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
EventData = div.$once( 'click.btn.ripple', EventListener ).$data('events').click[0];
Object.$equals( EventData.elem, div ).should.true;
Object.$equals( EventData.listener, EventListener ).should.false;
Object.$equals( EventData.namespace, [ 'btn', 'ripple' ] ).should.true;
Object.$equals( EventData.namespaceStr, 'btn.ripple' ).should.true;
Object.$equals( EventData.options, {} ).should.true;
Object.$equals( EventData.selector ).should.true;
Object.$equals( EventData.type, 'click' ).should.true;
}
}, {
name: 'Test availability',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$one( 'click', EventListener );
div.click();
div.click();
index.should.equals( 1 );
div.$once( 'click', EventListener );
div.click();
div.click();
index.should.equals( 2 );
div.$on( 'click', EventListener, { one: true } );
div.click();
div.click();
index.should.equals( 3 );
div.$on( 'click', EventListener, { once: true } );
div.click();
div.click();
index.should.equals( 4 );
}
}
]
}, {
name: '$off',
describe: [
{
name: 'Test availability and check if data is deleted correctly',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener );
div.click();
index.should.equals( 1 );
div.$off( 'click', EventListener );
div.click();
index.should.equals( 1 );
Object.$equals( div.$data('events'), {} ).should.true;
div.$on( 'click', EventListener );
div.click();
index.should.equals( 2 );
div.$off( 'click' );
div.click();
index.should.equals( 2 );
Object.$equals( div.$data('events'), {} ).should.true;
}
}, {
name: 'Test availability and check if data is deleted correctly - namespace',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click.zenjs', EventListener );
div.$on( 'click.zenui', EventListener );
div.click();
index.should.equals( 2 );
div.$off( 'click.zenjs' );
div.click();
index.should.equals( 3 );
div.$off( 'click.zenui' );
div.click();
index.should.equals( 3 );
div.$on( 'click.zenjs.zenui', EventListener );
div.$on( 'click.zenui', EventListener );
div.click();
index.should.equals( 5 );
div.$off( 'click.zenui' );
div.click();
index.should.equals( 6 );
div.$off( 'click.zenui.zenjs' );
div.click();
index.should.equals( 6 );
div.$on( 'click.zenjs', EventListener );
div.$on( 'click.zenui', EventListener );
div.click();
index.should.equals( 8 );
div.$off( 'click' );
div.click();
index.should.equals( 8 );
}
}, {
name: 'Test availability and check if data is deleted correctly - delegate',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 0 );
span.click();
index.should.equals( 1 );
div.$off( 'click', EventListener );
span.click();
index.should.equals( 2 );
div.$off( 'click', 'span', EventListener );
span.click();
index.should.equals( 2 );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 2 );
span.click();
index.should.equals( 3 );
div.$off( 'click' );
span.click();
index.should.equals( 4 );
div.$off( 'click', 'span', EventListener );
span.click();
index.should.equals( 4 );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 4 );
span.click();
index.should.equals( 5 );
div.$off( 'click', '*' );
span.click();
index.should.equals( 5 );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 5 );
span.click();
index.should.equals( 6 );
div.$off( 'click', '**' );
span.click();
index.should.equals( 6 );
}
}, {
name: 'Test availability and check if data is deleted correctly - delegate Wildcard',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 1 );
span.click();
index.should.equals( 3 );
div.click();
span.click();
index.should.equals( 6 );
div.$off( 'click', EventListener );
div.click();
index.should.equals( 6 );
span.click();
index.should.equals( 7 );
div.$off( 'click', 'span', EventListener );
div.click();
index.should.equals( 7 );
span.click();
index.should.equals( 7 );
div.$on( 'click', EventListener );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 8 );
span.click();
index.should.equals( 10 );
div.click();
span.click();
index.should.equals( 13 );
div.$off( 'click', '*', EventListener );
div.click();
index.should.equals( 14 );
span.click();
index.should.equals( 15 );
div.$off( 'click', EventListener );
div.click();
index.should.equals( 15 );
span.click();
index.should.equals( 15 );
div.$on( 'click', EventListener );
div.$on( 'click', 'span', EventListener );
div.click();
index.should.equals( 16 );
span.click();
index.should.equals( 18 );
div.click();
span.click();
index.should.equals( 21 );
div.$off( 'click', '**', EventListener );
div.click();
index.should.equals( 21 );
span.click();
index.should.equals( 21 );
}
}, {
name: 'Delete events using the ZenJS.Event event object',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){
index++;
event.target.$off( event );
};
div.$on( 'click', EventListener );
div.click();
index.should.equals( 1 );
div.click();
index.should.equals( 1 );
div.$on( 'click', 'span', EventListener );
span.click();
index.should.equals( 2 );
span.click();
index.should.equals( 2 );
}
}, {
name: 'Delete events using the object',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener );
div.$on( 'keydown', EventListener );
div.$off({ click: EventListener, keydown: EventListener });
Object.$equals( div.$data('events'), {} ).should.true;
div.$on( 'click', 'span', EventListener );
div.$on( 'keydown', 'span', EventListener );
div.$off( { click: EventListener, keydown: EventListener }, 'span' );
Object.$equals( div.$data('events'), {} ).should.true;
div.$on( 'click', 'span', EventListener );
div.$on( 'keydown', 'span', EventListener );
div.$off( { click: EventListener, keydown: EventListener }, '*' );
Object.$equals( div.$data('events'), {} ).should.true;
div.$on( 'click', 'span', EventListener );
div.$on( 'keydown', 'span', EventListener );
div.$off( { click: EventListener, keydown: EventListener }, '**' );
Object.$equals( div.$data('events'), {} ).should.true;
div.$on( 'click', EventListener );
div.$on( 'keydown', 'span', EventListener );
div.$off( { click: EventListener, keydown: EventListener }, '*' );
Object.$equals( div.$data('events'), {} ).should.false;
div.$off( { click: EventListener } );
Object.$equals( div.$data('events'), {} ).should.true;
}
}, {
name: 'Delete events using the groups',
it: function(){
var div = $div;
var span = div.appendChild( window.span );
var index = 0;
var EventListener = function( event ){ index++ };
var options1 = { group: 'groups-test-1' };
var options2 = { group: 'groups-test-2' };
div.$on( 'click', EventListener, options1 );
span.$on( 'click', EventListener, options1 );
span.click();
index.should.equals( 2 );
$off( options1 );
span.click();
index.should.equals( 2 );
$off( options2 );
}
}
]
}, {
name: '$emit',
describe: [
{
name: 'Test availability',
it: function(){
var div = $div;
var index = 0;
var EventListener = function( event ){ index++ };
div.$on( 'click', EventListener );
div.$emit( 'click' );
index.should.equals( 1 );
div.$emit( 'click' ).$emit( 'click' );
index.should.equals( 3 );
div.$on( 'click.zenjs', EventListener );
div.$emit( 'click' );
index.should.equals( 5 );
div.$emit( 'click.zenjs' );
index.should.equals( 6 );
}
}, {
name: 'Test availability - pass data to methods',
it: function(){
var div = $div;
div.$on( 'click', function( event, name, type ){
name.should.equals( 'zenjs' );
type.should.equals( 'js' );
});
div.$emit( 'click', 'zenjs', 'js' );
}
}, {
name: 'Test arguments',
it: function(){
var div = $div;
var EventListener = function( event ){
( event instanceof ZenJS.Event ).should.true;
}
div.$on( 'click', EventListener );
div.click();
div.$emit( 'click' );
}
}
]
}
]
});