fabric.js/test/unit/animation.js

(function() {
  QUnit.module('fabric.util.animate');

  QUnit.test('animateColor', function(assert) {
    var done = assert.async();
    function testing(val) {
      assert.notEqual(val, 'rgba(0,0,255,1)', 'color is not blue');
    }
    assert.ok(typeof fabric.util.animateColor === 'function', 'animateColor is a function');
    fabric.util.animateColor('red', 'blue', 16, {
      onComplete: function() {
        // animate color need some fixing
        // assert.equal(val, 'rgba(0,0,255,1)', 'color is blue')
        done();
      },
      onChange: testing,
    });
  });

  QUnit.test('animate', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });

    assert.ok(typeof object.animate === 'function');

    object.animate('left', 40);
    assert.ok(true, 'animate without options does not crash');

    setTimeout(function() {

      assert.equal(40, Math.round(object.left), 'left has been animated to 40');
      done();

    }, 1000);
  });

  QUnit.test('animate with increment', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });

    object.animate('left', '+=40');
    assert.ok(true, 'animate without options does not crash');

    setTimeout(function() {

      assert.equal(Math.round(object.left), 60, 'left has been increased by 40');
      done();
    }, 1000);
  });

  QUnit.test('animate with keypath', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43, shadow: { offsetX: 20 } });

    object.animate('shadow.offsetX', 100);
    assert.ok(true, 'animate without options does not crash');

    setTimeout(function() {
      assert.equal(Math.round(object.shadow.offsetX), 100, 'property has been animated');
      done();
    }, 1000);
  });

  QUnit.test('animate with decrement', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });

    object.animate('left', '-=40');
    assert.ok(true, 'animate without options does not crash');

    setTimeout(function() {

      assert.equal(Math.round(object.left), -20, 'left has been decreased by 40');
      done();
    }, 1000);
  });

  QUnit.test('animate with object', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 20, top: 30, width: 40, height: 50, angle: 43 });

    assert.ok(typeof object.animate === 'function');

    object.animate({ left: 40});
    assert.ok(true, 'animate without options does not crash');

    setTimeout(function() {
      assert.equal(40, Math.round(object.left));
      done();
    }, 1000);
  });

  QUnit.test('animate multiple properties', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 123, top: 124 });
    object.animate({ left: 223, top: 224 });
    setTimeout(function() {
      assert.equal(223, Math.round(object.get('left')));
      assert.equal(224, Math.round(object.get('top')));
      done();
    }, 1000);
  });

  QUnit.test('animate multiple properties with callback', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 0, top: 0 });

    var changedInvocations = 0;
    var completeInvocations = 0;

    object.animate({ left: 1, top: 1 }, {
      duration: 1,
      onChange: function() {
        changedInvocations++;
      },
      onComplete: function() {
        completeInvocations++;
      }
    });

    setTimeout(function() {

      assert.equal(Math.round(object.get('left')), 1);
      assert.equal(Math.round(object.get('top')), 1);

      assert.equal(changedInvocations, 2);
      assert.equal(completeInvocations, 1);

      done();

    }, 1000);
  });

  QUnit.test('animate with abort', function(assert) {
    var done = assert.async();
    var object = new fabric.Object({ left: 123, top: 124 });

    var context;
    object.animate({ left: 223, top: 224 }, {
      abort: function() {
        context = this;
        return true;
      }
    });

    setTimeout(function() {
      assert.equal(123, Math.round(object.get('left')));
      assert.equal(124, Math.round(object.get('top')));
      assert.equal(context, object, 'abort should be called in context of an object');
      done();
    }, 100);
  });

  QUnit.test('animate easing easeInQuad', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInQuad === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInQuad
    });
  });

  QUnit.test('animate easing easeOutQuad', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutQuad === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutQuad
    });
  });

  QUnit.test('animate easing easeInOutQuad', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutQuad === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutQuad
    });
  });

  QUnit.test('animate easing easeInCubic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInCubic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInCubic
    });
  });

  QUnit.test('animate easing easeOutCubic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutCubic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutCubic
    });
  });

  QUnit.test('animate easing easeInOutCubic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutCubic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutCubic
    });
  });

  QUnit.test('animate easing easeInQuart', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInQuart === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInQuart
    });
  });

  QUnit.test('animate easing easeOutQuart', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutQuart === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutQuart
    });
  });

  QUnit.test('animate easing easeInOutQuart', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutQuart === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutQuart
    });
  });

  QUnit.test('animate easing easeInQuint', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInQuint === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInQuint
    });
  });

  QUnit.test('animate easing easeOutQuint', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutQuint === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutQuint
    });
  });


  // easeInOutQuint: easeInOutQuint,
  QUnit.test('animate easing easeInOutQuint', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutQuint === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutQuint
    });
  });

  // easeInSine: easeInSine,
  QUnit.test('animate easing easeInSine', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInSine === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInSine
    });
  });

  // easeOutSine: easeOutSine,
  QUnit.test('animate easing easeOutSine', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutSine === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutSine
    });
  });

  // easeInOutSine: easeInOutSine,
  QUnit.test('animate easing easeInOutSine', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutSine === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutSine
    });
  });

  // easeInExpo: easeInExpo,
  QUnit.test('animate easing easeInExpo', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInExpo === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInExpo
    });
  });

  // easeOutExpo: easeOutExpo,
  QUnit.test('animate easing easeOutExpo', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutExpo === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutExpo
    });
  });

  // easeInOutExpo: easeInOutExpo,
  QUnit.test('animate easing easeInOutExpo', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutExpo === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutExpo
    });
  });

  // easeInCirc: easeInCirc,
  QUnit.test('animate easing easeInCirc', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInCirc === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInCirc
    });
  });

  // easeOutCirc: easeOutCirc,
  QUnit.test('animate easing easeOutCirc', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutCirc === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutCirc
    });
  });

  // easeInOutCirc: easeInOutCirc,
  QUnit.test('animate easing easeInOutCirc', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutCirc === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutCirc
    });
  });

  // easeInElastic: easeInElastic,
  QUnit.test('animate easing easeInElastic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInElastic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInElastic
    });
  });

  // easeOutElastic: easeOutElastic,
  QUnit.test('animate easing easeOutElastic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutElastic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutElastic
    });
  });

  // easeInOutElastic: easeInOutElastic,
  QUnit.test('animate easing easeInOutElastic', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutElastic === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutElastic
    });
  });

  // easeInBack: easeInBack,
  QUnit.test('animate easing easeInBack', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInBack === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInBack
    });
  });

  // easeOutBack: easeOutBack,
  QUnit.test('animate easing easeOutBack', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutBack === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutBack
    });
  });

  // easeInOutBack: easeInOutBack,
  QUnit.test('animate easing easeInOutBack', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutBack === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutBack
    });
  });

  // easeInBounce: easeInBounce,
  QUnit.test('animate easing easeInBounce', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInBounce === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInBounce
    });
  });

  // easeOutBounce: easeOutBounce,
  QUnit.test('animate easing easeOutBounce', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeOutBounce === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeOutBounce
    });
  });

  // easeInOutBounce: easeInOutBounce
  QUnit.test('animate easing easeInOutBounce', function(assert) {
    var done = assert.async();
    assert.ok(typeof fabric.util.ease.easeInOutBounce === 'function');
    var object = new fabric.Object({ left: 0 });
    object.animate({ left: 100 }, {
      onComplete: function() {
        assert.equal(Math.round(object.left), 100, 'animation ended correctly');
        done();
      },
      duration: 160,
      easing: fabric.util.ease.easeInOutBounce
    });
  });

})();