comments.e2e.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. describe('Comments', function () {
  2. var id = 'testContainer';
  3. beforeEach(function () {
  4. this.$container = $('<div id="' + id + '"></div>').appendTo('body');
  5. });
  6. afterEach(function () {
  7. if (this.$container) {
  8. destroy();
  9. this.$container.remove();
  10. }
  11. });
  12. describe('Enabling the plugin', function () {
  13. it('should enable the plugin in the initial config', function () {
  14. var hot = handsontable({
  15. data: Handsontable.helper.createSpreadsheetData(4, 4),
  16. comments: true
  17. });
  18. expect(hot.getPlugin('comments').isEnabled()).toBe(true);
  19. });
  20. it('should enable the plugin using updateSettings', function () {
  21. var hot = handsontable({
  22. data: Handsontable.helper.createSpreadsheetData(4, 4)
  23. });
  24. expect(hot.getPlugin('comments').isEnabled()).toBe(false);
  25. updateSettings({
  26. comments: true
  27. });
  28. expect(hot.getPlugin('comments').isEnabled()).toBe(true);
  29. });
  30. });
  31. describe('Styling', function () {
  32. it('should display comment indicators in the appropriate cells', function () {
  33. var hot = handsontable({
  34. data: Handsontable.helper.createSpreadsheetData(4, 4),
  35. comments: true,
  36. cell: [{ row: 1, col: 1, comment: { value: 'test' } }, { row: 2, col: 2, comment: { value: 'test' } }]
  37. });
  38. expect(getCell(1, 1).className.indexOf('htCommentCell')).toBeGreaterThan(-1);
  39. expect(getCell(2, 2).className.indexOf('htCommentCell')).toBeGreaterThan(-1);
  40. });
  41. });
  42. describe('API', function () {
  43. it('should return the comment from a proper cell, when using the getCommentAtCell method', function () {
  44. var hot = handsontable({
  45. data: Handsontable.helper.createSpreadsheetData(4, 4),
  46. comments: true,
  47. cell: [{ row: 1, col: 1, comment: { value: 'test' } }, { row: 2, col: 2, comment: { value: 'another test' } }]
  48. });
  49. var plugin = hot.getPlugin('comments');
  50. expect(plugin.getCommentAtCell(1, 1)).toEqual('test');
  51. expect(plugin.getCommentAtCell(2, 2)).toEqual('another test');
  52. });
  53. it('should return the comment from a proper cell, when using the setRange and getComment methods', function () {
  54. var hot = handsontable({
  55. data: Handsontable.helper.createSpreadsheetData(4, 4),
  56. comments: true,
  57. cell: [{ row: 1, col: 1, comment: { value: 'test' } }, { row: 2, col: 2, comment: { value: 'another test' } }]
  58. });
  59. var plugin = hot.getPlugin('comments');
  60. plugin.setRange({ from: { row: 1, col: 1 } });
  61. expect(plugin.getComment()).toEqual('test');
  62. plugin.setRange({ from: { row: 2, col: 2 } });
  63. expect(plugin.getComment()).toEqual('another test');
  64. });
  65. it('should allow inserting comments using the `setCommentAtCell` method', function () {
  66. var hot = handsontable({
  67. data: Handsontable.helper.createSpreadsheetData(4, 4),
  68. comments: true
  69. });
  70. var plugin = hot.getPlugin('comments');
  71. expect(getCellMeta(1, 1).comment).toEqual(void 0);
  72. plugin.setCommentAtCell(1, 1, 'test comment');
  73. expect(getCellMeta(1, 1).comment.value).toEqual('test comment');
  74. });
  75. it('should trigger `afterSetCellMeta` callback when `setCommentAtCell` function is invoked', function () {
  76. var afterSetCellMetaCallback = jasmine.createSpy('afterSetCellMetaCallback');
  77. var hot = handsontable({
  78. data: Handsontable.helper.createSpreadsheetData(4, 4),
  79. comments: true,
  80. afterSetCellMeta: afterSetCellMetaCallback
  81. });
  82. var plugin = hot.getPlugin('comments');
  83. plugin.setCommentAtCell(1, 1, 'Added comment');
  84. expect(afterSetCellMetaCallback).toHaveBeenCalledWith(1, 1, 'comment', { value: 'Added comment' }, undefined, undefined);
  85. });
  86. it('should allow removing comments using the `removeCommentAtCell` method', function () {
  87. var hot = handsontable({
  88. data: Handsontable.helper.createSpreadsheetData(4, 4),
  89. comments: true,
  90. cell: [{ row: 1, col: 1, comment: { value: 'test' } }]
  91. });
  92. var plugin = hot.getPlugin('comments');
  93. expect(getCellMeta(1, 1).comment.value).toEqual('test');
  94. plugin.removeCommentAtCell(1, 1);
  95. expect(getCellMeta(1, 1).comment).toEqual(void 0);
  96. });
  97. it('should trigger `afterSetCellMeta` callback when `removeCommentAtCell` function is invoked', function () {
  98. var afterSetCellMetaCallback = jasmine.createSpy('afterSetCellMetaCallback');
  99. var hot = handsontable({
  100. data: Handsontable.helper.createSpreadsheetData(4, 4),
  101. comments: true,
  102. cell: [{ row: 1, col: 1, comment: { value: 'test' } }],
  103. afterSetCellMeta: afterSetCellMetaCallback
  104. });
  105. var plugin = hot.getPlugin('comments');
  106. plugin.removeCommentAtCell(1, 1);
  107. expect(afterSetCellMetaCallback).toHaveBeenCalledWith(1, 1, 'comment', undefined, undefined, undefined);
  108. });
  109. it('should allow opening the comment editor using the `showAtCell` method', function () {
  110. var hot = handsontable({
  111. data: Handsontable.helper.createSpreadsheetData(4, 4),
  112. comments: true
  113. });
  114. var plugin = hot.getPlugin('comments');
  115. var editor = plugin.editor.getInputElement();
  116. expect(editor.parentNode.style.display).toEqual('none');
  117. plugin.showAtCell(1, 1);
  118. expect(editor.parentNode.style.display).toEqual('block');
  119. });
  120. it('should allow closing the comment editor using the `hide` method', function () {
  121. var hot = handsontable({
  122. data: Handsontable.helper.createSpreadsheetData(4, 4),
  123. comments: true
  124. });
  125. var plugin = hot.getPlugin('comments');
  126. var editor = plugin.editor.getInputElement();
  127. plugin.showAtCell(1, 1);
  128. expect(editor.parentNode.style.display).toEqual('block');
  129. plugin.hide();
  130. expect(editor.parentNode.style.display).toEqual('none');
  131. });
  132. });
  133. it('`updateCommentMeta` & `setComment` functions should extend cellMetaObject properly', function () {
  134. var comment, readOnly;
  135. var hot = handsontable({
  136. data: Handsontable.helper.createSpreadsheetData(4, 4),
  137. comments: true
  138. });
  139. var plugin = hot.getPlugin('comments');
  140. setCellMeta(0, 0, 'comment', { readOnly: true });
  141. plugin.updateCommentMeta(0, 0, { value: 'Test' });
  142. comment = getCellMeta(0, 0).comment;
  143. readOnly = comment && comment.readOnly;
  144. expect(readOnly).toEqual(true);
  145. plugin.setRange({ from: { row: 0, col: 0 }, to: { row: 0, col: 0 } });
  146. plugin.setComment('Test2');
  147. comment = getCellMeta(0, 0).comment;
  148. readOnly = comment && comment.readOnly;
  149. expect(readOnly).toEqual(true);
  150. });
  151. describe('Using the Context Menu', function () {
  152. it('should open the comment editor when clicking the "Add comment" entry', function () {
  153. var hot = handsontable({
  154. data: Handsontable.helper.createSpreadsheetData(4, 4),
  155. contextMenu: true,
  156. comments: true
  157. });
  158. selectCell(1, 1);
  159. contextMenu();
  160. var addCommentButton = $('.htItemWrapper').filter(function () {
  161. return $(this).text() === 'Add comment';
  162. })[0];
  163. $(addCommentButton).simulate('mousedown');
  164. var editor = hot.getPlugin('comments').editor.getInputElement();
  165. expect($(editor).parents('.htComments')[0].style.display).toEqual('block');
  166. });
  167. it('should remove the comment from a cell after clicking the "Delete comment" entry', function () {
  168. var hot = handsontable({
  169. data: Handsontable.helper.createSpreadsheetData(4, 4),
  170. contextMenu: true,
  171. comments: true,
  172. cell: [{ row: 1, col: 1, comment: { value: 'Test comment' } }]
  173. });
  174. expect(getCellMeta(1, 1).comment.value).toEqual('Test comment');
  175. selectCell(1, 1);
  176. contextMenu();
  177. var deleteCommentButton = $('.htItemWrapper').filter(function () {
  178. return $(this).text() === 'Delete comment';
  179. })[0];
  180. $(deleteCommentButton).simulate('mousedown');
  181. expect(getCellMeta(1, 1).comment).toEqual(void 0);
  182. });
  183. it('should remove comments from a selected group of cells after clicking the "Delete comment" entry', function () {
  184. var hot = handsontable({
  185. data: Handsontable.helper.createSpreadsheetData(4, 4),
  186. contextMenu: true,
  187. comments: true,
  188. cell: [{ row: 1, col: 1, comment: { value: 'Test comment' } }, { row: 2, col: 2, comment: { value: 'Test comment 2' } }]
  189. });
  190. expect(getCellMeta(1, 1).comment.value).toEqual('Test comment');
  191. expect(getCellMeta(2, 2).comment.value).toEqual('Test comment 2');
  192. selectCell(1, 1, 2, 2);
  193. contextMenu();
  194. var deleteCommentButton = $('.htItemWrapper').filter(function () {
  195. return $(this).text() === 'Delete comment';
  196. })[0];
  197. $(deleteCommentButton).simulate('mousedown');
  198. expect(getCellMeta(1, 1).comment).toEqual(void 0);
  199. expect(getCellMeta(2, 2).comment).toEqual(void 0);
  200. });
  201. it('should make the comment editor\'s textarea read-only after clicking the "Read only comment" entry', function (done) {
  202. var hot = handsontable({
  203. data: Handsontable.helper.createSpreadsheetData(4, 4),
  204. contextMenu: true,
  205. comments: true,
  206. cell: [{ row: 1, col: 1, comment: { value: 'Test comment' } }]
  207. });
  208. selectCell(1, 1);
  209. contextMenu();
  210. var editor = hot.getPlugin('comments').editor.getInputElement();
  211. expect($(editor)[0].readOnly).toBe(false);
  212. var readOnlyComment = $('.htItemWrapper').filter(function () {
  213. return $(this).text() === 'Read only comment';
  214. })[0];
  215. $(readOnlyComment).simulate('mousedown');
  216. $(document).simulate('mouseup');
  217. $(getCell(1, 1)).simulate('mouseover', {
  218. clientX: Handsontable.dom.offset(getCell(1, 1)).left + 5,
  219. clientY: Handsontable.dom.offset(getCell(1, 1)).top + 5
  220. });
  221. setTimeout(function () {
  222. expect($(editor)[0].readOnly).toBe(true);
  223. done();
  224. }, 550);
  225. });
  226. });
  227. describe('Hooks invoked after changing cell meta', function () {
  228. it('should trigger `afterSetCellMeta` callback after deleting comment by context menu', function () {
  229. var afterSetCellMetaCallback = jasmine.createSpy('afterSetCellMetaCallback');
  230. var rows = 10,
  231. columns = 10;
  232. handsontable({
  233. data: Handsontable.helper.createSpreadsheetData(rows, columns),
  234. rowHeaders: true,
  235. colHeaders: true,
  236. contextMenu: true,
  237. comments: true,
  238. columns: function columns() {
  239. return {
  240. comment: {
  241. value: 'test'
  242. }
  243. };
  244. },
  245. afterSetCellMeta: afterSetCellMetaCallback
  246. });
  247. expect(afterSetCellMetaCallback).not.toHaveBeenCalled();
  248. selectCell(1, 1);
  249. contextMenu();
  250. var deleteCommentButton = $('.htItemWrapper').filter(function () {
  251. return $(this).text() === 'Delete comment';
  252. })[0];
  253. $(deleteCommentButton).simulate('mousedown');
  254. expect(afterSetCellMetaCallback).toHaveBeenCalledWith(1, 1, 'comment', undefined, undefined, undefined);
  255. });
  256. // Don't work in PhantomJS
  257. // It will work probably when #3961 will be fixed
  258. xit('should trigger `afterSetCellMeta` callback after editing comment by context menu', function (done) {
  259. var afterSetCellMetaCallback = jasmine.createSpy('afterSetCellMetaCallback');
  260. var rows = 10,
  261. columns = 10;
  262. handsontable({
  263. data: Handsontable.helper.createSpreadsheetData(rows, columns),
  264. rowHeaders: true,
  265. colHeaders: true,
  266. contextMenu: true,
  267. comments: true,
  268. columns: function columns() {
  269. return {
  270. comment: {
  271. value: 'test'
  272. }
  273. };
  274. },
  275. afterSetCellMeta: afterSetCellMetaCallback
  276. });
  277. selectCell(0, 0);
  278. contextMenu();
  279. var editCommentButton = $('.htItemWrapper').filter(function () {
  280. return $(this).text() === 'Edit comment';
  281. })[0];
  282. $(editCommentButton).simulate('mousedown');
  283. setTimeout(function () {
  284. $('.htCommentTextArea').val('Edited comment');
  285. // changing focus
  286. $('body').simulate('mousedown');
  287. setTimeout(function () {
  288. expect(afterSetCellMetaCallback).toHaveBeenCalledWith(0, 0, 'comment', { value: 'Edited comment' }, undefined, undefined);
  289. done();
  290. }, 100);
  291. }, 100);
  292. });
  293. });
  294. });