global.defaults.tests.js 7.3 KB

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