Update collection component serialization tests

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 { ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
+import { ComponentDefinition, ComponentOptions, ComponentProperties } from '../../../dom_components/model/types';
 import { toLowerCase } from '../../../utils/mixins';
 import DataSource from '../DataSource';
 import { ObjectAny } from '../../../common';
@@ -10,6 +10,7 @@ import { keyCollectionsStateMap } from '../../../dom_components/model/Component'
 import { CollectionComponentDefinition, CollectionDefinition, CollectionState, CollectionsStateMap } from './types';
 import { keyCollectionDefinition, keyInnerCollectionState, CollectionComponentType } from './constants';
 import DynamicVariableListenerManager from '../DataVariableListenerManager';
+import Components from '../../../dom_components/model/Components';
 
 export default class CollectionComponent extends Component {
   constructor(props: CollectionComponentDefinition, opt: ComponentOptions) {
@@ -60,13 +61,13 @@ export default class CollectionComponent extends Component {
     json[keyCollectionDefinition].block = firstChild;
 
     delete json.components;
+    delete json.droppable;
     return json;
   }
 
   private getBlockDefinition() {
     const firstChild = this.components().at(0)?.toJSON() || {};
-    const keysToRemove = ['attributes?.id', keySymbol, keySymbols, keySymbolOvrd, keyCollectionsStateMap];
+    console.log('🚀 ~ CollectionComponent ~ getBlockDefinition ~ firstChild:', firstChild);
-    keysToRemove.forEach((key) => delete firstChild[key]);
     return firstChild;
   }
 

packages/core/src/dom_components/model/Component.ts

@@ -1605,7 +1605,17 @@ export default class Component extends StyleableModel<ComponentProperties> {
     delete obj.open; // used in Layers
     delete obj._undoexc;
     delete obj.delegate;
-    delete obj[keyCollectionsStateMap];
+    if (this.get('isCollectionItem')) {
+      delete obj[keySymbol];
+      delete obj[keySymbolOvrd];
+      delete obj[keySymbols];
+      delete obj[keyCollectionsStateMap];
+      delete obj['isCollectionItem'];
+      delete obj.attributes.id;
+      obj['components'] = this.components()
+        .toArray()
+        .map((cmp) => cmp.toJSON());
+    }
 
     if (!opts.fromUndo) {
       const symbol = obj[keySymbol];

packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts

@@ -70,10 +70,10 @@ export class ComponentDynamicValueWatcher {
 
   private updateSymbolOverride() {
     if (!this.component || !this.component.get('isCollectionItem')) return;
-    
+
     const keys = this.propertyWatcher.getDynamicValuesOfType(CollectionVariableType);
     const attributesKeys = this.attributeWatcher.getDynamicValuesOfType(CollectionVariableType);
-    
+
     const combinedKeys = [keyCollectionsStateMap, ...keys];
     const haveOverridenAttributes = Object.keys(attributesKeys).length;
     if (haveOverridenAttributes) combinedKeys.push('attributes');

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

@@ -149,7 +149,7 @@ describe('Collection component', () => {
         expect(secondGrandchild.get('content')).toBe('user2');
       });
 
-      test('Updating the record', async () => {
+      test('Watching Records', async () => {
         firstRecord.set('user', 'new_user1_value');
         expect(firstChild.get('content')).toBe('new_user1_value');
         expect(firstChild.get('custom_property')).toBe('new_user1_value');
@@ -265,7 +265,7 @@ describe('Collection component', () => {
                       type: CollectionVariableType,
                       variable_type: CollectionStateVariableType.current_item,
                       path: 'user',
-                    }
+                    },
                   },
                 },
               ],
@@ -274,7 +274,7 @@ describe('Collection component', () => {
                   type: CollectionVariableType,
                   variable_type: CollectionStateVariableType.current_item,
                   path: 'user',
-                }
+                },
               },
             },
             config: {
@@ -301,7 +301,7 @@ describe('Collection component', () => {
         expect(secondGrandchild.getAttributes()['content']).toBe('user2');
       });
 
-      test('Updating the record', async () => {
+      test('Watching Records', async () => {
         firstRecord.set('user', 'new_user1_value');
         expect(firstChild.getAttributes()['content']).toBe('new_user1_value');
         expect(firstGrandchild.getAttributes()['content']).toBe('new_user1_value');
@@ -335,7 +335,7 @@ describe('Collection component', () => {
             type: CollectionVariableType,
             variable_type: CollectionStateVariableType.current_item,
             path: 'age',
-          }
+          },
         });
         expect(firstChild.getAttributes()['content']).toBe('12');
         expect(secondChild.getAttributes()['content']).toBe('14');
@@ -355,7 +355,7 @@ describe('Collection component', () => {
             type: CollectionVariableType,
             variable_type: CollectionStateVariableType.current_item,
             path: 'age',
-          }
+          },
         });
         expect(firstGrandchild.getAttributes()['content']).toBe('new_value_12');
         expect(secondGrandchild.getAttributes()['content']).toBe('new_value_14');
@@ -373,7 +373,7 @@ describe('Collection component', () => {
             // @ts-ignore
             type: DataVariableType,
             path: 'my_data_source_id.user2.user',
-          }
+          },
         });
         expect(firstChild.getAttributes()['content']).toBe('user2');
         expect(secondChild.getAttributes()['content']).toBe('user2');
@@ -389,7 +389,7 @@ describe('Collection component', () => {
             // @ts-ignore
             type: DataVariableType,
             path: 'my_data_source_id.user2.user',
-          }
+          },
         });
         expect(firstGrandchild.getAttributes()['content']).toBe('new_value');
         expect(secondGrandchild.getAttributes()['content']).toBe('new_value');
@@ -445,48 +445,65 @@ describe('Collection component', () => {
 
       expect(secondChild.getAttributes()['attribute_trait']).toBe('user2');
       expect(secondChild.get('property_trait')).toBe('user2');
+
+      firstRecord.set('user', 'new_user1_value');
+      expect(firstChild.getAttributes()['attribute_trait']).toBe('new_user1_value');
+      expect(firstChild.get('property_trait')).toBe('new_user1_value');
+
+      expect(secondChild.getAttributes()['attribute_trait']).toBe('user2');
+      expect(secondChild.get('property_trait')).toBe('user2');
     });
   });
 
-  describe('Stringfication', () => {
+  describe('Serialization', () => {
-    test('Collection with dynamic datasource', () => {
+    test('Serializion with Collection Variables to JSON', () => {
-      const cmp = wrapper.components({
+      const cmpDefinition = {
-        type: CollectionComponentType,
+        type: 'default',
-        collectionDefinition: {
+        content: {
-          collection_name: 'my_collection',
+          type: CollectionVariableType,
-          block: {
+          variable_type: CollectionStateVariableType.current_item,
-            type: 'default',
+          path: 'user',
-            content: {
+        },
+        custom_prop: {
+          type: CollectionVariableType,
+          variable_type: CollectionStateVariableType.current_index,
+          path: 'user',
+        },
+        attributes: {
+          content: {
+            type: CollectionVariableType,
+            variable_type: CollectionStateVariableType.current_item,
+            path: 'user',
+          },
+        },
+        traits: [
+          {
+            name: 'attribute_trait',
+            value: {
               type: CollectionVariableType,
               variable_type: CollectionStateVariableType.current_item,
               path: 'user',
             },
-            attributes: {
+          },
-              content: {
+          {
-                type: CollectionVariableType,
+            name: 'property_trait',
-                variable_type: CollectionStateVariableType.current_item,
+            changeProp: true,
-                path: 'user',
+            value: {
-              },
+              type: CollectionVariableType,
+              variable_type: CollectionStateVariableType.current_item,
+              path: 'user',
             },
-            traits: [
+          },
-              {
+        ],
-                name: 'attribute_trait',
+      };
-                value: {
+
-                  type: CollectionVariableType,
+      const collectionComponentDefinition = {
-                  variable_type: CollectionStateVariableType.current_item,
+        type: CollectionComponentType,
-                  path: 'user',
+        collectionDefinition: {
-                },
+          collection_name: 'my_collection',
-              },
+          block: {
-              {
+            ...cmpDefinition,
-                name: 'property_trait',
+            components: [cmpDefinition, cmpDefinition],
-                changeProp: true,
-                value: {
-                  type: CollectionVariableType,
-                  variable_type: CollectionStateVariableType.current_item,
-                  path: 'user',
-                },
-              },
-            ],
           },
           config: {
             start_index: 0,
@@ -497,10 +514,21 @@ describe('Collection component', () => {
             },
           },
         },
-      })[0];
+      };
+      const cmp = wrapper.components(collectionComponentDefinition)[0];
+      expect(filterObjectForSnapshot(cmp.toJSON())).toMatchSnapshot();
 
-      const json = cmp.toJSON();
+      const firstChild = cmp.components().at(0);
-      expect(filterObjectForSnapshot(json)).toMatchSnapshot();
+      const newChildDefinition = {
+        type: 'default',
+        content: {
+          type: CollectionVariableType,
+          variable_type: CollectionStateVariableType.current_index,
+          path: 'user',
+        },
+      };
+      firstChild.components().at(0).components(newChildDefinition);
+      expect(filterObjectForSnapshot(cmp.toJSON())).toMatchSnapshot();
     });
   });
 

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Collection component Stringfication Collection with dynamic datasource 1`] = `
+exports[`Collection component Serialization Serializion with Collection Variables to JSON 1`] = `
 {
   "collectionDefinition": {
     "block": {
@@ -15,14 +15,198 @@ exports[`Collection component Stringfication Collection with dynamic datasource
           "type": "parent-collection-variable",
           "variable_type": "current_item",
         },
-        "id": "data-variable-id",
       },
+      "components": [
+        {
+          "attributes": {
+            "attribute_trait": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+            "content": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+          },
+          "content": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "custom_prop": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_index",
+          },
+          "property_trait": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "type": "default",
+        },
+        {
+          "attributes": {
+            "attribute_trait": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+            "content": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+          },
+          "content": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "custom_prop": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_index",
+          },
+          "property_trait": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "type": "default",
+        },
+      ],
       "content": {
         "path": "user",
         "type": "parent-collection-variable",
         "variable_type": "current_item",
       },
-      "isCollectionItem": true,
+      "custom_prop": {
+        "path": "user",
+        "type": "parent-collection-variable",
+        "variable_type": "current_index",
+      },
+      "property_trait": {
+        "path": "user",
+        "type": "parent-collection-variable",
+        "variable_type": "current_item",
+      },
+      "type": "default",
+    },
+    "collection_name": "my_collection",
+    "config": {
+      "dataSource": {
+        "path": "my_data_source_id",
+        "type": "data-variable",
+      },
+      "end_index": 1,
+      "start_index": 0,
+    },
+  },
+  "type": "collection-component",
+}
+`;
+
+exports[`Collection component Serialization Serializion with Collection Variables to JSON 2`] = `
+{
+  "collectionDefinition": {
+    "block": {
+      "attributes": {
+        "attribute_trait": {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variable_type": "current_item",
+        },
+        "content": {
+          "path": "user",
+          "type": "parent-collection-variable",
+          "variable_type": "current_item",
+        },
+      },
+      "components": [
+        {
+          "attributes": {
+            "attribute_trait": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+            "content": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+          },
+          "components": [
+            {
+              "content": {
+                "path": "user",
+                "type": "parent-collection-variable",
+                "variable_type": "current_index",
+              },
+              "type": "default",
+            },
+          ],
+          "content": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "custom_prop": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_index",
+          },
+          "property_trait": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "type": "default",
+        },
+        {
+          "attributes": {
+            "attribute_trait": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+            "content": {
+              "path": "user",
+              "type": "parent-collection-variable",
+              "variable_type": "current_item",
+            },
+          },
+          "content": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "custom_prop": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_index",
+          },
+          "property_trait": {
+            "path": "user",
+            "type": "parent-collection-variable",
+            "variable_type": "current_item",
+          },
+          "type": "default",
+        },
+      ],
+      "content": {
+        "path": "user",
+        "type": "parent-collection-variable",
+        "variable_type": "current_item",
+      },
+      "custom_prop": {
+        "path": "user",
+        "type": "parent-collection-variable",
+        "variable_type": "current_index",
+      },
       "property_trait": {
         "path": "user",
         "type": "parent-collection-variable",
@@ -40,7 +224,6 @@ exports[`Collection component Stringfication Collection with dynamic datasource
       "start_index": 0,
     },
   },
-  "droppable": false,
   "type": "collection-component",
 }
 `;