3e51acebe2e554ab7ae132dc36c3a7a4eecdde31f93945d3c4dddb755fabc6adccf0932a2389bcce54601eb491fd9bccf23a2200a4244f268f2d3138a427ef 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. describe('Walkontable.Selection', () => {
  2. var $table,
  3. $container,
  4. $wrapper,
  5. debug = false;
  6. beforeEach(() => {
  7. $wrapper = $('<div></div>').css({overflow: 'hidden'});
  8. $wrapper.width(100).height(200);
  9. $container = $('<div></div>');
  10. $table = $('<table></table>'); // create a table that is not attached to document
  11. $wrapper.append($container);
  12. $container.append($table);
  13. $wrapper.appendTo('body');
  14. createDataArray();
  15. });
  16. afterEach(() => {
  17. if (!debug) {
  18. $('.wtHolder').remove();
  19. }
  20. $wrapper.remove();
  21. });
  22. it('should add/remove class to selection when cell is clicked', () => {
  23. var wt = new Walkontable.Core({
  24. table: $table[0],
  25. data: getData,
  26. totalRows: getTotalRows,
  27. totalColumns: getTotalColumns,
  28. selections: [
  29. new Walkontable.Selection({
  30. className: 'current'
  31. })
  32. ],
  33. onCellMouseDown(event, coords, TD) {
  34. wt.selections.current.clear();
  35. wt.selections.current.add(coords);
  36. wt.draw();
  37. }
  38. });
  39. shimSelectionProperties(wt);
  40. wt.draw();
  41. var $td1 = $table.find('tbody td:eq(0)');
  42. var $td2 = $table.find('tbody td:eq(1)');
  43. $td1.simulate('mousedown');
  44. expect($td1.hasClass('current')).toEqual(true);
  45. $td2.simulate('mousedown');
  46. expect($td1.hasClass('current')).toEqual(false);
  47. expect($td2.hasClass('current')).toEqual(true);
  48. });
  49. it('should add class to selection on all overlays', function() {
  50. $wrapper.width(300).height(300);
  51. this.data = createSpreadsheetData(10, 10);
  52. var wt = new Walkontable.Core({
  53. table: $table[0],
  54. data: getData,
  55. totalRows: getTotalRows,
  56. totalColumns: getTotalColumns,
  57. selections: [
  58. new Walkontable.Selection({
  59. className: 'current'
  60. }),
  61. new Walkontable.Selection({
  62. className: 'area'
  63. })
  64. ],
  65. fixedColumnsLeft: 2,
  66. fixedRowsTop: 2
  67. });
  68. shimSelectionProperties(wt);
  69. wt.selections.area.add(new Walkontable.CellCoords(1, 1));
  70. wt.selections.area.add(new Walkontable.CellCoords(1, 2));
  71. wt.selections.area.add(new Walkontable.CellCoords(2, 1));
  72. wt.selections.area.add(new Walkontable.CellCoords(2, 2));
  73. wt.draw();
  74. var tds = $wrapper.find('td:contains(B2), td:contains(B3), td:contains(C2), td:contains(C3)');
  75. expect(tds.length).toBeGreaterThan(4);
  76. for (var i = 0, ilen = tds.length; i < ilen; i++) {
  77. expect(tds[i].className).toContain('area');
  78. }
  79. });
  80. it('should not add class to selection until it is rerendered', () => {
  81. var wt = new Walkontable.Core({
  82. table: $table[0],
  83. data: getData,
  84. totalRows: getTotalRows,
  85. totalColumns: getTotalColumns,
  86. selections: [
  87. new Walkontable.Selection({
  88. className: 'current'
  89. })
  90. ]
  91. });
  92. shimSelectionProperties(wt);
  93. wt.draw();
  94. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  95. var $td1 = $table.find('tbody td:eq(0)');
  96. expect($td1.hasClass('current')).toEqual(false);
  97. wt.draw();
  98. expect($td1.hasClass('current')).toEqual(true);
  99. });
  100. it('should add/remove border to selection when cell is clicked', (done) => {
  101. var wt = new Walkontable.Core({
  102. table: $table[0],
  103. data: getData,
  104. totalRows: getTotalRows,
  105. totalColumns: getTotalColumns,
  106. selections: [
  107. new Walkontable.Selection({
  108. border: {
  109. width: 1,
  110. color: 'red',
  111. style: 'solid'
  112. }
  113. })
  114. ],
  115. onCellMouseDown(event, coords, TD) {
  116. wt.selections.current.clear();
  117. wt.selections.current.add(coords);
  118. wt.draw();
  119. }
  120. });
  121. shimSelectionProperties(wt);
  122. wt.draw();
  123. setTimeout(() => {
  124. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  125. var $td2 = $table.find('tbody tr:eq(2) td:eq(1)');
  126. var $top = $(wt.selections.current.getBorder(wt).top); // cheat... get border for ht_master
  127. $td1.simulate('mousedown');
  128. var pos1 = $top.position();
  129. expect(pos1.top).toBeGreaterThan(0);
  130. expect(pos1.left).toBe(0);
  131. $td2.simulate('mousedown');
  132. var pos2 = $top.position();
  133. expect(pos2.top).toBeGreaterThan(pos1.top);
  134. expect(pos2.left).toBeGreaterThan(pos1.left);
  135. done();
  136. }, 1500);
  137. });
  138. it('should add a selection that is outside of the viewport', () => {
  139. var wt = new Walkontable.Core({
  140. table: $table[0],
  141. data: getData,
  142. totalRows: getTotalRows,
  143. totalColumns: getTotalColumns,
  144. selections: [
  145. new Walkontable.Selection({
  146. border: {
  147. width: 1,
  148. color: 'red',
  149. style: 'solid'
  150. }
  151. })
  152. ]
  153. });
  154. shimSelectionProperties(wt);
  155. wt.draw();
  156. wt.selections.current.add([20, 0]);
  157. expect(wt.wtTable.getCoords($table.find('tbody tr:first td:first')[0])).toEqual(new Walkontable.CellCoords(0, 0));
  158. });
  159. it('should not scroll the viewport after selection is cleared', () => {
  160. var wt = new Walkontable.Core({
  161. table: $table[0],
  162. data: getData,
  163. totalRows: getTotalRows,
  164. totalColumns: getTotalColumns,
  165. selections: [
  166. new Walkontable.Selection({
  167. border: {
  168. width: 1,
  169. color: 'red',
  170. style: 'solid'
  171. }
  172. })
  173. ]
  174. });
  175. shimSelectionProperties(wt);
  176. wt.draw();
  177. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  178. wt.draw();
  179. expect(wt.wtTable.getFirstVisibleRow()).toEqual(0);
  180. wt.scrollVertical(10).draw();
  181. expect(wt.wtTable.getFirstVisibleRow()).toEqual(10);
  182. expect(wt.wtTable.getLastVisibleRow()).toBeAroundValue(17);
  183. wt.selections.current.clear();
  184. expect(wt.wtTable.getFirstVisibleRow()).toEqual(10);
  185. expect(wt.wtTable.getLastVisibleRow()).toBeAroundValue(17);
  186. });
  187. it('should clear a selection that has more than one cell', () => {
  188. var wt = new Walkontable.Core({
  189. table: $table[0],
  190. data: getData,
  191. totalRows: getTotalRows,
  192. totalColumns: getTotalColumns,
  193. selections: [
  194. new Walkontable.Selection({
  195. border: {
  196. width: 1,
  197. color: 'red',
  198. style: 'solid'
  199. }
  200. })
  201. ]
  202. });
  203. shimSelectionProperties(wt);
  204. wt.draw();
  205. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  206. wt.selections.current.add(new Walkontable.CellCoords(0, 1));
  207. wt.selections.current.clear();
  208. expect(wt.selections.current.cellRange).toEqual(null);
  209. });
  210. it('should highlight cells in selected row & column', () => {
  211. $wrapper.width(300);
  212. var wt = new Walkontable.Core({
  213. table: $table[0],
  214. data: getData,
  215. totalRows: getTotalRows,
  216. totalColumns: getTotalColumns,
  217. selections: [
  218. new Walkontable.Selection({
  219. highlightRowClassName: 'highlightRow',
  220. highlightColumnClassName: 'highlightColumn'
  221. })
  222. ]
  223. });
  224. shimSelectionProperties(wt);
  225. wt.draw();
  226. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  227. wt.selections.current.add(new Walkontable.CellCoords(0, 1));
  228. wt.draw(true);
  229. expect($table.find('.highlightRow').length).toEqual(2);
  230. expect($table.find('.highlightColumn').length).toEqual((wt.wtTable.getRenderedRowsCount() * 2) - 2);
  231. });
  232. it('should highlight cells in selected row & column, when same class is shared between 2 selection definitions', () => {
  233. $wrapper.width(300);
  234. var wt = new Walkontable.Core({
  235. table: $table[0],
  236. data: getData,
  237. totalRows: getTotalRows,
  238. totalColumns: getTotalColumns,
  239. selections: [
  240. new Walkontable.Selection({
  241. highlightRowClassName: 'highlightRow',
  242. highlightColumnClassName: 'highlightColumn'
  243. }),
  244. new Walkontable.Selection({
  245. highlightRowClassName: 'highlightRow',
  246. highlightColumnClassName: 'highlightColumn'
  247. })
  248. ]
  249. });
  250. shimSelectionProperties(wt);
  251. wt.draw();
  252. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  253. wt.draw(true);
  254. expect($table.find('.highlightRow').length).toEqual(3);
  255. expect($table.find('.highlightColumn').length).toEqual(wt.wtTable.getRenderedRowsCount() - 1);
  256. });
  257. it('should remove highlight when selection is deselected', () => {
  258. var wt = new Walkontable.Core({
  259. table: $table[0],
  260. data: getData,
  261. totalRows: getTotalRows,
  262. totalColumns: getTotalColumns,
  263. selections: [
  264. new Walkontable.Selection({
  265. highlightRowClassName: 'highlightRow',
  266. highlightColumnClassName: 'highlightColumn'
  267. })
  268. ]
  269. });
  270. shimSelectionProperties(wt);
  271. wt.draw();
  272. wt.selections.current.add(new Walkontable.CellCoords(0, 0));
  273. wt.selections.current.add(new Walkontable.CellCoords(0, 1));
  274. wt.draw();
  275. wt.selections.current.clear();
  276. wt.draw();
  277. expect($table.find('.highlightRow').length).toEqual(0);
  278. expect($table.find('.highlightColumn').length).toEqual(0);
  279. });
  280. it('should add/remove appropriate class to the row/column headers of selected cells', () => {
  281. $wrapper.width(300);
  282. var wt = new Walkontable.Core({
  283. table: $table[0],
  284. data: getData,
  285. totalRows: getTotalRows,
  286. totalColumns: getTotalColumns,
  287. rowHeaders: [function(row, TH) {
  288. TH.innerHTML = row + 1;
  289. }],
  290. columnHeaders: [function(row, TH) {
  291. TH.innerHTML = row + 1;
  292. }],
  293. selections: [
  294. new Walkontable.Selection({
  295. highlightRowClassName: 'highlightRow',
  296. highlightColumnClassName: 'highlightColumn'
  297. })
  298. ]
  299. });
  300. shimSelectionProperties(wt);
  301. wt.draw();
  302. wt.selections.current.add(new Walkontable.CellCoords(1, 1));
  303. wt.selections.current.add(new Walkontable.CellCoords(2, 2));
  304. wt.draw();
  305. // left side:
  306. // -2 -> because one row is partially visible
  307. // right side:
  308. // *2 -> because there are 2 columns selected
  309. // +2 -> because there are the headers
  310. // -4 -> because 4 cells are selected = there are overlapping highlightRow class
  311. expect($table.find('.highlightRow').length).toEqual((wt.wtViewport.columnsVisibleCalculator.count * 2) + 2 - 4);
  312. expect($table.find('.highlightColumn').length - 2).toEqual((wt.wtViewport.rowsVisibleCalculator.count * 2) + 2 - 4);
  313. expect($table.find('.highlightColumn').length).toEqual(14);
  314. expect(getTableTopClone().find('.highlightColumn').length).toEqual(2);
  315. expect(getTableTopClone().find('.highlightRow').length).toEqual(0);
  316. expect(getTableLeftClone().find('.highlightColumn').length).toEqual(0);
  317. expect(getTableLeftClone().find('.highlightRow').length).toEqual(2);
  318. var $colHeaders = $table.find('thead tr:first-child th'),
  319. $rowHeaders = $table.find('tbody tr th:first-child');
  320. expect($colHeaders.eq(2).hasClass('highlightColumn')).toBe(true);
  321. expect($colHeaders.eq(3).hasClass('highlightColumn')).toBe(true);
  322. expect($rowHeaders.eq(1).hasClass('highlightRow')).toBe(true);
  323. expect($rowHeaders.eq(2).hasClass('highlightRow')).toBe(true);
  324. wt.selections.current.clear();
  325. wt.draw();
  326. expect($table.find('.highlightRow').length).toEqual(0);
  327. expect($table.find('.highlightColumn').length).toEqual(0);
  328. expect(getTableTopClone().find('.highlightColumn').length).toEqual(0);
  329. expect(getTableTopClone().find('.highlightRow').length).toEqual(0);
  330. expect(getTableLeftClone().find('.highlightColumn').length).toEqual(0);
  331. expect(getTableLeftClone().find('.highlightRow').length).toEqual(0);
  332. });
  333. describe('replace', () => {
  334. it('should replace range from property and return true', () => {
  335. var wt = new Walkontable.Core({
  336. table: $table[0],
  337. data: getData,
  338. totalRows: getTotalRows,
  339. totalColumns: getTotalColumns,
  340. selections: [
  341. new Walkontable.Selection({
  342. border: {
  343. width: 1,
  344. color: 'red',
  345. style: 'solid'
  346. }
  347. })
  348. ]
  349. });
  350. shimSelectionProperties(wt);
  351. wt.selections.current.add(new Walkontable.CellCoords(1, 1));
  352. wt.selections.current.add(new Walkontable.CellCoords(3, 3));
  353. var result = wt.selections.current.replace(new Walkontable.CellCoords(3, 3), new Walkontable.CellCoords(4, 4));
  354. expect(result).toBe(true);
  355. expect(wt.selections.current.getCorners()).toEqual([1, 1, 4, 4]);
  356. });
  357. });
  358. });