plugin.title.tests.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. // Test the rectangle element
  2. describe('Title block tests', function() {
  3. it('Should have the correct default config', function() {
  4. expect(Chart.defaults.global.title).toEqual({
  5. display: false,
  6. position: 'top',
  7. fullWidth: true,
  8. weight: 2000,
  9. fontStyle: 'bold',
  10. lineHeight: 1.2,
  11. padding: 10,
  12. text: ''
  13. });
  14. });
  15. it('should update correctly', function() {
  16. var chart = {};
  17. var options = Chart.helpers.clone(Chart.defaults.global.title);
  18. options.text = 'My title';
  19. var title = new Chart.Title({
  20. chart: chart,
  21. options: options
  22. });
  23. var minSize = title.update(400, 200);
  24. expect(minSize).toEqual({
  25. width: 400,
  26. height: 0
  27. });
  28. // Now we have a height since we display
  29. title.options.display = true;
  30. minSize = title.update(400, 200);
  31. expect(minSize).toEqual({
  32. width: 400,
  33. height: 34.4
  34. });
  35. });
  36. it('should update correctly when vertical', function() {
  37. var chart = {};
  38. var options = Chart.helpers.clone(Chart.defaults.global.title);
  39. options.text = 'My title';
  40. options.position = 'left';
  41. var title = new Chart.Title({
  42. chart: chart,
  43. options: options
  44. });
  45. var minSize = title.update(200, 400);
  46. expect(minSize).toEqual({
  47. width: 0,
  48. height: 400
  49. });
  50. // Now we have a height since we display
  51. title.options.display = true;
  52. minSize = title.update(200, 400);
  53. expect(minSize).toEqual({
  54. width: 34.4,
  55. height: 400
  56. });
  57. });
  58. it('should have the correct size when there are multiple lines of text', function() {
  59. var chart = {};
  60. var options = Chart.helpers.clone(Chart.defaults.global.title);
  61. options.text = ['line1', 'line2'];
  62. options.position = 'left';
  63. options.display = true;
  64. options.lineHeight = 1.5;
  65. var title = new Chart.Title({
  66. chart: chart,
  67. options: options
  68. });
  69. var minSize = title.update(200, 400);
  70. expect(minSize).toEqual({
  71. width: 56,
  72. height: 400
  73. });
  74. });
  75. it('should draw correctly horizontally', function() {
  76. var chart = {};
  77. var context = window.createMockContext();
  78. var options = Chart.helpers.clone(Chart.defaults.global.title);
  79. options.text = 'My title';
  80. var title = new Chart.Title({
  81. chart: chart,
  82. options: options,
  83. ctx: context
  84. });
  85. title.update(400, 200);
  86. title.draw();
  87. expect(context.getCalls()).toEqual([]);
  88. // Now we have a height since we display
  89. title.options.display = true;
  90. var minSize = title.update(400, 200);
  91. title.top = 50;
  92. title.left = 100;
  93. title.bottom = title.top + minSize.height;
  94. title.right = title.left + minSize.width;
  95. title.draw();
  96. expect(context.getCalls()).toEqual([{
  97. name: 'setFillStyle',
  98. args: ['#666']
  99. }, {
  100. name: 'save',
  101. args: []
  102. }, {
  103. name: 'translate',
  104. args: [300, 67.2]
  105. }, {
  106. name: 'rotate',
  107. args: [0]
  108. }, {
  109. name: 'fillText',
  110. args: ['My title', 0, 0, 400]
  111. }, {
  112. name: 'restore',
  113. args: []
  114. }]);
  115. });
  116. it ('should draw correctly vertically', function() {
  117. var chart = {};
  118. var context = window.createMockContext();
  119. var options = Chart.helpers.clone(Chart.defaults.global.title);
  120. options.text = 'My title';
  121. options.position = 'left';
  122. var title = new Chart.Title({
  123. chart: chart,
  124. options: options,
  125. ctx: context
  126. });
  127. title.update(200, 400);
  128. title.draw();
  129. expect(context.getCalls()).toEqual([]);
  130. // Now we have a height since we display
  131. title.options.display = true;
  132. var minSize = title.update(200, 400);
  133. title.top = 50;
  134. title.left = 100;
  135. title.bottom = title.top + minSize.height;
  136. title.right = title.left + minSize.width;
  137. title.draw();
  138. expect(context.getCalls()).toEqual([{
  139. name: 'setFillStyle',
  140. args: ['#666']
  141. }, {
  142. name: 'save',
  143. args: []
  144. }, {
  145. name: 'translate',
  146. args: [117.2, 250]
  147. }, {
  148. name: 'rotate',
  149. args: [-0.5 * Math.PI]
  150. }, {
  151. name: 'fillText',
  152. args: ['My title', 0, 0, 400]
  153. }, {
  154. name: 'restore',
  155. args: []
  156. }]);
  157. // Rotation is other way on right side
  158. title.options.position = 'right';
  159. // Reset call tracker
  160. context.resetCalls();
  161. minSize = title.update(200, 400);
  162. title.top = 50;
  163. title.left = 100;
  164. title.bottom = title.top + minSize.height;
  165. title.right = title.left + minSize.width;
  166. title.draw();
  167. expect(context.getCalls()).toEqual([{
  168. name: 'setFillStyle',
  169. args: ['#666']
  170. }, {
  171. name: 'save',
  172. args: []
  173. }, {
  174. name: 'translate',
  175. args: [117.2, 250]
  176. }, {
  177. name: 'rotate',
  178. args: [0.5 * Math.PI]
  179. }, {
  180. name: 'fillText',
  181. args: ['My title', 0, 0, 400]
  182. }, {
  183. name: 'restore',
  184. args: []
  185. }]);
  186. });
  187. describe('config update', function() {
  188. it ('should update the options', function() {
  189. var chart = acquireChart({
  190. type: 'line',
  191. data: {
  192. labels: ['A', 'B', 'C', 'D'],
  193. datasets: [{
  194. data: [10, 20, 30, 100]
  195. }]
  196. },
  197. options: {
  198. title: {
  199. display: true
  200. }
  201. }
  202. });
  203. expect(chart.titleBlock.options.display).toBe(true);
  204. chart.options.title.display = false;
  205. chart.update();
  206. expect(chart.titleBlock.options.display).toBe(false);
  207. });
  208. it ('should update the associated layout item', function() {
  209. var chart = acquireChart({
  210. type: 'line',
  211. data: {},
  212. options: {
  213. title: {
  214. fullWidth: true,
  215. position: 'top',
  216. weight: 150
  217. }
  218. }
  219. });
  220. expect(chart.titleBlock.fullWidth).toBe(true);
  221. expect(chart.titleBlock.position).toBe('top');
  222. expect(chart.titleBlock.weight).toBe(150);
  223. chart.options.title.fullWidth = false;
  224. chart.options.title.position = 'left';
  225. chart.options.title.weight = 42;
  226. chart.update();
  227. expect(chart.titleBlock.fullWidth).toBe(false);
  228. expect(chart.titleBlock.position).toBe('left');
  229. expect(chart.titleBlock.weight).toBe(42);
  230. });
  231. it ('should remove the title if the new options are false', function() {
  232. var chart = acquireChart({
  233. type: 'line',
  234. data: {
  235. labels: ['A', 'B', 'C', 'D'],
  236. datasets: [{
  237. data: [10, 20, 30, 100]
  238. }]
  239. }
  240. });
  241. expect(chart.titleBlock).not.toBe(undefined);
  242. chart.options.title = false;
  243. chart.update();
  244. expect(chart.titleBlock).toBe(undefined);
  245. });
  246. it ('should create the title if the title options are changed to exist', function() {
  247. var chart = acquireChart({
  248. type: 'line',
  249. data: {
  250. labels: ['A', 'B', 'C', 'D'],
  251. datasets: [{
  252. data: [10, 20, 30, 100]
  253. }]
  254. },
  255. options: {
  256. title: false
  257. }
  258. });
  259. expect(chart.titleBlock).toBe(undefined);
  260. chart.options.title = {};
  261. chart.update();
  262. expect(chart.titleBlock).not.toBe(undefined);
  263. expect(chart.titleBlock.options).toEqual(jasmine.objectContaining(Chart.defaults.global.title));
  264. });
  265. });
  266. });