From 6f52e5070683f1622c6d367c7ba4f3ecc5fe0bfc Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 1 Mar 2024 08:25:27 +0400
Subject: [PATCH] Update data variable listener

---
 src/abstract/Module.ts                          |  2 +-
 .../view/ComponentDataVariableView.ts           |  5 ++++-
 test/specs/dataSources/index.ts                 | 17 +++++++++++++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/abstract/Module.ts b/src/abstract/Module.ts
index 07fd61883..6f18769b0 100644
--- a/src/abstract/Module.ts
+++ b/src/abstract/Module.ts
@@ -125,7 +125,7 @@ export abstract class ItemManagerModule<
   TCollection extends Collection = Collection
 > extends Module<TConf> {
   cls: any[] = [];
-  protected all: TCollection;
+  all: TCollection;
   view?: View;
 
   constructor(
diff --git a/src/dom_components/view/ComponentDataVariableView.ts b/src/dom_components/view/ComponentDataVariableView.ts
index 54c85a547..8c5503790 100644
--- a/src/dom_components/view/ComponentDataVariableView.ts
+++ b/src/dom_components/view/ComponentDataVariableView.ts
@@ -13,13 +13,16 @@ export default class ComponentDataVariableView extends ComponentView<ComponentDa
     const { model, em } = this;
     const { path } = model.attributes;
     const normPath = stringToPath(path || '').join('.');
-    const [ds, dr] = em.DataSources.fromPath(path);
+    const { DataSources } = em;
+    const [ds, dr] = DataSources.fromPath(path);
 
     if (ds) {
+      this.listenTo(ds.records, 'add remove reset', this.postRender);
       this.listenTo(ds.records, 'add remove reset', this.postRender);
       dr && this.listenTo(dr, 'change', this.postRender);
     }
 
+    this.listenTo(DataSources.all, 'add remove reset', this.postRender);
     this.listenTo(em, `${DataSourcesEvents.path}:${normPath}`, this.postRender);
   }
 
diff --git a/test/specs/dataSources/index.ts b/test/specs/dataSources/index.ts
index 58c22eee4..aa0e17197 100644
--- a/test/specs/dataSources/index.ts
+++ b/test/specs/dataSources/index.ts
@@ -1,6 +1,6 @@
 import Editor from '../../../src/editor/model/Editor';
 import DataSourceManager from '../../../src/dataSources';
-import { DataSourceProps } from '../../../src/dataSources/types';
+import { DataSourceProps, DataSourcesEvents } from '../../../src/dataSources/types';
 import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
 
 describe('DataSourceManager', () => {
@@ -94,13 +94,24 @@ describe('DataSourceManager', () => {
         value: 'default',
         path: 'ds1[id4]name',
       })[0];
+      const eventFn = jest.fn();
+      em.on(`${DataSourcesEvents.path}:ds1.id4.name`, eventFn);
       const newRecord = ds.addRecord({ id: 'id4', name: 'Name4' });
       expect(cmpVar.getEl()?.innerHTML).toBe('Name4');
       newRecord.set({ name: 'up' });
       expect(cmpVar.getEl()?.innerHTML).toBe('up');
+      expect(eventFn).toBeCalledTimes(1);
     });
 
-    test('component is properly updating on data source add', () => {});
+    test('component is properly updating on data source add', () => {
+      const cmpVar = cmpRoot.append({
+        type: 'data-variable',
+        value: 'default',
+        path: 'ds1.id1.name',
+      })[0];
+      const ds = dsm.add(dsTest);
+      expect(cmpVar.getEl()?.innerHTML).toBe('Name1');
+    });
 
     test('component is properly updating on data source reset', () => {});
 
@@ -109,5 +120,7 @@ describe('DataSourceManager', () => {
     test('component is properly updating on record remove', () => {});
 
     test('component is properly updating on record reset', () => {});
+
+    test('component is properly updating on its prop changes', () => {});
   });
 });