c873d69fa30d7ef48657c20be2efb20673919aa0bd9bd27dc97b71fa1385258d1e7fcf3c6c0598e2c6f35fa7959a99f44f1545ad939cfcb781c3e6a0849d0f 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. describe('CustomBorders', () => {
  2. var id = 'testContainer';
  3. beforeEach(function() {
  4. this.$container = $(`<div id="${id}"></div>`).appendTo('body');
  5. var wrapper = $('<div></div>').css({
  6. width: 400,
  7. height: 200,
  8. overflow: 'scroll'
  9. });
  10. this.$wrapper = this.$container.wrap(wrapper).parent();
  11. });
  12. afterEach(function() {
  13. if (this.$container) {
  14. destroy();
  15. this.$container.remove();
  16. }
  17. this.$wrapper.remove();
  18. });
  19. it('should draw custom borders for single td', () => {
  20. handsontable({
  21. data: Handsontable.helper.createSpreadsheetData(7, 7),
  22. colHeaders: true,
  23. rowHeaders: true,
  24. customBorders: [
  25. {
  26. row: 2,
  27. col: 2,
  28. left: {
  29. width: 2,
  30. color: 'red'
  31. },
  32. right: {
  33. width: 1,
  34. color: 'green'
  35. }
  36. }]
  37. });
  38. // [top,left, bottom, right]
  39. var borders = $('.wtBorder.border_row2col2');
  40. expect(borders.length).toEqual(20); // 4 times 5 elements (top,right, bottom, left, corner)
  41. expect(borders[0].className).toContain('hidden'); // hidden top
  42. expect(borders[1].style.backgroundColor).toEqual('red'); // left red
  43. expect(borders[1].style.width).toEqual('2px'); // left 2px width
  44. expect(borders[2].className).toContain('hidden'); // hidden bottom
  45. expect(borders[3].style.backgroundColor).toEqual('green'); // green right
  46. expect(borders[3].style.width).toEqual('1px'); // right 1px width
  47. });
  48. it('should draw custom borders for range', () => {
  49. handsontable({
  50. data: Handsontable.helper.createSpreadsheetData(7, 7),
  51. colHeaders: true,
  52. rowHeaders: true,
  53. customBorders: [
  54. {
  55. range: {
  56. from: {
  57. row: 1,
  58. col: 1
  59. },
  60. to: {
  61. row: 3,
  62. col: 4
  63. }
  64. },
  65. top: {
  66. width: 2,
  67. color: 'black'
  68. },
  69. left: {
  70. width: 2,
  71. color: 'red'
  72. },
  73. bottom: {
  74. width: 2,
  75. color: 'red'
  76. },
  77. right: {
  78. width: 3,
  79. color: 'black'
  80. }
  81. }]
  82. });
  83. for (var row = 1; row <= 3; row++) {
  84. for (var column = 1; column <= 4; column++) {
  85. if (row == 1) {
  86. var topRow = $(`.wtBorder.border_row${row}col${column}`);
  87. expect(topRow.length).toEqual(20); // borders for all tables (main and hiders)
  88. expect(topRow[0].style.backgroundColor).toEqual('black');
  89. expect(topRow[0].style.height).toEqual('2px');
  90. }
  91. if (column == 1) {
  92. var leftColumn = $(`.wtBorder.border_row${row}col${column}`);
  93. expect(leftColumn.length).toEqual(20); // borders for all tables (main and hiders)
  94. expect(leftColumn[1].style.backgroundColor).toEqual('red');
  95. expect(leftColumn[1].style.width).toEqual('2px');
  96. }
  97. if (row == 3) {
  98. var bottomRow = $(`.wtBorder.border_row${row}col${column}`);
  99. expect(bottomRow.length).toEqual(20); // borders for all tables (main and hiders)
  100. expect(bottomRow[2].style.backgroundColor).toEqual('red');
  101. expect(bottomRow[2].style.height).toEqual('2px');
  102. }
  103. if (column == 4) {
  104. var rightColumn = $(`.wtBorder.border_row${row}col${column}`);
  105. expect(rightColumn.length).toEqual(20); // borders for all tables (main and hiders)
  106. expect(rightColumn[3].style.backgroundColor).toEqual('black');
  107. expect(rightColumn[3].style.width).toEqual('3px');
  108. }
  109. }
  110. }
  111. });
  112. it('should draw top border from context menu options', (done) => {
  113. var hot = handsontable({
  114. data: Handsontable.helper.createSpreadsheetData(4, 4),
  115. contextMenu: true,
  116. customBorders: true
  117. });
  118. var defaultBorder = {
  119. color: '#000',
  120. width: 1
  121. },
  122. empty = {
  123. hide: true
  124. };
  125. contextMenu();
  126. var item = $('.htContextMenu .ht_master .htCore').find('tbody td').not('.htSeparator').eq(10);
  127. item.simulate('mouseover');
  128. setTimeout(() => {
  129. var contextSubMenu = $(`.htContextMenuSub_${item.text()}`);
  130. var button = contextSubMenu.find('.ht_master .htCore tbody td').not('.htSeparator').eq(0);
  131. button.simulate('mousedown');
  132. // expect(getCellMeta(0,0).borders.hasOwnProperty('top')).toBe(true);
  133. expect(getCellMeta(0, 0).borders.top).toEqual(defaultBorder);
  134. expect(getCellMeta(0, 0).borders.left).toEqual(empty);
  135. expect(getCellMeta(0, 0).borders.bottom).toEqual(empty);
  136. expect(getCellMeta(0, 0).borders.right).toEqual(empty);
  137. done();
  138. }, 350);
  139. });
  140. it('should draw left border from context menu options', (done) => {
  141. var hot = handsontable({
  142. data: Handsontable.helper.createSpreadsheetData(4, 4),
  143. contextMenu: true,
  144. customBorders: true
  145. });
  146. var defaultBorder = {
  147. color: '#000',
  148. width: 1
  149. },
  150. empty = {
  151. hide: true
  152. };
  153. contextMenu();
  154. var item = $('.htContextMenu .ht_master .htCore').find('tbody td').not('.htSeparator').eq(10);
  155. item.simulate('mouseover');
  156. setTimeout(() => {
  157. var contextSubMenu = $(`.htContextMenuSub_${item.text()}`);
  158. var button = contextSubMenu.find('.ht_master .htCore tbody td').not('.htSeparator').eq(3);
  159. button.simulate('mousedown');
  160. /* eslint-disable no-prototype-builtins */
  161. expect(getCellMeta(0, 0).borders.hasOwnProperty('left')).toBe(true);
  162. expect(getCellMeta(0, 0).borders.top).toEqual(empty);
  163. expect(getCellMeta(0, 0).borders.left).toEqual(defaultBorder);
  164. expect(getCellMeta(0, 0).borders.bottom).toEqual(empty);
  165. expect(getCellMeta(0, 0).borders.right).toEqual(empty);
  166. done();
  167. }, 350);
  168. });
  169. it('should draw right border from context menu options', (done) => {
  170. var hot = handsontable({
  171. data: Handsontable.helper.createSpreadsheetData(4, 4),
  172. contextMenu: true,
  173. customBorders: true
  174. });
  175. var defaultBorder = {
  176. color: '#000',
  177. width: 1
  178. },
  179. empty = {
  180. hide: true
  181. };
  182. contextMenu();
  183. var item = $('.htContextMenu .ht_master .htCore').find('tbody td').not('.htSeparator').eq(10);
  184. item.simulate('mouseover');
  185. setTimeout(() => {
  186. var contextSubMenu = $(`.htContextMenuSub_${item.text()}`);
  187. var button = contextSubMenu.find('.ht_master .htCore tbody td').not('.htSeparator').eq(1);
  188. button.simulate('mousedown');
  189. /* eslint-disable no-prototype-builtins */
  190. expect(getCellMeta(0, 0).borders.hasOwnProperty('right')).toBe(true);
  191. expect(getCellMeta(0, 0).borders.top).toEqual(empty);
  192. expect(getCellMeta(0, 0).borders.left).toEqual(empty);
  193. expect(getCellMeta(0, 0).borders.bottom).toEqual(empty);
  194. expect(getCellMeta(0, 0).borders.right).toEqual(defaultBorder);
  195. done();
  196. }, 350);
  197. });
  198. it('should draw bottom border from context menu options', (done) => {
  199. var hot = handsontable({
  200. data: Handsontable.helper.createSpreadsheetData(4, 4),
  201. contextMenu: true,
  202. customBorders: true
  203. });
  204. var defaultBorder = {
  205. color: '#000',
  206. width: 1
  207. },
  208. empty = {
  209. hide: true
  210. };
  211. contextMenu();
  212. var item = $('.htContextMenu .ht_master .htCore').find('tbody td').not('.htSeparator').eq(10);
  213. item.simulate('mouseover');
  214. setTimeout(() => {
  215. var contextSubMenu = $(`.htContextMenuSub_${item.text()}`);
  216. var button = contextSubMenu.find('.ht_master .htCore tbody td').not('.htSeparator').eq(2);
  217. button.simulate('mousedown');
  218. /* eslint-disable no-prototype-builtins */
  219. expect(getCellMeta(0, 0).borders.hasOwnProperty('right')).toBe(true);
  220. expect(getCellMeta(0, 0).borders.top).toEqual(empty);
  221. expect(getCellMeta(0, 0).borders.left).toEqual(empty);
  222. expect(getCellMeta(0, 0).borders.bottom).toEqual(defaultBorder);
  223. expect(getCellMeta(0, 0).borders.right).toEqual(empty);
  224. done();
  225. }, 350);
  226. });
  227. it('should remove all bottoms border from context menu options', (done) => {
  228. var hot = handsontable({
  229. data: Handsontable.helper.createSpreadsheetData(4, 4),
  230. contextMenu: true,
  231. customBorders: [
  232. {
  233. row: 0,
  234. col: 0,
  235. left: {
  236. width: 2,
  237. color: 'red'
  238. },
  239. right: {
  240. width: 1,
  241. color: 'green'
  242. }
  243. }]
  244. });
  245. contextMenu();
  246. var item = $('.htContextMenu .ht_master .htCore').find('tbody td').not('.htSeparator').eq(10);
  247. item.simulate('mouseover');
  248. setTimeout(() => {
  249. var contextSubMenu = $(`.htContextMenuSub_${item.text()}`);
  250. var button = contextSubMenu.find('.ht_master .htCore tbody td').not('.htSeparator').eq(4);
  251. button.simulate('mousedown');
  252. expect(getCellMeta(0, 0).borders).toBeUndefined();
  253. done();
  254. }, 350);
  255. });
  256. it('should disable `Borders` context menu item when menu was triggered from corner header', () => {
  257. var hot = handsontable({
  258. data: Handsontable.helper.createSpreadsheetObjectData(10, 5),
  259. rowHeaders: true,
  260. colHeaders: true,
  261. contextMenu: true,
  262. customBorders: true,
  263. });
  264. $('.ht_clone_top_left_corner .htCore').find('thead').find('th').eq(0).simulate('mousedown', {which: 3});
  265. contextMenu();
  266. expect($('.htContextMenu tbody td.htDisabled').text()).toBe([
  267. 'Insert column on the left',
  268. 'Insert column on the right',
  269. 'Remove row',
  270. 'Remove column',
  271. 'Undo',
  272. 'Redo',
  273. 'Read only',
  274. 'Alignment',
  275. 'Borders',
  276. ].join(''));
  277. });
  278. });