You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

core.legend.tests.js 6.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. // Test the rectangle element
  2. describe('Legend block tests', function() {
  3. beforeEach(function() {
  4. window.addDefaultMatchers(jasmine);
  5. });
  6. afterEach(function() {
  7. window.releaseAllCharts();
  8. });
  9. it('Should be constructed', function() {
  10. var legend = new Chart.Legend({});
  11. expect(legend).not.toBe(undefined);
  12. });
  13. it('should have the correct default config', function() {
  14. expect(Chart.defaults.global.legend).toEqual({
  15. display: true,
  16. position: 'top',
  17. fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
  18. reverse: false,
  19. // a callback that will handle
  20. onClick: jasmine.any(Function),
  21. labels: {
  22. boxWidth: 40,
  23. padding: 10,
  24. generateLabels: jasmine.any(Function)
  25. }
  26. });
  27. });
  28. it('should update correctly', function() {
  29. var chart = window.acquireChart({
  30. type: 'bar',
  31. data: {
  32. datasets: [{
  33. label: 'dataset1',
  34. backgroundColor: '#f31',
  35. borderCapStyle: 'butt',
  36. borderDash: [2, 2],
  37. borderDashOffset: 5.5,
  38. data: []
  39. }, {
  40. label: 'dataset2',
  41. hidden: true,
  42. borderJoinStyle: 'miter',
  43. data: []
  44. }, {
  45. label: 'dataset3',
  46. borderWidth: 10,
  47. borderColor: 'green',
  48. data: []
  49. }],
  50. labels: []
  51. }
  52. });
  53. expect(chart.legend.legendItems).toEqual([{
  54. text: 'dataset1',
  55. fillStyle: '#f31',
  56. hidden: false,
  57. lineCap: 'butt',
  58. lineDash: [2, 2],
  59. lineDashOffset: 5.5,
  60. lineJoin: undefined,
  61. lineWidth: undefined,
  62. strokeStyle: undefined,
  63. datasetIndex: 0
  64. }, {
  65. text: 'dataset2',
  66. fillStyle: undefined,
  67. hidden: true,
  68. lineCap: undefined,
  69. lineDash: undefined,
  70. lineDashOffset: undefined,
  71. lineJoin: 'miter',
  72. lineWidth: undefined,
  73. strokeStyle: undefined,
  74. datasetIndex: 1
  75. }, {
  76. text: 'dataset3',
  77. fillStyle: undefined,
  78. hidden: false,
  79. lineCap: undefined,
  80. lineDash: undefined,
  81. lineDashOffset: undefined,
  82. lineJoin: undefined,
  83. lineWidth: 10,
  84. strokeStyle: 'green',
  85. datasetIndex: 2
  86. }]);
  87. });
  88. it('should draw correctly', function() {
  89. var chart = window.acquireChart({
  90. type: 'bar',
  91. data: {
  92. datasets: [{
  93. label: 'dataset1',
  94. backgroundColor: '#f31',
  95. borderCapStyle: 'butt',
  96. borderDash: [2, 2],
  97. borderDashOffset: 5.5,
  98. data: []
  99. }, {
  100. label: 'dataset2',
  101. hidden: true,
  102. borderJoinStyle: 'miter',
  103. data: []
  104. }, {
  105. label: 'dataset3',
  106. borderWidth: 10,
  107. borderColor: 'green',
  108. data: []
  109. }],
  110. labels: []
  111. }
  112. });
  113. expect(chart.legend.legendHitBoxes.length).toBe(3);
  114. [ { h: 12, l: 101, t: 10, w: 93 },
  115. { h: 12, l: 205, t: 10, w: 93 },
  116. { h: 12, l: 308, t: 10, w: 93 }
  117. ].forEach(function(expected, i) {
  118. expect(chart.legend.legendHitBoxes[i].height).toBeCloseToPixel(expected.h);
  119. expect(chart.legend.legendHitBoxes[i].left).toBeCloseToPixel(expected.l);
  120. expect(chart.legend.legendHitBoxes[i].top).toBeCloseToPixel(expected.t);
  121. expect(chart.legend.legendHitBoxes[i].width).toBeCloseToPixel(expected.w);
  122. })
  123. // NOTE(SB) We should get ride of the following tests and use image diff instead.
  124. // For now, as discussed with Evert Timberg, simply comment out.
  125. // See http://humblesoftware.github.io/js-imagediff/test.html
  126. /*chart.legend.ctx = window.createMockContext();
  127. chart.update();
  128. expect(chart.legend.ctx .getCalls()).toEqual([{
  129. "name": "measureText",
  130. "args": ["dataset1"]
  131. }, {
  132. "name": "measureText",
  133. "args": ["dataset2"]
  134. }, {
  135. "name": "measureText",
  136. "args": ["dataset3"]
  137. }, {
  138. "name": "measureText",
  139. "args": ["dataset1"]
  140. }, {
  141. "name": "measureText",
  142. "args": ["dataset2"]
  143. }, {
  144. "name": "measureText",
  145. "args": ["dataset3"]
  146. }, {
  147. "name": "setLineWidth",
  148. "args": [0.5]
  149. }, {
  150. "name": "setStrokeStyle",
  151. "args": ["#666"]
  152. }, {
  153. "name": "setFillStyle",
  154. "args": ["#666"]
  155. }, {
  156. "name": "measureText",
  157. "args": ["dataset1"]
  158. }, {
  159. "name": "save",
  160. "args": []
  161. }, {
  162. "name": "setFillStyle",
  163. "args": ["#f31"]
  164. }, {
  165. "name": "setLineCap",
  166. "args": ["butt"]
  167. }, {
  168. "name": "setLineDashOffset",
  169. "args": [5.5]
  170. }, {
  171. "name": "setLineJoin",
  172. "args": ["miter"]
  173. }, {
  174. "name": "setLineWidth",
  175. "args": [3]
  176. }, {
  177. "name": "setStrokeStyle",
  178. "args": ["rgba(0,0,0,0.1)"]
  179. }, {
  180. "name": "setLineDash",
  181. "args": [
  182. [2, 2]
  183. ]
  184. }, {
  185. "name": "strokeRect",
  186. "args": [114, 110, 40, 12]
  187. }, {
  188. "name": "fillRect",
  189. "args": [114, 110, 40, 12]
  190. }, {
  191. "name": "restore",
  192. "args": []
  193. }, {
  194. "name": "fillText",
  195. "args": ["dataset1", 160, 110]
  196. }, {
  197. "name": "measureText",
  198. "args": ["dataset2"]
  199. }, {
  200. "name": "save",
  201. "args": []
  202. }, {
  203. "name": "setFillStyle",
  204. "args": ["rgba(0,0,0,0.1)"]
  205. }, {
  206. "name": "setLineCap",
  207. "args": ["butt"]
  208. }, {
  209. "name": "setLineDashOffset",
  210. "args": [0]
  211. }, {
  212. "name": "setLineJoin",
  213. "args": ["miter"]
  214. }, {
  215. "name": "setLineWidth",
  216. "args": [3]
  217. }, {
  218. "name": "setStrokeStyle",
  219. "args": ["rgba(0,0,0,0.1)"]
  220. }, {
  221. "name": "setLineDash",
  222. "args": [
  223. []
  224. ]
  225. }, {
  226. "name": "strokeRect",
  227. "args": [250, 110, 40, 12]
  228. }, {
  229. "name": "fillRect",
  230. "args": [250, 110, 40, 12]
  231. }, {
  232. "name": "restore",
  233. "args": []
  234. }, {
  235. "name": "fillText",
  236. "args": ["dataset2", 296, 110]
  237. }, {
  238. "name": "beginPath",
  239. "args": []
  240. }, {
  241. "name": "setLineWidth",
  242. "args": [2]
  243. }, {
  244. "name": "moveTo",
  245. "args": [296, 116]
  246. }, {
  247. "name": "lineTo",
  248. "args": [376, 116]
  249. }, {
  250. "name": "stroke",
  251. "args": []
  252. }, {
  253. "name": "measureText",
  254. "args": ["dataset3"]
  255. }, {
  256. "name": "save",
  257. "args": []
  258. }, {
  259. "name": "setFillStyle",
  260. "args": ["rgba(0,0,0,0.1)"]
  261. }, {
  262. "name": "setLineCap",
  263. "args": ["butt"]
  264. }, {
  265. "name": "setLineDashOffset",
  266. "args": [0]
  267. }, {
  268. "name": "setLineJoin",
  269. "args": ["miter"]
  270. }, {
  271. "name": "setLineWidth",
  272. "args": [10]
  273. }, {
  274. "name": "setStrokeStyle",
  275. "args": ["green"]
  276. }, {
  277. "name": "setLineDash",
  278. "args": [
  279. []
  280. ]
  281. }, {
  282. "name": "strokeRect",
  283. "args": [182, 132, 40, 12]
  284. }, {
  285. "name": "fillRect",
  286. "args": [182, 132, 40, 12]
  287. }, {
  288. "name": "restore",
  289. "args": []
  290. }, {
  291. "name": "fillText",
  292. "args": ["dataset3", 228, 132]
  293. }]);*/
  294. });
  295. });