From d9154c6aee148cdf5a18105f0f37e56beda4ac4f Mon Sep 17 00:00:00 2001
From: danstarns <danielstarns@hotmail.com>
Date: Sun, 4 Aug 2024 16:59:27 -0700
Subject: [PATCH] test: add default style var coverage

---
 src/domain_abstract/model/StyleableModel.ts |  1 -
 test/specs/data_sources/index.ts            | 48 +++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/domain_abstract/model/StyleableModel.ts b/src/domain_abstract/model/StyleableModel.ts
index 20e39e48c..59076d3bc 100644
--- a/src/domain_abstract/model/StyleableModel.ts
+++ b/src/domain_abstract/model/StyleableModel.ts
@@ -147,7 +147,6 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
 
     dataListeners.forEach(ls =>
       this.listenTo(ls.obj, ls.event, () => {
-        console.log('data variable change', ls.obj, ls.event);
         const newValue = em?.DataSources.getValue(normPath, dataVar.get('value'));
         this.updateStyleProp(styleProp, newValue);
       })
diff --git a/test/specs/data_sources/index.ts b/test/specs/data_sources/index.ts
index 886c58192..53f67474b 100644
--- a/test/specs/data_sources/index.ts
+++ b/test/specs/data_sources/index.ts
@@ -76,6 +76,54 @@ describe('DataSourceManager', () => {
       const style = cmp.getStyle();
       expect(style).toHaveProperty('color', 'red');
     });
+
+    test('component updates on style change', () => {
+      const styleDataSource: DataSourceProps = {
+        id: 'colors-data',
+        records: [{ id: 'id1', color: 'red' }],
+      };
+      dsm.add(styleDataSource);
+
+      const cmp = cmpRoot.append({
+        tagName: 'h1',
+        type: 'text',
+        content: 'Hello World',
+        style: {
+          color: {
+            type: 'data-variable-css',
+            value: 'black',
+            path: 'colors-data.id1.color',
+          },
+        },
+      })[0];
+
+      const style = cmp.getStyle();
+      expect(style).toHaveProperty('color', 'red');
+
+      const colorsDatasource = dsm.get('colors-data');
+      colorsDatasource.getRecord('id1')?.set({ color: 'blue' });
+
+      const updatedStyle = cmp.getStyle();
+      expect(updatedStyle).toHaveProperty('color', 'blue');
+    });
+
+    test("should use default value if data source doesn't exist", () => {
+      const cmp = cmpRoot.append({
+        tagName: 'h1',
+        type: 'text',
+        content: 'Hello World',
+        style: {
+          color: {
+            type: 'data-variable-css',
+            value: 'black',
+            path: 'unknown.id1.color',
+          },
+        },
+      })[0];
+
+      const style = cmp.getStyle();
+      expect(style).toHaveProperty('color', 'black');
+    });
   });
 
   test('add DataSource with records', () => {