Specs/Fx/Fx.Tween.js

   1 /*
   2 ---
   3 name: Fx.Tween
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8 describe('Fx.Tween', function(){
   9
  10         beforeEach(function(){
  11                 this.clock = sinon.useFakeTimers();
  12         });
  13
  14         afterEach(function(){
  15                 this.clock.reset();
  16                 this.clock.restore();
  17         });
  18
  19         it('should tween the style of an element', function(){
  20
  21                 var element = new Element('div#st_el', {
  22                         styles: {
  23                                 height: 100
  24                         }
  25                 }).inject(document.body);
  26
  27                 var fx = new Fx.Tween(element, {
  28                         duration: 100,
  29                         property: 'height'
  30                 });
  31
  32                 fx.start(10, 50);
  33
  34                 this.clock.tick(200);
  35
  36                 expect(element.getStyle('height').toInt()).to.equal(50);
  37                 element.destroy();
  38
  39         });
  40
  41         it('should tween the style of an element via Element.tween', function(){
  42
  43                 var element = new Element('div', {
  44                         styles: {
  45                                 width: 100
  46                         },
  47                         tween: {
  48                                 duration: 100
  49                         }
  50                 }).inject(document.body).tween('width', 50);
  51
  52                 this.clock.tick(200);
  53
  54                 expect(element.getStyle('width').toInt()).to.equal(50);
  55                 element.destroy();
  56
  57         });
  58
  59         it('should fade an element', function(){
  60
  61                 var element = new Element('div', {
  62                         styles: { opacity: 0 }
  63                 }).inject(document.body);
  64
  65                 element.set('tween', {
  66                         duration: 100
  67                 });
  68
  69                 element.fade('in');
  70
  71                 this.clock.tick(130);
  72
  73                 expect(element.getStyle('opacity').toInt()).to.equal(1);
  74                 element.destroy();
  75
  76         });
  77
  78         it('should fade out an element and fade in when triggerd inside the onComplete event', function(){
  79
  80                 var element = new Element('div').inject($(document.body));
  81                 var firstOpacity, lastOpacity, lastVisibility, runOnce = true;
  82                 element.set('tween', {
  83                         duration: 100,
  84                         onComplete: function (){
  85                 if(runOnce){
  86                     firstOpacity = this.element.getStyle('opacity');
  87                     runOnce && this.element.fade();
  88                     runOnce = false;
  89                 }
  90
  91                         }
  92                 });
  93
  94                 element.fade();
  95                 this.clock.tick(250);
  96                 lastOpacity = element.getStyle('opacity');
  97                 lastVisibility = element.getStyle('visibility');
  98
  99                 expect(firstOpacity.toInt()).to.equal(0);
 100                 expect(lastOpacity.toInt()).to.equal(1);
 101                 expect(lastVisibility).to.equal('visible');
 102                 element.destroy();
 103         });
 104
 105         it('should fade an element with toggle', function(){
 106
 107                 var element = new Element('div', {
 108                         styles: { opacity: 1 }
 109                 }).inject(document.body);
 110
 111                 element.set('tween', {
 112                         duration: 100
 113                 });
 114
 115                 element.fade('toggle');
 116
 117                 this.clock.tick(130);
 118
 119                 expect(element.getStyle('opacity').toInt()).to.equal(0);
 120                 element.destroy();
 121
 122         });
 123
 124         it('should set tween options with the element getter en setter', function(){
 125
 126                 var element = new Element('div');
 127
 128                 element.set('tween', {
 129                         duration: 100
 130                 });
 131
 132                 expect(element.get('tween').options.duration).to.equal(100);
 133
 134         });
 135
 136         it('should fade an element with toggle', function(){
 137
 138                 var element = new Element('div', {
 139                         tween: {
 140                                 duration: 10
 141                         }
 142                 }).setStyle('background-color', '#fff').inject(document.body);
 143
 144                 element.highlight('#f00');
 145
 146                 this.clock.tick(40);
 147
 148                 expect(['#fff', '#ffffff']).to.contain(element.getStyle('background-color').toLowerCase());
 149                 element.destroy();
 150
 151         });
 152
 153         describe('Element.fade', function(){
 154
 155                 it('Should set the visibility style', function(){
 156
 157                         var element = new Element('div', {styles: {'visibility': 'visible'}}).inject(document.body);
 158
 159                         expect(element.getStyles('opacity', 'visibility')).to.eql({opacity: 1, visibility: 'visible'});
 160
 161                         element.fade(0.5);
 162                         this.clock.tick(600);
 163                         expect(element.getStyles('opacity', 'visibility')).to.eql({opacity: 0.5, visibility: 'visible'});
 164
 165                         element.fade(0);
 166                         this.clock.tick(600);
 167                         expect(element.getStyles('opacity', 'visibility')).to.eql({opacity: 0, visibility: 'hidden'});
 168
 169                         element.fade(1);
 170                         this.clock.tick(600);
 171                         expect(element.getStyles('opacity', 'visibility')).to.eql({opacity: 1, visibility: 'visible'});
 172
 173                         element.destroy();
 174
 175                 });
 176
 177                 it('should accept the old style arguments (0, 1)', function(){
 178
 179                         var element = new Element('div');
 180                         element.fade(1, 0);
 181
 182                         var tween = element.get('tween');
 183
 184                         expect(tween.from[0].value).to.equal(1);
 185                         expect(tween.to[0].value).to.equal(0);
 186
 187                         this.clock.tick(1000);
 188
 189                         expect(element.getStyle('opacity')).to.equal(0);
 190
 191                 });
 192
 193         });
 194
 195 });