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.

1049 line
19KB

  1. // Tests for the line element
  2. describe('Line element tests', 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.0, // no bezier curve for now
  72. scaleZero: 0
  73. }
  74. });
  75. line.draw();
  76. expect(mockContext.getCalls()).toEqual([{
  77. name: 'save',
  78. args: [],
  79. }, {
  80. name: 'setLineCap',
  81. args: ['butt']
  82. }, {
  83. name: 'setLineDash',
  84. args: [
  85. []
  86. ]
  87. }, {
  88. name: 'setLineDashOffset',
  89. args: [0.0]
  90. }, {
  91. name: 'setLineJoin',
  92. args: ['miter']
  93. }, {
  94. name: 'setLineWidth',
  95. args: [3]
  96. }, {
  97. name: 'setStrokeStyle',
  98. args: ['rgba(0,0,0,0.1)']
  99. }, {
  100. name: 'beginPath',
  101. args: []
  102. }, {
  103. name: 'moveTo',
  104. args: [0, 10]
  105. }, {
  106. name: 'bezierCurveTo',
  107. args: [0, 10, 5, 0, 5, 0]
  108. }, {
  109. name: 'bezierCurveTo',
  110. args: [5, 0, 15, -10, 15, -10]
  111. }, {
  112. name: 'bezierCurveTo',
  113. args: [15, -10, 19, -5, 19, -5]
  114. }, {
  115. name: 'stroke',
  116. args: [],
  117. }, {
  118. name: 'restore',
  119. args: []
  120. }]);
  121. });
  122. it('should draw with custom settings', function() {
  123. var mockContext = window.createMockContext();
  124. // Create our points
  125. var points = [];
  126. points.push(new Chart.elements.Point({
  127. _datasetindex: 2,
  128. _index: 0,
  129. _view: {
  130. x: 0,
  131. y: 10,
  132. controlPointNextX: 0,
  133. controlPointNextY: 10
  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. }
  147. }));
  148. points.push(new Chart.elements.Point({
  149. _datasetindex: 2,
  150. _index: 2,
  151. _view: {
  152. x: 15,
  153. y: -10,
  154. controlPointPreviousX: 15,
  155. controlPointPreviousY: -10,
  156. controlPointNextX: 15,
  157. controlPointNextY: -10
  158. }
  159. }));
  160. points.push(new Chart.elements.Point({
  161. _datasetindex: 2,
  162. _index: 3,
  163. _view: {
  164. x: 19,
  165. y: -5,
  166. controlPointPreviousX: 19,
  167. controlPointPreviousY: -5,
  168. controlPointNextX: 19,
  169. controlPointNextY: -5
  170. }
  171. }));
  172. var line = new Chart.elements.Line({
  173. _datasetindex: 2,
  174. _chart: {
  175. ctx: mockContext,
  176. },
  177. _children: points,
  178. // Need to provide some settings
  179. _view: {
  180. fill: true,
  181. scaleZero: 2, // for filling lines
  182. tension: 0.0, // no bezier curve for now
  183. borderCapStyle: 'round',
  184. borderColor: 'rgb(255, 255, 0)',
  185. borderDash: [2, 2],
  186. borderDashOffset: 1.5,
  187. borderJoinStyle: 'bevel',
  188. borderWidth: 4,
  189. backgroundColor: 'rgb(0, 0, 0)'
  190. }
  191. });
  192. line.draw();
  193. var expected = [{
  194. name: 'save',
  195. args: [],
  196. }, {
  197. name: 'beginPath',
  198. args: []
  199. }, {
  200. name: 'moveTo',
  201. args: [0, 2]
  202. }, {
  203. name: 'lineTo',
  204. args: [0, 10]
  205. }, {
  206. name: 'bezierCurveTo',
  207. args: [0, 10, 5, 0, 5, 0]
  208. }, {
  209. name: 'bezierCurveTo',
  210. args: [5, 0, 15, -10, 15, -10]
  211. }, {
  212. name: 'bezierCurveTo',
  213. args: [15, -10, 19, -5, 19, -5]
  214. }, {
  215. name: 'lineTo',
  216. args: [19, 2]
  217. }, {
  218. name: 'lineTo',
  219. args: [0, 2]
  220. }, {
  221. name: 'setFillStyle',
  222. args: ['rgb(0, 0, 0)']
  223. }, {
  224. name: 'closePath',
  225. args: []
  226. }, {
  227. name: 'fill',
  228. args: []
  229. }, {
  230. name: 'setLineCap',
  231. args: ['round']
  232. }, {
  233. name: 'setLineDash',
  234. args: [
  235. [2, 2]
  236. ]
  237. }, {
  238. name: 'setLineDashOffset',
  239. args: [1.5]
  240. }, {
  241. name: 'setLineJoin',
  242. args: ['bevel']
  243. }, {
  244. name: 'setLineWidth',
  245. args: [4]
  246. }, {
  247. name: 'setStrokeStyle',
  248. args: ['rgb(255, 255, 0)']
  249. }, {
  250. name: 'beginPath',
  251. args: []
  252. }, {
  253. name: 'moveTo',
  254. args: [0, 10]
  255. }, {
  256. name: 'bezierCurveTo',
  257. args: [0, 10, 5, 0, 5, 0]
  258. }, {
  259. name: 'bezierCurveTo',
  260. args: [5, 0, 15, -10, 15, -10]
  261. }, {
  262. name: 'bezierCurveTo',
  263. args: [15, -10, 19, -5, 19, -5]
  264. }, {
  265. name: 'stroke',
  266. args: [],
  267. }, {
  268. name: 'restore',
  269. args: []
  270. }];
  271. expect(mockContext.getCalls()).toEqual(expected);
  272. });
  273. it ('should skip points correctly', function() {
  274. var mockContext = window.createMockContext();
  275. // Create our points
  276. var points = [];
  277. points.push(new Chart.elements.Point({
  278. _datasetindex: 2,
  279. _index: 0,
  280. _view: {
  281. x: 0,
  282. y: 10,
  283. controlPointNextX: 0,
  284. controlPointNextY: 10
  285. }
  286. }));
  287. points.push(new Chart.elements.Point({
  288. _datasetindex: 2,
  289. _index: 1,
  290. _view: {
  291. x: 5,
  292. y: 0,
  293. controlPointPreviousX: 5,
  294. controlPointPreviousY: 0,
  295. controlPointNextX: 5,
  296. controlPointNextY: 0
  297. }
  298. }));
  299. points.push(new Chart.elements.Point({
  300. _datasetindex: 2,
  301. _index: 2,
  302. _view: {
  303. x: 15,
  304. y: -10,
  305. controlPointPreviousX: 15,
  306. controlPointPreviousY: -10,
  307. controlPointNextX: 15,
  308. controlPointNextY: -10,
  309. skip: true
  310. }
  311. }));
  312. points.push(new Chart.elements.Point({
  313. _datasetindex: 2,
  314. _index: 3,
  315. _view: {
  316. x: 19,
  317. y: -5,
  318. controlPointPreviousX: 19,
  319. controlPointPreviousY: -5,
  320. controlPointNextX: 19,
  321. controlPointNextY: -5
  322. }
  323. }));
  324. var line = new Chart.elements.Line({
  325. _datasetindex: 2,
  326. _chart: {
  327. ctx: mockContext,
  328. },
  329. _children: points,
  330. // Need to provide some settings
  331. _view: {
  332. fill: true,
  333. scaleZero: 2, // for filling lines
  334. tension: 0.0, // no bezier curve for now
  335. }
  336. });
  337. line.draw();
  338. var expected = [{
  339. name: 'save',
  340. args: []
  341. }, {
  342. name: 'beginPath',
  343. args: []
  344. }, {
  345. name: 'moveTo',
  346. args: [0, 2]
  347. }, {
  348. name: 'lineTo',
  349. args: [0, 10]
  350. }, {
  351. name: 'bezierCurveTo',
  352. args: [0, 10, 5, 0, 5, 0]
  353. }, {
  354. name: 'lineTo',
  355. args: [5, 2]
  356. }, {
  357. name: 'moveTo',
  358. args: [19, 2]
  359. }, {
  360. name: 'lineTo',
  361. args: [19, -5]
  362. }, {
  363. name: 'lineTo',
  364. args: [19, 2]
  365. }, {
  366. name: 'lineTo',
  367. args: [0, 2]
  368. }, {
  369. name: 'setFillStyle',
  370. args: ['rgba(0,0,0,0.1)']
  371. }, {
  372. name: 'closePath',
  373. args: []
  374. }, {
  375. name: 'fill',
  376. args: []
  377. }, {
  378. name: 'setLineCap',
  379. args: ['butt']
  380. }, {
  381. name: 'setLineDash',
  382. args: [
  383. []
  384. ]
  385. }, {
  386. name: 'setLineDashOffset',
  387. args: [0.0]
  388. }, {
  389. name: 'setLineJoin',
  390. args: ['miter']
  391. }, {
  392. name: 'setLineWidth',
  393. args: [3]
  394. }, {
  395. name: 'setStrokeStyle',
  396. args: ['rgba(0,0,0,0.1)']
  397. }, {
  398. name: 'beginPath',
  399. args: []
  400. }, {
  401. name: 'moveTo',
  402. args: [0, 10]
  403. }, {
  404. name: 'bezierCurveTo',
  405. args: [0, 10, 5, 0, 5, 0]
  406. }, {
  407. name: 'moveTo',
  408. args: [19, -5]
  409. }, {
  410. name: 'moveTo',
  411. args: [19, -5]
  412. }, {
  413. name: 'stroke',
  414. args: [],
  415. }, {
  416. name: 'restore',
  417. args: []
  418. }];
  419. expect(mockContext.getCalls()).toEqual(expected);
  420. });
  421. it('should be able to draw with a loop back to the beginning point', function() {
  422. var mockContext = window.createMockContext();
  423. // Create our points
  424. var points = [];
  425. points.push(new Chart.elements.Point({
  426. _datasetindex: 2,
  427. _index: 0,
  428. _view: {
  429. x: 0,
  430. y: 10,
  431. controlPointPreviousX: 0,
  432. controlPointPreviousY: 10,
  433. controlPointNextX: 0,
  434. controlPointNextY: 10
  435. }
  436. }));
  437. points.push(new Chart.elements.Point({
  438. _datasetindex: 2,
  439. _index: 1,
  440. _view: {
  441. x: 5,
  442. y: 0,
  443. controlPointPreviousX: 5,
  444. controlPointPreviousY: 0,
  445. controlPointNextX: 5,
  446. controlPointNextY: 0
  447. }
  448. }));
  449. points.push(new Chart.elements.Point({
  450. _datasetindex: 2,
  451. _index: 2,
  452. _view: {
  453. x: 15,
  454. y: -10,
  455. controlPointPreviousX: 15,
  456. controlPointPreviousY: -10,
  457. controlPointNextX: 15,
  458. controlPointNextY: -10
  459. }
  460. }));
  461. points.push(new Chart.elements.Point({
  462. _datasetindex: 2,
  463. _index: 3,
  464. _view: {
  465. x: 19,
  466. y: -5,
  467. controlPointPreviousX: 19,
  468. controlPointPreviousY: -5,
  469. controlPointNextX: 19,
  470. controlPointNextY: -5
  471. }
  472. }));
  473. var line = new Chart.elements.Line({
  474. _datasetindex: 2,
  475. _chart: {
  476. ctx: mockContext,
  477. },
  478. _children: points,
  479. _loop: true, // want the line to loop back to the first point
  480. // Need to provide some settings
  481. _view: {
  482. fill: true, // don't want to fill
  483. tension: 0.0, // no bezier curve for now
  484. scaleZero: {
  485. x: 3,
  486. y: 2
  487. },
  488. }
  489. });
  490. line.draw();
  491. expect(mockContext.getCalls()).toEqual([{
  492. name: 'save',
  493. args: [],
  494. }, {
  495. name: 'beginPath',
  496. args: []
  497. }, {
  498. name: 'moveTo',
  499. args: [3, 2]
  500. }, {
  501. name: 'lineTo',
  502. args: [0, 10]
  503. }, {
  504. name: 'bezierCurveTo',
  505. args: [0, 10, 5, 0, 5, 0]
  506. }, {
  507. name: 'bezierCurveTo',
  508. args: [5, 0, 15, -10, 15, -10]
  509. }, {
  510. name: 'bezierCurveTo',
  511. args: [15, -10, 19, -5, 19, -5]
  512. }, {
  513. name: 'bezierCurveTo',
  514. args: [19, -5, 0, 10, 0, 10]
  515. }, {
  516. name: 'setFillStyle',
  517. args: ['rgba(0,0,0,0.1)']
  518. }, {
  519. name: 'closePath',
  520. args: []
  521. }, {
  522. name: 'fill',
  523. args: []
  524. }, {
  525. name: 'setLineCap',
  526. args: ['butt']
  527. }, {
  528. name: 'setLineDash',
  529. args: [
  530. []
  531. ]
  532. }, {
  533. name: 'setLineDashOffset',
  534. args: [0.0]
  535. }, {
  536. name: 'setLineJoin',
  537. args: ['miter']
  538. }, {
  539. name: 'setLineWidth',
  540. args: [3]
  541. }, {
  542. name: 'setStrokeStyle',
  543. args: ['rgba(0,0,0,0.1)']
  544. }, {
  545. name: 'beginPath',
  546. args: []
  547. }, {
  548. name: 'moveTo',
  549. args: [0, 10]
  550. }, {
  551. name: 'bezierCurveTo',
  552. args: [0, 10, 5, 0, 5, 0]
  553. }, {
  554. name: 'bezierCurveTo',
  555. args: [5, 0, 15, -10, 15, -10]
  556. }, {
  557. name: 'bezierCurveTo',
  558. args: [15, -10, 19, -5, 19, -5]
  559. }, {
  560. name: 'bezierCurveTo',
  561. args: [19, -5, 0, 10, 0, 10]
  562. }, {
  563. name: 'stroke',
  564. args: [],
  565. }, {
  566. name: 'restore',
  567. args: []
  568. }]);
  569. });
  570. it('should be able to draw with a loop back to the beginning point when there is a skip in the middle of the dataset', function() {
  571. var mockContext = window.createMockContext();
  572. // Create our points
  573. var points = [];
  574. points.push(new Chart.elements.Point({
  575. _datasetindex: 2,
  576. _index: 0,
  577. _view: {
  578. x: 0,
  579. y: 10,
  580. controlPointPreviousX: 0,
  581. controlPointPreviousY: 10,
  582. controlPointNextX: 0,
  583. controlPointNextY: 10
  584. }
  585. }));
  586. points.push(new Chart.elements.Point({
  587. _datasetindex: 2,
  588. _index: 1,
  589. _view: {
  590. x: 5,
  591. y: 0,
  592. controlPointPreviousX: 5,
  593. controlPointPreviousY: 0,
  594. controlPointNextX: 5,
  595. controlPointNextY: 0,
  596. skip: true
  597. }
  598. }));
  599. points.push(new Chart.elements.Point({
  600. _datasetindex: 2,
  601. _index: 2,
  602. _view: {
  603. x: 15,
  604. y: -10,
  605. controlPointPreviousX: 15,
  606. controlPointPreviousY: -10,
  607. controlPointNextX: 15,
  608. controlPointNextY: -10
  609. }
  610. }));
  611. points.push(new Chart.elements.Point({
  612. _datasetindex: 2,
  613. _index: 3,
  614. _view: {
  615. x: 19,
  616. y: -5,
  617. controlPointPreviousX: 19,
  618. controlPointPreviousY: -5,
  619. controlPointNextX: 19,
  620. controlPointNextY: -5
  621. }
  622. }));
  623. var line = new Chart.elements.Line({
  624. _datasetindex: 2,
  625. _chart: {
  626. ctx: mockContext,
  627. },
  628. _children: points,
  629. _loop: true, // want the line to loop back to the first point
  630. // Need to provide some settings
  631. _view: {
  632. fill: true, // don't want to fill
  633. tension: 0.0, // no bezier curve for now
  634. scaleZero: {
  635. x: 3,
  636. y: 2
  637. },
  638. }
  639. });
  640. line.draw();
  641. expect(mockContext.getCalls()).toEqual([{
  642. name: 'save',
  643. args: [],
  644. }, {
  645. name: 'beginPath',
  646. args: []
  647. }, {
  648. name: 'moveTo',
  649. args: [3, 2]
  650. }, {
  651. name: 'lineTo',
  652. args: [0, 10]
  653. }, {
  654. name: 'lineTo',
  655. args: [3, 2]
  656. }, {
  657. name: 'lineTo',
  658. args: [15, -10]
  659. }, {
  660. name: 'bezierCurveTo',
  661. args: [15, -10, 19, -5, 19, -5]
  662. }, {
  663. name: 'bezierCurveTo',
  664. args: [19, -5, 0, 10, 0, 10]
  665. }, {
  666. name: 'setFillStyle',
  667. args: ['rgba(0,0,0,0.1)']
  668. }, {
  669. name: 'closePath',
  670. args: []
  671. }, {
  672. name: 'fill',
  673. args: []
  674. }, {
  675. name: 'setLineCap',
  676. args: ['butt']
  677. }, {
  678. name: 'setLineDash',
  679. args: [
  680. []
  681. ]
  682. }, {
  683. name: 'setLineDashOffset',
  684. args: [0.0]
  685. }, {
  686. name: 'setLineJoin',
  687. args: ['miter']
  688. }, {
  689. name: 'setLineWidth',
  690. args: [3]
  691. }, {
  692. name: 'setStrokeStyle',
  693. args: ['rgba(0,0,0,0.1)']
  694. }, {
  695. name: 'beginPath',
  696. args: []
  697. }, {
  698. name: 'moveTo',
  699. args: [0, 10]
  700. }, {
  701. name: 'moveTo',
  702. args: [15, -10]
  703. }, {
  704. name: 'moveTo',
  705. args: [15, -10]
  706. }, {
  707. name: 'bezierCurveTo',
  708. args: [15, -10, 19, -5, 19, -5]
  709. }, {
  710. name: 'bezierCurveTo',
  711. args: [19, -5, 0, 10, 0, 10]
  712. }, {
  713. name: 'stroke',
  714. args: [],
  715. }, {
  716. name: 'restore',
  717. args: []
  718. }]);
  719. });
  720. it('should be able to draw with a loop back to the beginning point when the first point is skipped', function() {
  721. var mockContext = window.createMockContext();
  722. // Create our points
  723. var points = [];
  724. points.push(new Chart.elements.Point({
  725. _datasetindex: 2,
  726. _index: 0,
  727. _view: {
  728. x: 0,
  729. y: 10,
  730. controlPointPreviousX: 0,
  731. controlPointPreviousY: 10,
  732. controlPointNextX: 0,
  733. controlPointNextY: 10,
  734. skip: true
  735. }
  736. }));
  737. points.push(new Chart.elements.Point({
  738. _datasetindex: 2,
  739. _index: 1,
  740. _view: {
  741. x: 5,
  742. y: 0,
  743. controlPointPreviousX: 5,
  744. controlPointPreviousY: 0,
  745. controlPointNextX: 5,
  746. controlPointNextY: 0,
  747. }
  748. }));
  749. points.push(new Chart.elements.Point({
  750. _datasetindex: 2,
  751. _index: 2,
  752. _view: {
  753. x: 15,
  754. y: -10,
  755. controlPointPreviousX: 15,
  756. controlPointPreviousY: -10,
  757. controlPointNextX: 15,
  758. controlPointNextY: -10
  759. }
  760. }));
  761. points.push(new Chart.elements.Point({
  762. _datasetindex: 2,
  763. _index: 3,
  764. _view: {
  765. x: 19,
  766. y: -5,
  767. controlPointPreviousX: 19,
  768. controlPointPreviousY: -5,
  769. controlPointNextX: 19,
  770. controlPointNextY: -5
  771. }
  772. }));
  773. var line = new Chart.elements.Line({
  774. _datasetindex: 2,
  775. _chart: {
  776. ctx: mockContext,
  777. },
  778. _children: points,
  779. _loop: true, // want the line to loop back to the first point
  780. // Need to provide some settings
  781. _view: {
  782. fill: true, // don't want to fill
  783. tension: 0.0, // no bezier curve for now
  784. scaleZero: {
  785. x: 3,
  786. y: 2
  787. },
  788. }
  789. });
  790. line.draw();
  791. expect(mockContext.getCalls()).toEqual([{
  792. name: 'save',
  793. args: [],
  794. }, {
  795. name: 'beginPath',
  796. args: []
  797. }, {
  798. name: 'moveTo',
  799. args: [3, 2]
  800. }, {
  801. name: 'lineTo',
  802. args: [5, 0]
  803. }, {
  804. name: 'bezierCurveTo',
  805. args: [5, 0, 15, -10, 15, -10]
  806. }, {
  807. name: 'bezierCurveTo',
  808. args: [15, -10, 19, -5, 19, -5]
  809. }, {
  810. name: 'lineTo',
  811. args: [3, 2]
  812. }, {
  813. name: 'setFillStyle',
  814. args: ['rgba(0,0,0,0.1)']
  815. }, {
  816. name: 'closePath',
  817. args: []
  818. }, {
  819. name: 'fill',
  820. args: []
  821. }, {
  822. name: 'setLineCap',
  823. args: ['butt']
  824. }, {
  825. name: 'setLineDash',
  826. args: [
  827. []
  828. ]
  829. }, {
  830. name: 'setLineDashOffset',
  831. args: [0.0]
  832. }, {
  833. name: 'setLineJoin',
  834. args: ['miter']
  835. }, {
  836. name: 'setLineWidth',
  837. args: [3]
  838. }, {
  839. name: 'setStrokeStyle',
  840. args: ['rgba(0,0,0,0.1)']
  841. }, {
  842. name: 'beginPath',
  843. args: []
  844. }, {
  845. name: 'moveTo',
  846. args: [0, 10]
  847. }, {
  848. name: 'moveTo',
  849. args: [5, 0]
  850. }, {
  851. name: 'bezierCurveTo',
  852. args: [5, 0, 15, -10, 15, -10]
  853. }, {
  854. name: 'bezierCurveTo',
  855. args: [15, -10, 19, -5, 19, -5]
  856. }, {
  857. name: 'stroke',
  858. args: [],
  859. }, {
  860. name: 'restore',
  861. args: []
  862. }]);
  863. });
  864. it('should be able to draw with a loop back to the beginning point when the last point is skipped', function() {
  865. var mockContext = window.createMockContext();
  866. // Create our points
  867. var points = [];
  868. points.push(new Chart.elements.Point({
  869. _datasetindex: 2,
  870. _index: 0,
  871. _view: {
  872. x: 0,
  873. y: 10,
  874. controlPointPreviousX: 0,
  875. controlPointPreviousY: 10,
  876. controlPointNextX: 0,
  877. controlPointNextY: 10
  878. }
  879. }));
  880. points.push(new Chart.elements.Point({
  881. _datasetindex: 2,
  882. _index: 1,
  883. _view: {
  884. x: 5,
  885. y: 0,
  886. controlPointPreviousX: 5,
  887. controlPointPreviousY: 0,
  888. controlPointNextX: 5,
  889. controlPointNextY: 0,
  890. }
  891. }));
  892. points.push(new Chart.elements.Point({
  893. _datasetindex: 2,
  894. _index: 2,
  895. _view: {
  896. x: 15,
  897. y: -10,
  898. controlPointPreviousX: 15,
  899. controlPointPreviousY: -10,
  900. controlPointNextX: 15,
  901. controlPointNextY: -10
  902. }
  903. }));
  904. points.push(new Chart.elements.Point({
  905. _datasetindex: 2,
  906. _index: 3,
  907. _view: {
  908. x: 19,
  909. y: -5,
  910. controlPointPreviousX: 19,
  911. controlPointPreviousY: -5,
  912. controlPointNextX: 19,
  913. controlPointNextY: -5,
  914. skip: true
  915. }
  916. }));
  917. var line = new Chart.elements.Line({
  918. _datasetindex: 2,
  919. _chart: {
  920. ctx: mockContext,
  921. },
  922. _children: points,
  923. _loop: true, // want the line to loop back to the first point
  924. // Need to provide some settings
  925. _view: {
  926. fill: true, // don't want to fill
  927. tension: 0.0, // no bezier curve for now
  928. scaleZero: {
  929. x: 3,
  930. y: 2
  931. },
  932. }
  933. });
  934. line.draw();
  935. expect(mockContext.getCalls()).toEqual([{
  936. name: 'save',
  937. args: [],
  938. }, {
  939. name: 'beginPath',
  940. args: []
  941. }, {
  942. name: 'moveTo',
  943. args: [3, 2]
  944. }, {
  945. name: 'lineTo',
  946. args: [0, 10]
  947. }, {
  948. name: 'bezierCurveTo',
  949. args: [0, 10, 5, 0, 5, 0]
  950. }, {
  951. name: 'bezierCurveTo',
  952. args: [5, 0, 15, -10, 15, -10]
  953. }, {
  954. name: 'lineTo',
  955. args: [3, 2]
  956. }, {
  957. name: 'lineTo',
  958. args: [3, 2]
  959. }, {
  960. name: 'setFillStyle',
  961. args: ['rgba(0,0,0,0.1)']
  962. }, {
  963. name: 'closePath',
  964. args: []
  965. }, {
  966. name: 'fill',
  967. args: []
  968. }, {
  969. name: 'setLineCap',
  970. args: ['butt']
  971. }, {
  972. name: 'setLineDash',
  973. args: [
  974. []
  975. ]
  976. }, {
  977. name: 'setLineDashOffset',
  978. args: [0.0]
  979. }, {
  980. name: 'setLineJoin',
  981. args: ['miter']
  982. }, {
  983. name: 'setLineWidth',
  984. args: [3]
  985. }, {
  986. name: 'setStrokeStyle',
  987. args: ['rgba(0,0,0,0.1)']
  988. }, {
  989. name: 'beginPath',
  990. args: []
  991. }, {
  992. name: 'moveTo',
  993. args: [0, 10]
  994. }, {
  995. name: 'bezierCurveTo',
  996. args: [0, 10, 5, 0, 5, 0]
  997. }, {
  998. name: 'bezierCurveTo',
  999. args: [5, 0, 15, -10, 15, -10]
  1000. }, {
  1001. name: 'moveTo',
  1002. args: [19, -5]
  1003. }, {
  1004. name: 'stroke',
  1005. args: [],
  1006. }, {
  1007. name: 'restore',
  1008. args: []
  1009. }]);
  1010. });
  1011. });