cde8703ef394739ad5dc3a6a9d7ca1ba31224295520e44499b483fd39d142c8addf6b513d66e8c99dadb4c6d216ea0000510878001b0860588fb2e34f7d60c 9.5 KB

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