Add possibility to clone components inside symbols

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

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 = '<div data-a="b">Component</div>';
   const compMultipleNodes = `<div data-v="a">
     <div data-v="b">Component 1</div>
@@ -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);
+    });
   });
 });