From 31780c8cfa951395fb10baa02acca434fcf11a30 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 24 Jan 2021 22:33:26 +0100
Subject: [PATCH] Update symbols for correctly propagating changes to props

---
 src/dom_components/model/Component.js      |  4 ++-
 test/specs/dom_components/model/Symbols.js | 36 +++++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index f8490d0a4..78cfcb424 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -669,7 +669,9 @@ const Component = Backbone.Model.extend(Styleable).extend(
       if (!isEmptyObj(changed)) {
         const toUp = this.__getSymbToUp(opts);
         this.__logSymbol('props', toUp, { opts, changed });
-        toUp.forEach(child => child.set(changed, opts));
+        toUp.forEach(child =>
+          child.set(changed, { fromInstance: this, ...opts })
+        );
       }
     },
 
diff --git a/test/specs/dom_components/model/Symbols.js b/test/specs/dom_components/model/Symbols.js
index 7ff8fc87d..3ed639116 100644
--- a/test/specs/dom_components/model/Symbols.js
+++ b/test/specs/dom_components/model/Symbols.js
@@ -138,7 +138,7 @@ describe('Symbols', () => {
       expect(wrapper.components().length).toBe(all.length);
     });
 
-    test('All symbols contain the same amount of children', () => {
+    test('All the symbols contain the same amount of children', () => {
       all.forEach(cmp => expect(cmp.components().length).toBe(compInitChild));
     });
 
@@ -195,5 +195,39 @@ describe('Symbols', () => {
       expect(newSel2).not.toBe(newSel);
       all.forEach(cmp => expect(cmp.getSelectorsString()).toBe(newSel2));
     });
+
+    test('Updating some prop, reflects changes to all symbols', () => {
+      const propKey = 'someprop';
+      const propValue = 'somevalue';
+      all.forEach(cmp => expect(cmp.get(propKey)).toBeFalsy());
+      // Updating the symbol
+      symbol.set(propKey, propValue);
+      all.forEach(cmp => expect(cmp.get(propKey)).toBe(propValue));
+      // Updating the instance
+      const propValue2 = 'somevalue2';
+      comp.set(propKey, propValue2);
+      all.forEach(cmp => expect(cmp.get(propKey)).toBe(propValue2));
+    });
+
+    test('Updating some attribute, reflects changes to all symbols', () => {
+      const attrKey = 'data-attr';
+      const attrValue = 'somevalue';
+      all.forEach(cmp => expect(cmp.getAttributes()[attrKey]).toBeFalsy());
+      // Updating the symbol
+      symbol.addAttributes({ [attrKey]: attrValue });
+      all.forEach(cmp => expect(cmp.getAttributes()[attrKey]).toBe(attrValue));
+      // Updating the instance with another attribute
+      const attrKey2 = 'data-attr2';
+      const attrValue2 = 'somevalue2';
+      comp.addAttributes({ [attrKey2]: attrValue2 });
+      all.forEach(cmp => {
+        const attrs = cmp.getAttributes();
+        expect(attrs[attrKey]).toBe(attrValue);
+        expect(attrs[attrKey2]).toBe(attrValue2);
+      });
+      // All symbols still have the same HTML
+      const symbHtml = symbol.toHTML();
+      all.forEach(cmp => expect(cmp.toHTML()).toBe(symbHtml));
+    });
   });
 });