Fix collection variables not listening correctly

packages/core/src/data_sources/model/DataVariableListenerManager.ts

@@ -6,6 +6,8 @@ import DataVariable, { DataVariableType } from './DataVariable';
 import { DynamicValue } from '../types';
 import { DataCondition, ConditionalVariableType } from './conditional_variables/DataCondition';
 import ComponentDataVariable from './ComponentDataVariable';
+import { CollectionVariableType } from './collection_component/constants';
+import CollectionVariable from './collection_component/CollectionVariable';
 
 export interface DynamicVariableListenerManagerOptions {
   em: EditorModel;
@@ -41,6 +43,13 @@ export default class DynamicVariableListenerManager {
     const type = dynamicVariable.get('type');
     let dataListeners: DataVariableListener[] = [];
     switch (type) {
+      case CollectionVariableType:
+        const collectionVariable = dynamicVariable as CollectionVariable;
+        if (collectionVariable.hasDynamicValue()) {
+          dataListeners = this.listenToDataVariable(collectionVariable.dataVariable!, em);
+        }
+
+        break;
       case DataVariableType:
         dataListeners = this.listenToDataVariable(dynamicVariable as DataVariable | ComponentDataVariable, em);
         break;

packages/core/src/data_sources/model/collection_component/CollectionComponent.ts

@@ -1,7 +1,7 @@
 import DataVariable, { DataVariableType } from './../DataVariable';
 import { isArray } from 'underscore';
 import Component, { keySymbol, keySymbolOvrd, keySymbols } from '../../../dom_components/model/Component';
-import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
+import { ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
 import DataSource from '../DataSource';
 import { ObjectAny } from '../../../common';

packages/core/src/data_sources/model/collection_component/CollectionVariable.ts

@@ -24,6 +24,10 @@ export default class CollectionVariable extends Model<CollectionVariableDefiniti
     this.updateDataVariable();
   }
 
+  hasDynamicValue() {
+    return !!this.dataVariable;
+  }
+
   getDataValue() {
     const { resolvedValue } = this.updateDataVariable();
 

packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts

@@ -1,5 +1,5 @@
 import { isSymbol } from 'underscore';
-import { Component, DataSource, DataSourceManager } from '../../../../../src';
+import { Component, DataRecord, DataSource, DataSourceManager } from '../../../../../src';
 import { DataVariableType } from '../../../../../src/data_sources/model/DataVariable';
 import {
   CollectionComponentType,
@@ -16,6 +16,8 @@ describe('Collection component', () => {
   let dsm: DataSourceManager;
   let dataSource: DataSource;
   let wrapper: Component;
+  let firstRecord: DataRecord;
+  let secondRecord: DataRecord;
 
   beforeEach(() => {
     ({ em, dsm } = setupTestEditor());
@@ -28,6 +30,9 @@ describe('Collection component', () => {
         { id: 'user3', user: 'user3', age: '16' },
       ],
     });
+
+    firstRecord = dataSource.getRecord('user1')!;
+    secondRecord = dataSource.getRecord('user2')!;
   });
 
   afterEach(() => {
@@ -85,39 +90,57 @@ describe('Collection component', () => {
   });
 
   describe('Collection variables', () => {
-    test('Properties', () => {
+    describe('Properties', () => {
-      const cmp = wrapper.components({
+      let cmp: Component;
-        type: CollectionComponentType,
+      let firstChild!: Component;
-        collectionDefinition: {
+      let secondChild!: Component;
-          block: {
+
-            type: 'default',
+      beforeEach(() => {
-            content: {
+        cmp = wrapper.components({
-              type: CollectionVariableType,
+          type: CollectionComponentType,
-              variable_type: CollectionStateVariableType.current_item,
+          collectionDefinition: {
-              path: 'user',
+            block: {
-            },
+              type: 'default',
-            custom_property: {
+              content: {
-              type: CollectionVariableType,
+                type: CollectionVariableType,
-              variable_type: CollectionStateVariableType.current_item,
+                variable_type: CollectionStateVariableType.current_item,
-              path: 'user',
+                path: 'user',
+              },
+              custom_property: {
+                type: CollectionVariableType,
+                variable_type: CollectionStateVariableType.current_item,
+                path: 'user',
+              },
             },
-          },
+            config: {
-          config: {
+              dataSource: {
-            dataSource: {
+                type: DataVariableType,
-              type: DataVariableType,
+                path: 'my_data_source_id',
-              path: 'my_data_source_id',
+              },
             },
           },
-        },
+        })[0];
-      })[0];
+
-      const firstChild = cmp.components().at(0);
+        firstChild = cmp.components().at(0);
-      const secondChild = cmp.components().at(1);
+        secondChild = cmp.components().at(1);
+      });
+
+      test('Evaluating to static value', () => {
+        expect(firstChild.get('content')).toBe('user1');
+        expect(firstChild.get('custom_property')).toBe('user1');
+
+        expect(secondChild.get('content')).toBe('user2');
+        expect(secondChild.get('custom_property')).toBe('user2');
+      });
 
-      expect(firstChild.get('content')).toBe('user1');
+      test('Updating the record', async () => {
-      expect(firstChild.get('custom_property')).toBe('user1');
+        firstRecord.set('user', 'new_user1_value');
+        expect(firstChild.get('content')).toBe('new_user1_value');
+        expect(firstChild.get('custom_property')).toBe('new_user1_value');
 
-      expect(secondChild.get('content')).toBe('user2');
+        expect(secondChild.get('content')).toBe('user2');
-      expect(secondChild.get('custom_property')).toBe('user2');
+        expect(secondChild.get('custom_property')).toBe('user2');
+      });
     });
 
     test('Attributes', () => {
@@ -332,3 +355,7 @@ describe('Collection component', () => {
     });
   });
 });
+
+function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}