Add tests fpr serializing dynamic props

packages/core/test/specs/data_sources/__snapshots__/serialization.ts.snap

@@ -51,6 +51,60 @@ exports[`DataSource Serialization .getProjectData ComponentDataVariable 1`] = `
 }
 `;
 
+exports[`DataSource Serialization .getProjectData Dynamic Props 1`] = `
+{
+  "assets": [],
+  "dataSources": [],
+  "pages": [
+    {
+      "frames": [
+        {
+          "component": {
+            "components": [
+              {
+                "content": {
+                  "defaultValue": "default",
+                  "path": "test-input.id1.value",
+                  "type": "data-variable",
+                },
+                "customProp": {
+                  "defaultValue": "default",
+                  "path": "test-input.id1.value",
+                  "type": "data-variable",
+                },
+                "tagName": "input",
+                "void": true,
+              },
+            ],
+            "docEl": {
+              "tagName": "html",
+            },
+            "head": {
+              "type": "head",
+            },
+            "stylable": [
+              "background",
+              "background-color",
+              "background-image",
+              "background-repeat",
+              "background-attachment",
+              "background-position",
+              "background-size",
+            ],
+            "type": "wrapper",
+          },
+          "id": "data-variable-id",
+        },
+      ],
+      "id": "data-variable-id",
+      "type": "main",
+    },
+  ],
+  "styles": [],
+  "symbols": [],
+}
+`;
+
 exports[`DataSource Serialization .getProjectData StyleDataVariable 1`] = `
 {
   "assets": [],

packages/core/test/specs/data_sources/serialization.ts

@@ -29,6 +29,11 @@ describe('DataSource Serialization', () => {
     records: [{ id: 'id1', value: 'test-value' }],
     skipFromStorage: true,
   };
+  const propsDataSource = {
+    id: 'test-input',
+    records: [{ id: 'id1', value: 'test-value' }],
+    skipFromStorage: true,
+  };
 
   beforeEach(() => {
     ({ editor, em, dsm, cmpRoot } = setupTestEditor());
@@ -63,6 +68,30 @@ describe('DataSource Serialization', () => {
   });
 
   describe('.getProjectData', () => {
+    test('Dynamic Props', () => {
+      const dataVariable = {
+        type: DataVariableType,
+        defaultValue: 'default',
+        path: `${propsDataSource.id}.id1.value`,
+      };
+
+      cmpRoot.append({
+        tagName: 'input',
+        content: dataVariable,
+        customProp: dataVariable
+      })[0];
+
+      const projectData = editor.getProjectData();
+      const page = projectData.pages[0];
+      const frame = page.frames[0];
+      const component = frame.component.components[0];
+      expect(component['content']).toEqual(dataVariable);
+      expect(component['customProp']).toEqual(dataVariable);
+
+      const snapshot = filterObjectForSnapshot(projectData);
+      expect(snapshot).toMatchSnapshot(``);
+    });
+
     test('ComponentDataVariable', () => {
       const dataVariable = {
         type: DataVariableType,
@@ -159,6 +188,65 @@ describe('DataSource Serialization', () => {
   });
 
   describe('.loadProjectData', () => {
+    test('Dynamic Props', () => {
+      const dataVariable = {
+        type: DataVariableType,
+        defaultValue: 'default',
+        path: `${propsDataSource.id}.id1.value`,
+      };
+
+      const componentProjectData: ProjectData = {
+        assets: [],
+        pages: [
+          {
+            frames: [
+              {
+                component: {
+                  components: [
+                    {
+                      content: dataVariable,
+                      customProp: dataVariable,
+                      tagName: 'input',
+                      void: true,
+                    },
+                  ],
+                  docEl: {
+                    tagName: 'html',
+                  },
+                  head: {
+                    type: 'head',
+                  },
+                  stylable: [
+                    'background',
+                    'background-color',
+                    'background-image',
+                    'background-repeat',
+                    'background-attachment',
+                    'background-position',
+                    'background-size',
+                  ],
+                  type: 'wrapper',
+                },
+                id: 'frameid',
+              },
+            ],
+            id: 'pageid',
+            type: 'main',
+          },
+        ],
+        styles: [],
+        symbols: [],
+        dataSources: [propsDataSource],
+      };
+
+      editor.loadProjectData(componentProjectData);
+
+      const components = editor.getComponents();
+      const component = components.models[0];
+      expect(component.get('content')).toEqual('test-value');
+      expect(component.get('customProp')).toEqual('test-value');
+    });
+
     test('ComponentDataVariable', () => {
       const componentProjectData: ProjectData = {
         assets: [],