element.rectangle.tests.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337
  1. // Test the rectangle element
  2. describe('Rectangle element tests', function() {
  3. it ('Should be constructed', function() {
  4. var rectangle = new Chart.elements.Rectangle({
  5. _datasetIndex: 2,
  6. _index: 1
  7. });
  8. expect(rectangle).not.toBe(undefined);
  9. expect(rectangle._datasetIndex).toBe(2);
  10. expect(rectangle._index).toBe(1);
  11. });
  12. it ('Should correctly identify as in range', function() {
  13. var rectangle = new Chart.elements.Rectangle({
  14. _datasetIndex: 2,
  15. _index: 1
  16. });
  17. // Safely handles if these are called before the viewmodel is instantiated
  18. expect(rectangle.inRange(5)).toBe(false);
  19. expect(rectangle.inLabelRange(5)).toBe(false);
  20. // Attach a view object as if we were the controller
  21. rectangle._view = {
  22. base: 0,
  23. width: 4,
  24. x: 10,
  25. y: 15
  26. };
  27. expect(rectangle.inRange(10, 15)).toBe(true);
  28. expect(rectangle.inRange(10, 10)).toBe(true);
  29. expect(rectangle.inRange(10, 16)).toBe(false);
  30. expect(rectangle.inRange(5, 5)).toBe(false);
  31. expect(rectangle.inLabelRange(5)).toBe(false);
  32. expect(rectangle.inLabelRange(7)).toBe(false);
  33. expect(rectangle.inLabelRange(10)).toBe(true);
  34. expect(rectangle.inLabelRange(12)).toBe(true);
  35. expect(rectangle.inLabelRange(15)).toBe(false);
  36. expect(rectangle.inLabelRange(20)).toBe(false);
  37. // Test when the y is below the base (negative bar)
  38. var negativeRectangle = new Chart.elements.Rectangle({
  39. _datasetIndex: 2,
  40. _index: 1
  41. });
  42. // Attach a view object as if we were the controller
  43. negativeRectangle._view = {
  44. base: 0,
  45. width: 4,
  46. x: 10,
  47. y: -15
  48. };
  49. expect(negativeRectangle.inRange(10, -16)).toBe(false);
  50. expect(negativeRectangle.inRange(10, 1)).toBe(false);
  51. expect(negativeRectangle.inRange(10, -5)).toBe(true);
  52. });
  53. it ('should get the correct height', function() {
  54. var rectangle = new Chart.elements.Rectangle({
  55. _datasetIndex: 2,
  56. _index: 1
  57. });
  58. // Attach a view object as if we were the controller
  59. rectangle._view = {
  60. base: 0,
  61. width: 4,
  62. x: 10,
  63. y: 15
  64. };
  65. expect(rectangle.height()).toBe(-15);
  66. // Test when the y is below the base (negative bar)
  67. var negativeRectangle = new Chart.elements.Rectangle({
  68. _datasetIndex: 2,
  69. _index: 1
  70. });
  71. // Attach a view object as if we were the controller
  72. negativeRectangle._view = {
  73. base: -10,
  74. width: 4,
  75. x: 10,
  76. y: -15
  77. };
  78. expect(negativeRectangle.height()).toBe(5);
  79. });
  80. it ('should get the correct tooltip position', function() {
  81. var rectangle = new Chart.elements.Rectangle({
  82. _datasetIndex: 2,
  83. _index: 1
  84. });
  85. // Attach a view object as if we were the controller
  86. rectangle._view = {
  87. base: 0,
  88. width: 4,
  89. x: 10,
  90. y: 15
  91. };
  92. expect(rectangle.tooltipPosition()).toEqual({
  93. x: 10,
  94. y: 15,
  95. });
  96. // Test when the y is below the base (negative bar)
  97. var negativeRectangle = new Chart.elements.Rectangle({
  98. _datasetIndex: 2,
  99. _index: 1
  100. });
  101. // Attach a view object as if we were the controller
  102. negativeRectangle._view = {
  103. base: -10,
  104. width: 4,
  105. x: 10,
  106. y: -15
  107. };
  108. expect(negativeRectangle.tooltipPosition()).toEqual({
  109. x: 10,
  110. y: -15,
  111. });
  112. });
  113. it ('should get the correct area', function() {
  114. var rectangle = new Chart.elements.Rectangle({
  115. _datasetIndex: 2,
  116. _index: 1
  117. });
  118. // Attach a view object as if we were the controller
  119. rectangle._view = {
  120. base: 0,
  121. width: 4,
  122. x: 10,
  123. y: 15
  124. };
  125. expect(rectangle.getArea()).toEqual(60);
  126. });
  127. it ('should get the center', function() {
  128. var rectangle = new Chart.elements.Rectangle({
  129. _datasetIndex: 2,
  130. _index: 1
  131. });
  132. // Attach a view object as if we were the controller
  133. rectangle._view = {
  134. base: 0,
  135. width: 4,
  136. x: 10,
  137. y: 15
  138. };
  139. expect(rectangle.getCenterPoint()).toEqual({x: 10, y: 7.5});
  140. });
  141. it ('should draw correctly', function() {
  142. var mockContext = window.createMockContext();
  143. var rectangle = new Chart.elements.Rectangle({
  144. _datasetIndex: 2,
  145. _index: 1,
  146. _chart: {
  147. ctx: mockContext,
  148. }
  149. });
  150. // Attach a view object as if we were the controller
  151. rectangle._view = {
  152. backgroundColor: 'rgb(255, 0, 0)',
  153. base: 0,
  154. borderColor: 'rgb(0, 0, 255)',
  155. borderWidth: 1,
  156. ctx: mockContext,
  157. width: 4,
  158. x: 10,
  159. y: 15,
  160. };
  161. rectangle.draw();
  162. expect(mockContext.getCalls()).toEqual([{
  163. name: 'beginPath',
  164. args: [],
  165. }, {
  166. name: 'setFillStyle',
  167. args: ['rgb(255, 0, 0)']
  168. }, {
  169. name: 'setStrokeStyle',
  170. args: ['rgb(0, 0, 255)'],
  171. }, {
  172. name: 'setLineWidth',
  173. args: [1]
  174. }, {
  175. name: 'moveTo',
  176. args: [8.5, 0]
  177. }, {
  178. name: 'lineTo',
  179. args: [8.5, 14.5] // This is a minus bar. Not 15.5
  180. }, {
  181. name: 'lineTo',
  182. args: [11.5, 14.5]
  183. }, {
  184. name: 'lineTo',
  185. args: [11.5, 0]
  186. }, {
  187. name: 'fill',
  188. args: [],
  189. }, {
  190. name: 'stroke',
  191. args: []
  192. }]);
  193. });
  194. it ('should draw correctly with no stroke', function() {
  195. var mockContext = window.createMockContext();
  196. var rectangle = new Chart.elements.Rectangle({
  197. _datasetIndex: 2,
  198. _index: 1,
  199. _chart: {
  200. ctx: mockContext,
  201. }
  202. });
  203. // Attach a view object as if we were the controller
  204. rectangle._view = {
  205. backgroundColor: 'rgb(255, 0, 0)',
  206. base: 0,
  207. borderColor: 'rgb(0, 0, 255)',
  208. ctx: mockContext,
  209. width: 4,
  210. x: 10,
  211. y: 15,
  212. };
  213. rectangle.draw();
  214. expect(mockContext.getCalls()).toEqual([{
  215. name: 'beginPath',
  216. args: [],
  217. }, {
  218. name: 'setFillStyle',
  219. args: ['rgb(255, 0, 0)']
  220. }, {
  221. name: 'setStrokeStyle',
  222. args: ['rgb(0, 0, 255)'],
  223. }, {
  224. name: 'setLineWidth',
  225. args: [undefined]
  226. }, {
  227. name: 'moveTo',
  228. args: [8, 0]
  229. }, {
  230. name: 'lineTo',
  231. args: [8, 15]
  232. }, {
  233. name: 'lineTo',
  234. args: [12, 15]
  235. }, {
  236. name: 'lineTo',
  237. args: [12, 0]
  238. }, {
  239. name: 'fill',
  240. args: [],
  241. }]);
  242. });
  243. function testBorderSkipped(borderSkipped, expectedDrawCalls) {
  244. var mockContext = window.createMockContext();
  245. var rectangle = new Chart.elements.Rectangle({
  246. _chart: {ctx: mockContext}
  247. });
  248. // Attach a view object as if we were the controller
  249. rectangle._view = {
  250. borderSkipped: borderSkipped, // set tested 'borderSkipped' parameter
  251. ctx: mockContext,
  252. base: 0,
  253. width: 4,
  254. x: 10,
  255. y: 15,
  256. };
  257. rectangle.draw();
  258. var drawCalls = rectangle._view.ctx.getCalls().splice(4, 4);
  259. expect(drawCalls).toEqual(expectedDrawCalls);
  260. }
  261. it ('should draw correctly respecting "borderSkipped" == "bottom"', function() {
  262. testBorderSkipped ('bottom', [
  263. {name: 'moveTo', args: [8, 0]},
  264. {name: 'lineTo', args: [8, 15]},
  265. {name: 'lineTo', args: [12, 15]},
  266. {name: 'lineTo', args: [12, 0]},
  267. ]);
  268. });
  269. it ('should draw correctly respecting "borderSkipped" == "left"', function() {
  270. testBorderSkipped ('left', [
  271. {name: 'moveTo', args: [8, 15]},
  272. {name: 'lineTo', args: [12, 15]},
  273. {name: 'lineTo', args: [12, 0]},
  274. {name: 'lineTo', args: [8, 0]},
  275. ]);
  276. });
  277. it ('should draw correctly respecting "borderSkipped" == "top"', function() {
  278. testBorderSkipped ('top', [
  279. {name: 'moveTo', args: [12, 15]},
  280. {name: 'lineTo', args: [12, 0]},
  281. {name: 'lineTo', args: [8, 0]},
  282. {name: 'lineTo', args: [8, 15]},
  283. ]);
  284. });
  285. it ('should draw correctly respecting "borderSkipped" == "right"', function() {
  286. testBorderSkipped ('right', [
  287. {name: 'moveTo', args: [12, 0]},
  288. {name: 'lineTo', args: [8, 0]},
  289. {name: 'lineTo', args: [8, 15]},
  290. {name: 'lineTo', args: [12, 15]},
  291. ]);
  292. });
  293. });