From 5851eec63042725fe537d86ba250182d7994447d Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 15 Jan 2025 16:22:28 +0200 Subject: [PATCH] Fix collection component serialization tests --- .../core/src/dom_components/model/Component.ts | 7 ++----- .../model/ComponentDynamicValueWatcher.ts | 8 ++++---- .../core/src/dom_components/model/Components.ts | 1 - .../dom_components/model/DynamicValueWatcher.ts | 15 ++++++++++++--- .../collection_component/CollectionComponent.ts | 8 ++++---- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index a273b39d3..ad127eaae 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -1637,11 +1637,8 @@ export default class Component extends StyleableModel { delete obj[keyCollectionsStateMap]; delete obj[keyIsCollectionItem]; delete obj.attributes.id; - obj['components'] = this.components() - .toArray() - .map((cmp) => cmp.toJSON()); + delete obj.deepPropagate; } - delete obj.deepPropagate; if (!opts.fromUndo) { const symbol = obj[keySymbol]; @@ -1708,7 +1705,7 @@ export default class Component extends StyleableModel { * @return {this} */ setId(id: string, opts?: SetOptions & { idUpdate?: boolean }) { - this.addAttributes({ id }, opts ); + this.addAttributes({ id }, opts); return this; } diff --git a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts index 0eb08228b..384e09553 100644 --- a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts +++ b/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 { 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(); - this.attributeWatcher.removeListeners(); + return this.propertyWatcher.destroy() && this.attributeWatcher.destroy(); } } diff --git a/packages/core/src/dom_components/model/Components.ts b/packages/core/src/dom_components/model/Components.ts index 90e13c6f7..1a708ee25 100644 --- a/packages/core/src/dom_components/model/Components.ts +++ b/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(); diff --git a/packages/core/src/dom_components/model/DynamicValueWatcher.ts b/packages/core/src/dom_components/model/DynamicValueWatcher.ts index d0a9bfd61..3667ccc1e 100644 --- a/packages/core/src/dom_components/model/DynamicValueWatcher.ts +++ b/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(); + } } diff --git a/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts index 417dc871d..36756565a 100644 --- a/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts +++ b/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', () => {