Fix collection component serialization tests

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

@@ -1637,11 +1637,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
       delete obj[keyCollectionsStateMap];
       delete obj[keyIsCollectionItem];
       delete obj.attributes.id;
-      obj['components'] = this.components()
+      delete obj.deepPropagate;
-        .toArray()
-        .map((cmp) => cmp.toJSON());
     }
-    delete obj.deepPropagate;
 
     if (!opts.fromUndo) {
       const symbol = obj[keySymbol];
@@ -1708,7 +1705,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @return {this}
    */
   setId(id: string, opts?: SetOptions & { idUpdate?: boolean }) {
-    this.addAttributes({ id }, opts );
+    this.addAttributes({ id }, opts);
     return this;
   }
 

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

@@ -1,4 +1,4 @@
-import { ObjectAny } from '../../common';
+import { Model, ObjectAny } from '../../common';
 import { CollectionVariableType, keyIsCollectionItem } from '../../data_sources/model/collection_component/constants';
 import { CollectionsStateMap } from '../../data_sources/model/collection_component/types';
 import EditorModel from '../../editor/model/Editor';
@@ -7,7 +7,7 @@ import { DynamicWatchersOptions } from './DynamicValueWatcher';
 import { DynamicValueWatcher } from './DynamicValueWatcher';
 import { getSymbolsToUpdate } from './SymbolUtils';
 
-export class ComponentDynamicValueWatcher {
+export class ComponentDynamicValueWatcher extends Model<Component> {
   private propertyWatcher: DynamicValueWatcher;
   private attributeWatcher: DynamicValueWatcher;
 
@@ -18,6 +18,7 @@ export class ComponentDynamicValueWatcher {
       collectionsStateMap?: CollectionsStateMap;
     },
   ) {
+    super(component, options);
     this.propertyWatcher = new DynamicValueWatcher(component, this.createPropertyUpdater(), options);
     this.attributeWatcher = new DynamicValueWatcher(component, this.createAttributeUpdater(), options);
   }
@@ -102,7 +103,6 @@ export class ComponentDynamicValueWatcher {
   }
 
   destroy() {
-    this.propertyWatcher.removeListeners();
+    return this.propertyWatcher.destroy() && this.attributeWatcher.destroy();
-    this.attributeWatcher.removeListeners();
   }
 }

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

@@ -380,7 +380,6 @@ Component> {
   }
 
   onAdd(model: Component, c?: any, opts: { temporary?: boolean } = {}) {
-    model.initialParent = this.parent;
     model.propagateDeeplyFromParent();
     const { domc, em } = this;
     const style = model.getStyle();

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

@@ -1,29 +1,33 @@
 import { DynamicValueDefinition } from './../../data_sources/types';
 import { CollectionsStateMap } from '../../data_sources/model/collection_component/types';
-import { ObjectAny } from '../../common';
+import { Model, ObjectAny } from '../../common';
 import DynamicVariableListenerManager from '../../data_sources/model/DataVariableListenerManager';
 import { evaluateDynamicValueDefinition, isDynamicValueDefinition } from '../../data_sources/model/utils';
 import EditorModel from '../../editor/model/Editor';
 import Component from './Component';
 import { CollectionVariableType } from '../../data_sources/model/collection_component/constants';
+import { ModelDestroyOptions } from 'backbone';
 
 export interface DynamicWatchersOptions {
   skipWatcherUpdates?: boolean;
   fromDataSource?: boolean;
 }
 
-export class DynamicValueWatcher {
+type UpdateFn = (component: Component | undefined, key: string, value: any) => void;
+
+export class DynamicValueWatcher extends Model<{ component: Component | undefined; updateFn: UpdateFn }> {
   private dynamicVariableListeners: { [key: string]: DynamicVariableListenerManager } = {};
   private em: EditorModel;
   private collectionsStateMap?: CollectionsStateMap;
   constructor(
     private component: Component | undefined,
-    private updateFn: (component: Component | undefined, key: string, value: any) => void,
+    private updateFn: UpdateFn,
     options: {
       em: EditorModel;
       collectionsStateMap?: CollectionsStateMap;
     },
   ) {
+    super({ component, updateFn }, options);
     this.em = options.em;
     this.collectionsStateMap = options.collectionsStateMap;
   }
@@ -167,4 +171,9 @@ export class DynamicValueWatcher {
 
     return keys;
   }
+
+  destroy(options?: ModelDestroyOptions | undefined): false | JQueryXHR {
+    this.removeListeners();
+    return super.destroy();
+  }
 }

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

@@ -545,7 +545,7 @@ describe('Collection component', () => {
     });
 
     test('Serializion with Collection Variables to JSON', () => {
-      expect(filterObjectForSnapshot(cmp.toJSON())).toMatchSnapshot(`Collection with no grandchildren`);
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with no grandchildren`);
 
       const firstChild = cmp.components().at(0);
       const newChildDefinition = {
@@ -557,7 +557,7 @@ describe('Collection component', () => {
         },
       };
       firstChild.components().at(0).components(newChildDefinition);
-      expect(filterObjectForSnapshot(cmp.toJSON())).toMatchSnapshot(`Collection with grandchildren`);
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with grandchildren`);
     });
 
     test('Saving', () => {
@@ -566,7 +566,7 @@ describe('Collection component', () => {
       const frame = page.frames[0];
       const component = frame.component.components[0];
 
-      expect(filterObjectForSnapshot(component)).toMatchSnapshot(`Collection with no grandchildren`);
+      expect(component).toMatchSnapshot(`Collection with no grandchildren`);
 
       const firstChild = cmp.components().at(0);
       const newChildDefinition = {
@@ -578,7 +578,7 @@ describe('Collection component', () => {
         },
       };
       firstChild.components().at(0).components(newChildDefinition);
-      expect(filterObjectForSnapshot(cmp.toJSON())).toMatchSnapshot(`Collection with grandchildren`);
+      expect(cmp.toJSON()).toMatchSnapshot(`Collection with grandchildren`);
     });
 
     test('Loading', () => {