Specs/Element/Element.Event.js

   1 /*
   2 ---
   3 name: Element.Event
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8
   9 (function(){
  10
  11 var Local = Local || {};
  12
  13 var fire = 'fireEvent', create = function(){
  14         return new Element('div');
  15 };
  16
  17 describe('Events API: Element', function(){
  18
  19         beforeEach(function(){
  20                 Local.called = 0;
  21                 Local.fn = function(){
  22                         return Local.called++;
  23                 };
  24         });
  25
  26         it('should add an Event to the Class', function(){
  27                 var object = create();
  28
  29                 object.addEvent('event', Local.fn)[fire]('event');
  30
  31                 expect(Local.called).toEqual(1);
  32         });
  33
  34         it('should add multiple Events to the Class', function(){
  35                 create().addEvents({
  36                         event1: Local.fn,
  37                         event2: Local.fn
  38                 })[fire]('event1')[fire]('event2');
  39
  40                 expect(Local.called).toEqual(2);
  41         });
  42
  43         it('should remove a specific method for an event', function(){
  44                 var object = create();
  45                 var x = 0, fn = function(){ x++; };
  46
  47                 object.addEvent('event', Local.fn).addEvent('event', fn).removeEvent('event', Local.fn)[fire]('event');
  48
  49                 expect(x).toEqual(1);
  50                 expect(Local.called).toEqual(0);
  51         });
  52
  53         it('should remove an event and its methods', function(){
  54                 var object = create();
  55                 var x = 0, fn = function(){ x++; };
  56
  57                 object.addEvent('event', Local.fn).addEvent('event', fn).removeEvents('event')[fire]('event');
  58
  59                 expect(x).toEqual(0);
  60                 expect(Local.called).toEqual(0);
  61         });
  62
  63         it('should remove all events', function(){
  64                 var object = create();
  65                 var x = 0, fn = function(){ x++; };
  66
  67                 object.addEvent('event1', Local.fn).addEvent('event2', fn).removeEvents();
  68                 object[fire]('event1')[fire]('event2');
  69
  70                 // Should not fail
  71                 object.removeEvents()[fire]('event1')[fire]('event2');
  72
  73                 expect(x).toEqual(0);
  74                 expect(Local.called).toEqual(0);
  75         });
  76
  77         it('should remove events with an object', function(){
  78                 var object = create();
  79                 var events = {
  80                         event1: Local.fn,
  81                         event2: Local.fn
  82                 };
  83
  84                 object.addEvent('event1', function(){ Local.fn(); }).addEvents(events)[fire]('event1');
  85                 expect(Local.called).toEqual(2);
  86
  87                 object.removeEvents(events);
  88                 object[fire]('event1');
  89                 expect(Local.called).toEqual(3);
  90
  91                 object[fire]('event2');
  92                 expect(Local.called).toEqual(3);
  93         });
  94
  95         it('should remove an event immediately', function(){
  96                 var object = create();
  97
  98                 var methods = [];
  99
 100                 var three = function(){
 101                         methods.push(3);
 102                 };
 103
 104                 object.addEvent('event', function(){
 105                         methods.push(1);
 106                         this.removeEvent('event', three);
 107                 }).addEvent('event', function(){
 108                         methods.push(2);
 109                 }).addEvent('event', three);
 110
 111                 object[fire]('event');
 112                 expect(methods).toEqual([1, 2]);
 113
 114                 object[fire]('event');
 115                 expect(methods).toEqual([1, 2, 1, 2]);
 116         });
 117
 118         it('should be able to remove itself', function(){
 119                 var object = create();
 120
 121                 var methods = [];
 122
 123                 var one = function(){
 124                         object.removeEvent('event', one);
 125                         methods.push(1);
 126                 };
 127                 var two = function(){
 128                         object.removeEvent('event', two);
 129                         methods.push(2);
 130                 };
 131                 var three = function(){
 132                         methods.push(3);
 133                 };
 134
 135                 object.addEvent('event', one).addEvent('event', two).addEvent('event', three);
 136
 137                 object[fire]('event');
 138                 expect(methods).toEqual([1, 2, 3]);
 139
 140                 object[fire]('event');
 141                 expect(methods).toEqual([1, 2, 3, 3]);
 142         });
 143
 144 });
 145
 146 var fragment = document.createDocumentFragment();
 147
 148 // Restore native fireEvent in IE for Syn
 149 var createElement = function(tag, props){
 150         var el = new Element(tag);
 151         if (el._fireEvent) el.fireEvent = el._fireEvent;
 152         return el.set(props);
 153 };
 154
 155 describe('Element.Event', function(){
 156
 157         it('Should trigger the click event', function(){
 158
 159                 var callback = jasmine.createSpy('Element.Event click');
 160
 161                 var el = createElement('a', {
 162                         text: 'test',
 163                         styles: {
 164                                 display: 'block',
 165                                 overflow: 'hidden',
 166                                 height: '1px'
 167                         },
 168                         events: {
 169                                 click: callback
 170                         }
 171                 }).inject(document.body);
 172
 173                 Syn.trigger('click', null, el);
 174
 175                 expect(callback).toHaveBeenCalled();
 176                 el.destroy();
 177         });
 178
 179         it('Should trigger the click event and prevent the default behavior', function(){
 180
 181                 var callback = jasmine.createSpy('Element.Event click with prevent');
 182
 183                 var el = createElement('a', {
 184                         text: 'test',
 185                         styles: {
 186                                 display: 'block',
 187                                 overflow: 'hidden',
 188                                 height: '1px'
 189                         },
 190                         events: {
 191                                 click: function(event){
 192                                         event.preventDefault();
 193                                         callback();
 194                                 }
 195                         }
 196                 }).inject(document.body);
 197
 198                 Syn.trigger('click', null, el);
 199
 200                 expect(callback).toHaveBeenCalled();
 201                 el.destroy();
 202
 203         });
 204
 205         // Only run this spec in browsers other than IE6-8 because they can't properly simulate key events
 206         it('Should watch for a key-down event', function(){
 207
 208                 var callback = jasmine.createSpy('keydown');
 209
 210                 var div = createElement('div').addEvent('keydown', function(event){
 211                         callback(event.key);
 212                 }).inject(document.body);
 213
 214                 Syn.key('a', div);
 215
 216                 expect(callback).toHaveBeenCalledWith('a');
 217                 div.destroy();
 218         });
 219
 220         it('should clone events of an element', function(){
 221
 222                 var calls = 0;
 223
 224                 var element = new Element('div').addEvent('click', function(){ calls++; });
 225                 element.fireEvent('click');
 226
 227                 expect(calls).toBe(1);
 228
 229                 var clone = new Element('div').cloneEvents(element, 'click');
 230                 clone.fireEvent('click');
 231
 232                 expect(calls).toBe(2);
 233
 234                 element.addEvent('custom', function(){ calls += 2; }).fireEvent('custom');
 235
 236                 expect(calls).toBe(4);
 237
 238                 clone.cloneEvents(element);
 239                 clone.fireEvent('click');
 240
 241                 expect(calls).toBe(5);
 242
 243                 clone.fireEvent('custom');
 244
 245                 expect(calls).toBe(7);
 246         });
 247
 248 });
 249
 250 describe('Element.Event', function(){
 251         // This is private API. Do not use.
 252
 253         it('should pass the name of the custom event to the callbacks', function(){
 254                 var callbacks = 0;
 255                 var callback = jasmine.createSpy('Element.Event custom');
 256
 257                 var fn = function(anything, type){
 258                         expect(type).toEqual('customEvent');
 259                         callbacks++;
 260                 };
 261                 Element.Events.customEvent = {
 262
 263                         base: 'click',
 264
 265                         condition: function(event, type){
 266                                 fn(null, type);
 267                                 return true;
 268                         },
 269
 270                         onAdd: fn,
 271                         onRemove: fn
 272
 273                 };
 274
 275                 var div = createElement('div').addEvent('customEvent', callback).inject(document.body);
 276
 277                 Syn.trigger('click', null, div);
 278
 279                 expect(callback).toHaveBeenCalled();
 280                 div.removeEvent('customEvent', callback).destroy();
 281                 expect(callbacks).toEqual(3);
 282         });
 283
 284 });
 285
 286 describe('Element.Event.change', function(){
 287
 288         it('should not fire "change" for any property', function(){
 289                 var callback = jasmine.createSpy('Element.Event.change');
 290
 291                 var radio = new Element('input', {
 292                         'type': 'radio',
 293                         'class': 'someClass',
 294                         'checked': 'checked'
 295                 }).addEvent('change', callback).inject(document.body);
 296
 297                 radio.removeClass('someClass');
 298                 expect(callback).not.toHaveBeenCalled();
 299
 300                 var checkbox = new Element('input', {
 301                         'type': 'checkbox',
 302                         'class': 'someClass',
 303                         'checked': 'checked'
 304                 }).addEvent('change', callback).inject(document.body);
 305
 306                 checkbox.removeClass('someClass');
 307                 expect(callback).not.toHaveBeenCalled();
 308
 309                 var text = new Element('input', {
 310                         'type': 'text',
 311                         'class': 'otherClass',
 312                         'value': 'text value'
 313                 }).addEvent('change', callback).inject(document.body);
 314
 315                 text.removeClass('otherClass');
 316                 expect(callback).not.toHaveBeenCalled();
 317
 318                 [radio, checkbox, text].invoke('destroy');
 319         });
 320
 321 });
 322
 323 describe('Element.Event keyup with f<key>', function(){
 324
 325         it('should pass event.key == f2 when pressing f2 on keyup and keydown', function(){
 326
 327                 var keydown = jasmine.createSpy('keydown');
 328                 var keyup = jasmine.createSpy('keyup');
 329
 330                 var div = createElement('div')
 331                         .addEvent('keydown', function(event){
 332                                 keydown(event.key);
 333                         })
 334                         .addEvent('keyup', function(event){
 335                                 keyup(event.key);
 336                         })
 337                         .inject(document.body);
 338
 339                 Syn.trigger('keydown', 'f2', div);
 340                 Syn.trigger('keyup', 'f2', div);
 341
 342                 expect(keydown).toHaveBeenCalledWith('f2');
 343                 expect(keyup).toHaveBeenCalledWith('f2');
 344
 345                 div.destroy();
 346
 347         });
 348
 349 });
 350
 351 describe('Element.removeEvent', function(){
 352
 353         it('should remove the onunload method', function(){
 354                 var text;
 355                 var handler = function(){ text = 'nope'; };
 356                 window.addEvent('unload', handler);
 357                 window.removeEvent('unload', handler);
 358                 window.fireEvent('unload');
 359                 expect(text).toBe(undefined);
 360         });
 361
 362
 363 });
 364
 365 })();