Specs/Fx/Fx.Morph.js

   1 /*
   2 ---
   3 name: Fx.Morph
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8
   9 describe('Fx.Morph', function(){
  10
  11         beforeEach(function(){
  12                 this.clock = sinon.useFakeTimers();
  13
  14                 this.div = new Element('div', {'class': 'pos-abs-left'});
  15                 this.style = new Element('style');
  16                 var definition = [
  17                         '.pos-abs-left {',
  18                         '    position: absolute;',
  19                         '    width: 200px;',
  20                         '    height: 200px;',
  21                         '    left: 10%;',
  22                         '    background: red',
  23                         '}'
  24                 ].join('');
  25
  26                 [this.style, this.div].invoke('inject', document.body);
  27
  28                 if (this.style.styleSheet) this.style.styleSheet.cssText = definition;
  29                 else this.style.set('text', definition);
  30         });
  31
  32         afterEach(function(){
  33                 this.clock.reset();
  34                 this.clock.restore();
  35                 [this.div, this.style].invoke('destroy');
  36         });
  37
  38         it('should morph the style of an element', function(){
  39                 var element = new Element('div', {
  40                         styles: {
  41                                 height: 100,
  42                                 width: 100
  43                         }
  44                 }).inject(document.body);
  45
  46                 var fx = new Fx.Morph(element, {
  47                         duration: 100
  48                 });
  49
  50                 fx.start({
  51                         height: [10, 50],
  52                         width: [10, 50]
  53                 });
  54
  55                 this.clock.tick(200);
  56
  57                 expect(element.getStyle('height').toInt()).to.equal(50);
  58                 expect(element.getStyle('width').toInt()).to.equal(50);
  59                 element.destroy();
  60         });
  61
  62         it('should set morph options with the element getter and setter', function(){
  63                 var element = new Element('div');
  64
  65                 element.set('morph', {
  66                         duration: 100
  67                 });
  68
  69                 expect(element.get('morph').options.duration).to.equal(100);
  70         });
  71
  72         it('should morph between % units', function(){
  73                 sinon.spy(this.div, 'setStyle');
  74                 this.div.set('morph', {unit : '%'}).morph({'left': [10, 50]});
  75
  76                 this.clock.tick(1000);
  77
  78                 expect(this.div.setStyle.calledWith('left', ['10%'])).to.equal(true);
  79                 expect(this.div.setStyle.calledWith('left', ['50%'])).to.equal(true);
  80
  81                 this.div.setStyle.restore();
  82         });
  83
  84         it('it should morph when the unit option is set, but an empty value', function(){
  85                 this.div.set('morph', {
  86                         duration: 100,
  87                         unit: 'px'
  88                 }).morph({
  89                         opacity: 1,
  90                         top : 100
  91                 });
  92
  93                 this.clock.tick(150);
  94
  95                 expect(this.div.getStyle('top')).to.equal('100px');
  96                 expect(this.div.getStyle('opacity')).to.equal(1);
  97         });
  98
  99         it('it should morph when the unit option is set, but the style value is a number', function(){
 100                 this.div.setStyles({
 101                         top: '50px',
 102                         opacity: 0
 103                 }).set('morph', {
 104                         duration: 100,
 105                         unit: 'px'
 106                 }).morph({
 107                         opacity: 1,
 108                         top : 100
 109                 });
 110
 111                 this.clock.tick(150);
 112
 113                 expect(this.div.getStyle('top')).to.equal('100px');
 114                 expect(this.div.getStyle('opacity')).to.equal(1);
 115         });
 116
 117 });