handsontableEditor.spec.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. describe('HandsontableEditor', () => {
  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. function getManufacturerData() {
  13. return [
  14. {name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
  15. {name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
  16. {name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
  17. {name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
  18. {name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
  19. {name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
  20. ];
  21. }
  22. it('should create an editor that is a Handsontable instance', function() {
  23. handsontable({
  24. columns: [
  25. {
  26. type: 'handsontable',
  27. handsontable: {
  28. colHeaders: ['Marque', 'Country', 'Parent company'],
  29. data: getManufacturerData()
  30. }
  31. }
  32. ]
  33. });
  34. selectCell(2, 0);
  35. keyDownUp('enter');
  36. expect(this.$container.find('.handsontableEditor:visible').length).toEqual(1);
  37. });
  38. it('should destroy the editor when Esc is pressed', function() {
  39. handsontable({
  40. columns: [
  41. {
  42. type: 'handsontable',
  43. handsontable: {
  44. colHeaders: ['Marque', 'Country', 'Parent company'],
  45. data: getManufacturerData()
  46. }
  47. }
  48. ]
  49. });
  50. selectCell(2, 0);
  51. keyDownUp('enter');
  52. keyDownUp('esc');
  53. expect(this.$container.find('.handsontableEditor:visible').length).toEqual(0);
  54. });
  55. // see https://github.com/handsontable/handsontable/issues/3380
  56. it('should not throw error while selecting the next cell by hitting enter key', () => {
  57. var spy = jasmine.createSpyObj('error', ['test']);
  58. var prevError = window.onerror;
  59. window.onerror = function(messageOrEvent, source, lineno, colno, error) {
  60. spy.test();
  61. };
  62. handsontable({
  63. columns: [{
  64. type: 'handsontable',
  65. handsontable: {
  66. data: [['Marque'], ['Country'], ['Parent company']]
  67. }
  68. }]
  69. });
  70. selectCell(0, 0);
  71. keyDownUp('enter');
  72. keyDownUp('enter');
  73. keyDownUp('enter');
  74. expect(spy.test.calls.count()).toBe(0);
  75. window.onerror = prevError;
  76. });
  77. it('Enter pressed in nested HT should set the value and hide the editor', function() {
  78. handsontable({
  79. columns: [
  80. {
  81. type: 'handsontable',
  82. handsontable: {
  83. colHeaders: ['Marque', 'Country', 'Parent company'],
  84. data: getManufacturerData()
  85. }
  86. }
  87. ]
  88. });
  89. selectCell(2, 0);
  90. keyDownUp('enter');
  91. keyDownUp('arrow_down');
  92. keyDownUp('enter');
  93. expect(this.$container.find('.handsontableEditor:visible').length).toEqual(0);
  94. expect(getDataAtCell(2, 0)).toEqual('BMW');
  95. });
  96. it('should keep focus on textarea after arrow is pressed', () => {
  97. var hot = handsontable({
  98. columns: [
  99. {
  100. type: 'handsontable',
  101. handsontable: {
  102. colHeaders: ['Marque', 'Country', 'Parent company'],
  103. data: getManufacturerData()
  104. }
  105. }
  106. ]
  107. });
  108. selectCell(2, 0);
  109. keyDownUp('enter');
  110. keyDownUp('arrow_down');
  111. expect(document.activeElement).toEqual(hot.getActiveEditor().TEXTAREA);
  112. });
  113. it('should focus the TD after HT editor is prepared and destroyed', () => {
  114. handsontable({
  115. columns: [
  116. {
  117. type: 'handsontable',
  118. handsontable: {
  119. colHeaders: ['Marque', 'Country', 'Parent company'],
  120. data: getManufacturerData()
  121. }
  122. }
  123. ]
  124. });
  125. selectCell(2, 0);
  126. keyDownUp('arrow_down');
  127. keyDownUp('arrow_down');
  128. expect(getSelected()).toEqual([4, 0, 4, 0]);
  129. });
  130. it('should focus the TD after HT editor is prepared, finished (by keyboard) and destroyed', () => {
  131. var selections = [];
  132. handsontable({
  133. columns: [
  134. {
  135. type: 'handsontable',
  136. handsontable: {
  137. colHeaders: ['Marque', 'Country', 'Parent company'],
  138. data: getManufacturerData(),
  139. afterSelection() {
  140. selections.push(['inner', arguments[0]]); // arguments[0] is selection start row
  141. }
  142. }
  143. }
  144. ],
  145. afterSelection() {
  146. selections.push(['outer', arguments[0]]); // arguments[0] is selection start row
  147. }
  148. });
  149. expect(selections.length).toBe(0);
  150. selectCell(1, 0);
  151. expect(selections[0]).toEqual(['outer', 1]);
  152. keyDownUp('arrow_down');
  153. expect(selections[1]).toEqual(['outer', 2]);
  154. keyDownUp('enter');
  155. keyDownUp('arrow_down');
  156. expect(selections[2]).toEqual(['inner', 0]);
  157. keyDownUp('esc');
  158. keyDownUp('arrow_down');
  159. expect(selections[3]).toEqual(['outer', 3]);
  160. expect(selections.length).toBe(4);
  161. });
  162. describe('strict mode', () => {
  163. it('should open editor and select cell (0, 0) in inner HOT', () => {
  164. var hot = handsontable({
  165. columns: [
  166. {
  167. type: 'handsontable',
  168. handsontable: {
  169. colHeaders: ['Marque', 'Country', 'Parent company'],
  170. data: getManufacturerData()
  171. },
  172. strict: true
  173. }
  174. ]
  175. });
  176. selectCell(2, 0);
  177. keyDownUp('enter');
  178. var ht = hot.getActiveEditor();
  179. var innerHot = ht.htEditor;
  180. expect(innerHot.getSelected()).toEqual([0, 0, 0, 0]);
  181. });
  182. it('should hide textarea', () => {
  183. var hot = handsontable({
  184. columns: [
  185. {
  186. type: 'handsontable',
  187. handsontable: {
  188. colHeaders: ['Marque', 'Country', 'Parent company'],
  189. data: getManufacturerData()
  190. },
  191. strict: true
  192. }
  193. ]
  194. });
  195. selectCell(2, 0);
  196. keyDownUp('enter');
  197. expect(hot.getActiveEditor().TEXTAREA.style.visibility).toEqual('hidden');
  198. });
  199. });
  200. describe('non strict mode', () => {
  201. it('should open editor and DO NOT select any cell in inner HOT', () => {
  202. var hot = handsontable({
  203. columns: [
  204. {
  205. type: 'handsontable',
  206. handsontable: {
  207. colHeaders: ['Marque', 'Country', 'Parent company'],
  208. data: getManufacturerData()
  209. }
  210. }
  211. ]
  212. });
  213. selectCell(2, 0);
  214. keyDownUp('enter');
  215. var ht = hot.getActiveEditor();
  216. var innerHot = ht.htEditor;
  217. expect(innerHot.getSelected()).toBeUndefined();
  218. });
  219. it('should show textarea', () => {
  220. var hot = handsontable({
  221. columns: [
  222. {
  223. type: 'handsontable',
  224. handsontable: {
  225. colHeaders: ['Marque', 'Country', 'Parent company'],
  226. data: getManufacturerData()
  227. }
  228. }
  229. ]
  230. });
  231. selectCell(2, 0);
  232. keyDownUp('enter');
  233. expect(hot.getActiveEditor().TEXTAREA.style.visibility).toEqual('visible');
  234. });
  235. });
  236. });