Specs/Fx/Fx.Morph.js

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