mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
describe('Chart.Animation', function() {
|
|
it('should animate boolean', function() {
|
|
const target = {prop: false};
|
|
const anim = new Chart.Animation({duration: 1000}, target, 'prop', true);
|
|
expect(anim.active()).toBeTrue();
|
|
|
|
anim.tick(anim._start + 500);
|
|
expect(anim.active()).toBeTrue();
|
|
expect(target.prop).toBeFalse();
|
|
|
|
anim.tick(anim._start + 501);
|
|
expect(anim.active()).toBeTrue();
|
|
expect(target.prop).toBeTrue();
|
|
|
|
anim.tick(anim._start - 100);
|
|
expect(anim.active()).toBeTrue();
|
|
expect(target.prop).toBeFalse();
|
|
|
|
anim.tick(anim._start + 1000);
|
|
expect(anim.active()).toBeFalse();
|
|
expect(target.prop).toBeTrue();
|
|
});
|
|
|
|
describe('color', function() {
|
|
it('should fall back to transparent', function() {
|
|
const target = {};
|
|
const anim = new Chart.Animation({duration: 1000, type: 'color'}, target, 'color', 'red');
|
|
anim._from = undefined;
|
|
anim.tick(anim._start + 500);
|
|
expect(target.color).toEqual('#FF000080');
|
|
|
|
anim._from = 'blue';
|
|
anim._to = undefined;
|
|
anim.tick(anim._start + 500);
|
|
expect(target.color).toEqual('#0000FF80');
|
|
});
|
|
|
|
it('should not try to mix invalid color', function() {
|
|
const target = {color: 'blue'};
|
|
const anim = new Chart.Animation({duration: 1000, type: 'color'}, target, 'color', 'invalid');
|
|
anim.tick(anim._start + 500);
|
|
expect(target.color).toEqual('invalid');
|
|
});
|
|
});
|
|
|
|
it('should loop', function() {
|
|
const target = {value: 0};
|
|
const anim = new Chart.Animation({duration: 100, loop: true}, target, 'value', 10);
|
|
anim.tick(anim._start + 50);
|
|
expect(target.value).toEqual(5);
|
|
anim.tick(anim._start + 100);
|
|
expect(target.value).toEqual(10);
|
|
anim.tick(anim._start + 150);
|
|
expect(target.value).toEqual(5);
|
|
anim.tick(anim._start + 400);
|
|
expect(target.value).toEqual(0);
|
|
});
|
|
|
|
it('should update', function() {
|
|
const target = {testColor: 'transparent'};
|
|
const anim = new Chart.Animation({duration: 100, type: 'color'}, target, 'testColor', 'red');
|
|
|
|
anim.tick(anim._start + 50);
|
|
expect(target.testColor).toEqual('#FF000080');
|
|
|
|
anim.update({duration: 500}, 'blue', Date.now());
|
|
anim.tick(anim._start + 250);
|
|
expect(target.testColor).toEqual('#4000BFBF');
|
|
|
|
anim.tick(anim._start + 500);
|
|
expect(target.testColor).toEqual('blue');
|
|
});
|
|
|
|
it('should not update when finished', function() {
|
|
const target = {testColor: 'transparent'};
|
|
const anim = new Chart.Animation({duration: 100, type: 'color'}, target, 'testColor', 'red');
|
|
|
|
anim.tick(anim._start + 100);
|
|
expect(target.testColor).toEqual('red');
|
|
expect(anim.active()).toBeFalse();
|
|
|
|
anim.update({duration: 500}, 'blue', Date.now());
|
|
expect(anim._duration).toEqual(100);
|
|
expect(anim._to).toEqual('red');
|
|
});
|
|
});
|