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);
+ });
});
});