From 9c094dd146a4d3c2679761eabfd6cd7bf517a27c Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Mon, 6 Jan 2025 15:13:48 +0200 Subject: [PATCH] Collection tests --- .../CollectionComponent.ts | 308 ++++++++++++++++++ .../__snapshots__/CollectionComponent.ts.snap | 41 +++ 2 files changed, 349 insertions(+) create mode 100644 packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts create mode 100644 packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap 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 new file mode 100644 index 0000000000..e1be911f92 --- /dev/null +++ b/packages/core/test/specs/data_sources/model/collection_component/CollectionComponent.ts @@ -0,0 +1,308 @@ +import { Component, DataSource, DataSourceManager } from '../../../../../src'; +import { DataVariableType } from '../../../../../src/data_sources/model/DataVariable'; +import { + CollectionComponentType, + CollectionVariableType, +} from '../../../../../src/data_sources/model/collection_component/constants'; +import { CollectionStateVariableType } from '../../../../../src/data_sources/model/collection_component/types'; +import EditorModel from '../../../../../src/editor/model/Editor'; +import { filterObjectForSnapshot, setupTestEditor } from '../../../../common'; + +describe('Collection component', () => { + let em: EditorModel; + let dsm: DataSourceManager; + let dataSource: DataSource; + let wrapper: Component; + + beforeEach(() => { + ({ em, dsm } = setupTestEditor()); + wrapper = em.getWrapper()!; + dataSource = dsm.add({ + id: 'my_data_source_id', + records: [ + { id: 'user1', user: 'user1', age: '12' }, + { id: 'user2', user: 'user2', age: '14' }, + { id: 'user3', user: 'user3', age: '16' }, + ], + }); + }); + + afterEach(() => { + em.destroy(); + }); + + describe('Collection symbols', () => { + test('Basic usage', () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + }, + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + expect(cmp.components()).toHaveLength(3); + const firstChild = cmp.components().at(0); + const secondChild = cmp.components().at(1); + + expect(firstChild.get('type')).toBe('default'); + expect(secondChild.get('type')).toBe('default'); + }); + }); + + describe('Collection variables', () => { + test('Properties', () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + content: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + custom_property: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + }, + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + const firstChild = cmp.components().at(0); + const secondChild = cmp.components().at(1); + + expect(firstChild.get('content')).toBe('user1'); + expect(firstChild.get('custom_property')).toBe('user1'); + + expect(secondChild.get('content')).toBe('user2'); + expect(secondChild.get('custom_property')).toBe('user2'); + }); + + test('Attributes', () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + attributes: { + custom_attribute: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + }, + }, + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + const firstChild = cmp.components().at(0); + const secondChild = cmp.components().at(1); + + expect(firstChild.getAttributes()['custom_attribute']).toBe('user1'); + + expect(secondChild.getAttributes()['custom_attribute']).toBe('user2'); + }); + + test('Traits', () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + 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', + }, + }, + ], + }, + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + expect(cmp.components()).toHaveLength(3); + const firstChild = cmp.components().at(0); + const secondChild = cmp.components().at(1); + + expect(firstChild.getAttributes()['attribute_trait']).toBe('user1'); + expect(firstChild.get('property_trait')).toBe('user1'); + + expect(secondChild.getAttributes()['attribute_trait']).toBe('user2'); + // TODO: Fix overrding traits + // 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: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + 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', + }, + }, + { + name: 'property_trait', + changeProp: true, + value: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + }, + ], + }, + config: { + start_index: 0, + end_index: 1, + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + const json = cmp.toJSON(); + expect(filterObjectForSnapshot(json)).toMatchSnapshot(); + }); + }); + + describe('Configuration options', () => { + test('Collection with start and end indexes', () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + block: { + type: 'default', + content: { + type: CollectionVariableType, + variable_type: CollectionStateVariableType.current_item, + path: 'user', + }, + }, + config: { + start_index: 1, + end_index: 2, + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + expect(cmp.components()).toHaveLength(2); + const firstChild = cmp.components().at(0); + const secondChild = cmp.components().at(1); + + expect(firstChild.get('content')).toBe('user2'); + expect(secondChild.get('content')).toBe('user3'); + }); + }); + + describe('Diffirent Collection variable types', () => { + const stateVariableTests = [ + { variableType: CollectionStateVariableType.current_index, expectedValues: [0, 1, 2] }, + { variableType: CollectionStateVariableType.start_index, expectedValues: [0, 0, 0] }, + { variableType: CollectionStateVariableType.end_index, expectedValues: [2, 2, 2] }, + { + variableType: CollectionStateVariableType.collection_name, + expectedValues: ['my_collection', 'my_collection', 'my_collection'], + }, + { variableType: CollectionStateVariableType.total_items, expectedValues: [3, 3, 3] }, + { variableType: CollectionStateVariableType.remaining_items, expectedValues: [2, 1, 0] }, + ]; + + stateVariableTests.forEach(({ variableType, expectedValues }) => { + test(`Variable type: ${variableType}`, () => { + const cmp = wrapper.components({ + type: CollectionComponentType, + collectionDefinition: { + collection_name: 'my_collection', + block: { + type: 'default', + content: { + type: CollectionVariableType, + variable_type: variableType, + }, + }, + config: { + dataSource: { + type: DataVariableType, + path: 'my_data_source_id', + }, + }, + }, + })[0]; + + const children = cmp.components(); + expect(children).toHaveLength(3); + + children.each((child, index) => { + expect(child.get('content')).toBe(expectedValues[index]); + }); + }); + }); + }); +}); 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 new file mode 100644 index 0000000000..28b63f057a --- /dev/null +++ b/packages/core/test/specs/data_sources/model/collection_component/__snapshots__/CollectionComponent.ts.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collection component Stringfication Collection with dynamic datasource 1`] = ` +{ + "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", + }, + "id": "data-variable-id", + }, + "content": { + "path": "user", + "type": "parent-collection-variable", + "variable_type": "current_item", + }, + "property_trait": "user1", + "type": "default", + }, + "collection_name": "my_collection", + "config": { + "dataSource": { + "path": "my_data_source_id", + "type": "data-variable", + }, + "end_index": 1, + "start_index": 0, + }, + }, + "dropbbable": false, + "type": "collection-component", +} +`;