From 8c5800fe4371579c0571821028e54fcdf26f943c Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Fri, 10 Jan 2025 10:31:24 +0200 Subject: [PATCH] Update collection component serialization tests --- .../CollectionComponent.ts | 7 +- .../src/dom_components/model/Component.ts | 12 +- .../model/ComponentDynamicValueWatcher.ts | 4 +- .../CollectionComponent.ts | 118 ++++++----- .../__snapshots__/CollectionComponent.ts.snap | 191 +++++++++++++++++- 5 files changed, 277 insertions(+), 55 deletions(-) diff --git a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts b/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts index 5001d3270..a51bed916 100644 --- a/packages/core/src/data_sources/model/collection_component/CollectionComponent.ts +++ b/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]; - keysToRemove.forEach((key) => delete firstChild[key]); + console.log('🚀 ~ CollectionComponent ~ getBlockDefinition ~ firstChild:', firstChild); return firstChild; } diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index 2a10cc718..8a2f02da4 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -1605,7 +1605,17 @@ export default class Component extends StyleableModel { 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]; diff --git a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts index 016f521bd..c9d04821e 100644 --- a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts +++ b/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'); 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 4f831d122..c0a69adbf 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 @@ -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', () => { - test('Collection with dynamic datasource', () => { - const cmp = wrapper.components({ - type: CollectionComponentType, - collectionDefinition: { - collection_name: 'my_collection', - block: { - type: 'default', - content: { + describe('Serialization', () => { + test('Serializion with Collection Variables to JSON', () => { + const cmpDefinition = { + type: 'default', + content: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + 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, - variable_type: CollectionStateVariableType.current_item, - path: 'user', - }, + }, + { + name: 'property_trait', + changeProp: true, + value: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', }, - traits: [ - { - name: 'attribute_trait', - value: { - type: CollectionVariableType, - variable_type: CollectionStateVariableType.current_item, - path: 'user', - }, - }, - { - name: 'property_trait', - changeProp: true, - value: { - type: CollectionVariableType, - variable_type: CollectionStateVariableType.current_item, - path: 'user', - }, - }, - ], + }, + ], + }; + + const collectionComponentDefinition = { + type: CollectionComponentType, + collectionDefinition: { + collection_name: 'my_collection', + block: { + ...cmpDefinition, + components: [cmpDefinition, cmpDefinition], }, 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(); - expect(filterObjectForSnapshot(json)).toMatchSnapshot(); + const firstChild = cmp.components().at(0); + 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(); }); }); diff --git a/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap b/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap index f0f2cc993..5cf72c7e3 100644 --- a/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap +++ b/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", } `;