a522041bd6376d6074ba7b6858794a3b5bdb001da51af1f09f3e407864cf3719f6885a3cc65c8a5919192329c9985a523d2ad9da9817756e7968ebbcdbbcfd 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. describe('WalkontableEvent', () => {
  2. var $table,
  3. debug = false;
  4. beforeEach(() => {
  5. $table = $('<table></table>'); // create a table that is not attached to document
  6. $table.appendTo('body');
  7. createDataArray();
  8. });
  9. afterEach(() => {
  10. if (!debug) {
  11. $('.wtHolder').remove();
  12. }
  13. });
  14. it('should call `onCellMouseDown` callback', () => {
  15. var
  16. myCoords = null,
  17. myTD = null,
  18. wt = new Walkontable.Core({
  19. table: $table[0],
  20. data: getData,
  21. totalRows: getTotalRows,
  22. totalColumns: getTotalColumns,
  23. onCellMouseDown(event, coords, TD) {
  24. myCoords = coords;
  25. myTD = TD;
  26. }
  27. });
  28. wt.draw();
  29. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  30. $td.simulate('mousedown');
  31. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  32. expect(myTD).toEqual($td[0]);
  33. });
  34. it('should call `onCellMouseOver` callback', () => {
  35. var
  36. myCoords = null,
  37. myTD = null,
  38. wt = new Walkontable.Core({
  39. table: $table[0],
  40. data: getData,
  41. totalRows: getTotalRows,
  42. totalColumns: getTotalColumns,
  43. onCellMouseOver(event, coords, TD) {
  44. myCoords = coords;
  45. myTD = TD;
  46. }
  47. });
  48. wt.draw();
  49. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  50. $td.simulate('mouseover');
  51. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  52. expect(myTD).toEqual($td[0]);
  53. });
  54. it('should call `onCellMouseOver` callback with correctly passed TD element when cell contains another table', () => {
  55. var fn = jasmine.createSpy();
  56. var wt = new Walkontable.Core({
  57. table: $table[0],
  58. data: [['<table style="width: 50px;"><tr><td class="test">TEST</td></tr></table>']],
  59. totalRows: 1,
  60. totalColumns: 1,
  61. onCellMouseOver: fn,
  62. cellRenderer(row, column, TD) {
  63. TD.innerHTML = wt.wtSettings.getSetting('data', row, column);
  64. },
  65. });
  66. wt.draw();
  67. var outerTD = $table.find('tbody td:not(td.test)');
  68. var innerTD = $table.find('tbody td.test');
  69. innerTD.simulate('mouseover');
  70. expect(fn.calls.argsFor(0)[2]).toBe(outerTD[0]);
  71. });
  72. it('should call `onCellMouseOut` callback', function () {
  73. var myCoords = null,
  74. myTD = null,
  75. wt = new Walkontable.Core({
  76. table: $table[0],
  77. data: getData,
  78. totalRows: getTotalRows,
  79. totalColumns: getTotalColumns,
  80. onCellMouseOut: function (event, coords, TD) {
  81. myCoords = coords;
  82. myTD = TD;
  83. }
  84. });
  85. wt.draw();
  86. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  87. $td.simulate('mouseover');
  88. $td.simulate('mouseout');
  89. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  90. expect(myTD).toEqual($td[0]);
  91. });
  92. it('should call `onCellMouseOut` callback with correctly passed TD element when cell contains another table', function () {
  93. var fn = jasmine.createSpy();
  94. var wt = new Walkontable.Core({
  95. table: $table[0],
  96. data: [['<table style="width: 50px;"><tr><td class="test">TEST</td></tr></table>']],
  97. totalRows: 1,
  98. totalColumns: 1,
  99. onCellMouseOut: fn,
  100. cellRenderer: function(row, column, TD) {
  101. TD.innerHTML = wt.wtSettings.getSetting('data', row, column);
  102. },
  103. });
  104. wt.draw();
  105. var outerTD = $table.find('tbody td:not(td.test)');
  106. var innerTD = $table.find('tbody td.test');
  107. innerTD.simulate('mouseover');
  108. innerTD.simulate('mouseout');
  109. expect(fn.calls.argsFor(0)[2]).toBe(outerTD[0]);
  110. });
  111. it('should call `onCellDblClick` callback', function () {
  112. var myCoords = null,
  113. myTD = null,
  114. wt = new Walkontable.Core({
  115. table: $table[0],
  116. data: getData,
  117. totalRows: getTotalRows,
  118. totalColumns: getTotalColumns,
  119. onCellDblClick(event, coords, TD) {
  120. myCoords = coords;
  121. myTD = TD;
  122. }
  123. });
  124. wt.draw();
  125. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  126. $td.simulate('mousedown');
  127. $td.simulate('mouseup');
  128. $td.simulate('mousedown');
  129. $td.simulate('mouseup');
  130. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  131. expect(myTD).toEqual($td[0]);
  132. });
  133. it('should call `onCellDblClick` callback, even when it is set only after first click', () => {
  134. var
  135. myCoords = null,
  136. myTD = null,
  137. wt = new Walkontable.Core({
  138. table: $table[0],
  139. data: getData,
  140. totalRows: getTotalRows,
  141. totalColumns: getTotalColumns
  142. });
  143. wt.draw();
  144. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  145. $td.simulate('mousedown');
  146. $td.simulate('mouseup');
  147. $td.simulate('mousedown');
  148. wt.update('onCellDblClick', (event, coords, TD) => {
  149. myCoords = coords;
  150. myTD = TD;
  151. });
  152. $td.simulate('mouseup');
  153. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  154. expect(myTD).toEqual($td[0]);
  155. });
  156. it('should call `onCellMouseDown` callback when clicked on TH', () => {
  157. var
  158. called = false,
  159. wt = new Walkontable.Core({
  160. table: $table[0],
  161. data: getData,
  162. totalRows: getTotalRows,
  163. totalColumns: getTotalColumns,
  164. columnHeaders: [function(col, TH) {
  165. TH.innerHTML = col + 1;
  166. }],
  167. onCellMouseDown(event, coords, TD) {
  168. called = true;
  169. }
  170. });
  171. wt.draw();
  172. var $th = $table.find('th:first');
  173. $th.simulate('mousedown');
  174. expect(called).toEqual(true);
  175. });
  176. it('should not call `onCellMouseDown` callback when clicked on the focusable element (column headers)', () => {
  177. var opt = ['Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'].map((opt) => `<option value="${opt}">${opt}</option>`).join('');
  178. var called = false;
  179. var wt = new Walkontable.Core({
  180. table: $table[0],
  181. data: getData,
  182. totalRows: getTotalRows,
  183. totalColumns: getTotalColumns,
  184. columnHeaders: [function(col, TH) {
  185. TH.innerHTML = `#${col}<select>${opt}</select>`;
  186. }],
  187. onCellMouseDown(event, coords, TD) {
  188. called = true;
  189. }
  190. });
  191. wt.draw();
  192. var select = $table.find('th:first select');
  193. select.focus();
  194. select.simulate('mousedown');
  195. expect(called).toBe(false);
  196. });
  197. it('should not call `onCellMouseDown` callback when clicked on the focusable element (cell renderer)', () => {
  198. var opt = ['Maserati', 'Mazda', 'Mercedes', 'Mini', 'Mitsubishi'].map((opt) => `<option value="${opt}">${opt}</option>`).join('');
  199. var called = false;
  200. var wt = new Walkontable.Core({
  201. table: $table[0],
  202. data: getData,
  203. totalRows: getTotalRows,
  204. totalColumns: getTotalColumns,
  205. cellRenderer(row, column, TD) {
  206. TD.innerHTML = `<select>${opt}</select>`;
  207. },
  208. onCellMouseDown(event, coords, TD) {
  209. called = true;
  210. }
  211. });
  212. wt.draw();
  213. var select = $table.find('td:first select');
  214. select.focus();
  215. select.simulate('mousedown');
  216. expect(called).toBe(false);
  217. });
  218. it('should call `onCellMouseOver` callback when clicked on TH', () => {
  219. var
  220. called = false,
  221. wt = new Walkontable.Core({
  222. table: $table[0],
  223. data: getData,
  224. totalRows: getTotalRows,
  225. totalColumns: getTotalColumns,
  226. columnHeaders: [function(col, TH) {
  227. TH.innerHTML = col + 1;
  228. }],
  229. onCellMouseOver(event, coords, TD) {
  230. called = coords;
  231. }
  232. });
  233. wt.draw();
  234. var $th = $table.find('th:first');
  235. $th.simulate('mouseover');
  236. expect(called.row).toEqual(-1);
  237. expect(called.col).toEqual(0);
  238. });
  239. it('should call `onCellDblClick` callback when clicked on TH', () => {
  240. var
  241. called = false,
  242. wt = new Walkontable.Core({
  243. table: $table[0],
  244. data: getData,
  245. totalRows: getTotalRows,
  246. totalColumns: getTotalColumns,
  247. columnHeaders: [function(col, TH) {
  248. TH.innerHTML = col + 1;
  249. }],
  250. onCellDblClick(event, coords, TD) {
  251. called = true;
  252. }
  253. });
  254. wt.draw();
  255. var $th = $table.find('th:first');
  256. $th.simulate('mousedown');
  257. $th.simulate('mouseup');
  258. $th.simulate('mousedown');
  259. $th.simulate('mouseup');
  260. expect(called).toEqual(true);
  261. });
  262. it('should not call `onCellDblClick` callback when right-clicked', () => {
  263. var
  264. called = false,
  265. wt = new Walkontable.Core({
  266. table: $table[0],
  267. data: getData,
  268. totalRows: getTotalRows,
  269. totalColumns: getTotalColumns,
  270. onCellDblClick(event, coords, TD) {
  271. called = true;
  272. }
  273. });
  274. wt.draw();
  275. var $td = $table.find('tbody tr:first td:first');
  276. var options = {
  277. button: 2
  278. };
  279. $td.simulate('mousedown', options);
  280. $td.simulate('mouseup', options);
  281. $td.simulate('mousedown', options);
  282. $td.simulate('mouseup', options);
  283. expect(called).toEqual(false);
  284. });
  285. it('should not call `onCellDblClick` when first mouse up came from mouse drag', () => {
  286. var
  287. called = false,
  288. wt = new Walkontable.Core({
  289. table: $table[0],
  290. data: getData,
  291. totalRows: getTotalRows,
  292. totalColumns: getTotalColumns,
  293. onCellDblClick(event, coords, TD) {
  294. called = true;
  295. }
  296. });
  297. wt.draw();
  298. var $td = $table.find('tbody tr:first td:first');
  299. var $td2 = $table.find('tbody tr:first td:eq(1)');
  300. $td2.simulate('mousedown');
  301. $td.simulate('mouseup');
  302. $td.simulate('mousedown');
  303. $td.simulate('mouseup');
  304. expect(called).toEqual(false);
  305. });
  306. it('border click should call `onCellMouseDown` callback', () => {
  307. var
  308. myCoords = null,
  309. myTD = null,
  310. wt = new Walkontable.Core({
  311. table: $table[0],
  312. data: getData,
  313. totalRows: getTotalRows,
  314. totalColumns: getTotalColumns,
  315. selections: [
  316. new Walkontable.Selection({
  317. className: 'current',
  318. border: {
  319. width: 1,
  320. color: 'red',
  321. style: 'solid'
  322. }
  323. })
  324. ],
  325. onCellMouseDown(event, coords, TD) {
  326. myCoords = coords;
  327. myTD = TD;
  328. }
  329. });
  330. shimSelectionProperties(wt);
  331. wt.selections.current.add(new Walkontable.CellCoords(1, 1));
  332. wt.draw();
  333. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  334. var $border = $table.parents('.wtHolder').find('.wtBorder:first');
  335. $border.simulate('mousedown');
  336. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  337. expect(myTD).toEqual($td[0]);
  338. });
  339. it('border click should call `onCellDblClick` callback', () => {
  340. var
  341. myCoords = null,
  342. myTD = null,
  343. wt = new Walkontable.Core({
  344. table: $table[0],
  345. data: getData,
  346. totalRows: getTotalRows,
  347. totalColumns: getTotalColumns,
  348. selections: [
  349. new Walkontable.Selection({
  350. className: 'current',
  351. border: {
  352. width: 1,
  353. color: 'red',
  354. style: 'solid'
  355. }
  356. })
  357. ],
  358. onCellDblClick(event, coords, TD) {
  359. myCoords = coords;
  360. myTD = TD;
  361. }
  362. });
  363. shimSelectionProperties(wt);
  364. wt.selections.current.add(new Walkontable.CellCoords(1, 1));
  365. wt.draw();
  366. var $td = $table.find('tbody tr:eq(1) td:eq(1)');
  367. var $border = $table.parents('.wtHolder').find('.wtBorder:first');
  368. $border.simulate('mousedown');
  369. $border.simulate('mouseup');
  370. $border.simulate('mousedown');
  371. $border.simulate('mouseup');
  372. expect(myCoords).toEqual(new Walkontable.CellCoords(1, 1));
  373. expect(myTD).toEqual($td[0]);
  374. });
  375. // corner
  376. it('should call `onCellCornerMouseDown` callback', () => {
  377. var
  378. clicked = false,
  379. wt = new Walkontable.Core({
  380. table: $table[0],
  381. data: getData,
  382. totalRows: getTotalRows,
  383. totalColumns: getTotalColumns,
  384. selections: [
  385. new Walkontable.Selection({
  386. className: 'current',
  387. border: {
  388. width: 1,
  389. color: 'red',
  390. style: 'solid'
  391. }
  392. })
  393. ],
  394. onCellCornerMouseDown(event) {
  395. clicked = true;
  396. }
  397. });
  398. shimSelectionProperties(wt);
  399. wt.selections.current.add(new Walkontable.CellCoords(10, 2));
  400. wt.draw();
  401. var $td = $table.parents('.wtHolder').find('.current.corner');
  402. $td.simulate('mousedown');
  403. expect(clicked).toEqual(true);
  404. });
  405. it('should call `onCellCornerDblClick` callback, even when it is set only after first click', () => {
  406. var
  407. clicked = false,
  408. wt = new Walkontable.Core({
  409. table: $table[0],
  410. data: getData,
  411. totalRows: getTotalRows,
  412. totalColumns: getTotalColumns,
  413. selections: [
  414. new Walkontable.Selection({
  415. className: 'current',
  416. border: {
  417. width: 1,
  418. color: 'red',
  419. style: 'solid'
  420. }
  421. })
  422. ]
  423. });
  424. shimSelectionProperties(wt);
  425. wt.selections.current.add(new Walkontable.CellCoords(10, 2));
  426. wt.draw();
  427. var $td = $table.parents('.wtHolder').find('.current.corner');
  428. $td.simulate('mousedown');
  429. $td.simulate('mouseup');
  430. $td.simulate('mousedown');
  431. wt.update('onCellCornerDblClick', (event) => {
  432. clicked = true;
  433. });
  434. $td.simulate('mouseup');
  435. expect(clicked).toEqual(true);
  436. });
  437. it('should call `onDraw` callback after render', () => {
  438. var
  439. count = 0,
  440. wt = new Walkontable.Core({
  441. table: $table[0],
  442. data: getData,
  443. totalRows: getTotalRows,
  444. totalColumns: getTotalColumns,
  445. onDraw() {
  446. count++;
  447. }
  448. });
  449. wt.draw();
  450. expect(count).toEqual(1);
  451. });
  452. });