| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- describe('cellTypes', () => {
- const id = 'testContainer';
- const {
- registerCellType,
- getCellType,
- } = Handsontable.cellTypes;
- const {
- registerEditor,
- getEditor,
- BaseEditor,
- } = Handsontable.editors;
- const {
- registerRenderer,
- getRenderer,
- } = Handsontable.renderers;
- const {
- registerValidator,
- getValidator,
- } = Handsontable.validators;
- beforeEach(function() {
- this.$container = $(`<div id="${id}"></div>`).appendTo('body');
- });
- afterEach(function() {
- if (this.$container) {
- destroy();
- this.$container.remove();
- }
- });
- it('should register custom cell type (with custom editor, renderer and validator)', async () => {
- class MyEditor extends BaseEditor {
- init() {
- this.TEXTAREA = document.createElement('TEXTAREA');
- this.TEXTAREA_PARENT = document.createElement('DIV');
- this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
- this.instance.rootElement.appendChild(this.TEXTAREA_PARENT);
- }
- getValue() {
- return `**${this.TEXTAREA.value}**`;
- }
- setValue(value) {
- this.TEXTAREA.value = value;
- }
- open() {}
- close() {}
- focus() {
- this.TEXTAREA.focus();
- }
- }
- registerCellType('myCellType', {
- editor: MyEditor,
- renderer: (hot, td, row, col, prop, value, cellProperties) => {
- td.innerHTML = `--${value}--`;
- },
- validator: (value, cb) => {
- cb(value === 10);
- }
- });
- const onAfterValidate = jasmine.createSpy('onAfterValidate');
- const hot = handsontable({
- data: [
- [1, 6, 10],
- ],
- columns: [{
- type: 'myCellType',
- }],
- afterValidate: onAfterValidate
- });
- hot.setDataAtCell(1, 0, 10);
- await sleep(100);
- expect(onAfterValidate).toHaveBeenCalledWith(true, 10, 1, 0, undefined, undefined);
- expect(getCell(1, 0).innerHTML).toBe('--10--');
- selectCell(0, 0);
- keyDown('enter');
- document.activeElement.value = 'hello';
- destroyEditor();
- await sleep(100);
- expect(onAfterValidate).toHaveBeenCalledWith(false, '**hello**', 0, 0, 'edit', undefined);
- expect(getCell(0, 0).innerHTML).toBe('--**hello**--');
- });
- it('should retrieve predefined cell types by its names', () => {
- const {editors, renderers, validators} = Handsontable;
- expect(getCellType('autocomplete').editor).toBe(editors.AutocompleteEditor);
- expect(getCellType('autocomplete').renderer).toBe(renderers.AutocompleteRenderer);
- expect(getCellType('autocomplete').validator).toBe(validators.AutocompleteValidator);
- expect(getCellType('checkbox').editor).toBe(editors.CheckboxEditor);
- expect(getCellType('checkbox').renderer).toBe(renderers.CheckboxRenderer);
- expect(getCellType('checkbox').validator).not.toBeDefined();
- expect(getCellType('date').editor).toBe(editors.DateEditor);
- expect(getCellType('date').renderer).toBe(renderers.AutocompleteRenderer);
- expect(getCellType('date').validator).toBe(validators.DateValidator);
- expect(getCellType('dropdown').editor).toBe(editors.DropdownEditor);
- expect(getCellType('dropdown').renderer).toBe(renderers.AutocompleteRenderer);
- expect(getCellType('dropdown').validator).toBe(validators.AutocompleteValidator);
- expect(getCellType('handsontable').editor).toBe(editors.HandsontableEditor);
- expect(getCellType('handsontable').renderer).toBe(renderers.AutocompleteRenderer);
- expect(getCellType('handsontable').validator).not.toBeDefined();
- expect(getCellType('numeric').editor).toBe(editors.NumericEditor);
- expect(getCellType('numeric').renderer).toBe(renderers.NumericRenderer);
- expect(getCellType('numeric').validator).toBe(validators.NumericValidator);
- expect(getCellType('numeric').dataType).toBe('number');
- expect(getCellType('password').editor).toBe(editors.PasswordEditor);
- expect(getCellType('password').renderer).toBe(renderers.PasswordRenderer);
- expect(getCellType('password').validator).not.toBeDefined();
- expect(getCellType('password').copyable).toBe(false);
- expect(getCellType('text').editor).toBe(editors.TextEditor);
- expect(getCellType('text').renderer).toBe(renderers.TextRenderer);
- expect(getCellType('text').validator).not.toBeDefined();
- expect(getCellType('time').editor).toBe(editors.TextEditor);
- expect(getCellType('time').renderer).toBe(renderers.TextRenderer);
- expect(getCellType('time').validator).toBe(validators.TimeValidator);
- });
- it('should register custom cell type into renderers, editors and validators', () => {
- class MyEditor {}
- function myRenderer() {}
- function myValidator() {}
- registerCellType('myCellType', {
- editor: MyEditor,
- renderer: myRenderer,
- validator: myValidator,
- });
- expect(getEditor('myCellType')).toBe(MyEditor);
- expect(getRenderer('myCellType')).toBe(myRenderer);
- expect(getValidator('myCellType')).toBe(myValidator);
- });
- it('should overwrite cell types under the same name', () => {
- class MyEditor {}
- function myRenderer() {}
- function myValidator() {}
- registerCellType('myCellType', {
- editor: MyEditor,
- renderer: myRenderer,
- validator: myValidator,
- });
- expect(getEditor('myCellType')).toBe(MyEditor);
- expect(getRenderer('myCellType')).toBe(myRenderer);
- expect(getValidator('myCellType')).toBe(myValidator);
- function myRenderer2() {}
- function myValidator2() {}
- registerCellType('myCellType', {
- renderer: myRenderer2,
- validator: myValidator2,
- });
- expect(getEditor('myCellType')).toBe(MyEditor);
- expect(getRenderer('myCellType')).toBe(myRenderer2);
- expect(getValidator('myCellType')).toBe(myValidator2);
- });
- it('should retrieve custom cell type by its names', () => {
- class MyEditor {}
- function myRenderer() {}
- function myValidator() {}
- registerCellType('myCellType', {
- editor: MyEditor,
- renderer: myRenderer,
- validator: myValidator,
- });
- expect(getCellType('myCellType').editor).toBe(MyEditor);
- expect(getCellType('myCellType').renderer).toBe(myRenderer);
- expect(getCellType('myCellType').validator).toBe(myValidator);
- });
- });
|