|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293 |
-
- describe("Test the bubble chart default config", function() {
- it('should reutrn correct tooltip strings', function() {
- var config = Chart.defaults.bubble;
-
-
- expect(config.tooltips.callbacks.title()).toBe('');
-
-
- var data = {
- datasets: [{
- label: 'My dataset',
- data: [{
- x: 10,
- y: 12,
- r: 5
- }]
- }]
- };
-
- var tooltipItem = {
- datasetIndex: 0,
- index: 0
- };
-
- expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('My dataset: (10, 12, 5)');
- });
- });
-
- describe('Test the doughnut chart default config', function() {
- it('should return correct tooltip strings', function() {
- var config = Chart.defaults.doughnut;
-
-
- expect(config.tooltips.callbacks.title()).toBe('');
-
-
- var data = {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, 30],
- }]
- };
-
- var tooltipItem = {
- datasetIndex: 0,
- index: 1
- };
-
- expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20');
- });
-
- it('should return the correct html legend', function() {
- var config = Chart.defaults.doughnut;
-
- var chart = {
- id: 'mychart',
- data: {
- labels: ['label1', 'label2'],
- datasets: [{
- data: [10, 20],
- backgroundColor: ['red', 'green']
- }]
- }
- };
- var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
-
- expect(config.legendCallback(chart)).toBe(expectedLegend);
- });
-
- it('should return correct legend label objects', function() {
- var config = Chart.defaults.doughnut;
- var data = {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- metaData: [{}, {}, {}]
- }]
- };
-
- var expected = [{
- text: 'label1',
- fillStyle: 'red',
- hidden: false,
- index: 0,
- strokeStyle: '#000',
- lineWidth: 2
- }, {
- text: 'label2',
- fillStyle: 'green',
- hidden: false,
- index: 1,
- strokeStyle: '#000',
- lineWidth: 2
- }, {
- text: 'label3',
- fillStyle: 'blue',
- hidden: true,
- index: 2,
- strokeStyle: '#000',
- lineWidth: 2
- }];
-
- var chart = {
- data: data,
- options: {
- elements: {
- arc: {
- borderWidth: 2,
- borderColor: '#000'
- }
- }
- }
- };
- expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected);
- });
-
- it('should hide the correct arc when a legend item is clicked', function() {
- var config = Chart.defaults.doughnut;
-
- var legendItem = {
- text: 'label1',
- fillStyle: 'red',
- hidden: false,
- index: 0
- };
-
- var chart = {
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue']
- }]
- },
- update: function() {}
- };
-
- spyOn(chart, 'update');
- var scope = {
- chart: chart
- };
-
- config.legend.onClick.call(scope, null, legendItem);
-
- expect(chart.data.datasets[0].metaHiddenData).toEqual([10]);
- expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]);
-
- expect(chart.update).toHaveBeenCalled();
-
- config.legend.onClick.call(scope, null, legendItem);
- expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
-
-
- legendItem.index = 2;
- config.legend.onClick.call(scope, null, legendItem);
- expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
- });
- });
-
- describe('Test the polar area chart default config', function() {
- it('should return correct tooltip strings', function() {
- var config = Chart.defaults.polarArea;
-
-
- expect(config.tooltips.callbacks.title()).toBe('');
-
-
- var data = {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, 30],
- }]
- };
-
- var tooltipItem = {
- datasetIndex: 0,
- index: 1,
- yLabel: 20
- };
-
- expect(config.tooltips.callbacks.label(tooltipItem, data)).toBe('label2: 20');
- });
-
- it('should return the correct html legend', function() {
- var config = Chart.defaults.polarArea;
-
- var chart = {
- id: 'mychart',
- data: {
- labels: ['label1', 'label2'],
- datasets: [{
- data: [10, 20],
- backgroundColor: ['red', 'green']
- }]
- }
- };
- var expectedLegend = '<ul class="mychart-legend"><li><span style="background-color:red">label1</span></li><li><span style="background-color:green">label2</span></li></ul>';
-
- expect(config.legendCallback(chart)).toBe(expectedLegend);
- });
-
- it('should return correct legend label objects', function() {
- var config = Chart.defaults.polarArea;
- var data = {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- metaData: [{}, {}, {}]
- }]
- };
-
- var expected = [{
- text: 'label1',
- fillStyle: 'red',
- hidden: false,
- index: 0,
- strokeStyle: '#000',
- lineWidth: 2
- }, {
- text: 'label2',
- fillStyle: 'green',
- hidden: false,
- index: 1,
- strokeStyle: '#000',
- lineWidth: 2
- }, {
- text: 'label3',
- fillStyle: 'blue',
- hidden: true,
- index: 2,
- strokeStyle: '#000',
- lineWidth: 2
- }];
-
- var chart = {
- data: data,
- options: {
- elements: {
- arc: {
- borderWidth: 2,
- borderColor: '#000'
- }
- }
- }
- };
- expect(config.legend.labels.generateLabels.call({ chart: chart }, data)).toEqual(expected);
- });
-
- it('should hide the correct arc when a legend item is clicked', function() {
- var config = Chart.defaults.polarArea;
-
- var legendItem = {
- text: 'label1',
- fillStyle: 'red',
- hidden: false,
- index: 0
- };
-
- var chart = {
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue']
- }]
- },
- update: function() {}
- };
-
- spyOn(chart, 'update');
- var scope = {
- chart: chart
- };
-
- config.legend.onClick.call(scope, null, legendItem);
-
- expect(chart.data.datasets[0].metaHiddenData).toEqual([10]);
- expect(chart.data.datasets[0].data).toEqual([NaN, 20, NaN]);
-
- expect(chart.update).toHaveBeenCalled();
-
- config.legend.onClick.call(scope, null, legendItem);
- expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
-
-
- legendItem.index = 2;
- config.legend.onClick.call(scope, null, legendItem);
- expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]);
- });
- });
|