plugin.title.tests.js 6.6 KB

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