Add remove to dataSources

src/dataSources/index.ts

@@ -1,5 +1,5 @@
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
-import { AddOptions, ObjectAny } from '../common';
+import { AddOptions, ObjectAny, RemoveOptions } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { get, stringToPath } from '../utils/mixins';
 import DataRecord from './model/DataRecord';
@@ -30,6 +30,17 @@ export default class DataSourceManager extends ItemManagerModule<ModuleConfig, D
     return this.all.get(id);
   }
 
+  /**
+   * Remove data source.
+   * @param {String|[DataSource]} id Id of the data source
+   * @returns {[DataSource]} Removed data source
+   * @example
+   * const removed = dsm.remove('DS_ID');
+   */
+  remove(id: string | DataSource, opts?: RemoveOptions) {
+    return this.__remove(id, opts);
+  }
+
   getContext() {
     return this.all.reduce((acc, ds) => {
       acc[ds.id] = ds.records.reduce((accR, dr, i) => {

src/dom_components/model/Component.ts

@@ -1114,7 +1114,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * // append at specific index (eg. at the beginning)
    * someComponent.append(otherComponent, { at: 0 });
    */
-  append(components: ComponentAdd, opts: AddOptions = {}): Component[] {
+  append<T extends Component = Component>(components: ComponentAdd, opts: AddOptions = {}): T[] {
     const compArr = isArray(components) ? [...components] : [components];
     const toAppend = compArr.map(comp => {
       if (isString(comp)) {

test/specs/dataSources/index.ts

@@ -2,6 +2,7 @@ import Editor from '../../../src/editor/model/Editor';
 import DataSourceManager from '../../../src/dataSources';
 import { DataSourceProps, DataSourcesEvents } from '../../../src/dataSources/types';
 import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
+import ComponentDataVariable from '../../../src/dom_components/model/ComponentDataVariable';
 
 describe('DataSourceManager', () => {
   let em: Editor;
@@ -53,6 +54,13 @@ describe('DataSourceManager', () => {
     let fixtures: HTMLElement;
     let cmpRoot: ComponentWrapper;
 
+    const addDataVariable = (path = 'ds1.id1.name') =>
+      cmpRoot.append<ComponentDataVariable>({
+        type: 'data-variable',
+        value: 'default',
+        path,
+      })[0];
+
     beforeEach(() => {
       document.body.innerHTML = '<div id="fixtures"></div>';
       const { Pages, Components } = em;
@@ -69,31 +77,19 @@ describe('DataSourceManager', () => {
     });
 
     test('component is properly initiliazed with default value', () => {
-      const cmpVar = cmpRoot.append({
+      const cmpVar = addDataVariable();
-        type: 'data-variable',
-        value: 'default',
-        path: 'ds1.id2.name',
-      })[0];
       expect(cmpVar.getEl()?.innerHTML).toBe('default');
     });
 
     test('component is properly initiliazed with current value', () => {
       dsm.add(dsTest);
-      const cmpVar = cmpRoot.append({
+      const cmpVar = addDataVariable();
-        type: 'data-variable',
+      expect(cmpVar.getEl()?.innerHTML).toBe('Name1');
-        value: 'default',
-        path: 'ds1.id2.name',
-      })[0];
-      expect(cmpVar.getEl()?.innerHTML).toBe('Name2');
     });
 
     test('component is properly updating on record add', () => {
       const ds = dsm.add(dsTest);
-      const cmpVar = cmpRoot.append({
+      const cmpVar = addDataVariable('ds1[id4]name');
-        type: 'data-variable',
-        value: 'default',
-        path: 'ds1[id4]name',
-      })[0];
       const eventFn = jest.fn();
       em.on(`${DataSourcesEvents.path}:ds1.id4.name`, eventFn);
       const newRecord = ds.addRecord({ id: 'id4', name: 'Name4' });
@@ -104,16 +100,35 @@ describe('DataSourceManager', () => {
     });
 
     test('component is properly updating on data source add', () => {
-      const cmpVar = cmpRoot.append({
+      const eventFn = jest.fn();
-        type: 'data-variable',
+      em.on(DataSourcesEvents.add, eventFn);
-        value: 'default',
+      const cmpVar = addDataVariable();
-        path: 'ds1.id1.name',
-      })[0];
       const ds = dsm.add(dsTest);
+      expect(eventFn).toBeCalledTimes(1);
+      expect(eventFn).toBeCalledWith(ds, expect.any(Object));
       expect(cmpVar.getEl()?.innerHTML).toBe('Name1');
     });
 
-    test('component is properly updating on data source reset', () => {});
+    test('component is properly updating on data source reset', () => {
+      dsm.add(dsTest);
+      const cmpVar = addDataVariable();
+      const el = cmpVar.getEl()!;
+      expect(el.innerHTML).toBe('Name1');
+      dsm.all.reset();
+      expect(el.innerHTML).toBe('default');
+    });
+
+    test('component is properly updating on data source remove', () => {
+      const eventFn = jest.fn();
+      em.on(DataSourcesEvents.remove, eventFn);
+      const ds = dsm.add(dsTest);
+      const cmpVar = addDataVariable();
+      const el = cmpVar.getEl()!;
+      dsm.remove('ds1');
+      expect(eventFn).toBeCalledTimes(1);
+      expect(eventFn).toBeCalledWith(ds, expect.any(Object));
+      expect(el.innerHTML).toBe('default');
+    });
 
     test('component is properly updating on record change', () => {});