element.line.tests.js 27 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555
  1. // Tests for the line element
  2. describe('Chart.elements.Line', function() {
  3. it('should be constructed', function() {
  4. var line = new Chart.elements.Line({
  5. _datasetindex: 2,
  6. _points: [1, 2, 3, 4]
  7. });
  8. expect(line).not.toBe(undefined);
  9. expect(line._datasetindex).toBe(2);
  10. expect(line._points).toEqual([1, 2, 3, 4]);
  11. });
  12. it('should draw with default settings', function() {
  13. var mockContext = window.createMockContext();
  14. // Create our points
  15. var points = [];
  16. points.push(new Chart.elements.Point({
  17. _datasetindex: 2,
  18. _index: 0,
  19. _view: {
  20. x: 0,
  21. y: 10,
  22. controlPointNextX: 0,
  23. controlPointNextY: 10
  24. }
  25. }));
  26. points.push(new Chart.elements.Point({
  27. _datasetindex: 2,
  28. _index: 1,
  29. _view: {
  30. x: 5,
  31. y: 0,
  32. controlPointPreviousX: 5,
  33. controlPointPreviousY: 0,
  34. controlPointNextX: 5,
  35. controlPointNextY: 0
  36. }
  37. }));
  38. points.push(new Chart.elements.Point({
  39. _datasetindex: 2,
  40. _index: 2,
  41. _view: {
  42. x: 15,
  43. y: -10,
  44. controlPointPreviousX: 15,
  45. controlPointPreviousY: -10,
  46. controlPointNextX: 15,
  47. controlPointNextY: -10
  48. }
  49. }));
  50. points.push(new Chart.elements.Point({
  51. _datasetindex: 2,
  52. _index: 3,
  53. _view: {
  54. x: 19,
  55. y: -5,
  56. controlPointPreviousX: 19,
  57. controlPointPreviousY: -5,
  58. controlPointNextX: 19,
  59. controlPointNextY: -5
  60. }
  61. }));
  62. var line = new Chart.elements.Line({
  63. _datasetindex: 2,
  64. _chart: {
  65. ctx: mockContext,
  66. },
  67. _children: points,
  68. // Need to provide some settings
  69. _view: {
  70. fill: false, // don't want to fill
  71. tension: 0, // no bezier curve for now
  72. }
  73. });
  74. line.draw();
  75. expect(mockContext.getCalls()).toEqual([{
  76. name: 'save',
  77. args: [],
  78. }, {
  79. name: 'setLineCap',
  80. args: ['butt']
  81. }, {
  82. name: 'setLineDash',
  83. args: [
  84. []
  85. ]
  86. }, {
  87. name: 'setLineDashOffset',
  88. args: [0.0]
  89. }, {
  90. name: 'setLineJoin',
  91. args: ['miter']
  92. }, {
  93. name: 'setLineWidth',
  94. args: [3]
  95. }, {
  96. name: 'setStrokeStyle',
  97. args: ['rgba(0,0,0,0.1)']
  98. }, {
  99. name: 'beginPath',
  100. args: []
  101. }, {
  102. name: 'moveTo',
  103. args: [0, 10]
  104. }, {
  105. name: 'lineTo',
  106. args: [5, 0]
  107. }, {
  108. name: 'lineTo',
  109. args: [15, -10]
  110. }, {
  111. name: 'lineTo',
  112. args: [19, -5]
  113. }, {
  114. name: 'stroke',
  115. args: [],
  116. }, {
  117. name: 'restore',
  118. args: []
  119. }]);
  120. });
  121. it('should draw with straight lines for a tension of 0', function() {
  122. var mockContext = window.createMockContext();
  123. // Create our points
  124. var points = [];
  125. points.push(new Chart.elements.Point({
  126. _datasetindex: 2,
  127. _index: 0,
  128. _view: {
  129. x: 0,
  130. y: 10,
  131. controlPointNextX: 0,
  132. controlPointNextY: 10,
  133. tension: 0
  134. }
  135. }));
  136. points.push(new Chart.elements.Point({
  137. _datasetindex: 2,
  138. _index: 1,
  139. _view: {
  140. x: 5,
  141. y: 0,
  142. controlPointPreviousX: 5,
  143. controlPointPreviousY: 0,
  144. controlPointNextX: 5,
  145. controlPointNextY: 0,
  146. tension: 0
  147. }
  148. }));
  149. points.push(new Chart.elements.Point({
  150. _datasetindex: 2,
  151. _index: 2,
  152. _view: {
  153. x: 15,
  154. y: -10,
  155. controlPointPreviousX: 15,
  156. controlPointPreviousY: -10,
  157. controlPointNextX: 15,
  158. controlPointNextY: -10,
  159. tension: 0
  160. }
  161. }));
  162. points.push(new Chart.elements.Point({
  163. _datasetindex: 2,
  164. _index: 3,
  165. _view: {
  166. x: 19,
  167. y: -5,
  168. controlPointPreviousX: 19,
  169. controlPointPreviousY: -5,
  170. controlPointNextX: 19,
  171. controlPointNextY: -5,
  172. tension: 0
  173. }
  174. }));
  175. var line = new Chart.elements.Line({
  176. _datasetindex: 2,
  177. _chart: {
  178. ctx: mockContext,
  179. },
  180. _children: points,
  181. // Need to provide some settings
  182. _view: {
  183. fill: false, // don't want to fill
  184. tension: 0, // no bezier curve for now
  185. }
  186. });
  187. line.draw();
  188. expect(mockContext.getCalls()).toEqual([{
  189. name: 'save',
  190. args: [],
  191. }, {
  192. name: 'setLineCap',
  193. args: ['butt']
  194. }, {
  195. name: 'setLineDash',
  196. args: [
  197. []
  198. ]
  199. }, {
  200. name: 'setLineDashOffset',
  201. args: [0.0]
  202. }, {
  203. name: 'setLineJoin',
  204. args: ['miter']
  205. }, {
  206. name: 'setLineWidth',
  207. args: [3]
  208. }, {
  209. name: 'setStrokeStyle',
  210. args: ['rgba(0,0,0,0.1)']
  211. }, {
  212. name: 'beginPath',
  213. args: []
  214. }, {
  215. name: 'moveTo',
  216. args: [0, 10]
  217. }, {
  218. name: 'lineTo',
  219. args: [5, 0]
  220. }, {
  221. name: 'lineTo',
  222. args: [15, -10]
  223. }, {
  224. name: 'lineTo',
  225. args: [19, -5]
  226. }, {
  227. name: 'stroke',
  228. args: [],
  229. }, {
  230. name: 'restore',
  231. args: []
  232. }]);
  233. });
  234. it('should draw stepped lines, with "before" interpolation', function() {
  235. // Both `true` and `'before'` should draw the same steppedLine
  236. var beforeInterpolations = [true, 'before'];
  237. beforeInterpolations.forEach(function(mode) {
  238. var mockContext = window.createMockContext();
  239. // Create our points
  240. var points = [];
  241. points.push(new Chart.elements.Point({
  242. _datasetindex: 2,
  243. _index: 0,
  244. _view: {
  245. x: 0,
  246. y: 10,
  247. controlPointNextX: 0,
  248. controlPointNextY: 10,
  249. steppedLine: mode
  250. }
  251. }));
  252. points.push(new Chart.elements.Point({
  253. _datasetindex: 2,
  254. _index: 1,
  255. _view: {
  256. x: 5,
  257. y: 0,
  258. controlPointPreviousX: 5,
  259. controlPointPreviousY: 0,
  260. controlPointNextX: 5,
  261. controlPointNextY: 0,
  262. steppedLine: mode
  263. }
  264. }));
  265. points.push(new Chart.elements.Point({
  266. _datasetindex: 2,
  267. _index: 2,
  268. _view: {
  269. x: 15,
  270. y: -10,
  271. controlPointPreviousX: 15,
  272. controlPointPreviousY: -10,
  273. controlPointNextX: 15,
  274. controlPointNextY: -10,
  275. steppedLine: mode
  276. }
  277. }));
  278. points.push(new Chart.elements.Point({
  279. _datasetindex: 2,
  280. _index: 3,
  281. _view: {
  282. x: 19,
  283. y: -5,
  284. controlPointPreviousX: 19,
  285. controlPointPreviousY: -5,
  286. controlPointNextX: 19,
  287. controlPointNextY: -5,
  288. steppedLine: mode
  289. }
  290. }));
  291. var line = new Chart.elements.Line({
  292. _datasetindex: 2,
  293. _chart: {
  294. ctx: mockContext,
  295. },
  296. _children: points,
  297. // Need to provide some settings
  298. _view: {
  299. fill: false, // don't want to fill
  300. tension: 0, // no bezier curve for now
  301. }
  302. });
  303. line.draw();
  304. expect(mockContext.getCalls()).toEqual([{
  305. name: 'save',
  306. args: [],
  307. }, {
  308. name: 'setLineCap',
  309. args: ['butt']
  310. }, {
  311. name: 'setLineDash',
  312. args: [
  313. []
  314. ]
  315. }, {
  316. name: 'setLineDashOffset',
  317. args: [0.0]
  318. }, {
  319. name: 'setLineJoin',
  320. args: ['miter']
  321. }, {
  322. name: 'setLineWidth',
  323. args: [3]
  324. }, {
  325. name: 'setStrokeStyle',
  326. args: ['rgba(0,0,0,0.1)']
  327. }, {
  328. name: 'beginPath',
  329. args: []
  330. }, {
  331. name: 'moveTo',
  332. args: [0, 10]
  333. }, {
  334. name: 'lineTo',
  335. args: [5, 10]
  336. }, {
  337. name: 'lineTo',
  338. args: [5, 0]
  339. }, {
  340. name: 'lineTo',
  341. args: [15, 0]
  342. }, {
  343. name: 'lineTo',
  344. args: [15, -10]
  345. }, {
  346. name: 'lineTo',
  347. args: [19, -10]
  348. }, {
  349. name: 'lineTo',
  350. args: [19, -5]
  351. }, {
  352. name: 'stroke',
  353. args: [],
  354. }, {
  355. name: 'restore',
  356. args: []
  357. }]);
  358. });
  359. });
  360. it('should draw stepped lines, with "middle" interpolation', function() {
  361. var mockContext = window.createMockContext();
  362. // Create our points
  363. var points = [];
  364. points.push(new Chart.elements.Point({
  365. _datasetindex: 2,
  366. _index: 0,
  367. _view: {
  368. x: 0,
  369. y: 10,
  370. controlPointNextX: 0,
  371. controlPointNextY: 10,
  372. steppedLine: 'middle'
  373. }
  374. }));
  375. points.push(new Chart.elements.Point({
  376. _datasetindex: 2,
  377. _index: 1,
  378. _view: {
  379. x: 5,
  380. y: 0,
  381. controlPointPreviousX: 5,
  382. controlPointPreviousY: 0,
  383. controlPointNextX: 5,
  384. controlPointNextY: 0,
  385. steppedLine: 'middle'
  386. }
  387. }));
  388. points.push(new Chart.elements.Point({
  389. _datasetindex: 2,
  390. _index: 2,
  391. _view: {
  392. x: 15,
  393. y: -10,
  394. controlPointPreviousX: 15,
  395. controlPointPreviousY: -10,
  396. controlPointNextX: 15,
  397. controlPointNextY: -10,
  398. steppedLine: 'middle'
  399. }
  400. }));
  401. points.push(new Chart.elements.Point({
  402. _datasetindex: 2,
  403. _index: 3,
  404. _view: {
  405. x: 19,
  406. y: -5,
  407. controlPointPreviousX: 19,
  408. controlPointPreviousY: -5,
  409. controlPointNextX: 19,
  410. controlPointNextY: -5,
  411. steppedLine: 'middle'
  412. }
  413. }));
  414. var line = new Chart.elements.Line({
  415. _datasetindex: 2,
  416. _chart: {
  417. ctx: mockContext,
  418. },
  419. _children: points,
  420. // Need to provide some settings
  421. _view: {
  422. fill: false, // don't want to fill
  423. tension: 0, // no bezier curve for now
  424. }
  425. });
  426. line.draw();
  427. expect(mockContext.getCalls()).toEqual([{
  428. name: 'save',
  429. args: [],
  430. }, {
  431. name: 'setLineCap',
  432. args: ['butt']
  433. }, {
  434. name: 'setLineDash',
  435. args: [
  436. []
  437. ]
  438. }, {
  439. name: 'setLineDashOffset',
  440. args: [0.0]
  441. }, {
  442. name: 'setLineJoin',
  443. args: ['miter']
  444. }, {
  445. name: 'setLineWidth',
  446. args: [3]
  447. }, {
  448. name: 'setStrokeStyle',
  449. args: ['rgba(0,0,0,0.1)']
  450. }, {
  451. name: 'beginPath',
  452. args: []
  453. }, {
  454. name: 'moveTo',
  455. args: [0, 10]
  456. }, {
  457. name: 'lineTo',
  458. args: [2.5, 10]
  459. }, {
  460. name: 'lineTo',
  461. args: [2.5, 0]
  462. }, {
  463. name: 'lineTo',
  464. args: [5, 0]
  465. }, {
  466. name: 'lineTo',
  467. args: [10, 0]
  468. }, {
  469. name: 'lineTo',
  470. args: [10, -10]
  471. }, {
  472. name: 'lineTo',
  473. args: [15, -10]
  474. }, {
  475. name: 'lineTo',
  476. args: [17, -10]
  477. }, {
  478. name: 'lineTo',
  479. args: [17, -5]
  480. }, {
  481. name: 'lineTo',
  482. args: [19, -5]
  483. }, {
  484. name: 'stroke',
  485. args: [],
  486. }, {
  487. name: 'restore',
  488. args: []
  489. }]);
  490. });
  491. it('should draw stepped lines, with "after" interpolation', function() {
  492. var mockContext = window.createMockContext();
  493. // Create our points
  494. var points = [];
  495. points.push(new Chart.elements.Point({
  496. _datasetindex: 2,
  497. _index: 0,
  498. _view: {
  499. x: 0,
  500. y: 10,
  501. controlPointNextX: 0,
  502. controlPointNextY: 10,
  503. steppedLine: 'after'
  504. }
  505. }));
  506. points.push(new Chart.elements.Point({
  507. _datasetindex: 2,
  508. _index: 1,
  509. _view: {
  510. x: 5,
  511. y: 0,
  512. controlPointPreviousX: 5,
  513. controlPointPreviousY: 0,
  514. controlPointNextX: 5,
  515. controlPointNextY: 0,
  516. steppedLine: 'after'
  517. }
  518. }));
  519. points.push(new Chart.elements.Point({
  520. _datasetindex: 2,
  521. _index: 2,
  522. _view: {
  523. x: 15,
  524. y: -10,
  525. controlPointPreviousX: 15,
  526. controlPointPreviousY: -10,
  527. controlPointNextX: 15,
  528. controlPointNextY: -10,
  529. steppedLine: 'after'
  530. }
  531. }));
  532. points.push(new Chart.elements.Point({
  533. _datasetindex: 2,
  534. _index: 3,
  535. _view: {
  536. x: 19,
  537. y: -5,
  538. controlPointPreviousX: 19,
  539. controlPointPreviousY: -5,
  540. controlPointNextX: 19,
  541. controlPointNextY: -5,
  542. steppedLine: 'after'
  543. }
  544. }));
  545. var line = new Chart.elements.Line({
  546. _datasetindex: 2,
  547. _chart: {
  548. ctx: mockContext,
  549. },
  550. _children: points,
  551. // Need to provide some settings
  552. _view: {
  553. fill: false, // don't want to fill
  554. tension: 0, // no bezier curve for now
  555. }
  556. });
  557. line.draw();
  558. expect(mockContext.getCalls()).toEqual([{
  559. name: 'save',
  560. args: [],
  561. }, {
  562. name: 'setLineCap',
  563. args: ['butt']
  564. }, {
  565. name: 'setLineDash',
  566. args: [
  567. []
  568. ]
  569. }, {
  570. name: 'setLineDashOffset',
  571. args: [0.0]
  572. }, {
  573. name: 'setLineJoin',
  574. args: ['miter']
  575. }, {
  576. name: 'setLineWidth',
  577. args: [3]
  578. }, {
  579. name: 'setStrokeStyle',
  580. args: ['rgba(0,0,0,0.1)']
  581. }, {
  582. name: 'beginPath',
  583. args: []
  584. }, {
  585. name: 'moveTo',
  586. args: [0, 10]
  587. }, {
  588. name: 'lineTo',
  589. args: [0, 0]
  590. }, {
  591. name: 'lineTo',
  592. args: [5, 0]
  593. }, {
  594. name: 'lineTo',
  595. args: [5, -10]
  596. }, {
  597. name: 'lineTo',
  598. args: [15, -10]
  599. }, {
  600. name: 'lineTo',
  601. args: [15, -5]
  602. }, {
  603. name: 'lineTo',
  604. args: [19, -5]
  605. }, {
  606. name: 'stroke',
  607. args: [],
  608. }, {
  609. name: 'restore',
  610. args: []
  611. }]);
  612. });
  613. it('should draw with custom settings', function() {
  614. var mockContext = window.createMockContext();
  615. // Create our points
  616. var points = [];
  617. points.push(new Chart.elements.Point({
  618. _datasetindex: 2,
  619. _index: 0,
  620. _view: {
  621. x: 0,
  622. y: 10,
  623. controlPointNextX: 0,
  624. controlPointNextY: 10
  625. }
  626. }));
  627. points.push(new Chart.elements.Point({
  628. _datasetindex: 2,
  629. _index: 1,
  630. _view: {
  631. x: 5,
  632. y: 0,
  633. controlPointPreviousX: 5,
  634. controlPointPreviousY: 0,
  635. controlPointNextX: 5,
  636. controlPointNextY: 0
  637. }
  638. }));
  639. points.push(new Chart.elements.Point({
  640. _datasetindex: 2,
  641. _index: 2,
  642. _view: {
  643. x: 15,
  644. y: -10,
  645. controlPointPreviousX: 15,
  646. controlPointPreviousY: -10,
  647. controlPointNextX: 15,
  648. controlPointNextY: -10
  649. }
  650. }));
  651. points.push(new Chart.elements.Point({
  652. _datasetindex: 2,
  653. _index: 3,
  654. _view: {
  655. x: 19,
  656. y: -5,
  657. controlPointPreviousX: 19,
  658. controlPointPreviousY: -5,
  659. controlPointNextX: 19,
  660. controlPointNextY: -5
  661. }
  662. }));
  663. var line = new Chart.elements.Line({
  664. _datasetindex: 2,
  665. _chart: {
  666. ctx: mockContext,
  667. },
  668. _children: points,
  669. // Need to provide some settings
  670. _view: {
  671. fill: true,
  672. tension: 0, // no bezier curve for now
  673. borderCapStyle: 'round',
  674. borderColor: 'rgb(255, 255, 0)',
  675. borderDash: [2, 2],
  676. borderDashOffset: 1.5,
  677. borderJoinStyle: 'bevel',
  678. borderWidth: 4,
  679. backgroundColor: 'rgb(0, 0, 0)'
  680. }
  681. });
  682. line.draw();
  683. var expected = [{
  684. name: 'save',
  685. args: []
  686. }, {
  687. name: 'setLineCap',
  688. args: ['round']
  689. }, {
  690. name: 'setLineDash',
  691. args: [
  692. [2, 2]
  693. ]
  694. }, {
  695. name: 'setLineDashOffset',
  696. args: [1.5]
  697. }, {
  698. name: 'setLineJoin',
  699. args: ['bevel']
  700. }, {
  701. name: 'setLineWidth',
  702. args: [4]
  703. }, {
  704. name: 'setStrokeStyle',
  705. args: ['rgb(255, 255, 0)']
  706. }, {
  707. name: 'beginPath',
  708. args: []
  709. }, {
  710. name: 'moveTo',
  711. args: [0, 10]
  712. }, {
  713. name: 'lineTo',
  714. args: [5, 0]
  715. }, {
  716. name: 'lineTo',
  717. args: [15, -10]
  718. }, {
  719. name: 'lineTo',
  720. args: [19, -5]
  721. }, {
  722. name: 'stroke',
  723. args: []
  724. }, {
  725. name: 'restore',
  726. args: []
  727. }];
  728. expect(mockContext.getCalls()).toEqual(expected);
  729. });
  730. it('should skip points correctly', function() {
  731. var mockContext = window.createMockContext();
  732. // Create our points
  733. var points = [];
  734. points.push(new Chart.elements.Point({
  735. _datasetindex: 2,
  736. _index: 0,
  737. _view: {
  738. x: 0,
  739. y: 10,
  740. controlPointNextX: 0,
  741. controlPointNextY: 10
  742. }
  743. }));
  744. points.push(new Chart.elements.Point({
  745. _datasetindex: 2,
  746. _index: 1,
  747. _view: {
  748. x: 5,
  749. y: 0,
  750. controlPointPreviousX: 5,
  751. controlPointPreviousY: 0,
  752. controlPointNextX: 5,
  753. controlPointNextY: 0
  754. }
  755. }));
  756. points.push(new Chart.elements.Point({
  757. _datasetindex: 2,
  758. _index: 2,
  759. _view: {
  760. x: 15,
  761. y: -10,
  762. controlPointPreviousX: 15,
  763. controlPointPreviousY: -10,
  764. controlPointNextX: 15,
  765. controlPointNextY: -10,
  766. skip: true
  767. }
  768. }));
  769. points.push(new Chart.elements.Point({
  770. _datasetindex: 2,
  771. _index: 3,
  772. _view: {
  773. x: 19,
  774. y: -5,
  775. controlPointPreviousX: 19,
  776. controlPointPreviousY: -5,
  777. controlPointNextX: 19,
  778. controlPointNextY: -5
  779. }
  780. }));
  781. var line = new Chart.elements.Line({
  782. _datasetindex: 2,
  783. _chart: {
  784. ctx: mockContext,
  785. },
  786. _children: points,
  787. // Need to provide some settings
  788. _view: {
  789. fill: true,
  790. tension: 0, // no bezier curve for now
  791. }
  792. });
  793. line.draw();
  794. var expected = [{
  795. name: 'save',
  796. args: []
  797. }, {
  798. name: 'setLineCap',
  799. args: ['butt']
  800. }, {
  801. name: 'setLineDash',
  802. args: [
  803. []
  804. ]
  805. }, {
  806. name: 'setLineDashOffset',
  807. args: [0]
  808. }, {
  809. name: 'setLineJoin',
  810. args: ['miter']
  811. }, {
  812. name: 'setLineWidth',
  813. args: [3]
  814. }, {
  815. name: 'setStrokeStyle',
  816. args: ['rgba(0,0,0,0.1)']
  817. }, {
  818. name: 'beginPath',
  819. args: []
  820. }, {
  821. name: 'moveTo',
  822. args: [0, 10]
  823. }, {
  824. name: 'lineTo',
  825. args: [5, 0]
  826. }, {
  827. name: 'moveTo',
  828. args: [19, -5]
  829. }, {
  830. name: 'stroke',
  831. args: []
  832. }, {
  833. name: 'restore',
  834. args: []
  835. }];
  836. expect(mockContext.getCalls()).toEqual(expected);
  837. });
  838. it('should skip points correctly when spanGaps is true', function() {
  839. var mockContext = window.createMockContext();
  840. // Create our points
  841. var points = [];
  842. points.push(new Chart.elements.Point({
  843. _datasetindex: 2,
  844. _index: 0,
  845. _view: {
  846. x: 0,
  847. y: 10,
  848. controlPointNextX: 0,
  849. controlPointNextY: 10
  850. }
  851. }));
  852. points.push(new Chart.elements.Point({
  853. _datasetindex: 2,
  854. _index: 1,
  855. _view: {
  856. x: 5,
  857. y: 0,
  858. controlPointPreviousX: 5,
  859. controlPointPreviousY: 0,
  860. controlPointNextX: 5,
  861. controlPointNextY: 0
  862. }
  863. }));
  864. points.push(new Chart.elements.Point({
  865. _datasetindex: 2,
  866. _index: 2,
  867. _view: {
  868. x: 15,
  869. y: -10,
  870. controlPointPreviousX: 15,
  871. controlPointPreviousY: -10,
  872. controlPointNextX: 15,
  873. controlPointNextY: -10,
  874. skip: true
  875. }
  876. }));
  877. points.push(new Chart.elements.Point({
  878. _datasetindex: 2,
  879. _index: 3,
  880. _view: {
  881. x: 19,
  882. y: -5,
  883. controlPointPreviousX: 19,
  884. controlPointPreviousY: -5,
  885. controlPointNextX: 19,
  886. controlPointNextY: -5
  887. }
  888. }));
  889. var line = new Chart.elements.Line({
  890. _datasetindex: 2,
  891. _chart: {
  892. ctx: mockContext,
  893. },
  894. _children: points,
  895. // Need to provide some settings
  896. _view: {
  897. fill: true,
  898. tension: 0, // no bezier curve for now
  899. spanGaps: true
  900. }
  901. });
  902. line.draw();
  903. var expected = [{
  904. name: 'save',
  905. args: []
  906. }, {
  907. name: 'setLineCap',
  908. args: ['butt']
  909. }, {
  910. name: 'setLineDash',
  911. args: [
  912. []
  913. ]
  914. }, {
  915. name: 'setLineDashOffset',
  916. args: [0]
  917. }, {
  918. name: 'setLineJoin',
  919. args: ['miter']
  920. }, {
  921. name: 'setLineWidth',
  922. args: [3]
  923. }, {
  924. name: 'setStrokeStyle',
  925. args: ['rgba(0,0,0,0.1)']
  926. }, {
  927. name: 'beginPath',
  928. args: []
  929. }, {
  930. name: 'moveTo',
  931. args: [0, 10]
  932. }, {
  933. name: 'lineTo',
  934. args: [5, 0]
  935. }, {
  936. name: 'lineTo',
  937. args: [19, -5]
  938. }, {
  939. name: 'stroke',
  940. args: []
  941. }, {
  942. name: 'restore',
  943. args: []
  944. }];
  945. expect(mockContext.getCalls()).toEqual(expected);
  946. });
  947. it('should skip points correctly when all points are skipped', function() {
  948. var mockContext = window.createMockContext();
  949. // Create our points
  950. var points = [];
  951. points.push(new Chart.elements.Point({
  952. _datasetindex: 2,
  953. _index: 0,
  954. _view: {
  955. x: 0,
  956. y: 10,
  957. controlPointNextX: 0,
  958. controlPointNextY: 10,
  959. skip: true
  960. }
  961. }));
  962. points.push(new Chart.elements.Point({
  963. _datasetindex: 2,
  964. _index: 1,
  965. _view: {
  966. x: 5,
  967. y: 0,
  968. controlPointPreviousX: 5,
  969. controlPointPreviousY: 0,
  970. controlPointNextX: 5,
  971. controlPointNextY: 0,
  972. skip: true
  973. }
  974. }));
  975. points.push(new Chart.elements.Point({
  976. _datasetindex: 2,
  977. _index: 2,
  978. _view: {
  979. x: 15,
  980. y: -10,
  981. controlPointPreviousX: 15,
  982. controlPointPreviousY: -10,
  983. controlPointNextX: 15,
  984. controlPointNextY: -10,
  985. skip: true
  986. }
  987. }));
  988. points.push(new Chart.elements.Point({
  989. _datasetindex: 2,
  990. _index: 3,
  991. _view: {
  992. x: 19,
  993. y: -5,
  994. controlPointPreviousX: 19,
  995. controlPointPreviousY: -5,
  996. controlPointNextX: 19,
  997. controlPointNextY: -5,
  998. skip: true
  999. }
  1000. }));
  1001. var line = new Chart.elements.Line({
  1002. _datasetindex: 2,
  1003. _chart: {
  1004. ctx: mockContext,
  1005. },
  1006. _children: points,
  1007. // Need to provide some settings
  1008. _view: {
  1009. fill: true,
  1010. tension: 0, // no bezier curve for now
  1011. spanGaps: true
  1012. }
  1013. });
  1014. line.draw();
  1015. var expected = [{
  1016. name: 'save',
  1017. args: []
  1018. }, {
  1019. name: 'setLineCap',
  1020. args: ['butt']
  1021. }, {
  1022. name: 'setLineDash',
  1023. args: [
  1024. []
  1025. ]
  1026. }, {
  1027. name: 'setLineDashOffset',
  1028. args: [0]
  1029. }, {
  1030. name: 'setLineJoin',
  1031. args: ['miter']
  1032. }, {
  1033. name: 'setLineWidth',
  1034. args: [3]
  1035. }, {
  1036. name: 'setStrokeStyle',
  1037. args: ['rgba(0,0,0,0.1)']
  1038. }, {
  1039. name: 'beginPath',
  1040. args: []
  1041. }, {
  1042. name: 'stroke',
  1043. args: []
  1044. }, {
  1045. name: 'restore',
  1046. args: []
  1047. }];
  1048. expect(mockContext.getCalls()).toEqual(expected);
  1049. });
  1050. it('should skip the first point correctly', function() {
  1051. var mockContext = window.createMockContext();
  1052. // Create our points
  1053. var points = [];
  1054. points.push(new Chart.elements.Point({
  1055. _datasetindex: 2,
  1056. _index: 0,
  1057. _view: {
  1058. x: 0,
  1059. y: 10,
  1060. controlPointNextX: 0,
  1061. controlPointNextY: 10,
  1062. skip: true
  1063. }
  1064. }));
  1065. points.push(new Chart.elements.Point({
  1066. _datasetindex: 2,
  1067. _index: 1,
  1068. _view: {
  1069. x: 5,
  1070. y: 0,
  1071. controlPointPreviousX: 5,
  1072. controlPointPreviousY: 0,
  1073. controlPointNextX: 5,
  1074. controlPointNextY: 0
  1075. }
  1076. }));
  1077. points.push(new Chart.elements.Point({
  1078. _datasetindex: 2,
  1079. _index: 2,
  1080. _view: {
  1081. x: 15,
  1082. y: -10,
  1083. controlPointPreviousX: 15,
  1084. controlPointPreviousY: -10,
  1085. controlPointNextX: 15,
  1086. controlPointNextY: -10
  1087. }
  1088. }));
  1089. points.push(new Chart.elements.Point({
  1090. _datasetindex: 2,
  1091. _index: 3,
  1092. _view: {
  1093. x: 19,
  1094. y: -5,
  1095. controlPointPreviousX: 19,
  1096. controlPointPreviousY: -5,
  1097. controlPointNextX: 19,
  1098. controlPointNextY: -5
  1099. }
  1100. }));
  1101. var line = new Chart.elements.Line({
  1102. _datasetindex: 2,
  1103. _chart: {
  1104. ctx: mockContext,
  1105. },
  1106. _children: points,
  1107. // Need to provide some settings
  1108. _view: {
  1109. fill: true,
  1110. tension: 0, // no bezier curve for now
  1111. }
  1112. });
  1113. line.draw();
  1114. var expected = [{
  1115. name: 'save',
  1116. args: []
  1117. }, {
  1118. name: 'setLineCap',
  1119. args: ['butt']
  1120. }, {
  1121. name: 'setLineDash',
  1122. args: [
  1123. []
  1124. ]
  1125. }, {
  1126. name: 'setLineDashOffset',
  1127. args: [0]
  1128. }, {
  1129. name: 'setLineJoin',
  1130. args: ['miter']
  1131. }, {
  1132. name: 'setLineWidth',
  1133. args: [3]
  1134. }, {
  1135. name: 'setStrokeStyle',
  1136. args: ['rgba(0,0,0,0.1)']
  1137. }, {
  1138. name: 'beginPath',
  1139. args: []
  1140. }, {
  1141. name: 'moveTo',
  1142. args: [5, 0]
  1143. }, {
  1144. name: 'lineTo',
  1145. args: [15, -10]
  1146. }, {
  1147. name: 'lineTo',
  1148. args: [19, -5]
  1149. }, {
  1150. name: 'stroke',
  1151. args: []
  1152. }, {
  1153. name: 'restore',
  1154. args: []
  1155. }];
  1156. expect(mockContext.getCalls()).toEqual(expected);
  1157. });
  1158. it('should skip the first point correctly when spanGaps is true', function() {
  1159. var mockContext = window.createMockContext();
  1160. // Create our points
  1161. var points = [];
  1162. points.push(new Chart.elements.Point({
  1163. _datasetindex: 2,
  1164. _index: 0,
  1165. _view: {
  1166. x: 0,
  1167. y: 10,
  1168. controlPointNextX: 0,
  1169. controlPointNextY: 10,
  1170. skip: true
  1171. }
  1172. }));
  1173. points.push(new Chart.elements.Point({
  1174. _datasetindex: 2,
  1175. _index: 1,
  1176. _view: {
  1177. x: 5,
  1178. y: 0,
  1179. controlPointPreviousX: 5,
  1180. controlPointPreviousY: 0,
  1181. controlPointNextX: 5,
  1182. controlPointNextY: 0
  1183. }
  1184. }));
  1185. points.push(new Chart.elements.Point({
  1186. _datasetindex: 2,
  1187. _index: 2,
  1188. _view: {
  1189. x: 15,
  1190. y: -10,
  1191. controlPointPreviousX: 15,
  1192. controlPointPreviousY: -10,
  1193. controlPointNextX: 15,
  1194. controlPointNextY: -10
  1195. }
  1196. }));
  1197. points.push(new Chart.elements.Point({
  1198. _datasetindex: 2,
  1199. _index: 3,
  1200. _view: {
  1201. x: 19,
  1202. y: -5,
  1203. controlPointPreviousX: 19,
  1204. controlPointPreviousY: -5,
  1205. controlPointNextX: 19,
  1206. controlPointNextY: -5
  1207. }
  1208. }));
  1209. var line = new Chart.elements.Line({
  1210. _datasetindex: 2,
  1211. _chart: {
  1212. ctx: mockContext,
  1213. },
  1214. _children: points,
  1215. // Need to provide some settings
  1216. _view: {
  1217. fill: true,
  1218. tension: 0, // no bezier curve for now
  1219. spanGaps: true
  1220. }
  1221. });
  1222. line.draw();
  1223. var expected = [{
  1224. name: 'save',
  1225. args: []
  1226. }, {
  1227. name: 'setLineCap',
  1228. args: ['butt']
  1229. }, {
  1230. name: 'setLineDash',
  1231. args: [
  1232. []
  1233. ]
  1234. }, {
  1235. name: 'setLineDashOffset',
  1236. args: [0]
  1237. }, {
  1238. name: 'setLineJoin',
  1239. args: ['miter']
  1240. }, {
  1241. name: 'setLineWidth',
  1242. args: [3]
  1243. }, {
  1244. name: 'setStrokeStyle',
  1245. args: ['rgba(0,0,0,0.1)']
  1246. }, {
  1247. name: 'beginPath',
  1248. args: []
  1249. }, {
  1250. name: 'moveTo',
  1251. args: [5, 0]
  1252. }, {
  1253. name: 'lineTo',
  1254. args: [15, -10]
  1255. }, {
  1256. name: 'lineTo',
  1257. args: [19, -5]
  1258. }, {
  1259. name: 'stroke',
  1260. args: []
  1261. }, {
  1262. name: 'restore',
  1263. args: []
  1264. }];
  1265. expect(mockContext.getCalls()).toEqual(expected);
  1266. });
  1267. it('should skip the last point correctly', function() {
  1268. var mockContext = window.createMockContext();
  1269. // Create our points
  1270. var points = [];
  1271. points.push(new Chart.elements.Point({
  1272. _datasetindex: 2,
  1273. _index: 0,
  1274. _view: {
  1275. x: 0,
  1276. y: 10,
  1277. controlPointNextX: 0,
  1278. controlPointNextY: 10
  1279. }
  1280. }));
  1281. points.push(new Chart.elements.Point({
  1282. _datasetindex: 2,
  1283. _index: 1,
  1284. _view: {
  1285. x: 5,
  1286. y: 0,
  1287. controlPointPreviousX: 5,
  1288. controlPointPreviousY: 0,
  1289. controlPointNextX: 5,
  1290. controlPointNextY: 0
  1291. }
  1292. }));
  1293. points.push(new Chart.elements.Point({
  1294. _datasetindex: 2,
  1295. _index: 2,
  1296. _view: {
  1297. x: 15,
  1298. y: -10,
  1299. controlPointPreviousX: 15,
  1300. controlPointPreviousY: -10,
  1301. controlPointNextX: 15,
  1302. controlPointNextY: -10
  1303. }
  1304. }));
  1305. points.push(new Chart.elements.Point({
  1306. _datasetindex: 2,
  1307. _index: 3,
  1308. _view: {
  1309. x: 19,
  1310. y: -5,
  1311. controlPointPreviousX: 19,
  1312. controlPointPreviousY: -5,
  1313. controlPointNextX: 19,
  1314. controlPointNextY: -5,
  1315. skip: true
  1316. }
  1317. }));
  1318. var line = new Chart.elements.Line({
  1319. _datasetindex: 2,
  1320. _chart: {
  1321. ctx: mockContext,
  1322. },
  1323. _children: points,
  1324. // Need to provide some settings
  1325. _view: {
  1326. fill: true,
  1327. tension: 0, // no bezier curve for now
  1328. }
  1329. });
  1330. line.draw();
  1331. var expected = [{
  1332. name: 'save',
  1333. args: []
  1334. }, {
  1335. name: 'setLineCap',
  1336. args: ['butt']
  1337. }, {
  1338. name: 'setLineDash',
  1339. args: [
  1340. []
  1341. ]
  1342. }, {
  1343. name: 'setLineDashOffset',
  1344. args: [0]
  1345. }, {
  1346. name: 'setLineJoin',
  1347. args: ['miter']
  1348. }, {
  1349. name: 'setLineWidth',
  1350. args: [3]
  1351. }, {
  1352. name: 'setStrokeStyle',
  1353. args: ['rgba(0,0,0,0.1)']
  1354. }, {
  1355. name: 'beginPath',
  1356. args: []
  1357. }, {
  1358. name: 'moveTo',
  1359. args: [0, 10]
  1360. }, {
  1361. name: 'lineTo',
  1362. args: [5, 0]
  1363. }, {
  1364. name: 'lineTo',
  1365. args: [15, -10]
  1366. }, {
  1367. name: 'stroke',
  1368. args: []
  1369. }, {
  1370. name: 'restore',
  1371. args: []
  1372. }];
  1373. expect(mockContext.getCalls()).toEqual(expected);
  1374. });
  1375. it('should skip the last point correctly when spanGaps is true', function() {
  1376. var mockContext = window.createMockContext();
  1377. // Create our points
  1378. var points = [];
  1379. points.push(new Chart.elements.Point({
  1380. _datasetindex: 2,
  1381. _index: 0,
  1382. _view: {
  1383. x: 0,
  1384. y: 10,
  1385. controlPointNextX: 0,
  1386. controlPointNextY: 10
  1387. }
  1388. }));
  1389. points.push(new Chart.elements.Point({
  1390. _datasetindex: 2,
  1391. _index: 1,
  1392. _view: {
  1393. x: 5,
  1394. y: 0,
  1395. controlPointPreviousX: 5,
  1396. controlPointPreviousY: 0,
  1397. controlPointNextX: 5,
  1398. controlPointNextY: 0
  1399. }
  1400. }));
  1401. points.push(new Chart.elements.Point({
  1402. _datasetindex: 2,
  1403. _index: 2,
  1404. _view: {
  1405. x: 15,
  1406. y: -10,
  1407. controlPointPreviousX: 15,
  1408. controlPointPreviousY: -10,
  1409. controlPointNextX: 15,
  1410. controlPointNextY: -10
  1411. }
  1412. }));
  1413. points.push(new Chart.elements.Point({
  1414. _datasetindex: 2,
  1415. _index: 3,
  1416. _view: {
  1417. x: 19,
  1418. y: -5,
  1419. controlPointPreviousX: 19,
  1420. controlPointPreviousY: -5,
  1421. controlPointNextX: 19,
  1422. controlPointNextY: -5,
  1423. skip: true
  1424. }
  1425. }));
  1426. var line = new Chart.elements.Line({
  1427. _datasetindex: 2,
  1428. _chart: {
  1429. ctx: mockContext,
  1430. },
  1431. _children: points,
  1432. // Need to provide some settings
  1433. _view: {
  1434. fill: true,
  1435. tension: 0, // no bezier curve for now
  1436. spanGaps: true
  1437. }
  1438. });
  1439. line.draw();
  1440. var expected = [{
  1441. name: 'save',
  1442. args: []
  1443. }, {
  1444. name: 'setLineCap',
  1445. args: ['butt']
  1446. }, {
  1447. name: 'setLineDash',
  1448. args: [
  1449. []
  1450. ]
  1451. }, {
  1452. name: 'setLineDashOffset',
  1453. args: [0]
  1454. }, {
  1455. name: 'setLineJoin',
  1456. args: ['miter']
  1457. }, {
  1458. name: 'setLineWidth',
  1459. args: [3]
  1460. }, {
  1461. name: 'setStrokeStyle',
  1462. args: ['rgba(0,0,0,0.1)']
  1463. }, {
  1464. name: 'beginPath',
  1465. args: []
  1466. }, {
  1467. name: 'moveTo',
  1468. args: [0, 10]
  1469. }, {
  1470. name: 'lineTo',
  1471. args: [5, 0]
  1472. }, {
  1473. name: 'lineTo',
  1474. args: [15, -10]
  1475. }, {
  1476. name: 'stroke',
  1477. args: []
  1478. }, {
  1479. name: 'restore',
  1480. args: []
  1481. }];
  1482. expect(mockContext.getCalls()).toEqual(expected);
  1483. });
  1484. });