element.point.tests.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. // Test the point element
  2. describe('Point element tests', function() {
  3. it ('Should be constructed', function() {
  4. var point = new Chart.elements.Point({
  5. _datasetIndex: 2,
  6. _index: 1
  7. });
  8. expect(point).not.toBe(undefined);
  9. expect(point._datasetIndex).toBe(2);
  10. expect(point._index).toBe(1);
  11. });
  12. it ('Should correctly identify as in range', function() {
  13. var point = new Chart.elements.Point({
  14. _datasetIndex: 2,
  15. _index: 1
  16. });
  17. // Safely handles if these are called before the viewmodel is instantiated
  18. expect(point.inRange(5)).toBe(false);
  19. expect(point.inLabelRange(5)).toBe(false);
  20. // Attach a view object as if we were the controller
  21. point._view = {
  22. radius: 2,
  23. hitRadius: 3,
  24. x: 10,
  25. y: 15
  26. };
  27. expect(point.inRange(10, 15)).toBe(true);
  28. expect(point.inRange(10, 10)).toBe(false);
  29. expect(point.inRange(10, 5)).toBe(false);
  30. expect(point.inRange(5, 5)).toBe(false);
  31. expect(point.inLabelRange(5)).toBe(false);
  32. expect(point.inLabelRange(7)).toBe(true);
  33. expect(point.inLabelRange(10)).toBe(true);
  34. expect(point.inLabelRange(12)).toBe(true);
  35. expect(point.inLabelRange(15)).toBe(false);
  36. expect(point.inLabelRange(20)).toBe(false);
  37. });
  38. it ('should get the correct tooltip position', function() {
  39. var point = new Chart.elements.Point({
  40. _datasetIndex: 2,
  41. _index: 1
  42. });
  43. // Attach a view object as if we were the controller
  44. point._view = {
  45. radius: 2,
  46. borderWidth: 6,
  47. x: 10,
  48. y: 15
  49. };
  50. expect(point.tooltipPosition()).toEqual({
  51. x: 10,
  52. y: 15,
  53. padding: 8
  54. });
  55. });
  56. it('should get the correct area', function() {
  57. var point = new Chart.elements.Point({
  58. _datasetIndex: 2,
  59. _index: 1
  60. });
  61. // Attach a view object as if we were the controller
  62. point._view = {
  63. radius: 2,
  64. };
  65. expect(point.getArea()).toEqual(Math.PI * 4);
  66. });
  67. it('should get the correct center point', function() {
  68. var point = new Chart.elements.Point({
  69. _datasetIndex: 2,
  70. _index: 1
  71. });
  72. // Attach a view object as if we were the controller
  73. point._view = {
  74. radius: 2,
  75. x: 10,
  76. y: 10
  77. };
  78. expect(point.getCenterPoint()).toEqual({x: 10, y: 10});
  79. });
  80. it ('should draw correctly', function() {
  81. var mockContext = window.createMockContext();
  82. var point = new Chart.elements.Point({
  83. _datasetIndex: 2,
  84. _index: 1,
  85. _chart: {
  86. ctx: mockContext,
  87. }
  88. });
  89. // Attach a view object as if we were the controller
  90. point._view = {
  91. radius: 2,
  92. pointStyle: 'circle',
  93. hitRadius: 3,
  94. borderColor: 'rgba(1, 2, 3, 1)',
  95. borderWidth: 6,
  96. backgroundColor: 'rgba(0, 255, 0)',
  97. x: 10,
  98. y: 15,
  99. ctx: mockContext
  100. };
  101. point.draw();
  102. expect(mockContext.getCalls()).toEqual([{
  103. name: 'setStrokeStyle',
  104. args: ['rgba(1, 2, 3, 1)']
  105. }, {
  106. name: 'setLineWidth',
  107. args: [6]
  108. }, {
  109. name: 'setFillStyle',
  110. args: ['rgba(0, 255, 0)']
  111. }, {
  112. name: 'beginPath',
  113. args: []
  114. }, {
  115. name: 'arc',
  116. args: [10, 15, 2, 0, 2 * Math.PI]
  117. }, {
  118. name: 'closePath',
  119. args: [],
  120. }, {
  121. name: 'fill',
  122. args: [],
  123. }, {
  124. name: 'stroke',
  125. args: []
  126. }]);
  127. mockContext.resetCalls();
  128. point._view.pointStyle = 'triangle';
  129. point.draw();
  130. expect(mockContext.getCalls()).toEqual([{
  131. name: 'setStrokeStyle',
  132. args: ['rgba(1, 2, 3, 1)']
  133. }, {
  134. name: 'setLineWidth',
  135. args: [6]
  136. }, {
  137. name: 'setFillStyle',
  138. args: ['rgba(0, 255, 0)']
  139. }, {
  140. name: 'beginPath',
  141. args: []
  142. }, {
  143. name: 'moveTo',
  144. args: [10 - 3 * 2 / Math.sqrt(3) / 2, 15 + 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3]
  145. }, {
  146. name: 'lineTo',
  147. args: [10 + 3 * 2 / Math.sqrt(3) / 2, 15 + 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3],
  148. }, {
  149. name: 'lineTo',
  150. args: [10, 15 - 2 * 3 * 2 / Math.sqrt(3) * Math.sqrt(3) / 2 / 3],
  151. }, {
  152. name: 'closePath',
  153. args: [],
  154. }, {
  155. name: 'fill',
  156. args: [],
  157. }, {
  158. name: 'stroke',
  159. args: []
  160. }]);
  161. mockContext.resetCalls();
  162. point._view.pointStyle = 'rect';
  163. point.draw();
  164. expect(mockContext.getCalls()).toEqual([{
  165. name: 'setStrokeStyle',
  166. args: ['rgba(1, 2, 3, 1)']
  167. }, {
  168. name: 'setLineWidth',
  169. args: [6]
  170. }, {
  171. name: 'setFillStyle',
  172. args: ['rgba(0, 255, 0)']
  173. }, {
  174. name: 'beginPath',
  175. args: []
  176. }, {
  177. name: 'fillRect',
  178. args: [10 - 1 / Math.SQRT2 * 2, 15 - 1 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2]
  179. }, {
  180. name: 'strokeRect',
  181. args: [10 - 1 / Math.SQRT2 * 2, 15 - 1 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2, 2 / Math.SQRT2 * 2]
  182. }, {
  183. name: 'stroke',
  184. args: []
  185. }]);
  186. var drawRoundedRectangleSpy = jasmine.createSpy('drawRoundedRectangle');
  187. var drawRoundedRectangle = Chart.helpers.canvas.roundedRect;
  188. var offset = point._view.radius / Math.SQRT2;
  189. Chart.helpers.canvas.roundedRect = drawRoundedRectangleSpy;
  190. mockContext.resetCalls();
  191. point._view.pointStyle = 'rectRounded';
  192. point.draw();
  193. expect(drawRoundedRectangleSpy).toHaveBeenCalledWith(
  194. mockContext,
  195. 10 - offset,
  196. 15 - offset,
  197. Math.SQRT2 * 2,
  198. Math.SQRT2 * 2,
  199. 2 / 2
  200. );
  201. expect(mockContext.getCalls()).toContain(
  202. jasmine.objectContaining({
  203. name: 'fill',
  204. args: [],
  205. })
  206. );
  207. Chart.helpers.canvas.roundedRect = drawRoundedRectangle;
  208. mockContext.resetCalls();
  209. point._view.pointStyle = 'rectRot';
  210. point.draw();
  211. expect(mockContext.getCalls()).toEqual([{
  212. name: 'setStrokeStyle',
  213. args: ['rgba(1, 2, 3, 1)']
  214. }, {
  215. name: 'setLineWidth',
  216. args: [6]
  217. }, {
  218. name: 'setFillStyle',
  219. args: ['rgba(0, 255, 0)']
  220. }, {
  221. name: 'beginPath',
  222. args: []
  223. }, {
  224. name: 'moveTo',
  225. args: [10 - 1 / Math.SQRT2 * 2, 15]
  226. }, {
  227. name: 'lineTo',
  228. args: [10, 15 + 1 / Math.SQRT2 * 2]
  229. }, {
  230. name: 'lineTo',
  231. args: [10 + 1 / Math.SQRT2 * 2, 15],
  232. }, {
  233. name: 'lineTo',
  234. args: [10, 15 - 1 / Math.SQRT2 * 2],
  235. }, {
  236. name: 'closePath',
  237. args: []
  238. }, {
  239. name: 'fill',
  240. args: [],
  241. }, {
  242. name: 'stroke',
  243. args: []
  244. }]);
  245. mockContext.resetCalls();
  246. point._view.pointStyle = 'cross';
  247. point.draw();
  248. expect(mockContext.getCalls()).toEqual([{
  249. name: 'setStrokeStyle',
  250. args: ['rgba(1, 2, 3, 1)']
  251. }, {
  252. name: 'setLineWidth',
  253. args: [6]
  254. }, {
  255. name: 'setFillStyle',
  256. args: ['rgba(0, 255, 0)']
  257. }, {
  258. name: 'beginPath',
  259. args: []
  260. }, {
  261. name: 'moveTo',
  262. args: [10, 17]
  263. }, {
  264. name: 'lineTo',
  265. args: [10, 13],
  266. }, {
  267. name: 'moveTo',
  268. args: [8, 15],
  269. }, {
  270. name: 'lineTo',
  271. args: [12, 15],
  272. }, {
  273. name: 'closePath',
  274. args: [],
  275. }, {
  276. name: 'stroke',
  277. args: []
  278. }]);
  279. mockContext.resetCalls();
  280. point._view.pointStyle = 'crossRot';
  281. point.draw();
  282. expect(mockContext.getCalls()).toEqual([{
  283. name: 'setStrokeStyle',
  284. args: ['rgba(1, 2, 3, 1)']
  285. }, {
  286. name: 'setLineWidth',
  287. args: [6]
  288. }, {
  289. name: 'setFillStyle',
  290. args: ['rgba(0, 255, 0)']
  291. }, {
  292. name: 'beginPath',
  293. args: []
  294. }, {
  295. name: 'moveTo',
  296. args: [10 - Math.cos(Math.PI / 4) * 2, 15 - Math.sin(Math.PI / 4) * 2]
  297. }, {
  298. name: 'lineTo',
  299. args: [10 + Math.cos(Math.PI / 4) * 2, 15 + Math.sin(Math.PI / 4) * 2],
  300. }, {
  301. name: 'moveTo',
  302. args: [10 - Math.cos(Math.PI / 4) * 2, 15 + Math.sin(Math.PI / 4) * 2],
  303. }, {
  304. name: 'lineTo',
  305. args: [10 + Math.cos(Math.PI / 4) * 2, 15 - Math.sin(Math.PI / 4) * 2],
  306. }, {
  307. name: 'closePath',
  308. args: [],
  309. }, {
  310. name: 'stroke',
  311. args: []
  312. }]);
  313. mockContext.resetCalls();
  314. point._view.pointStyle = 'star';
  315. point.draw();
  316. expect(mockContext.getCalls()).toEqual([{
  317. name: 'setStrokeStyle',
  318. args: ['rgba(1, 2, 3, 1)']
  319. }, {
  320. name: 'setLineWidth',
  321. args: [6]
  322. }, {
  323. name: 'setFillStyle',
  324. args: ['rgba(0, 255, 0)']
  325. }, {
  326. name: 'beginPath',
  327. args: []
  328. }, {
  329. name: 'moveTo',
  330. args: [10, 17]
  331. }, {
  332. name: 'lineTo',
  333. args: [10, 13],
  334. }, {
  335. name: 'moveTo',
  336. args: [8, 15],
  337. }, {
  338. name: 'lineTo',
  339. args: [12, 15],
  340. }, {
  341. name: 'moveTo',
  342. args: [10 - Math.cos(Math.PI / 4) * 2, 15 - Math.sin(Math.PI / 4) * 2]
  343. }, {
  344. name: 'lineTo',
  345. args: [10 + Math.cos(Math.PI / 4) * 2, 15 + Math.sin(Math.PI / 4) * 2],
  346. }, {
  347. name: 'moveTo',
  348. args: [10 - Math.cos(Math.PI / 4) * 2, 15 + Math.sin(Math.PI / 4) * 2],
  349. }, {
  350. name: 'lineTo',
  351. args: [10 + Math.cos(Math.PI / 4) * 2, 15 - Math.sin(Math.PI / 4) * 2],
  352. }, {
  353. name: 'closePath',
  354. args: [],
  355. }, {
  356. name: 'stroke',
  357. args: []
  358. }]);
  359. mockContext.resetCalls();
  360. point._view.pointStyle = 'line';
  361. point.draw();
  362. expect(mockContext.getCalls()).toEqual([{
  363. name: 'setStrokeStyle',
  364. args: ['rgba(1, 2, 3, 1)']
  365. }, {
  366. name: 'setLineWidth',
  367. args: [6]
  368. }, {
  369. name: 'setFillStyle',
  370. args: ['rgba(0, 255, 0)']
  371. }, {
  372. name: 'beginPath',
  373. args: []
  374. }, {
  375. name: 'moveTo',
  376. args: [8, 15]
  377. }, {
  378. name: 'lineTo',
  379. args: [12, 15],
  380. }, {
  381. name: 'closePath',
  382. args: [],
  383. }, {
  384. name: 'stroke',
  385. args: []
  386. }]);
  387. mockContext.resetCalls();
  388. point._view.pointStyle = 'dash';
  389. point.draw();
  390. expect(mockContext.getCalls()).toEqual([{
  391. name: 'setStrokeStyle',
  392. args: ['rgba(1, 2, 3, 1)']
  393. }, {
  394. name: 'setLineWidth',
  395. args: [6]
  396. }, {
  397. name: 'setFillStyle',
  398. args: ['rgba(0, 255, 0)']
  399. }, {
  400. name: 'beginPath',
  401. args: []
  402. }, {
  403. name: 'moveTo',
  404. args: [10, 15]
  405. }, {
  406. name: 'lineTo',
  407. args: [12, 15],
  408. }, {
  409. name: 'closePath',
  410. args: [],
  411. }, {
  412. name: 'stroke',
  413. args: []
  414. }]);
  415. });
  416. it ('should draw correctly with default settings if necessary', function() {
  417. var mockContext = window.createMockContext();
  418. var point = new Chart.elements.Point({
  419. _datasetIndex: 2,
  420. _index: 1,
  421. _chart: {
  422. ctx: mockContext,
  423. }
  424. });
  425. // Attach a view object as if we were the controller
  426. point._view = {
  427. radius: 2,
  428. hitRadius: 3,
  429. x: 10,
  430. y: 15,
  431. ctx: mockContext
  432. };
  433. point.draw();
  434. expect(mockContext.getCalls()).toEqual([{
  435. name: 'setStrokeStyle',
  436. args: ['rgba(0,0,0,0.1)']
  437. }, {
  438. name: 'setLineWidth',
  439. args: [1]
  440. }, {
  441. name: 'setFillStyle',
  442. args: ['rgba(0,0,0,0.1)']
  443. }, {
  444. name: 'beginPath',
  445. args: []
  446. }, {
  447. name: 'arc',
  448. args: [10, 15, 2, 0, 2 * Math.PI]
  449. }, {
  450. name: 'closePath',
  451. args: [],
  452. }, {
  453. name: 'fill',
  454. args: [],
  455. }, {
  456. name: 'stroke',
  457. args: []
  458. }]);
  459. });
  460. it ('should not draw if skipped', function() {
  461. var mockContext = window.createMockContext();
  462. var point = new Chart.elements.Point({
  463. _datasetIndex: 2,
  464. _index: 1,
  465. _chart: {
  466. ctx: mockContext,
  467. }
  468. });
  469. // Attach a view object as if we were the controller
  470. point._view = {
  471. radius: 2,
  472. hitRadius: 3,
  473. x: 10,
  474. y: 15,
  475. ctx: mockContext,
  476. skip: true
  477. };
  478. point.draw();
  479. expect(mockContext.getCalls()).toEqual([]);
  480. });
  481. });