test/spec.core.js

   1 // Go tests, go
   2 describe('Deck JS', function() {
   3         describe('standard html structure', function() {
   4                 beforeEach(function() {
   5                         loadFixtures('standard.html');
   6                         if (Modernizr.history) {
   7                                 history.replaceState({}, "", "#")
   8                         }
   9                         else {
  10                                 window.location.hash = '#';
  11                         }
  12                 });
  13
  14                 describe('init(selector)', function() {
  15                         it('should create slides', function() {
  16                                 $.deck('.slide');
  17                                 expect($.deck('getSlides').length).toEqual($('.slide').length);
  18                         });
  19                 });
  20
  21                 describe('init([selectors])', function() {
  22                         it('should create slides', function() {
  23                                 $.deck([
  24                                         '.slide1',
  25                                         '.slide2',
  26                                         '.slide3',
  27                                         '.slide4',
  28                                         '.slide5'
  29                                 ]);
  30                                 expect($.deck('getSlides').length).toEqual($('.slide').length);
  31                         });
  32                 });
  33
  34                 describe('navigation functions', function() {
  35                         beforeEach(function() {
  36                                 $.deck('.slide');
  37                         });
  38
  39                         describe('go(i)', function() {
  40                                 it('should go to the i slide (0 based index)', function() {
  41                                         $.deck('go', 3);
  42                                         expect($.deck('getSlide')).toHaveClass('slide4');
  43                                 });
  44
  45                                 it('should go to the slide with specified id', function() {
  46                                         $.deck('go', 'custom-id');
  47                                         expect($.deck('getSlide')).toHaveId('custom-id');
  48                                 });
  49
  50                                 it('should go nowhere if i is out of bounds', function() {
  51                                         $.deck('go', 5);
  52                                         expect($.deck('getSlide')).toHaveClass('slide1');
  53                                 });
  54
  55                                 it('should go nowhere if id does not exist', function() {
  56                                         $.deck('go', 'i-dont-exist');
  57                                         expect($.deck('getSlide')).toHaveClass('slide1');
  58                                 });
  59                         });
  60
  61                         describe('next()', function() {
  62                                 it('should go to the next slide', function() {
  63                                         $.deck('next');
  64                                         expect($.deck('getSlide')).toHaveClass('slide2');
  65                                 });
  66
  67                                 it('should go nowhere if on the last slide', function() {
  68                                         $.deck('go', 4);
  69                                         $.deck('next');
  70                                         expect($.deck('getSlide')).toHaveClass('slide5');
  71                                 });
  72                         });
  73
  74                         describe('prev()', function() {
  75                                 it('should go to the previous slide', function() {
  76                                         $.deck('go', 2);
  77                                         $.deck('prev');
  78                                         expect($.deck('getSlide')).toHaveClass('slide2');
  79                                 });
  80
  81                                 it('should go nowhere if on the first slide', function() {
  82                                         $.deck('prev');
  83                                         expect($.deck('getSlide')).toHaveClass('slide1');
  84                                 });
  85                         });
  86                 });
  87
  88                 describe('getters', function() {
  89                         beforeEach(function() {
  90                                 $.deck('.slide');
  91                         });
  92
  93                         describe('getSlide()', function() {
  94                                 it('should get the current slide', function() {
  95                                         expect($.deck('getSlide')).toHaveClass('slide1');
  96                                         $.deck('go', 2);
  97                                         expect($.deck('getSlide')).toHaveClass('slide3');
  98                                 });
  99                         });
 100
 101                         describe('getSlide(i)', function() {
 102                                 it('should get slide number i (0 based index)', function() {
 103                                         expect($.deck('getSlide', 1)).toHaveClass('slide2');
 104                                         expect($.deck('getSlide', 3)).toHaveClass('slide4');
 105                                 });
 106
 107                                 it('should return null if i is NaN', function() {
 108                                         expect($.deck('getSlide', 'barfoo')).toBeNull();
 109                                 });
 110
 111                                 it('should return null if i is out of bounds', function() {
 112                                         expect($.deck('getSlide', 6)).toBeNull();
 113                                 });
 114                         });
 115
 116                         describe('getSlides()', function() {
 117                                 it('should return an array of jQuery objects for each slide', function() {
 118                                         var expectation = [],
 119                                         slides = $.deck('getSlides');
 120                                         $('.slide').each(function() {
 121                                                 expectation.push($(this));
 122                                         });
 123                                         expect(slides).toEqual(expectation);
 124                                 });
 125                         });
 126
 127                         describe('getContainer()', function() {
 128                                 it('should return a jQuery object with the container element(s)', function() {
 129                                         expect($.deck('getContainer')).toBe(defaults.selectors.container);
 130                                 });
 131                         });
 132
 133                         describe('getOptions()', function() {
 134                                 it('should return the current options object', function() {
 135                                         expect($.deck('getOptions')).toEqual(defaults);
 136                                 });
 137                         });
 138                 });
 139
 140                 describe('container states', function() {
 141                         beforeEach(function() {
 142                                 $.deck('.slide');
 143                         });
 144
 145                         it('should start at state 0', function() {
 146                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '0');
 147                         });
 148
 149                         it('should change states with the slide number', function() {
 150                                 $.deck('next');
 151                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '1');
 152                                 $.deck('go', 3);
 153                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '3');
 154                                 $.deck('prev');
 155                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '2');
 156                         });
 157                 });
 158
 159                 describe('options object', function() {
 160                         var $d = $(document);
 161
 162                         beforeEach(function() {
 163                                 $.deck('.alt-slide', {
 164                                         classes: {
 165                                                 after: 'alt-after',
 166                                                 before: 'alt-before',
 167                                                 current: 'alt-current',
 168                                                 onPrefix: 'alt-on-',
 169                                                 next: 'alt-next',
 170                                                 previous: 'alt-prev'
 171                                         },
 172
 173                                         selectors: {
 174                                                 container: '.alt-container'
 175                                         },
 176
 177                                         keys: {
 178                                                 next: 87,
 179                                                 previous: 69
 180                                         }
 181                                 });
 182                         });
 183
 184                         describe('classes', function() {
 185                                 it('should use the specified after class', function() {
 186                                         expect($('.alt-slide3, .alt-slide4, .alt-slide5')).toHaveClass('alt-after');
 187                                 });
 188
 189                                 it('should use the specified before class', function() {
 190                                         $.deck('go', 4);
 191                                         expect($('.alt-slide1, .alt-slide2, .alt-slide3')).toHaveClass('alt-before');
 192                                 });
 193
 194                                 it('should use the specified container class', function() {
 195                                         $.deck('go', 2);
 196                                         expect($('.alt-container')).toHaveClass('alt-on-2');
 197                                 });
 198
 199                                 it('should use the specified current class', function() {
 200                                         expect($.deck('getSlide')).toHaveClass('alt-current');
 201                                 });
 202
 203                                 it('should use the specified next class', function() {
 204                                         expect($('.alt-slide2')).toHaveClass('alt-next');
 205                                 });
 206
 207                                 it('should use the specified previous class', function() {
 208                                         $.deck('next');
 209                                         expect($('.alt-slide1')).toHaveClass('alt-prev');
 210                                 });
 211                         });
 212
 213                         describe('key bindings', function() {
 214                                 var e;
 215
 216                                 beforeEach(function() {
 217                                         e = jQuery.Event('keydown.deck');
 218                                 });
 219
 220                                 it('should go to the next slide using the specified key', function() {
 221                                         e.which = 87; // 'w'
 222                                         $d.trigger(e);
 223                                         expect($.deck('getSlide')).toHaveClass('alt-slide2');
 224                                 });
 225
 226                                 it('should go to the previous slide using the specified key', function() {
 227                                         $.deck('next');
 228                                         e.which = 69; // 'e'
 229                                         $d.trigger(e);
 230                                         expect($.deck('getSlide')).toHaveClass('alt-slide1');
 231                                 });
 232
 233                                 it('should not trigger events that originate within editable elements', function() {
 234                                         e = jQuery.Event('keydown');
 235                                         e.which = 87;
 236                                         $('.alt-slide1 input').trigger(e);
 237                                         expect($.deck('getSlide')).toHaveClass('alt-slide1');
 238                                 });
 239                         });
 240                 });
 241
 242                 describe('events', function() {
 243                         var $d = $(document);
 244
 245                         beforeEach(function() {
 246                                 spyOnEvent($d, 'deck.init');
 247                                 spyOnEvent($d, 'deck.beforeInit');
 248                                 $.deck('.slide');
 249                                 $.deck('go', 1);
 250                                 spyOnEvent($d, 'deck.change');
 251                         });
 252
 253                         describe('deck.change', function() {
 254                                 it('should fire on go(i)', function() {
 255                                         $.deck('go', 3);
 256                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 257                                 });
 258
 259                                 it('should fire on next()', function() {
 260                                         $.deck('next');
 261                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 262                                 });
 263
 264                                 it('should fire on prev()', function() {
 265                                         $.deck('prev');
 266                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 267                                 });
 268
 269                                 it('should pass parameters with from and to indices', function() {
 270                                         var f = function(e, from, to) {
 271                                                 expect(from).toEqual(1);
 272                                                 expect(to).toEqual(3);
 273                                         };
 274
 275                                         $d.bind('deck.change', f);
 276                                         $.deck('go', 3);
 277                                         $d.unbind('deck.change', f);
 278                                 });
 279
 280                                 it('should not change slides if default prevented', function() {
 281                                         $d.bind('deck.change', false);
 282                                         $.deck('go', 3);
 283                                         expect($.deck('getSlide')).toEqual($.deck('getSlide', 1));
 284                                         $d.unbind('deck.change', false);
 285                                 });
 286                         });
 287
 288                         describe('deck.init', function() {
 289                                 it('should fire on deck initialization', function() {
 290                                         expect('deck.init').toHaveBeenTriggeredOn($d);
 291                                 });
 292
 293                                 it('should have already populated the slides array', function() {
 294                                         var f = function() {
 295                                                 expect($.deck('getSlides').length).toBeGreaterThan(0);
 296                                         };
 297
 298                                         $d.bind('deck.init', f);
 299                                         $.deck('.slide');
 300                                         $d.unbind('deck.init', f);
 301                                 });
 302                         });
 303
 304                         describe('deck.beforeInit', function() {
 305                                 it('should fire on deck initialization', function() {
 306                                         expect('deck.beforeInit').toHaveBeenTriggeredOn($d);
 307                                 });
 308
 309                                 it('should have not populated the slides array', function() {
 310                                         var f = function() {
 311                                                 expect($.deck('getSlides').length).toEqual(0);
 312                                         };
 313
 314                                         $d.bind('deck.beforeInit', f);
 315                                         $.deck('.slide');
 316                                         $d.unbind('deck.beforeInit', f);
 317                                 });
 318                         });
 319                 });
 320         });
 321
 322         describe('complex html structure', function() {
 323                 beforeEach(function() {
 324                         loadFixtures('complex.html');
 325                         if (Modernizr.history) {
 326                                 history.replaceState({}, "", "#")
 327                         }
 328                         $.deck([
 329                                 '.slide1',
 330                                 '.slide2',
 331                                 '.slide3',
 332                                 '.slide4',
 333                                 '.slide5',
 334                                 '.slide6',
 335                                 '.slide7',
 336                                 '.slide8',
 337                                 '.slide9',
 338                                 '.slide10',
 339                         ]);
 340                         $.deck('go', 2);
 341                 });
 342
 343                 describe('compound state classes', function() {
 344                         it('should apply current class', function() {
 345                                 $('.slide3').each(function(i, el) {
 346                                         expect($(el)).toHaveClass(defaults.classes.current);
 347                                 });
 348                         });
 349
 350                         it('should apply previous class', function() {
 351                                 $('.slide2').each(function(i, el) {
 352                                         expect($(el)).toHaveClass(defaults.classes.previous);
 353                                 });
 354                         });
 355
 356                         it('should apply next class', function() {
 357                                 $('.slide4').each(function(i, el) {
 358                                         expect($(el)).toHaveClass(defaults.classes.next);
 359                                 });
 360                         });
 361
 362                         it('should apply before class', function() {
 363                                 $('.slide1').each(function(i, el) {
 364                                         expect($(el)).toHaveClass(defaults.classes.before);
 365                                 });
 366                         });
 367
 368                         it('should apply after class', function() {
 369                                 $('.slide5, .slide6, .slide7, .slide8, .slide9, .slide10').each(function(i, el) {
 370                                         expect($(el)).toHaveClass(defaults.classes.after);
 371                                 });
 372                         });
 373
 374                         it('should apply child-current class', function() {
 375                                 expect($('.slide2').not('.slide10')).toHaveClass(defaults.classes.childCurrent);
 376                         });
 377                 });
 378
 379                 it('should remove old state classes', function() {
 380                         $.deck('go', 4);
 381                         expect($('.slide3').not('.slide5')).not.toHaveClass(defaults.classes.current);
 382                         expect($('.slide2').not('.slide4')).not.toHaveClass(defaults.classes.previous);
 383                         expect($('.slide4').not('.slide6')).not.toHaveClass(defaults.classes.next);
 384                 });
 385         });
 386
 387         describe('iframes', function() {
 388                 beforeEach(function() {
 389                         loadFixtures('iframes.html');
 390                         if (Modernizr.history) {
 391                                 history.replaceState({}, "", "#")
 392                         }
 393                         $.deck([
 394                                 '.slide1',
 395                                 '.slide2',
 396                                 '.slide3',
 397                                 '.slide4',
 398                                 '.slide5',
 399                                 '.slide6',
 400                                 '.slide7',
 401                                 '.slide8',
 402                                 '.slide9',
 403                                 '.slide10',
 404                         ]);
 405
 406                 });
 407
 408                 it('should remove/restore iframe sources when leaving/entering a slide', function() {
 409                         $.deck('go', 4);
 410                 expect($.deck('getSlide').find('iframe').attr('src')).toEqual('fixtures/iframe_simple.html');
 411                 $.deck('next');
 412                 expect($('.slide5').find('iframe').attr('src')).toEqual('');
 413             $.deck('prev');
 414             expect($('.slide5').find('iframe').attr('src')).toEqual('fixtures/iframe_simple.html');
 415         });
 416
 417                 it('should not store blank iframe sources', function() {
 418                   $.deck('go', 6);
 419                   $.deck('next');
 420                   expect($.deck('getSlide').find('iframe').data('src')).toBeUndefined();
 421                 });
 422         });
 423
 424         describe('empty deck', function() {
 425                 beforeEach(function() {
 426                         loadFixtures('empty.html');
 427                         $.deck('.slide');
 428                 });
 429
 430                 describe('getSlide()', function() {
 431                         it('should not error on init', $.noop);
 432                 });
 433         });
 434 });