Add getInnerHTML to ComponentDataVariable

src/dom_components/model/ComponentDataVariable.ts

@@ -1,5 +1,6 @@
 import { toLowerCase } from '../../utils/mixins';
 import Component from './Component';
+import { ToHTMLOptions } from './types';
 
 export const type = 'data-variable';
 
@@ -14,6 +15,11 @@ export default class ComponentDataVariable extends Component {
     };
   }
 
+  getInnerHTML(opts: ToHTMLOptions & { keepVariables?: boolean } = {}) {
+    const { path, value } = this.attributes;
+    return opts.keepVariables ? path : this.em.DataSources.getValue(path, value);
+  }
+
   static isComponent(el: HTMLElement) {
     return toLowerCase(el.tagName) === type;
   }

test/specs/dataSources/index.ts

@@ -48,9 +48,9 @@ describe('DataSourceManager', () => {
     expect(dsm.get(dsTest.id)).toBe(ds);
   });
 
-  test('remove DataSource', () => {});
-  test('update DataSource', () => {});
-  test('update DataSource record', () => {});
+  test.todo('remove DataSource');
+  test.todo('update DataSource');
+  test.todo('update DataSource record');
 
   describe('DataSource with DataVariable component', () => {
     let fixtures: HTMLElement;
@@ -78,6 +78,19 @@ describe('DataSourceManager', () => {
       fixtures.appendChild(wrapperEl.el);
     });
 
+    describe('Export', () => {
+      test('component exports properly with default value', () => {
+        const cmpVar = addDataVariable();
+        expect(cmpVar.toHTML()).toBe('<div>default</div>');
+      });
+
+      test('component exports properly with current value', () => {
+        addDataSource();
+        const cmpVar = addDataVariable();
+        expect(cmpVar.toHTML()).toBe('<div>Name1</div>');
+      });
+    });
+
     test('component is properly initiliazed with default value', () => {
       const cmpVar = addDataVariable();
       expect(cmpVar.getEl()?.innerHTML).toBe('default');