24f8b7071295bbe2fa5e48943010913af206077a38291147eb266587fc92d48a6ad8cd4a774ab475becefbe9559d0d91760e148a75fc07623371c082108fe7 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. describe('cellTypes', () => {
  2. const id = 'testContainer';
  3. const {
  4. registerCellType,
  5. getCellType,
  6. } = Handsontable.cellTypes;
  7. const {
  8. registerEditor,
  9. getEditor,
  10. BaseEditor,
  11. } = Handsontable.editors;
  12. const {
  13. registerRenderer,
  14. getRenderer,
  15. } = Handsontable.renderers;
  16. const {
  17. registerValidator,
  18. getValidator,
  19. } = Handsontable.validators;
  20. beforeEach(function() {
  21. this.$container = $(`<div id="${id}"></div>`).appendTo('body');
  22. });
  23. afterEach(function() {
  24. if (this.$container) {
  25. destroy();
  26. this.$container.remove();
  27. }
  28. });
  29. it('should register custom cell type (with custom editor, renderer and validator)', async () => {
  30. class MyEditor extends BaseEditor {
  31. init() {
  32. this.TEXTAREA = document.createElement('TEXTAREA');
  33. this.TEXTAREA_PARENT = document.createElement('DIV');
  34. this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
  35. this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
  36. }
  37. getValue() {
  38. return `**${this.TEXTAREA.value}**`;
  39. }
  40. setValue(value) {
  41. this.TEXTAREA.value = value;
  42. }
  43. open() {}
  44. close() {}
  45. focus() {
  46. this.TEXTAREA.focus();
  47. }
  48. }
  49. registerCellType('myCellType', {
  50. editor: MyEditor,
  51. renderer: (hot, td, row, col, prop, value, cellProperties) => {
  52. td.innerHTML = `--${value}--`;
  53. },
  54. validator: (value, cb) => {
  55. cb(value === 10);
  56. }
  57. });
  58. const onAfterValidate = jasmine.createSpy('onAfterValidate');
  59. const hot = handsontable({
  60. data: [
  61. [1, 6, 10],
  62. ],
  63. columns: [{
  64. type: 'myCellType',
  65. }],
  66. afterValidate: onAfterValidate
  67. });
  68. hot.setDataAtCell(1, 0, 10);
  69. await sleep(100);
  70. expect(onAfterValidate).toHaveBeenCalledWith(true, 10, 1, 0, undefined, undefined);
  71. expect(getCell(1, 0).innerHTML).toBe('--10--');
  72. selectCell(0, 0);
  73. keyDown('enter');
  74. document.activeElement.value = 'hello';
  75. destroyEditor();
  76. await sleep(100);
  77. expect(onAfterValidate).toHaveBeenCalledWith(false, '**hello**', 0, 0, 'edit', undefined);
  78. expect(getCell(0, 0).innerHTML).toBe('--**hello**--');
  79. });
  80. it('should retrieve predefined cell types by its names', () => {
  81. const {editors, renderers, validators} = Handsontable;
  82. expect(getCellType('autocomplete').editor).toBe(editors.AutocompleteEditor);
  83. expect(getCellType('autocomplete').renderer).toBe(renderers.AutocompleteRenderer);
  84. expect(getCellType('autocomplete').validator).toBe(validators.AutocompleteValidator);
  85. expect(getCellType('checkbox').editor).toBe(editors.CheckboxEditor);
  86. expect(getCellType('checkbox').renderer).toBe(renderers.CheckboxRenderer);
  87. expect(getCellType('checkbox').validator).not.toBeDefined();
  88. expect(getCellType('date').editor).toBe(editors.DateEditor);
  89. expect(getCellType('date').renderer).toBe(renderers.AutocompleteRenderer);
  90. expect(getCellType('date').validator).toBe(validators.DateValidator);
  91. expect(getCellType('dropdown').editor).toBe(editors.DropdownEditor);
  92. expect(getCellType('dropdown').renderer).toBe(renderers.AutocompleteRenderer);
  93. expect(getCellType('dropdown').validator).toBe(validators.AutocompleteValidator);
  94. expect(getCellType('handsontable').editor).toBe(editors.HandsontableEditor);
  95. expect(getCellType('handsontable').renderer).toBe(renderers.AutocompleteRenderer);
  96. expect(getCellType('handsontable').validator).not.toBeDefined();
  97. expect(getCellType('numeric').editor).toBe(editors.NumericEditor);
  98. expect(getCellType('numeric').renderer).toBe(renderers.NumericRenderer);
  99. expect(getCellType('numeric').validator).toBe(validators.NumericValidator);
  100. expect(getCellType('numeric').dataType).toBe('number');
  101. expect(getCellType('password').editor).toBe(editors.PasswordEditor);
  102. expect(getCellType('password').renderer).toBe(renderers.PasswordRenderer);
  103. expect(getCellType('password').validator).not.toBeDefined();
  104. expect(getCellType('password').copyable).toBe(false);
  105. expect(getCellType('text').editor).toBe(editors.TextEditor);
  106. expect(getCellType('text').renderer).toBe(renderers.TextRenderer);
  107. expect(getCellType('text').validator).not.toBeDefined();
  108. expect(getCellType('time').editor).toBe(editors.TextEditor);
  109. expect(getCellType('time').renderer).toBe(renderers.TextRenderer);
  110. expect(getCellType('time').validator).toBe(validators.TimeValidator);
  111. });
  112. it('should register custom cell type into renderers, editors and validators', () => {
  113. class MyEditor {}
  114. function myRenderer() {}
  115. function myValidator() {}
  116. registerCellType('myCellType', {
  117. editor: MyEditor,
  118. renderer: myRenderer,
  119. validator: myValidator,
  120. });
  121. expect(getEditor('myCellType')).toBe(MyEditor);
  122. expect(getRenderer('myCellType')).toBe(myRenderer);
  123. expect(getValidator('myCellType')).toBe(myValidator);
  124. });
  125. it('should overwrite cell types under the same name', () => {
  126. class MyEditor {}
  127. function myRenderer() {}
  128. function myValidator() {}
  129. registerCellType('myCellType', {
  130. editor: MyEditor,
  131. renderer: myRenderer,
  132. validator: myValidator,
  133. });
  134. expect(getEditor('myCellType')).toBe(MyEditor);
  135. expect(getRenderer('myCellType')).toBe(myRenderer);
  136. expect(getValidator('myCellType')).toBe(myValidator);
  137. function myRenderer2() {}
  138. function myValidator2() {}
  139. registerCellType('myCellType', {
  140. renderer: myRenderer2,
  141. validator: myValidator2,
  142. });
  143. expect(getEditor('myCellType')).toBe(MyEditor);
  144. expect(getRenderer('myCellType')).toBe(myRenderer2);
  145. expect(getValidator('myCellType')).toBe(myValidator2);
  146. });
  147. it('should retrieve custom cell type by its names', () => {
  148. class MyEditor {}
  149. function myRenderer() {}
  150. function myValidator() {}
  151. registerCellType('myCellType', {
  152. editor: MyEditor,
  153. renderer: myRenderer,
  154. validator: myValidator,
  155. });
  156. expect(getCellType('myCellType').editor).toBe(MyEditor);
  157. expect(getCellType('myCellType').renderer).toBe(myRenderer);
  158. expect(getCellType('myCellType').validator).toBe(myValidator);
  159. });
  160. });