373 lines
12 KiB
JavaScript
373 lines
12 KiB
JavaScript
/*jshint mocha:true*/
|
|
/*global module:true*/
|
|
/*global inject:true*/
|
|
/*global expect:true*/
|
|
/*global sinon:true*/
|
|
describe('Unit testing', function () {
|
|
'use strict';
|
|
|
|
var $compile, scope, sandbox, ChartJs, ChartJsProvider;
|
|
|
|
beforeEach(module('chart.js', function (_ChartJsProvider_) {
|
|
ChartJsProvider = _ChartJsProvider_;
|
|
}));
|
|
|
|
beforeEach(inject(function (_$compile_, _$rootScope_, _ChartJs_) {
|
|
// The injector unwraps the underscores (_) from around the parameter names when matching
|
|
$compile = _$compile_;
|
|
scope = _$rootScope_;
|
|
ChartJs = _ChartJs_;
|
|
sandbox = sinon.sandbox.create();
|
|
}));
|
|
|
|
afterEach(function () {
|
|
sandbox.restore();
|
|
});
|
|
|
|
describe('base', function () {
|
|
it('replaces the element with the appropriate content', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels"></canvas></div>';
|
|
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
|
|
var element = $compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
expect(element.html()).to.startWith('<div class="chart-container"><canvas ');
|
|
});
|
|
|
|
describe('chart types', function () {
|
|
['Line', 'Bar', 'Radar', 'Pie', 'Doughnut', 'PolarArea'].forEach(function (type) {
|
|
it('creates a ' + type + ' chart using the directive', function () {
|
|
var markup = '<div style="width: 250px; height:120px"><canvas class="chart chart-' +
|
|
(type === 'PolarArea' ? 'polar-area' : type.toLowerCase()) +
|
|
'" data="data" labels="labels"></canvas></div>';
|
|
|
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
|
|
if (['Line', 'Bar', 'Radar'].indexOf(type) > - 1)
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
else
|
|
scope.data = [300, 500, 100];
|
|
|
|
var mock = sandbox.mock(Chart.prototype);
|
|
mock.expects(type);
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
mock.verify();
|
|
});
|
|
|
|
it('creates a ' + type + ' chart using the "chart-type" attribute"', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-base" data="data" labels="labels" chart-type="type"></canvas></div>';
|
|
|
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
scope.type = type;
|
|
|
|
if (['Line', 'Bar', 'Radar'].indexOf(type) > - 1)
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
else
|
|
scope.data = [300, 500, 100];
|
|
|
|
var mock = sandbox.mock(Chart.prototype);
|
|
mock.expects(type);
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
mock.verify();
|
|
});
|
|
});
|
|
});
|
|
|
|
it('generates the legend', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" legend="true"></canvas></div>';
|
|
|
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
|
|
var element = $compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
expect(element.html()).to.have.string('<chart-legend>');
|
|
});
|
|
});
|
|
|
|
describe('lifecycle', function () {
|
|
it('watches the attributes of the chart', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" chart-type="type"></canvas></div>';
|
|
|
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
|
|
var mock = sandbox.mock(scope);
|
|
// cannot get a hold of the child scope as it isn't created yet
|
|
// so cannot be more precise on expectations
|
|
mock.expects('$watch').atLeast(6);
|
|
|
|
$compile(markup)(scope);
|
|
|
|
mock.verify();
|
|
});
|
|
|
|
it('creates the chart only once', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
|
var count = 0;
|
|
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.series = ['Series A', 'Series B'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
scope.$on('create', function () {
|
|
count++;
|
|
});
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
expect(count).to.equal(1);
|
|
});
|
|
|
|
it('updates the chart', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
|
var count = 0;
|
|
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.series = ['Series A', 'Series B'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
|
|
scope.$on('update', function () {
|
|
count++;
|
|
});
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
scope.data = [
|
|
[28, 48, 40, 19, 86, 27, 90],
|
|
[65, 59, 80, 81, 56, 55, 40]
|
|
];
|
|
scope.$digest();
|
|
|
|
expect(count).to.equal(1);
|
|
});
|
|
|
|
it('re-create the chart if data added or removed', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series"></canvas></div>';
|
|
var countCreate = 0, countUpdate = 0;
|
|
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
|
|
scope.$on('create', function () {
|
|
countCreate++;
|
|
});
|
|
|
|
scope.$on('update', function () {
|
|
countUpdate++;
|
|
});
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
scope.data = [
|
|
[28, 48, 40, 19, 86, 27, 90],
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[65, 59, 80, 81, 56, 55, 40]
|
|
];
|
|
scope.$digest();
|
|
|
|
expect(countCreate).to.equal(2);
|
|
expect(countUpdate).to.equal(0);
|
|
});
|
|
|
|
it('should allow to set a configuration', function () {
|
|
ChartJsProvider.setOptions({responsive: false});
|
|
expect(ChartJs.getOptions().responsive).to.equal(false);
|
|
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
|
ChartJsProvider.setOptions({responsive: true});
|
|
expect(ChartJs.getOptions().responsive).to.equal(true);
|
|
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
|
});
|
|
|
|
it('should allow to set a configuration for a chart type', function () {
|
|
ChartJsProvider.setOptions('Line', {responsive: false});
|
|
expect(ChartJs.getOptions('Line').responsive).to.equal(false);
|
|
ChartJsProvider.setOptions('Line', {responsive: true});
|
|
expect(ChartJs.getOptions('Line').responsive).to.equal(true);
|
|
});
|
|
|
|
['labels', 'colours', 'series', 'options'].forEach(function (attr) {
|
|
it('re-creates the chart on ' + attr + ' changes', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series" ' +
|
|
'colours="colours" options="options"></canvas></div>';
|
|
var count = 0;
|
|
|
|
scope.options = { scaleShowVerticalLines: false };
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.series = ['Series A', 'Series B'];
|
|
scope.colours = [{
|
|
fillColor: 'rgba(127,253,31,0.2)',
|
|
pointColor: 'rgba(127,253,31,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(127,253,31,1)'
|
|
}, {
|
|
fillColor: 'rgba(104,240,0,0.2)',
|
|
pointColor: 'rgba(104,240,0,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(104,240,0,1)'
|
|
}];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
scope.$on('create', function () {
|
|
count++;
|
|
});
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
switch (attr) {
|
|
case 'labels':
|
|
scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
break;
|
|
case 'colours':
|
|
scope.colours = [{
|
|
fillColor: 'rgba(253,31,94,0.2)',
|
|
pointColor: 'rgba(253,31,94,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(253,31,94,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(253,31,94,1)'
|
|
}, {
|
|
fillColor: 'rgba(30,249,161,0.2)',
|
|
pointColor: 'rgba(30,249,161,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(30,249,161,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(30,249,161,1)'
|
|
}];
|
|
break;
|
|
case 'series':
|
|
scope.series = ['Series C', 'Series D'];
|
|
break;
|
|
case 'options':
|
|
scope.options = { scaleShowVerticalLines: true };
|
|
break;
|
|
}
|
|
scope.$digest();
|
|
|
|
expect(count).to.equal(2);
|
|
});
|
|
});
|
|
|
|
['labels', 'colours', 'series', 'options'].forEach(function (attr) {
|
|
it('does not re-create the chart on ' + attr + ' not changed', function () {
|
|
var markup = '<div style="width: 250px; height:120px">' +
|
|
'<canvas class="chart chart-line" data="data" labels="labels" series="series" ' +
|
|
'colours="colours" options="options"></canvas></div>';
|
|
var count = 0;
|
|
|
|
scope.options = { scaleShowVerticalLines: false };
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
scope.series = ['Series A', 'Series B'];
|
|
scope.colours = [{
|
|
fillColor: 'rgba(127,253,31,0.2)',
|
|
pointColor: 'rgba(127,253,31,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(127,253,31,1)'
|
|
}, {
|
|
fillColor: 'rgba(104,240,0,0.2)',
|
|
pointColor: 'rgba(104,240,0,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(104,240,0,1)'
|
|
}];
|
|
scope.data = [
|
|
[65, 59, 80, 81, 56, 55, 40],
|
|
[28, 48, 40, 19, 86, 27, 90]
|
|
];
|
|
scope.$on('create', function () {
|
|
count++;
|
|
});
|
|
|
|
$compile(markup)(scope);
|
|
scope.$digest();
|
|
|
|
switch (attr) {
|
|
case 'labels':
|
|
scope.labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
|
break;
|
|
case 'colours':
|
|
scope.colours = [{
|
|
fillColor: 'rgba(127,253,31,0.2)',
|
|
pointColor: 'rgba(127,253,31,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(127,253,31,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(127,253,31,1)'
|
|
}, {
|
|
fillColor: 'rgba(104,240,0,0.2)',
|
|
pointColor: 'rgba(104,240,0,1)',
|
|
pointHighlightFill: '#fff',
|
|
pointHighlightStroke: 'rgba(104,240,0,0.8)',
|
|
pointStrokeColor: '#fff',
|
|
strokeColor: 'rgba(104,240,0,1)'
|
|
}];
|
|
break;
|
|
case 'series':
|
|
scope.series = ['Series A', 'Series B'];
|
|
break;
|
|
case 'options':
|
|
scope.options = { scaleShowVerticalLines: false };
|
|
break;
|
|
}
|
|
scope.$digest();
|
|
|
|
expect(count).to.equal(1);
|
|
});
|
|
});
|
|
});
|
|
});
|