diff --git a/src/dataSources/index.ts b/src/dataSources/index.ts
index af266ef11..86b5ba2f1 100644
--- a/src/dataSources/index.ts
+++ b/src/dataSources/index.ts
@@ -7,6 +7,7 @@ import { DataSourceProps, DataSourcesEvents } from './types';
 
 export default class DataSourceManager extends ItemManagerModule<ModuleConfig, DataSources> {
   storageKey = '';
+  events = DataSourcesEvents;
   destroy(): void {}
 
   constructor(em: EditorModel) {
diff --git a/src/dataSources/model/DataSource.ts b/src/dataSources/model/DataSource.ts
index 64f09bd8f..1600a08d9 100644
--- a/src/dataSources/model/DataSource.ts
+++ b/src/dataSources/model/DataSource.ts
@@ -21,8 +21,6 @@ export class DataSource extends Model<DataSourceProps> {
     if (!(records instanceof DataRecords)) {
       this.set({ records: new DataRecords(records!, { dataSource: this }) });
     }
-
-    console.log('DataSource.constructor', { props, records: this.records, opts, coll: this.collection });
   }
 
   get records() {
diff --git a/test/specs/dataSources/index.ts b/test/specs/dataSources/index.ts
new file mode 100644
index 000000000..01edbe475
--- /dev/null
+++ b/test/specs/dataSources/index.ts
@@ -0,0 +1,87 @@
+import Editor from '../../../src/editor/model/Editor';
+import DataSourceManager from '../../../src/dataSources';
+import { DataSourceProps } from '../../../src/dataSources/types';
+import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
+
+describe('DataSourceManager', () => {
+  let em: Editor;
+  let dsm: DataSourceManager;
+  const dsTest: DataSourceProps = {
+    id: 'ds1',
+    records: [
+      { id: 'id1', name: 'Name1' },
+      { id: 'id2', name: 'Name2' },
+      { id: 'id3', name: 'Name3' },
+    ],
+  };
+
+  beforeEach(() => {
+    em = new Editor({
+      mediaCondition: 'max-width',
+      avoidInlineStyle: true,
+    });
+    dsm = em.DataSources;
+    // em.Pages.onLoad();
+  });
+
+  afterEach(() => {
+    em.destroy();
+  });
+
+  test('DataSourceManager exists', () => {
+    expect(dsm).toBeTruthy();
+  });
+
+  test('add DataSource with records', () => {
+    const eventAdd = jest.fn();
+    em.on(dsm.events.add, eventAdd);
+    const ds = dsm.add(dsTest);
+    expect(dsm.getAll().length).toBe(1);
+    expect(eventAdd).toBeCalledTimes(1);
+    expect(ds.records.length).toBe(3);
+  });
+
+  test('get added DataSource', () => {
+    const ds = dsm.add(dsTest);
+    expect(dsm.get(dsTest.id)).toBe(ds);
+  });
+
+  test('remove DataSource', () => {});
+  test('update DataSource', () => {});
+  test('update DataSource record', () => {});
+
+  describe('DataSource with DataVariable component', () => {
+    let fixtures: HTMLElement;
+    let cmpRoot: ComponentWrapper;
+
+    beforeEach(() => {
+      document.body.innerHTML = '<div id="fixtures"></div>';
+      const { Pages, Components } = em;
+      Pages.onLoad();
+      cmpRoot = Components.getWrapper()!;
+      const View = Components.getType('wrapper')!.view;
+      const wrapperEl = new View({
+        model: cmpRoot,
+        config: { ...cmpRoot.config, em },
+      });
+      wrapperEl.render();
+      fixtures = document.body.querySelector('#fixtures')!;
+      fixtures.appendChild(wrapperEl.el);
+    });
+
+    test('component is properly initiliazed with a value', () => {
+      dsm.add(dsTest);
+      const cmpVar = cmpRoot.append({
+        type: 'data-variable',
+        value: 'default',
+        path: 'ds1.id2.name',
+      })[0];
+      expect(cmpVar.getEl()?.innerHTML).toBe('default');
+    });
+
+    test('component is properly updating on record add', () => {});
+    test('component is properly updating on record change', () => {});
+    test('component is properly updating on record remove', () => {});
+    test('component is properly updating on record reset', () => {});
+  });
+});