tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update collection component serialization tests

collection-component
mohamedsalem401 2 years ago
parent
5bd74d577b
commit
8c5800fe43
5 changed files with 277 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      packages/core/src/data_sources/model/collection_component/CollectionComponent.ts
  2. 12
      packages/core/src/dom_components/model/Component.ts
  3. 4
      packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts
  4. 118
      packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts
  5. 191
      packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap

7
packages/core/src/data_sources/model/collection_component/CollectionComponent.ts
View File

@ -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;
}

12
packages/core/src/dom_components/model/Component.ts
View File

@ -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];

4
packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts
View File

@ -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');

118
packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts
View File

@ -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();
});
});

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

@ -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",
}
`;

Write Preview
Loading…
Cancel
Save