123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- // Test the bubble chart default config
- describe('Default Configs', function() {
- describe('Bubble Chart', function() {
- it('should return correct tooltip strings', function() {
- var config = Chart.defaults.bubble;
- var chart = window.acquireChart({
- type: 'bubble',
- data: {
- datasets: [{
- label: 'My dataset',
- data: [{
- x: 10,
- y: 12,
- r: 5
- }]
- }]
- },
- options: config
- });
- // fake out the tooltip hover and force the tooltip to update
- chart.tooltip._active = [chart.getDatasetMeta(0).data[0]];
- chart.tooltip.update();
- // Title is always blank
- expect(chart.tooltip._model.title).toEqual([]);
- expect(chart.tooltip._model.body).toEqual([{
- before: [],
- lines: ['My dataset: (10, 12, 5)'],
- after: []
- }]);
- });
- });
- describe('Doughnut Chart', function() {
- it('should return correct tooltip strings', function() {
- var config = Chart.defaults.doughnut;
- var chart = window.acquireChart({
- type: 'doughnut',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, 30],
- }]
- },
- options: config
- });
- // fake out the tooltip hover and force the tooltip to update
- chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
- chart.tooltip.update();
- // Title is always blank
- expect(chart.tooltip._model.title).toEqual([]);
- expect(chart.tooltip._model.body).toEqual([{
- before: [],
- lines: ['label2: 20'],
- after: []
- }]);
- });
- it('should return correct tooltip string for a multiline label', function() {
- var config = Chart.defaults.doughnut;
- var chart = window.acquireChart({
- type: 'doughnut',
- data: {
- labels: ['label1', ['row1', 'row2', 'row3'], 'label3'],
- datasets: [{
- data: [10, 20, 30],
- }]
- },
- options: config
- });
- // fake out the tooltip hover and force the tooltip to update
- chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
- chart.tooltip.update();
- // Title is always blank
- expect(chart.tooltip._model.title).toEqual([]);
- expect(chart.tooltip._model.body).toEqual([{
- before: [],
- lines: [
- 'row1: 20',
- 'row2',
- 'row3'
- ],
- after: []
- }]);
- });
- it('should return the correct html legend', function() {
- var config = Chart.defaults.doughnut;
- var chart = window.acquireChart({
- type: 'doughnut',
- data: {
- labels: ['label1', 'label2'],
- datasets: [{
- data: [10, 20],
- backgroundColor: ['red', 'green']
- }]
- },
- options: config
- });
- var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
- expect(chart.generateLegend()).toBe(expectedLegend);
- });
- it('should return correct legend label objects', function() {
- var config = Chart.defaults.doughnut;
- var chart = window.acquireChart({
- type: 'doughnut',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- borderWidth: 2,
- borderColor: '#000'
- }]
- },
- options: config
- });
- 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
- }];
- expect(chart.legend.legendItems).toEqual(expected);
- });
- it('should hide the correct arc when a legend item is clicked', function() {
- var config = Chart.defaults.doughnut;
- var chart = window.acquireChart({
- type: 'doughnut',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- borderWidth: 2,
- borderColor: '#000'
- }]
- },
- options: config
- });
- var meta = chart.getDatasetMeta(0);
- spyOn(chart, 'update').and.callThrough();
- var legendItem = chart.legend.legendItems[0];
- config.legend.onClick.call(chart.legend, null, legendItem);
- expect(meta.data[0].hidden).toBe(true);
- expect(chart.update).toHaveBeenCalled();
- config.legend.onClick.call(chart.legend, null, legendItem);
- expect(meta.data[0].hidden).toBe(false);
- });
- });
- describe('Polar Area Chart', function() {
- it('should return correct tooltip strings', function() {
- var config = Chart.defaults.polarArea;
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, 30],
- }]
- },
- options: config
- });
- // fake out the tooltip hover and force the tooltip to update
- chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
- chart.tooltip.update();
- // Title is always blank
- expect(chart.tooltip._model.title).toEqual([]);
- expect(chart.tooltip._model.body).toEqual([{
- before: [],
- lines: ['label2: 20'],
- after: []
- }]);
- });
- it('should return the correct html legend', function() {
- var config = Chart.defaults.polarArea;
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- labels: ['label1', 'label2'],
- datasets: [{
- data: [10, 20],
- backgroundColor: ['red', 'green']
- }]
- },
- options: config
- });
- var expectedLegend = '<ul class="' + chart.id + '-legend"><li><span style="background-color:red"></span>label1</li><li><span style="background-color:green"></span>label2</li></ul>';
- expect(chart.generateLegend()).toBe(expectedLegend);
- });
- it('should return correct legend label objects', function() {
- var config = Chart.defaults.polarArea;
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- borderWidth: 2,
- borderColor: '#000'
- }]
- },
- options: config
- });
- 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
- }];
- expect(chart.legend.legendItems).toEqual(expected);
- });
- it('should hide the correct arc when a legend item is clicked', function() {
- var config = Chart.defaults.polarArea;
- var chart = window.acquireChart({
- type: 'polarArea',
- data: {
- labels: ['label1', 'label2', 'label3'],
- datasets: [{
- data: [10, 20, NaN],
- backgroundColor: ['red', 'green', 'blue'],
- borderWidth: 2,
- borderColor: '#000'
- }]
- },
- options: config
- });
- var meta = chart.getDatasetMeta(0);
- spyOn(chart, 'update').and.callThrough();
- var legendItem = chart.legend.legendItems[0];
- config.legend.onClick.call(chart.legend, null, legendItem);
- expect(meta.data[0].hidden).toBe(true);
- expect(chart.update).toHaveBeenCalled();
- config.legend.onClick.call(chart.legend, null, legendItem);
- expect(meta.data[0].hidden).toBe(false);
- });
- });
- });
|