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 nowhere if i is NaN', function() {
  46                                         $.deck('go', 'foobar');
  47                                         expect($.deck('getSlide')).toHaveClass('slide1');
  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
  56                         describe('next()', function() {
  57                                 it('should go to the next slide', function() {
  58                                         $.deck('next');
  59                                         expect($.deck('getSlide')).toHaveClass('slide2');
  60                                 });
  61
  62                                 it('should go nowhere if on the last slide', function() {
  63                                         $.deck('go', 4);
  64                                         $.deck('next');
  65                                         expect($.deck('getSlide')).toHaveClass('slide5');
  66                                 });
  67                         });
  68
  69                         describe('prev()', function() {
  70                                 it('should go to the previous slide', function() {
  71                                         $.deck('go', 2);
  72                                         $.deck('prev');
  73                                         expect($.deck('getSlide')).toHaveClass('slide2');
  74                                 });
  75
  76                                 it('should go nowhere if on the first slide', function() {
  77                                         $.deck('prev');
  78                                         expect($.deck('getSlide')).toHaveClass('slide1');
  79                                 });
  80                         });
  81                 });
  82
  83                 describe('getters', function() {
  84                         beforeEach(function() {
  85                                 $.deck('.slide');
  86                         });
  87
  88                         describe('getSlide()', function() {
  89                                 it('should get the current slide', function() {
  90                                         expect($.deck('getSlide')).toHaveClass('slide1');
  91                                         $.deck('go', 2);
  92                                         expect($.deck('getSlide')).toHaveClass('slide3');
  93                                 });
  94                         });
  95
  96                         describe('getSlide(i)', function() {
  97                                 it('should get slide number i (0 based index)', function() {
  98                                         expect($.deck('getSlide', 1)).toHaveClass('slide2');
  99                                         expect($.deck('getSlide', 3)).toHaveClass('slide4');
 100                                 });
 101
 102                                 it('should return null if i is NaN', function() {
 103                                         expect($.deck('getSlide', 'barfoo')).toBeNull();
 104                                 });
 105
 106                                 it('should return null if i is out of bounds', function() {
 107                                         expect($.deck('getSlide', 6)).toBeNull();
 108                                 });
 109                         });
 110
 111                         describe('getSlides()', function() {
 112                                 it('should return an array of jQuery objects for each slide', function() {
 113                                         var expectation = [],
 114                                         slides = $.deck('getSlides');
 115                                         $('.slide').each(function() {
 116                                                 expectation.push($(this));
 117                                         });
 118                                         expect(slides).toEqual(expectation);
 119                                 });
 120                         });
 121
 122                         describe('getContainer()', function() {
 123                                 it('should return a jQuery object with the container element(s)', function() {
 124                                         expect($.deck('getContainer')).toBe(defaults.selectors.container);
 125                                 });
 126                         });
 127
 128                         describe('getOptions()', function() {
 129                                 it('should return the current options object', function() {
 130                                         expect($.deck('getOptions')).toEqual(defaults);
 131                                 });
 132                         });
 133                 });
 134
 135                 describe('container states', function() {
 136                         beforeEach(function() {
 137                                 $.deck('.slide');
 138                         });
 139
 140                         it('should start at state 0', function() {
 141                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '0');
 142                         });
 143
 144                         it('should change states with the slide number', function() {
 145                                 $.deck('next');
 146                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '1');
 147                                 $.deck('go', 3);
 148                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '3');
 149                                 $.deck('prev');
 150                                 expect($(defaults.selectors.container)).toHaveClass(defaults.classes.onPrefix + '2');
 151                         });
 152                 });
 153
 154                 describe('options object', function() {
 155                         var $d = $(document);
 156
 157                         beforeEach(function() {
 158                                 $.deck('.alt-slide', {
 159                                         classes: {
 160                                                 after: 'alt-after',
 161                                                 before: 'alt-before',
 162                                                 current: 'alt-current',
 163                                                 onPrefix: 'alt-on-',
 164                                                 next: 'alt-next',
 165                                                 previous: 'alt-prev'
 166                                         },
 167
 168                                         selectors: {
 169                                                 container: '.alt-container'
 170                                         },
 171
 172                                         keys: {
 173                                                 next: 87,
 174                                                 previous: 69
 175                                         }
 176                                 });
 177                         });
 178
 179                         describe('classes', function() {
 180                                 it('should use the specified after class', function() {
 181                                         expect($('.alt-slide3, .alt-slide4, .alt-slide5')).toHaveClass('alt-after');
 182                                 });
 183
 184                                 it('should use the specified before class', function() {
 185                                         $.deck('go', 4);
 186                                         expect($('.alt-slide1, .alt-slide2, .alt-slide3')).toHaveClass('alt-before');
 187                                 });
 188
 189                                 it('should use the specified container class', function() {
 190                                         $.deck('go', 2);
 191                                         expect($('.alt-container')).toHaveClass('alt-on-2');
 192                                 });
 193
 194                                 it('should use the specified current class', function() {
 195                                         expect($.deck('getSlide')).toHaveClass('alt-current');
 196                                 });
 197
 198                                 it('should use the specified next class', function() {
 199                                         expect($('.alt-slide2')).toHaveClass('alt-next');
 200                                 });
 201
 202                                 it('should use the specified previous class', function() {
 203                                         $.deck('next');
 204                                         expect($('.alt-slide1')).toHaveClass('alt-prev');
 205                                 });
 206                         });
 207
 208                         describe('key bindings', function() {
 209                                 var e;
 210
 211                                 beforeEach(function() {
 212                                         e = jQuery.Event('keydown.deck');
 213                                 });
 214
 215                                 it('should go to the next slide using the specified key', function() {
 216                                         e.which = 87; // 'w'
 217                                         $d.trigger(e);
 218                                         expect($.deck('getSlide')).toHaveClass('alt-slide2');
 219                                 });
 220
 221                                 it('should go to the previous slide using the specified key', function() {
 222                                         $.deck('next');
 223                                         e.which = 69; // 'e'
 224                                         $d.trigger(e);
 225                                         expect($.deck('getSlide')).toHaveClass('alt-slide1');
 226                                 });
 227
 228                                 it('should not trigger events that originate within editable elements', function() {
 229                                         e = jQuery.Event('keydown');
 230                                         e.which = 87;
 231                                         $('.alt-slide1 input').trigger(e);
 232                                         expect($.deck('getSlide')).toHaveClass('alt-slide1');
 233                                 });
 234                         });
 235                 });
 236
 237                 describe('events', function() {
 238                         var $d = $(document);
 239
 240                         beforeEach(function() {
 241                                 $.deck('.slide');
 242                                 $.deck('go', 1);
 243                                 spyOnEvent($d, 'deck.change');
 244                         });
 245
 246                         describe('deck.change', function() {
 247                                 it('should fire on go(i)', function() {
 248                                         $.deck('go', 3);
 249                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 250                                 });
 251
 252                                 it('should fire on next()', function() {
 253                                         $.deck('next');
 254                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 255                                 });
 256
 257                                 it('should fire on prev()', function() {
 258                                         $.deck('prev');
 259                                         expect('deck.change').toHaveBeenTriggeredOn($d);
 260                                 });
 261
 262                                 it('should pass parameters with from and to indices', function() {
 263                                         var f = function(e, from, to) {
 264                                                 expect(from).toEqual(1);
 265                                                 expect(to).toEqual(3);
 266                                         };
 267
 268                                         $d.bind('deck.change', f);
 269                                         $.deck('go', 3);
 270                                         $d.unbind('deck.change', f);
 271                                 });
 272                         });
 273                 });
 274         });
 275
 276         describe('complex html structure', function() {
 277                 beforeEach(function() {
 278                         loadFixtures('complex.html');
 279                         if (Modernizr.history) {
 280                                 history.replaceState({}, "", "#")
 281                         }
 282                         $.deck([
 283                                 '.slide1',
 284                                 '.slide2',
 285                                 '.slide3',
 286                                 '.slide4',
 287                                 '.slide5',
 288                                 '.slide6',
 289                                 '.slide7',
 290                                 '.slide8',
 291                                 '.slide9',
 292                                 '.slide10',
 293                         ]);
 294                         $.deck('go', 2);
 295                 });
 296
 297                 describe('compound state classes', function() {
 298                         it('should apply current class', function() {
 299                                 $('.slide3').each(function(i, el) {
 300                                         expect($(el)).toHaveClass(defaults.classes.current);
 301                                 });
 302                         });
 303
 304                         it('should apply previous class', function() {
 305                                 $('.slide2').each(function(i, el) {
 306                                         expect($(el)).toHaveClass(defaults.classes.previous);
 307                                 });
 308                         });
 309
 310                         it('should apply next class', function() {
 311                                 $('.slide4').each(function(i, el) {
 312                                         expect($(el)).toHaveClass(defaults.classes.next);
 313                                 });
 314                         });
 315
 316                         it('should apply before class', function() {
 317                                 $('.slide1').each(function(i, el) {
 318                                         expect($(el)).toHaveClass(defaults.classes.before);
 319                                 });
 320                         });
 321
 322                         it('should apply after class', function() {
 323                                 $('.slide5, .slide6, .slide7, .slide8, .slide9, .slide10').each(function(i, el) {
 324                                         expect($(el)).toHaveClass(defaults.classes.after);
 325                                 });
 326                         });
 327
 328                         it('should apply child-current class', function() {
 329                                 expect($('.slide2').not('.slide10')).toHaveClass(defaults.classes.childCurrent);
 330                         });
 331                 });
 332
 333                 it('should remove old state classes', function() {
 334                         $.deck('go', 4);
 335                         expect($('.slide3').not('.slide5')).not.toHaveClass(defaults.classes.current);
 336                         expect($('.slide2').not('.slide4')).not.toHaveClass(defaults.classes.previous);
 337                         expect($('.slide4').not('.slide6')).not.toHaveClass(defaults.classes.next);
 338                 });
 339         });
 340 });