global.defaults.tests.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. // Test the bubble chart default config
  2. describe('Default Configs', function() {
  3. describe('Bubble Chart', function() {
  4. it('should return correct tooltip strings', function() {
  5. var config = Chart.defaults.bubble;
  6. var chart = window.acquireChart({
  7. type: 'bubble',
  8. data: {
  9. datasets: [{
  10. label: 'My dataset',
  11. data: [{
  12. x: 10,
  13. y: 12,
  14. r: 5
  15. }]
  16. }]
  17. },
  18. options: config
  19. });
  20. // fake out the tooltip hover and force the tooltip to update
  21. chart.tooltip._active = [chart.getDatasetMeta(0).data[0]];
  22. chart.tooltip.update();
  23. // Title is always blank
  24. expect(chart.tooltip._model.title).toEqual([]);
  25. expect(chart.tooltip._model.body).toEqual([{
  26. before: [],
  27. lines: ['My dataset: (10, 12, 5)'],
  28. after: []
  29. }]);
  30. });
  31. });
  32. describe('Doughnut Chart', function() {
  33. it('should return correct tooltip strings', function() {
  34. var config = Chart.defaults.doughnut;
  35. var chart = window.acquireChart({
  36. type: 'doughnut',
  37. data: {
  38. labels: ['label1', 'label2', 'label3'],
  39. datasets: [{
  40. data: [10, 20, 30],
  41. }]
  42. },
  43. options: config
  44. });
  45. // fake out the tooltip hover and force the tooltip to update
  46. chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
  47. chart.tooltip.update();
  48. // Title is always blank
  49. expect(chart.tooltip._model.title).toEqual([]);
  50. expect(chart.tooltip._model.body).toEqual([{
  51. before: [],
  52. lines: ['label2: 20'],
  53. after: []
  54. }]);
  55. });
  56. it('should return correct tooltip string for a multiline label', function() {
  57. var config = Chart.defaults.doughnut;
  58. var chart = window.acquireChart({
  59. type: 'doughnut',
  60. data: {
  61. labels: ['label1', ['row1', 'row2', 'row3'], 'label3'],
  62. datasets: [{
  63. data: [10, 20, 30],
  64. }]
  65. },
  66. options: config
  67. });
  68. // fake out the tooltip hover and force the tooltip to update
  69. chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
  70. chart.tooltip.update();
  71. // Title is always blank
  72. expect(chart.tooltip._model.title).toEqual([]);
  73. expect(chart.tooltip._model.body).toEqual([{
  74. before: [],
  75. lines: [
  76. 'row1: 20',
  77. 'row2',
  78. 'row3'
  79. ],
  80. after: []
  81. }]);
  82. });
  83. it('should return the correct html legend', function() {
  84. var config = Chart.defaults.doughnut;
  85. var chart = window.acquireChart({
  86. type: 'doughnut',
  87. data: {
  88. labels: ['label1', 'label2'],
  89. datasets: [{
  90. data: [10, 20],
  91. backgroundColor: ['red', 'green']
  92. }]
  93. },
  94. options: config
  95. });
  96. 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>';
  97. expect(chart.generateLegend()).toBe(expectedLegend);
  98. });
  99. it('should return correct legend label objects', function() {
  100. var config = Chart.defaults.doughnut;
  101. var chart = window.acquireChart({
  102. type: 'doughnut',
  103. data: {
  104. labels: ['label1', 'label2', 'label3'],
  105. datasets: [{
  106. data: [10, 20, NaN],
  107. backgroundColor: ['red', 'green', 'blue'],
  108. borderWidth: 2,
  109. borderColor: '#000'
  110. }]
  111. },
  112. options: config
  113. });
  114. var expected = [{
  115. text: 'label1',
  116. fillStyle: 'red',
  117. hidden: false,
  118. index: 0,
  119. strokeStyle: '#000',
  120. lineWidth: 2
  121. }, {
  122. text: 'label2',
  123. fillStyle: 'green',
  124. hidden: false,
  125. index: 1,
  126. strokeStyle: '#000',
  127. lineWidth: 2
  128. }, {
  129. text: 'label3',
  130. fillStyle: 'blue',
  131. hidden: true,
  132. index: 2,
  133. strokeStyle: '#000',
  134. lineWidth: 2
  135. }];
  136. expect(chart.legend.legendItems).toEqual(expected);
  137. });
  138. it('should hide the correct arc when a legend item is clicked', function() {
  139. var config = Chart.defaults.doughnut;
  140. var chart = window.acquireChart({
  141. type: 'doughnut',
  142. data: {
  143. labels: ['label1', 'label2', 'label3'],
  144. datasets: [{
  145. data: [10, 20, NaN],
  146. backgroundColor: ['red', 'green', 'blue'],
  147. borderWidth: 2,
  148. borderColor: '#000'
  149. }]
  150. },
  151. options: config
  152. });
  153. var meta = chart.getDatasetMeta(0);
  154. spyOn(chart, 'update').and.callThrough();
  155. var legendItem = chart.legend.legendItems[0];
  156. config.legend.onClick.call(chart.legend, null, legendItem);
  157. expect(meta.data[0].hidden).toBe(true);
  158. expect(chart.update).toHaveBeenCalled();
  159. config.legend.onClick.call(chart.legend, null, legendItem);
  160. expect(meta.data[0].hidden).toBe(false);
  161. });
  162. });
  163. describe('Polar Area Chart', function() {
  164. it('should return correct tooltip strings', function() {
  165. var config = Chart.defaults.polarArea;
  166. var chart = window.acquireChart({
  167. type: 'polarArea',
  168. data: {
  169. labels: ['label1', 'label2', 'label3'],
  170. datasets: [{
  171. data: [10, 20, 30],
  172. }]
  173. },
  174. options: config
  175. });
  176. // fake out the tooltip hover and force the tooltip to update
  177. chart.tooltip._active = [chart.getDatasetMeta(0).data[1]];
  178. chart.tooltip.update();
  179. // Title is always blank
  180. expect(chart.tooltip._model.title).toEqual([]);
  181. expect(chart.tooltip._model.body).toEqual([{
  182. before: [],
  183. lines: ['label2: 20'],
  184. after: []
  185. }]);
  186. });
  187. it('should return the correct html legend', function() {
  188. var config = Chart.defaults.polarArea;
  189. var chart = window.acquireChart({
  190. type: 'polarArea',
  191. data: {
  192. labels: ['label1', 'label2'],
  193. datasets: [{
  194. data: [10, 20],
  195. backgroundColor: ['red', 'green']
  196. }]
  197. },
  198. options: config
  199. });
  200. 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>';
  201. expect(chart.generateLegend()).toBe(expectedLegend);
  202. });
  203. it('should return correct legend label objects', function() {
  204. var config = Chart.defaults.polarArea;
  205. var chart = window.acquireChart({
  206. type: 'polarArea',
  207. data: {
  208. labels: ['label1', 'label2', 'label3'],
  209. datasets: [{
  210. data: [10, 20, NaN],
  211. backgroundColor: ['red', 'green', 'blue'],
  212. borderWidth: 2,
  213. borderColor: '#000'
  214. }]
  215. },
  216. options: config
  217. });
  218. var expected = [{
  219. text: 'label1',
  220. fillStyle: 'red',
  221. hidden: false,
  222. index: 0,
  223. strokeStyle: '#000',
  224. lineWidth: 2
  225. }, {
  226. text: 'label2',
  227. fillStyle: 'green',
  228. hidden: false,
  229. index: 1,
  230. strokeStyle: '#000',
  231. lineWidth: 2
  232. }, {
  233. text: 'label3',
  234. fillStyle: 'blue',
  235. hidden: true,
  236. index: 2,
  237. strokeStyle: '#000',
  238. lineWidth: 2
  239. }];
  240. expect(chart.legend.legendItems).toEqual(expected);
  241. });
  242. it('should hide the correct arc when a legend item is clicked', function() {
  243. var config = Chart.defaults.polarArea;
  244. var chart = window.acquireChart({
  245. type: 'polarArea',
  246. data: {
  247. labels: ['label1', 'label2', 'label3'],
  248. datasets: [{
  249. data: [10, 20, NaN],
  250. backgroundColor: ['red', 'green', 'blue'],
  251. borderWidth: 2,
  252. borderColor: '#000'
  253. }]
  254. },
  255. options: config
  256. });
  257. var meta = chart.getDatasetMeta(0);
  258. spyOn(chart, 'update').and.callThrough();
  259. var legendItem = chart.legend.legendItems[0];
  260. config.legend.onClick.call(chart.legend, null, legendItem);
  261. expect(meta.data[0].hidden).toBe(true);
  262. expect(chart.update).toHaveBeenCalled();
  263. config.legend.onClick.call(chart.legend, null, legendItem);
  264. expect(meta.data[0].hidden).toBe(false);
  265. });
  266. });
  267. });