diff --git a/src/dom_components/index.js b/src/dom_components/index.js index 0914fb58f..c84172984 100644 --- a/src/dom_components/index.js +++ b/src/dom_components/index.js @@ -516,11 +516,25 @@ module.exports = () => { * @return {this} */ addType(type, methods) { + const { + model = {}, + view = {}, + isComponent, + extend, + extendView + } = methods; const compType = this.getType(type); - const typeToExtend = compType ? compType : this.getType('default'); + const extendType = this.getType(extend); + const extendViewType = this.getType(extendView); + const typeToExtend = extendType + ? extendType + : compType + ? compType + : this.getType('default'); const modelToExt = typeToExtend.model; - const viewToExt = typeToExtend.view; - const { model = {}, view = {}, isComponent } = methods; + const viewToExt = extendViewType + ? extendViewType.view + : typeToExtend.view; // If the model/view is a simple object I need to extend it if (typeof model === 'object') { diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js index 640c3638f..cfabd6b02 100644 --- a/test/specs/dom_components/index.js +++ b/test/specs/dom_components/index.js @@ -205,6 +205,47 @@ describe('DOM Components', () => { expect(comp.get('type')).toEqual(id); expect(comp.getAttributes()['test-prop']).toEqual(testProp); }); + + test('Extend component type with custom model and view', () => { + obj = em.get('DomComponents'); + const id = 'text'; + const testProp = 'testValue'; + const testText = 'Some text'; + const initialTypes = obj.getTypes().length; + obj.addType('text', { + model: { + defaults: { + testProp + } + }, + view: { + onRender() { + this.el.style.backgroundColor = 'red'; + } + } + }); + expect(obj.getTypes().length).toBe(initialTypes); + obj.addComponent(`
${testText}
`); + const comp = obj.getComponents().at(0); + expect(comp.get('type')).toBe(id); + expect(comp.get('testProp')).toBe(testProp); + expect(comp.get('editable')).toBe(true); + }); + + test('Add new component type by extending another one', () => { + obj = em.get('DomComponents'); + const id = 'test-type'; + const testProp = 'testValue'; + obj.addType(id, { + extend: 'text', + isComponent: el => el.getAttribute('test-prop') === testProp + }); + obj.addComponent(`
`); + expect(obj.getTypes()[0].id).toEqual(id); + const comp = obj.getComponents().at(0); + expect(comp.get('type')).toBe(id); + expect(comp.get('editable')).toBe(true); + }); }); ComponentModels.run();