selectEditor.spec.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. describe('SelectEditor', () => {
  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. it('should display select', () => {
  13. handsontable({
  14. columns: [
  15. {
  16. editor: 'select'
  17. }
  18. ]
  19. });
  20. selectCell(0, 0);
  21. var editor = $('.htSelectEditor');
  22. expect(editor.length).toEqual(1);
  23. expect(editor.is('select')).toBe(true);
  24. expect(editor.is(':visible')).toBe(false);
  25. keyDown('enter');
  26. expect(editor.is(':visible')).toBe(true);
  27. expect(editor.offset()).toEqual($(getCell(0, 0)).offset());
  28. });
  29. it('should display and correctly reposition select editor while scrolling', (done) => {
  30. var hot = handsontable({
  31. width: 200,
  32. height: 200,
  33. data: Handsontable.helper.createSpreadsheetData(100, 100),
  34. columns: [
  35. {
  36. editor: 'select'
  37. }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {editor: 'select'}
  38. ]
  39. });
  40. var mainHolder = hot.view.wt.wtTable.holder;
  41. selectCell(0, 0);
  42. keyDown('enter');
  43. keyUp('enter');
  44. mainHolder.scrollTop = 10;
  45. mainHolder.scrollLeft = 20;
  46. var editor = $('.htSelectEditor');
  47. setTimeout(() => {
  48. expect(editor.css('top')).toEqual('-10px');
  49. expect(editor.css('left')).toEqual('-20px');
  50. done();
  51. }, 200);
  52. });
  53. it('should populate select with given options (array)', () => {
  54. var options = [
  55. 'Misubishi', 'Chevrolet', 'Lamborgini'
  56. ];
  57. handsontable({
  58. columns: [
  59. {
  60. editor: 'select',
  61. selectOptions: options
  62. }
  63. ]
  64. });
  65. selectCell(0, 0);
  66. var editor = $('.htSelectEditor');
  67. keyDown('enter');
  68. var $options = editor.find('option');
  69. expect($options.length).toEqual(options.length);
  70. expect($options.eq(0).val()).toMatch(options[0]);
  71. expect($options.eq(0).html()).toMatch(options[0]);
  72. expect($options.eq(1).val()).toMatch(options[1]);
  73. expect($options.eq(1).html()).toMatch(options[1]);
  74. expect($options.eq(2).val()).toMatch(options[2]);
  75. expect($options.eq(2).html()).toMatch(options[2]);
  76. });
  77. it('should populate select with given options (object)', () => {
  78. var options = {
  79. mit: 'Misubishi',
  80. che: 'Chevrolet',
  81. lam: 'Lamborgini'
  82. };
  83. handsontable({
  84. columns: [
  85. {
  86. editor: 'select',
  87. selectOptions: options
  88. }
  89. ]
  90. });
  91. selectCell(0, 0);
  92. var editor = $('.htSelectEditor');
  93. keyDown('enter');
  94. var $options = editor.find('option');
  95. expect($options.eq(0).val()).toMatch('mit');
  96. expect($options.eq(0).html()).toMatch(options.mit);
  97. expect($options.eq(1).val()).toMatch('che');
  98. expect($options.eq(1).html()).toMatch(options.che);
  99. expect($options.eq(2).val()).toMatch('lam');
  100. expect($options.eq(2).html()).toMatch(options.lam);
  101. });
  102. it('should populate select with given options (function:array)', () => {
  103. var options = function() {
  104. return [
  105. 'Misubishi', 'Chevrolet', 'Lamborgini'
  106. ];
  107. };
  108. handsontable({
  109. columns: [
  110. {
  111. editor: 'select',
  112. selectOptions: options
  113. }
  114. ]
  115. });
  116. selectCell(0, 0);
  117. var editor = $('.htSelectEditor');
  118. keyDown('enter');
  119. var $options = editor.find('option');
  120. expect($options.length).toEqual(options().length);
  121. expect($options.eq(0).val()).toMatch(options()[0]);
  122. expect($options.eq(0).html()).toMatch(options()[0]);
  123. expect($options.eq(1).val()).toMatch(options()[1]);
  124. expect($options.eq(1).html()).toMatch(options()[1]);
  125. expect($options.eq(2).val()).toMatch(options()[2]);
  126. expect($options.eq(2).html()).toMatch(options()[2]);
  127. });
  128. it('should populate select with given options (function:object)', () => {
  129. var options = function() {
  130. return {
  131. mit: 'Misubishi',
  132. che: 'Chevrolet',
  133. lam: 'Lamborgini'
  134. };
  135. };
  136. handsontable({
  137. columns: [
  138. {
  139. editor: 'select',
  140. selectOptions: options
  141. }
  142. ]
  143. });
  144. selectCell(0, 0);
  145. var editor = $('.htSelectEditor');
  146. keyDown('enter');
  147. var $options = editor.find('option');
  148. expect($options.eq(0).val()).toMatch('mit');
  149. expect($options.eq(0).html()).toMatch(options().mit);
  150. expect($options.eq(1).val()).toMatch('che');
  151. expect($options.eq(1).html()).toMatch(options().che);
  152. expect($options.eq(2).val()).toMatch('lam');
  153. expect($options.eq(2).html()).toMatch(options().lam);
  154. });
  155. it('should mark option matching cell value as selected', () => {
  156. var options = [
  157. 'Misubishi', 'Chevrolet', 'Lamborgini'
  158. ];
  159. handsontable({
  160. data: [
  161. ['Misubishi'],
  162. ['Lamborgini'],
  163. ['Chevrolet']
  164. ],
  165. columns: [
  166. {
  167. editor: 'select',
  168. selectOptions: options
  169. }
  170. ]
  171. });
  172. selectCell(0, 0);
  173. var editor = $('.htSelectEditor');
  174. keyDown('enter');
  175. expect(editor.find('option:selected').text()).toEqual(getDataAtCell(0, 0));
  176. keyDown('enter');
  177. selectCell(1, 0);
  178. keyDown('enter');
  179. expect(editor.find('option:selected').text()).toEqual(getDataAtCell(1, 0));
  180. keyDown('enter');
  181. selectCell(2, 0);
  182. keyDown('enter');
  183. expect(editor.find('option:selected').text()).toEqual(getDataAtCell(2, 0));
  184. keyDown('enter');
  185. });
  186. it('should not prevent the default event action when select is clicked', () => {
  187. var options = function() {
  188. return [
  189. 'Misubishi', 'Chevrolet', 'Lamborgini'
  190. ];
  191. };
  192. handsontable({
  193. columns: [
  194. {
  195. editor: 'select',
  196. selectOptions: options
  197. }
  198. ]
  199. });
  200. selectCell(0, 0);
  201. var editor = $('.htSelectEditor');
  202. keyDown('enter');
  203. var select = editor.find('select');
  204. var selectMouseDownListener = jasmine.createSpy('selectMouseDownListener');
  205. $('body').on('mousedown', selectMouseDownListener);
  206. editor.mousedown();
  207. expect(selectMouseDownListener.calls.count()).toEqual(1);
  208. var event = selectMouseDownListener.calls.argsFor(0)[0];
  209. expect(event).toBeDefined();
  210. expect(event.isDefaultPrevented()).toBe(false);
  211. });
  212. });