Improvements to device api + tests

src/common/module.js

@@ -0,0 +1,38 @@
+import { createId } from 'utils/mixins';
+
+export default {
+  getConfig(name) {
+    const res = this.config || {};
+    return name ? res[name] : res;
+  },
+
+  getAll() {
+    return this.all || [];
+  },
+
+  getAllMap() {
+    return this.getAll().reduce((acc, i) => {
+      acc[i.get('id')] = i;
+      return acc;
+    }, {});
+  },
+
+  __catchAllEvent(event, model, coll, opts) {
+    const { em, events } = this;
+    const options = opts || coll;
+    em && events.all && em.trigger(events.all, { event, model, options });
+  },
+
+  _createId(len = 16) {
+    const all = this.getAll();
+    const ln = all.length + len;
+    const allMap = this.getAllMap();
+    let id;
+
+    do {
+      id = createId(ln);
+    } while (allMap[id]);
+
+    return id;
+  }
+};

src/device_manager/index.js

@@ -30,6 +30,7 @@
  * @module Devices
  */
 import { isString } from 'underscore';
+import Module from 'common/module';
 import defaults from './config/config';
 import Device from './model/Device';
 import Devices from './model/Devices';
@@ -51,6 +52,8 @@ export default () => {
   let view;
 
   return {
+    ...Module,
+
     name: 'DeviceManager',
 
     Device,
@@ -60,12 +63,12 @@ export default () => {
     events: {
       all: evAll,
       select: evSelect,
-      selectBefore: evSelectBefore,
+      // selectBefore: evSelectBefore,
       update: evUpdate,
       add: evAdd,
-      addBefore: evAddBefore,
-      remove: evRemove,
-      removeBefore: evRemoveBefore
+      // addBefore: evAddBefore,
+      remove: evRemove
+      // removeBefore: evRemoveBefore
     },
 
     init(config = {}) {
@@ -76,7 +79,8 @@ export default () => {
       devices = new Devices();
       (c.devices || []).forEach(dv => this.add(dv.id || dv.name, dv.width, dv));
       devices.on('add', (m, c, o) => em.trigger(evAdd, m, o));
-      this.devices = devices;
+      devices.on('all', this.__catchAllEvent, this);
+      this.all = devices;
 
       return this;
     },
@@ -118,20 +122,47 @@ export default () => {
         result = props;
       }
 
+      if (!result.id) {
+        result.id = result.name || this._createId();
+      }
+
       return devices.add(result, opts);
     },
 
     /**
-     * Return device by name
-     * @param  {String} name Name of the device
-     * @returns {[Device]}
+     * Return device by ID
+     * @param  {String} id ID of the device
+     * @returns {[Device]|null}
      * @example
      * const device = deviceManager.get('Tablet');
      * console.log(JSON.stringify(device));
      * // {name: 'Tablet', width: '900px'}
      */
-    get(name) {
-      return devices.get(name);
+    get(id) {
+      // Support old API
+      const byName = this.getAll().filter(d => d.get('name') === id)[0];
+      return byName || devices.get(id) || null;
+    },
+
+    /**
+     * Remove devie
+     * @param {String|[Device]} page Page or page id
+     * @returns {[Page]}
+     * @example
+     * const removedPage = pageManager.remove('page-id');
+     * // or by passing the page
+     * const somePage = pageManager.get('page-id');
+     * pageManager.remove(somePage);
+     */
+    remove(page, opts = {}) {
+      // const { em } = this;
+      // const pg = isString(page) ? this.get(page) : page;
+      // const rm = () => {
+      //   pg && this.pages.remove(pg, opts);
+      //   return pg;
+      // };
+      // !opts.silent && em.trigger(evPageRemoveBefore, pg, rm, opts);
+      // return !opts.abort && rm();
     },
 
     /**
@@ -160,8 +191,8 @@ export default () => {
     },
 
     destroy() {
-      devices.reset();
       devices.stopListening();
+      devices.reset();
       view && view.remove();
       [devices, view].forEach(i => (i = null));
       c = {};

test/specs/device_manager/index.js

@@ -6,6 +6,7 @@ describe('DeviceManager', () => {
     let testNameDevice;
     let testWidthDevice;
     let editor;
+    let em;
 
     beforeEach(() => {
       testNameDevice = 'Tablet';
@@ -15,6 +16,7 @@ describe('DeviceManager', () => {
           devices: []
         }
       }).init();
+      em = editor.getModel();
       obj = editor.Devices;
     });
 
@@ -33,12 +35,23 @@ describe('DeviceManager', () => {
     });
 
     test('Add new device', () => {
-      var model = obj.add(testNameDevice, testWidthDevice);
+      obj.add(testNameDevice, testWidthDevice);
       expect(obj.getAll().length).toEqual(1);
     });
 
+    test('Add new device triggers proper events', () => {
+      const eventFn = jest.fn();
+      const eventFnAll = jest.fn();
+      em.on(obj.events.add, eventFn);
+      em.on(obj.events.all, eventFnAll);
+      obj.add(testNameDevice, testWidthDevice);
+      expect(eventFn).toBeCalledTimes(1);
+      expect(eventFnAll).toBeCalled();
+    });
+
     test('Added device has correct data', () => {
       var model = obj.add(testNameDevice, testWidthDevice);
+      expect(model.get('id')).toEqual(testNameDevice);
       expect(model.get('name')).toEqual(testNameDevice);
       expect(model.get('width')).toEqual(testWidthDevice);
     });
@@ -48,18 +61,48 @@ describe('DeviceManager', () => {
       expect(model.get('opt')).toEqual('value');
     });
 
+    test('Add device with props', () => {
+      const model = obj.add({
+        name: testNameDevice,
+        width: testWidthDevice
+      });
+      expect(model.get('id')).toEqual(testNameDevice);
+      expect(model.get('name')).toEqual(testNameDevice);
+      expect(model.get('width')).toEqual(testWidthDevice);
+    });
+
+    test('Add device without id and name', () => {
+      const model = obj.add({
+        width: testWidthDevice
+      });
+      expect(model.get('name')).toEqual('');
+      expect(model.get('width')).toEqual(testWidthDevice);
+      expect(model.get('id')).toBeTruthy();
+    });
+
     test('The name of the device is unique', () => {
-      var model = obj.add(testNameDevice, testWidthDevice);
-      var model2 = obj.add(testNameDevice, '2px');
-      expect(model).toEqual(model2);
+      const model = obj.add(testNameDevice, testWidthDevice);
+      const model2 = obj.add(testNameDevice, '2px');
+      const model3 = obj.add({ id: testNameDevice, width: '3px' });
+      expect(model).toBe(model2);
+      expect(model2).toBe(model3);
     });
 
     test('Get device by name', () => {
-      var model = obj.add(testNameDevice, testWidthDevice);
-      var model2 = obj.get(testNameDevice);
+      const model = obj.add(testNameDevice, testWidthDevice);
+      const model2 = obj.get(testNameDevice);
       expect(model).toEqual(model2);
     });
 
+    test('Get device by name with different id', () => {
+      const model = obj.add({
+        id: 'device',
+        name: testNameDevice
+      });
+      const model2 = obj.get(testNameDevice);
+      expect(model).toBe(model2);
+    });
+
     test('Render devices', () => {
       expect(obj.render()).toBeTruthy();
     });