Chart.js/test/specs/global.deprecations.tests.js
Ricardo Costa 009ae4dec6 Support hover animation duration during updates (#4300)
See discussion in the issue for context and possible approaches.

When invoking update() inside an event handler, such as onHover,
`options.hover.animationDuration` was not being respected. Given that
some use cases may require additional animation properties for the
manual update call, this commit changes that method signature to accept
a configuration object.

This object provides backwards compatibility with duration and lazy
properties, and also introduces the easing property so that the event
animation is different from the global one. 

Add tests that guarantee that when update is called manually with
arguments, it properly builds the _bufferedRequest or calls render with
the proper arguments.
It includes test cases for when update is called with legacy arguments
(duration and lazy) instead of the config object.

.update() documentation was previously updated but .render() was left
out. Since the backwards compatible change was also made to render(),
this commit adds documentation for it.
2017-06-11 12:06:39 -04:00

219 lines
5.7 KiB
JavaScript

describe('Deprecations', function() {
describe('Version 2.7.0', function() {
describe('Chart.Controller.update(duration, lazy)', function() {
beforeEach(function() {
this.chart = acquireChart({
type: 'doughnut',
options: {
animation: {
easing: 'linear',
duration: 500
}
}
});
this.addAnimationSpy = spyOn(Chart.animationService, 'addAnimation');
});
it('should add an animation with the provided options', function() {
this.chart.update(800, false);
expect(this.addAnimationSpy).toHaveBeenCalledWith(
this.chart,
jasmine.objectContaining({easing: 'linear'}),
800,
false
);
});
});
describe('Chart.Controller.render(duration, lazy)', function() {
beforeEach(function() {
this.chart = acquireChart({
type: 'doughnut',
options: {
animation: {
easing: 'linear',
duration: 500
}
}
});
this.addAnimationSpy = spyOn(Chart.animationService, 'addAnimation');
});
it('should add an animation with the provided options', function() {
this.chart.render(800, true);
expect(this.addAnimationSpy).toHaveBeenCalledWith(
this.chart,
jasmine.objectContaining({easing: 'linear'}),
800,
true
);
});
});
});
describe('Version 2.6.0', function() {
// https://github.com/chartjs/Chart.js/issues/2481
describe('Chart.Controller', function() {
it('should be defined and an alias of Chart', function() {
expect(Chart.Controller).toBeDefined();
expect(Chart.Controller).toBe(Chart);
});
it('should be prototype of chart instances', function() {
var chart = acquireChart({});
expect(chart.constructor).toBe(Chart.Controller);
expect(chart instanceof Chart.Controller).toBeTruthy();
expect(Chart.Controller.prototype.isPrototypeOf(chart)).toBeTruthy();
});
});
describe('chart.chart', function() {
it('should be defined and an alias of chart', function() {
var chart = acquireChart({});
var proxy = chart.chart;
expect(proxy).toBeDefined();
expect(proxy).toBe(chart);
});
it('should defined previously existing properties', function() {
var chart = acquireChart({}, {
canvas: {
style: 'width: 140px; height: 320px'
}
});
var proxy = chart.chart;
expect(proxy.config instanceof Object).toBeTruthy();
expect(proxy.controller instanceof Chart.Controller).toBeTruthy();
expect(proxy.canvas instanceof HTMLCanvasElement).toBeTruthy();
expect(proxy.ctx instanceof CanvasRenderingContext2D).toBeTruthy();
expect(proxy.currentDevicePixelRatio).toBe(window.devicePixelRatio || 1);
expect(proxy.aspectRatio).toBe(140/320);
expect(proxy.height).toBe(320);
expect(proxy.width).toBe(140);
});
});
describe('Chart.Animation.animationObject', function() {
it('should be defined and an alias of Chart.Animation', function(done) {
var animation = null;
acquireChart({
options: {
animation: {
duration: 50,
onComplete: function(arg) {
animation = arg;
}
}
}
});
setTimeout(function() {
expect(animation).not.toBeNull();
expect(animation.animationObject).toBeDefined();
expect(animation.animationObject).toBe(animation);
done();
}, 200);
});
});
describe('Chart.Animation.chartInstance', function() {
it('should be defined and an alias of Chart.Animation.chart', function(done) {
var animation = null;
var chart = acquireChart({
options: {
animation: {
duration: 50,
onComplete: function(arg) {
animation = arg;
}
}
}
});
setTimeout(function() {
expect(animation).not.toBeNull();
expect(animation.chartInstance).toBeDefined();
expect(animation.chartInstance).toBe(chart);
done();
}, 200);
});
});
describe('Chart.elements.Line: fill option', function() {
it('should decode "zero", "top" and "bottom" as "origin", "start" and "end"', function() {
var chart = window.acquireChart({
type: 'line',
data: {
datasets: [
{fill: 'zero'},
{fill: 'bottom'},
{fill: 'top'},
]
}
});
['origin', 'start', 'end'].forEach(function(expected, index) {
var meta = chart.getDatasetMeta(index);
expect(meta.$filler).toBeDefined();
expect(meta.$filler.fill).toBe(expected);
});
});
});
});
describe('Version 2.5.0', function() {
describe('Chart.PluginBase', function() {
it('should exist and extendable', function() {
expect(Chart.PluginBase).toBeDefined();
expect(Chart.PluginBase.extend).toBeDefined();
});
});
describe('IPlugin.afterScaleUpdate', function() {
it('should be called after the chart as been layed out', function() {
var sequence = [];
var plugin = {};
var hooks = [
'beforeLayout',
'afterScaleUpdate',
'afterLayout'
];
var override = Chart.layoutService.update;
Chart.layoutService.update = function() {
sequence.push('layoutUpdate');
override.apply(this, arguments);
};
hooks.forEach(function(name) {
plugin[name] = function() {
sequence.push(name);
};
});
window.acquireChart({plugins: [plugin]});
expect(sequence).toEqual([].concat(
'beforeLayout',
'layoutUpdate',
'afterScaleUpdate',
'afterLayout'
));
});
});
});
describe('Version 2.1.5', function() {
// https://github.com/chartjs/Chart.js/pull/2752
describe('Chart.pluginService', function() {
it('should be defined and an alias of Chart.plugins', function() {
expect(Chart.pluginService).toBeDefined();
expect(Chart.pluginService).toBe(Chart.plugins);
});
});
});
});