diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 45d63b45a..0878d99ca 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -1106,11 +1106,17 @@ const Component = Backbone.Model.extend(Styleable).extend( // If I clone an inner symbol, I have to reset it cloned.unset(keySymbols); const symbol = this.__getSymbol(); + const symbols = this.__getSymbols(); - if (symbol) { + if (!opt.symbol && (symbol || symbols)) { + cloned.unset(keySymbol); + cloned.unset(keySymbols); + } else if (symbol) { + // Contains already a reference to a symbol symbol.get(keySymbols).push(cloned); cloned.__initSymb(); } else if (opt.symbol) { + // Request to create a symbol if (this.__isSymbol()) { // Already a symbol, cloned should be an instance this.get(keySymbols).push(cloned); diff --git a/test/specs/dom_components/model/Symbols.js b/test/specs/dom_components/model/Symbols.js index 3c15114a5..da5ea6032 100644 --- a/test/specs/dom_components/model/Symbols.js +++ b/test/specs/dom_components/model/Symbols.js @@ -9,6 +9,11 @@ describe('Symbols', () => { comp.parent().append(symbol, { at: comp.index() + 1 }); return symbol; }; + const duplicate = comp => { + const cloned = comp.clone({}); + comp.parent().append(cloned, { at: comp.index() + 1 }); + return cloned; + }; const simpleComp = '
Component
'; const compMultipleNodes = `
Component 1
@@ -120,12 +125,17 @@ describe('Symbols', () => { describe('Creating 3 symbols in the wrapper', () => { let allInst, all, comp, symbol, compInitChild; - + const getInnerComp = (cmp, i = 0) => cmp.components().at(i); const getFirstInnSymbol = cmp => cmp .components() .at(0) .__getSymbol(); + const getInnSymbol = (cmp, i = 0) => + cmp + .components() + .at(i) + .__getSymbol(); beforeEach(() => { comp = wrapper.append(compMultipleNodes)[0]; @@ -245,5 +255,20 @@ describe('Symbols', () => { const symbHtml = symbol.toHTML(); all.forEach(cmp => expect(cmp.toHTML()).toBe(symbHtml)); }); + + test('Cloning a component in an instance, reflects changes to all symbols', () => { + const cloned = duplicate(comp.components().at(0)); + const clonedSymb = symbol.components().at(1); + const newLen = comp.components().length; + expect(newLen).toBe(compInitChild + 1); + expect(cloned.__getSymbol()).toBe(clonedSymb); + // All symbols have the same amount of components + all.forEach(cmp => expect(cmp.components().length).toBe(newLen)); + // All instances refer to the same symbol + allInst.forEach(cmp => expect(getInnSymbol(cmp, 1)).toBe(clonedSymb)); + // Symbol contains the reference of instances + const innerSymb = allInst.map(i => getInnerComp(i, 1)); + expect(clonedSymb.__getSymbols()).toEqual(innerSymb); + }); }); });