Use jest runner (#2345)

Use jest runner

package.json

@@ -97,6 +97,9 @@
     "modulePaths": [
       "./src"
     ],
+    "testMatch": [
+      "<rootDir>/test/specs/**/*.js"
+    ],
     "setupFiles": [
       "<rootDir>/test/setup.js"
     ],

test/main.test.js

@@ -1,28 +0,0 @@
-import grapesjs from './../src';
-
-describe('Main', () => {
-  describe('Startup', () => {
-    test('Main object should be loaded', () => {
-      expect(grapesjs).toBeTruthy();
-    });
-  });
-
-  const path = './specs/';
-  require(`${path}keymaps`);
-  require(`${path}asset_manager`);
-  require(`${path}block_manager`);
-  require(`${path}code_manager`);
-  require(`${path}commands`);
-  require(`${path}css_composer`);
-  require(`${path}device_manager`);
-  require(`${path}dom_components`);
-  require(`${path}modal`);
-  require(`${path}panels`);
-  require(`${path}parser`);
-  require(`${path}plugin_manager`);
-  require(`${path}selector_manager`);
-  require(`${path}storage_manager`);
-  require(`${path}style_manager`);
-  require(`${path}trait_manager`);
-  require(`${path}grapesjs`);
-});

test/specs/asset_manager/index.js

@@ -114,13 +114,4 @@ describe('Asset Manager', () => {
       });
     });
   });
-
-  require('./model/Asset').run();
-  require('./model/AssetImage').run();
-  require('./model/Assets').run();
-
-  require('./view/AssetView').run();
-  require('./view/AssetImageView').run();
-  require('./view/AssetsView').run();
-  require('./view/FileUploader').run();
 });

test/specs/asset_manager/model/Asset.js

@@ -1,33 +1,29 @@
 import Asset from 'asset_manager/model/Asset';
 
-module.exports = {
+describe('Asset', () => {
-  run() {
+  test('Object exists', () => {
-    describe('Asset', () => {
+    expect(Asset).toBeTruthy();
-      test('Object exists', () => {
+  });
-        expect(Asset).toBeTruthy();
-      });
 
-      test('Has default values', () => {
+  test('Has default values', () => {
-        var obj = new Asset({});
+    var obj = new Asset({});
-        expect(obj.get('type')).toBeFalsy();
+    expect(obj.get('type')).toBeFalsy();
-        expect(obj.get('src')).toBeFalsy();
+    expect(obj.get('src')).toBeFalsy();
-        expect(obj.getExtension()).toBeFalsy();
+    expect(obj.getExtension()).toBeFalsy();
-        expect(obj.getFilename()).toBeFalsy();
+    expect(obj.getFilename()).toBeFalsy();
-      });
+  });
 
-      test('Test getFilename', () => {
+  test('Test getFilename', () => {
-        var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' });
+    var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' });
-        expect(obj.getFilename()).toEqual('t.e.s.t');
+    expect(obj.getFilename()).toEqual('t.e.s.t');
-        var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc' });
+    var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc' });
-        expect(obj.getFilename()).toEqual('1234abc');
+    expect(obj.getFilename()).toEqual('1234abc');
-      });
+  });
 
-      test('Test getExtension', () => {
+  test('Test getExtension', () => {
-        var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' });
+    var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' });
-        expect(obj.getExtension()).toEqual('t');
+    expect(obj.getExtension()).toEqual('t');
-        var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc.' });
+    var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc.' });
-        expect(obj.getExtension()).toEqual('');
+    expect(obj.getExtension()).toEqual('');
-      });
+  });
-    });
+});
-  }
-};

test/specs/asset_manager/model/AssetImage.js

@@ -1,22 +1,18 @@
 import AssetImage from 'asset_manager/model/AssetImage';
 
-module.exports = {
+describe('AssetImage', () => {
-  run() {
+  test('Object exists', () => {
-    describe('AssetImage', () => {
+    expect(AssetImage).toBeTruthy();
-      test('Object exists', () => {
+  });
-        expect(AssetImage).toBeTruthy();
-      });
 
-      test('Has default values', () => {
+  test('Has default values', () => {
-        var obj = new AssetImage({});
+    var obj = new AssetImage({});
-        expect(obj.get('type')).toEqual('image');
+    expect(obj.get('type')).toEqual('image');
-        expect(obj.get('src')).toBeFalsy();
+    expect(obj.get('src')).toBeFalsy();
-        expect(obj.get('unitDim')).toEqual('px');
+    expect(obj.get('unitDim')).toEqual('px');
-        expect(obj.get('height')).toEqual(0);
+    expect(obj.get('height')).toEqual(0);
-        expect(obj.get('width')).toEqual(0);
+    expect(obj.get('width')).toEqual(0);
-        expect(obj.getExtension()).toBeFalsy();
+    expect(obj.getExtension()).toBeFalsy();
-        expect(obj.getFilename()).toBeFalsy();
+    expect(obj.getFilename()).toBeFalsy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/asset_manager/model/Assets.js

@@ -1,25 +1,21 @@
 import Assets from 'asset_manager/model/Assets';
 
-module.exports = {
+describe('Assets', () => {
-  run() {
+  var obj;
-    describe('Assets', () => {
-      var obj;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        obj = new Assets();
+    obj = new Assets();
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(obj).toBeTruthy();
+    expect(obj).toBeTruthy();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(obj.length).toEqual(0);
+    expect(obj.length).toEqual(0);
-      });
+  });
-    });
+});
-  }
-};

test/specs/asset_manager/view/AssetImageView.js

@@ -1,70 +1,66 @@
 import AssetImageView from 'asset_manager/view/AssetImageView';
 import Assets from 'asset_manager/model/Assets';
 
-module.exports = {
+let obj;
-  run() {
-    let obj;
 
-    describe('AssetImageView', () => {
+describe('AssetImageView', () => {
-      beforeEach(() => {
+  beforeEach(() => {
-        var coll = new Assets();
+    var coll = new Assets();
-        var model = coll.add({ type: 'image', src: '/test' });
+    var model = coll.add({ type: 'image', src: '/test' });
-        obj = new AssetImageView({
+    obj = new AssetImageView({
-          collection: new Assets(),
+      collection: new Assets(),
-          config: {},
+      config: {},
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(obj.render().el);
+    document.body.querySelector('#fixtures').appendChild(obj.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-        document.body.innerHTML = '';
+    document.body.innerHTML = '';
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(AssetImageView).toBeTruthy();
+    expect(AssetImageView).toBeTruthy();
-      });
+  });
 
-      describe('Asset should be rendered correctly', () => {
+  describe('Asset should be rendered correctly', () => {
-        test('Has preview box', () => {
+    test('Has preview box', () => {
-          var $asset = obj.$el;
+      var $asset = obj.$el;
-          expect($asset.find('.preview').length).toEqual(1);
+      expect($asset.find('.preview').length).toEqual(1);
-        });
+    });
 
-        test('Has meta box', () => {
+    test('Has meta box', () => {
-          var $asset = obj.$el;
+      var $asset = obj.$el;
-          expect($asset.find('.meta').length).toEqual(1);
+      expect($asset.find('.meta').length).toEqual(1);
-        });
+    });
 
-        test('Has close button', () => {
+    test('Has close button', () => {
-          var $asset = obj.$el;
+      var $asset = obj.$el;
-          expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1);
+      expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1);
-        });
+    });
-      });
+  });
 
-      test('Could be selected', () => {
+  test('Could be selected', () => {
-        var spy = jest.spyOn(obj, 'updateTarget');
+    var spy = jest.spyOn(obj, 'updateTarget');
-        obj.$el.trigger('click');
+    obj.$el.trigger('click');
-        expect(obj.$el.attr('class')).toContain('highlight');
+    expect(obj.$el.attr('class')).toContain('highlight');
-        expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
-      });
+  });
 
-      test('Could be chosen', () => {
+  test('Could be chosen', () => {
-        sinon.stub(obj, 'updateTarget');
+    sinon.stub(obj, 'updateTarget');
-        var spy = jest.spyOn(obj, 'updateTarget');
+    var spy = jest.spyOn(obj, 'updateTarget');
-        obj.$el.trigger('dblclick');
+    obj.$el.trigger('dblclick');
-        expect(spy).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
-        //obj.updateTarget.calledOnce.should.equal(true);
+    //obj.updateTarget.calledOnce.should.equal(true);
-      });
+  });
 
-      test('Could be removed', () => {
+  test('Could be removed', () => {
-        var spy = sinon.spy();
+    var spy = sinon.spy();
-        obj.model.on('remove', spy);
+    obj.model.on('remove', spy);
-        obj.onRemove({ stopImmediatePropagation() {} });
+    obj.onRemove({ stopImmediatePropagation() {} });
-        expect(spy.called).toEqual(true);
+    expect(spy.called).toEqual(true);
-      });
+  });
-    });
+});
-  }
-};

test/specs/asset_manager/view/AssetView.js

@@ -1,39 +1,35 @@
 import Assets from 'asset_manager/model/Assets';
 import AssetView from 'asset_manager/view/AssetView';
 
-module.exports = {
+describe('AssetView', () => {
-  run() {
+  let testContext;
-    describe('AssetView', () => {
-      let testContext;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        testContext = {};
+    testContext = {};
-      });
+  });
 
-      beforeEach(() => {
+  beforeEach(() => {
-        var coll = new Assets();
+    var coll = new Assets();
-        var model = coll.add({ src: 'test' });
+    var model = coll.add({ src: 'test' });
-        testContext.view = new AssetView({
+    testContext.view = new AssetView({
-          config: {},
+      config: {},
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body
+    document.body
-          .querySelector('#fixtures')
+      .querySelector('#fixtures')
-          .appendChild(testContext.view.render().el);
+      .appendChild(testContext.view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        testContext.view.remove();
+    testContext.view.remove();
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(AssetView).toBeTruthy();
+    expect(AssetView).toBeTruthy();
-      });
+  });
 
-      test('Has correct prefix', () => {
+  test('Has correct prefix', () => {
-        expect(testContext.view.pfx).toEqual('');
+    expect(testContext.view.pfx).toEqual('');
-      });
+  });
-    });
+});
-  }
-};

test/specs/asset_manager/view/AssetsView.js

@@ -2,86 +2,82 @@ import AssetsView from 'asset_manager/view/AssetsView';
 import FileUploader from 'asset_manager/view/FileUploader';
 import Assets from 'asset_manager/model/Assets';
 
-module.exports = {
+describe('AssetsView', () => {
-  run() {
+  var obj;
-    describe('AssetsView', () => {
+  var coll;
-      var obj;
-      var coll;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        coll = new Assets([]);
+    coll = new Assets([]);
-        obj = new AssetsView({
+    obj = new AssetsView({
-          config: {},
+      config: {},
-          collection: coll,
+      collection: coll,
-          globalCollection: new Assets([]),
+      globalCollection: new Assets([]),
-          fu: new FileUploader({})
+      fu: new FileUploader({})
-        });
+    });
-        obj = obj;
+    obj = obj;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        obj.render();
+    obj.render();
-        document.body.querySelector('#fixtures').appendChild(obj.el);
+    document.body.querySelector('#fixtures').appendChild(obj.el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj.collection.reset();
+    obj.collection.reset();
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(AssetsView).toBeTruthy();
+    expect(AssetsView).toBeTruthy();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(obj.getAssetsEl().innerHTML).toBeFalsy();
+    expect(obj.getAssetsEl().innerHTML).toBeFalsy();
-      });
+  });
 
-      test('Add new asset', () => {
+  test('Add new asset', () => {
-        sinon.stub(obj, 'addAsset');
+    sinon.stub(obj, 'addAsset');
-        coll.add({ src: 'test' });
+    coll.add({ src: 'test' });
-        expect(obj.addAsset.calledOnce).toEqual(true);
+    expect(obj.addAsset.calledOnce).toEqual(true);
-      });
+  });
 
-      test('Render new asset', () => {
+  test('Render new asset', () => {
-        coll.add({ src: 'test' });
+    coll.add({ src: 'test' });
-        expect(obj.getAssetsEl().innerHTML).toBeTruthy();
+    expect(obj.getAssetsEl().innerHTML).toBeTruthy();
-      });
+  });
 
-      test('Render correctly new image asset', () => {
+  test('Render correctly new image asset', () => {
-        coll.add({ type: 'image', src: 'test' });
+    coll.add({ type: 'image', src: 'test' });
-        var asset = obj.getAssetsEl().firstChild;
+    var asset = obj.getAssetsEl().firstChild;
-        expect(asset.tagName).toEqual('DIV');
+    expect(asset.tagName).toEqual('DIV');
-        expect(asset.innerHTML).toBeTruthy();
+    expect(asset.innerHTML).toBeTruthy();
-      });
+  });
 
-      test('Clean collection from asset', () => {
+  test('Clean collection from asset', () => {
-        var model = coll.add({ src: 'test' });
+    var model = coll.add({ src: 'test' });
-        coll.remove(model);
+    coll.remove(model);
-        expect(obj.getAssetsEl().innerHTML).toBeFalsy();
+    expect(obj.getAssetsEl().innerHTML).toBeFalsy();
-      });
+  });
 
-      test('Deselect works', () => {
+  test('Deselect works', () => {
-        coll.add([{}, {}]);
+    coll.add([{}, {}]);
-        var $asset = obj.$el.children().first();
+    var $asset = obj.$el.children().first();
-        $asset.attr('class', obj.pfx + 'highlight');
+    $asset.attr('class', obj.pfx + 'highlight');
-        coll.trigger('deselectAll');
+    coll.trigger('deselectAll');
-        expect($asset.attr('class')).toBeFalsy();
+    expect($asset.attr('class')).toBeFalsy();
-      });
+  });
 
-      test('Returns not empty assets element', () => {
+  test('Returns not empty assets element', () => {
-        expect(obj.getAssetsEl()).toBeTruthy();
+    expect(obj.getAssetsEl()).toBeTruthy();
-      });
+  });
 
-      test('Returns not empty url input', () => {
+  test('Returns not empty url input', () => {
-        expect(obj.getAddInput()).toBeTruthy();
+    expect(obj.getAddInput()).toBeTruthy();
-      });
+  });
 
-      test('Add image asset from input string', () => {
+  test('Add image asset from input string', () => {
-        obj.getAddInput().value = 'test';
+    obj.getAddInput().value = 'test';
-        obj.handleSubmit({
+    obj.handleSubmit({
-          preventDefault() {}
+      preventDefault() {}
-        });
-        var asset = obj.options.globalCollection.at(0);
-        expect(asset.get('src')).toEqual('test');
-      });
     });
-  }
+    var asset = obj.options.globalCollection.at(0);
-};
+    expect(asset.get('src')).toEqual('test');
+  });
+});

test/specs/asset_manager/view/FileUploader.js

@@ -1,97 +1,85 @@
 import FileUploader from 'asset_manager/view/FileUploader';
 
-module.exports = {
+describe('File Uploader', () => {
-  run() {
+  let obj;
-    describe('File Uploader', () => {
-      let obj;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        obj = new FileUploader({ config: {} });
+    obj = new FileUploader({ config: {} });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(obj.render().el);
+    document.body.querySelector('#fixtures').appendChild(obj.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj.remove();
+    obj.remove();
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(FileUploader).toBeTruthy();
+    expect(FileUploader).toBeTruthy();
-      });
+  });
 
-      test('Has correct prefix', () => {
+  test('Has correct prefix', () => {
-        expect(obj.pfx).toBeFalsy();
+    expect(obj.pfx).toBeFalsy();
-      });
+  });
 
-      describe('Should be rendered correctly', () => {
+  describe('Should be rendered correctly', () => {
-        test('Has title', () => {
+    test('Has title', () => {
-          expect(obj.$el.find('#title').length).toEqual(1);
+      expect(obj.$el.find('#title').length).toEqual(1);
-        });
+    });
 
-        test('Title is empty', () => {
+    test('Title is empty', () => {
-          expect(obj.$el.find('#title').html()).toEqual('');
+      expect(obj.$el.find('#title').html()).toEqual('');
-        });
+    });
 
-        test('Has file input', () => {
+    test('Has file input', () => {
-          expect(obj.$el.find('input[type=file]').length).toEqual(1);
+      expect(obj.$el.find('input[type=file]').length).toEqual(1);
-        });
+    });
 
-        test('File input is enabled', () => {
+    test('File input is enabled', () => {
-          expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual(
+      expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual(true);
-            true
+    });
-          );
+  });
-        });
-      });
 
-      describe('Interprets configurations correctly', () => {
+  describe('Interprets configurations correctly', () => {
-        test('Has correct title', () => {
+    test('Has correct title', () => {
-          var view = new FileUploader({
+      var view = new FileUploader({
-            config: {
+        config: {
-              uploadText: 'Test'
+          uploadText: 'Test'
-            }
+        }
-          });
+      });
-          view.render();
+      view.render();
-          expect(view.$el.find('#title').html()).toEqual('Test');
+      expect(view.$el.find('#title').html()).toEqual('Test');
-        });
+    });
 
-        test('Could be disabled', () => {
+    test('Could be disabled', () => {
-          var view = new FileUploader({
+      var view = new FileUploader({
-            config: {
+        config: {
-              disableUpload: true,
+          disableUpload: true,
-              upload: 'something'
+          upload: 'something'
-            }
+        }
-          });
+      });
-          view.render();
+      view.render();
-          expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(
+      expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(true);
-            true
+    });
-          );
-        });
 
-        test('Handles multiUpload false', () => {
+    test('Handles multiUpload false', () => {
-          var view = new FileUploader({
+      var view = new FileUploader({
-            config: {
+        config: {
-              multiUpload: false
+          multiUpload: false
-            }
+        }
-          });
+      });
-          view.render();
+      view.render();
-          expect(
+      expect(view.$el.find('input[type=file]').prop('multiple')).toBeFalsy();
-            view.$el.find('input[type=file]').prop('multiple')
+    });
-          ).toBeFalsy();
-        });
 
-        test('Handles embedAsBase64 parameter', () => {
+    test('Handles embedAsBase64 parameter', () => {
-          var view = new FileUploader({
+      var view = new FileUploader({
-            config: {
+        config: {
-              embedAsBase64: true
+          embedAsBase64: true
-            }
+        }
-          });
-          view.render();
-          expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(
-            false
-          );
-          expect(view.uploadFile).toEqual(FileUploader.embedAsBase64);
-        });
       });
+      view.render();
+      expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(false);
+      expect(view.uploadFile).toEqual(FileUploader.embedAsBase64);
     });
-  }
+  });
-};
+});

test/specs/block_manager/index.js

@@ -67,6 +67,4 @@ describe('BlockManager', () => {
       expect(obj.getContainer()).toBeTruthy();
     });
   });
-
-  BlocksView.run();
 });

test/specs/block_manager/view/BlocksView.js

@@ -2,78 +2,72 @@ import Backbone from 'backbone';
 import BlocksView from 'block_manager/view/BlocksView';
 import Blocks from 'block_manager/model/Blocks';
 
-module.exports = {
+describe('BlocksView', () => {
-  run() {
+  var $fixtures;
-    describe('BlocksView', () => {
+  var $fixture;
-      var $fixtures;
+  var model;
-      var $fixture;
+  var view;
-      var model;
+  var editorModel;
-      var view;
+  var ppfx;
-      var editorModel;
-      var ppfx;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Blocks([]);
+    model = new Blocks([]);
-        view = new BlocksView({ collection: model });
+    view = new BlocksView({ collection: model });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(view.render().el);
+    document.body.querySelector('#fixtures').appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.collection.reset();
+    view.collection.reset();
-      });
+  });
 
-      test('The container is not empty', () => {
+  test('The container is not empty', () => {
-        expect(view.el.outerHTML).toBeTruthy();
+    expect(view.el.outerHTML).toBeTruthy();
-      });
+  });
 
-      test('No children inside', () => {
+  test('No children inside', () => {
-        expect(view.getBlocksEl().children.length).toEqual(0);
+    expect(view.getBlocksEl().children.length).toEqual(0);
-      });
+  });
 
-      test('Render children on add', () => {
+  test('Render children on add', () => {
-        model.add({});
+    model.add({});
-        expect(view.getBlocksEl().children.length).toEqual(1);
+    expect(view.getBlocksEl().children.length).toEqual(1);
-        model.add([{}, {}]);
+    model.add([{}, {}]);
-        expect(view.getBlocksEl().children.length).toEqual(3);
+    expect(view.getBlocksEl().children.length).toEqual(3);
-      });
+  });
 
-      test('Destroy children on remove', () => {
+  test('Destroy children on remove', () => {
-        model.add([{}, {}]);
+    model.add([{}, {}]);
-        expect(view.getBlocksEl().children.length).toEqual(2);
+    expect(view.getBlocksEl().children.length).toEqual(2);
-        model.at(0).destroy();
+    model.at(0).destroy();
-        expect(view.getBlocksEl().children.length).toEqual(1);
+    expect(view.getBlocksEl().children.length).toEqual(1);
-      });
+  });
 
-      describe('With configs', () => {
+  describe('With configs', () => {
-        beforeEach(() => {
+    beforeEach(() => {
-          ppfx = 'pfx-t-';
+      ppfx = 'pfx-t-';
-          editorModel = new Backbone.Model();
+      editorModel = new Backbone.Model();
-          model = new Blocks([{ name: 'test1' }, { name: 'test2' }]);
+      model = new Blocks([{ name: 'test1' }, { name: 'test2' }]);
-          view = new BlocksView(
+      view = new BlocksView(
-            {
+        {
-              collection: model
+          collection: model
-            },
+        },
-            {
+        {
-              pStylePrefix: ppfx
+          pStylePrefix: ppfx
-            }
+        }
-          );
+      );
-          document.body.innerHTML = '<div id="fixtures"></div>';
+      document.body.innerHTML = '<div id="fixtures"></div>';
-          document.body
+      document.body.querySelector('#fixtures').appendChild(view.render().el);
-            .querySelector('#fixtures')
+    });
-            .appendChild(view.render().el);
-        });
 
-        test('Render children', () => {
+    test('Render children', () => {
-          expect(view.getBlocksEl().children.length).toEqual(2);
+      expect(view.getBlocksEl().children.length).toEqual(2);
-        });
+    });
 
-        test('Render container', () => {
+    test('Render container', () => {
-          expect(view.getBlocksEl().getAttribute('class')).toEqual(
+      expect(view.getBlocksEl().getAttribute('class')).toEqual(
-            ppfx + 'blocks-c'
+        ppfx + 'blocks-c'
-          );
+      );
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/code_manager/index.js

@@ -35,6 +35,4 @@ describe('Code Manager', () => {
       expect(obj.getViewer('test')).toEqual('view');
     });
   });
-
-  Models.run();
 });

test/specs/code_manager/model/CodeModels.js

@@ -5,343 +5,339 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import CssComposer from 'css_composer';
 
-module.exports = {
+let comp;
-  run() {
+let dcomp;
-    let comp;
+let obj;
-    let dcomp;
+let em;
-    let obj;
+let cc;
-    let em;
+
-    let cc;
+describe('HtmlGenerator', () => {
-
+  beforeEach(() => {
-    describe('HtmlGenerator', () => {
+    em = new Editor();
-      beforeEach(() => {
+    obj = new HtmlGenerator();
-        em = new Editor();
+    dcomp = new DomComponents();
-        obj = new HtmlGenerator();
+    comp = new Component(
-        dcomp = new DomComponents();
+      {},
-        comp = new Component(
+      {
-          {},
+        em,
-          {
+        componentTypes: dcomp.componentTypes
-            em,
+      }
-            componentTypes: dcomp.componentTypes
+    );
-          }
+  });
-        );
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Build correctly one component', () => {
-
+    expect(obj.build(comp)).toEqual('');
-      test('Build correctly one component', () => {
+  });
-        expect(obj.build(comp)).toEqual('');
+
-      });
+  test('Build correctly empty component inside', () => {
-
+    var m1 = comp.get('components').add({});
-      test('Build correctly empty component inside', () => {
+    expect(obj.build(comp)).toEqual('<div></div>');
-        var m1 = comp.get('components').add({});
+  });
-        expect(obj.build(comp)).toEqual('<div></div>');
+
-      });
+  test('Build correctly not empty component inside', () => {
-
+    var m1 = comp.get('components').add({
-      test('Build correctly not empty component inside', () => {
+      tagName: 'article',
-        var m1 = comp.get('components').add({
+      attributes: {
-          tagName: 'article',
+        'data-test1': 'value1',
-          attributes: {
+        'data-test2': 'value2'
-            'data-test1': 'value1',
+      }
-            'data-test2': 'value2'
-          }
-        });
-        expect(obj.build(comp)).toEqual(
-          '<article data-test1="value1" data-test2="value2"></article>'
-        );
-      });
-
-      test('Build correctly component with classes', () => {
-        var m1 = comp.get('components').add({
-          tagName: 'article',
-          attributes: {
-            'data-test1': 'value1',
-            'data-test2': 'value2'
-          }
-        });
-        ['class1', 'class2'].forEach(item => {
-          m1.get('classes').add({ name: item });
-        });
-        expect(obj.build(comp)).toEqual(
-          '<article data-test1="value1" data-test2="value2" class="class1 class2"></article>'
-        );
-      });
     });
-
+    expect(obj.build(comp)).toEqual(
-    describe('CssGenerator', () => {
+      '<article data-test1="value1" data-test2="value2"></article>'
-      let newCssComp;
+    );
-
+  });
-      beforeEach(() => {
+
-        em = new Editor({});
+  test('Build correctly component with classes', () => {
-        newCssComp = () => new CssComposer().init({ em });
+    var m1 = comp.get('components').add({
-
+      tagName: 'article',
-        cc = em.get('CssComposer');
+      attributes: {
-        obj = new CssGenerator();
+        'data-test1': 'value1',
-        dcomp = new DomComponents();
+        'data-test2': 'value2'
-        comp = new Component(
+      }
-          {},
+    });
-          {
+    ['class1', 'class2'].forEach(item => {
-            em,
+      m1.get('classes').add({ name: item });
-            componentTypes: dcomp.componentTypes
+    });
-          }
+    expect(obj.build(comp)).toEqual(
-        );
+      '<article data-test1="value1" data-test2="value2" class="class1 class2"></article>'
-      });
+    );
-
+  });
-      afterEach(() => {
+});
-        obj = null;
+
-      });
+describe('CssGenerator', () => {
-
+  let newCssComp;
-      test('Build correctly one component', () => {
+
-        expect(obj.build(comp)).toEqual('');
+  beforeEach(() => {
-      });
+    em = new Editor({});
-
+    newCssComp = () => new CssComposer().init({ em });
-      test('Build correctly empty component inside', () => {
+
-        var m1 = comp.get('components').add({ tagName: 'article' });
+    cc = em.get('CssComposer');
-        expect(obj.build(comp)).toEqual('');
+    obj = new CssGenerator();
-      });
+    dcomp = new DomComponents();
-
+    comp = new Component(
-      test('Build correctly component with style inside', () => {
+      {},
-        var m1 = comp.get('components').add({
+      {
-          tagName: 'article',
+        em,
-          style: {
+        componentTypes: dcomp.componentTypes
-            prop1: 'value1',
+      }
-            prop2: 'value2'
+    );
-          }
+  });
-        });
+
-        expect(obj.build(comp)).toEqual(
+  afterEach(() => {
-          '#' + m1.getId() + '{prop1:value1;prop2:value2;}'
+    obj = null;
-        );
+  });
-      });
+
-
+  test('Build correctly one component', () => {
-      test('Build correctly component with class styled', () => {
+    expect(obj.build(comp)).toEqual('');
-        var m1 = comp.get('components').add({ tagName: 'article' });
+  });
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+
-
+  test('Build correctly empty component inside', () => {
-        var cssc = newCssComp();
+    var m1 = comp.get('components').add({ tagName: 'article' });
-        var rule = cssc.add(cls1);
+    expect(obj.build(comp)).toEqual('');
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+  });
-
+
-        expect(obj.build(comp, { cssc })).toEqual(
+  test('Build correctly component with style inside', () => {
-          '.class1{prop1:value1;prop2:value2;}'
+    var m1 = comp.get('components').add({
-        );
+      tagName: 'article',
-      });
+      style: {
-
+        prop1: 'value1',
-      test('Build correctly component styled with class and state', () => {
+        prop2: 'value2'
-        var m1 = comp.get('components').add({ tagName: 'article' });
+      }
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    });
-
+    expect(obj.build(comp)).toEqual(
-        var cssc = newCssComp();
+      '#' + m1.getId() + '{prop1:value1;prop2:value2;}'
-        var rule = cssc.add(cls1);
+    );
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+  });
-        rule.set('state', 'hover');
+
-
+  test('Build correctly component with class styled', () => {
-        expect(obj.build(comp, { cssc })).toEqual(
+    var m1 = comp.get('components').add({ tagName: 'article' });
-          '.class1:hover{prop1:value1;prop2:value2;}'
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-        );
+
-      });
+    var cssc = newCssComp();
-
+    var rule = cssc.add(cls1);
-      test('Build correctly with more classes', () => {
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-        var m1 = comp.get('components').add({ tagName: 'article' });
+
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    expect(obj.build(comp, { cssc })).toEqual(
-        var cls2 = m1.get('classes').add({ name: 'class2' });
+      '.class1{prop1:value1;prop2:value2;}'
-
+    );
-        var cssc = newCssComp();
+  });
-        var rule = cssc.add([cls1, cls2]);
+
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+  test('Build correctly component styled with class and state', () => {
-
+    var m1 = comp.get('components').add({ tagName: 'article' });
-        expect(obj.build(comp, { cssc })).toEqual(
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-          '.class1.class2{prop1:value1;prop2:value2;}'
+
-        );
+    var cssc = newCssComp();
-      });
+    var rule = cssc.add(cls1);
-
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-      test('Build rules with mixed classes', () => {
+    rule.set('state', 'hover');
-        var m1 = comp.get('components').add({ tagName: 'article' });
+
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    expect(obj.build(comp, { cssc })).toEqual(
-        var cls2 = m1.get('classes').add({ name: 'class2' });
+      '.class1:hover{prop1:value1;prop2:value2;}'
-
+    );
-        var cssc = newCssComp();
+  });
-        var rule = cssc.add([cls1, cls2]);
+
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+  test('Build correctly with more classes', () => {
-        rule.set('selectorsAdd', '.class1 .class2, div > .class4');
+    var m1 = comp.get('components').add({ tagName: 'article' });
-
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-        expect(obj.build(comp, { cssc })).toEqual(
+    var cls2 = m1.get('classes').add({ name: 'class2' });
-          '.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'
+
-        );
+    var cssc = newCssComp();
-      });
+    var rule = cssc.add([cls1, cls2]);
-
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-      test('Build rules with only not class based selectors', () => {
+
-        var cssc = newCssComp();
+    expect(obj.build(comp, { cssc })).toEqual(
-        var rule = cssc.add([]);
+      '.class1.class2{prop1:value1;prop2:value2;}'
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+    );
-        rule.set('selectorsAdd', '.class1 .class2, div > .class4');
+  });
-
+
-        expect(obj.build(comp, { cssc })).toEqual(
+  test('Build rules with mixed classes', () => {
-          '.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'
+    var m1 = comp.get('components').add({ tagName: 'article' });
-        );
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-      });
+    var cls2 = m1.get('classes').add({ name: 'class2' });
-
+
-      test('Build correctly with class styled out', () => {
+    var cssc = newCssComp();
-        var m1 = comp.get('components').add({ tagName: 'article' });
+    var rule = cssc.add([cls1, cls2]);
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-        var cls2 = m1.get('classes').add({ name: 'class2' });
+    rule.set('selectorsAdd', '.class1 .class2, div > .class4');
-
+
-        var cssc = newCssComp();
+    expect(obj.build(comp, { cssc })).toEqual(
-        var rule = cssc.add([cls1, cls2]);
+      '.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'
-        rule.set('style', { prop1: 'value1' });
+    );
-        var rule2 = cssc.add(cls2);
+  });
-        rule2.set('style', { prop2: 'value2' });
+
-
+  test('Build rules with only not class based selectors', () => {
-        expect(obj.build(comp, { cssc })).toEqual(
+    var cssc = newCssComp();
-          '.class1.class2{prop1:value1;}.class2{prop2:value2;}'
+    var rule = cssc.add([]);
-        );
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-      });
+    rule.set('selectorsAdd', '.class1 .class2, div > .class4');
-
+
-      test('Rule with media query', () => {
+    expect(obj.build(comp, { cssc })).toEqual(
-        var m1 = comp.get('components').add({ tagName: 'article' });
+      '.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    );
-        var cls2 = m1.get('classes').add({ name: 'class2' });
+  });
-
+
-        var cssc = newCssComp();
+  test('Build correctly with class styled out', () => {
-        var rule = cssc.add([cls1, cls2]);
+    var m1 = comp.get('components').add({ tagName: 'article' });
-        rule.set('style', { prop1: 'value1' });
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-        rule.set('mediaText', '(max-width: 999px)');
+    var cls2 = m1.get('classes').add({ name: 'class2' });
-
+
-        expect(obj.build(comp, { cssc })).toEqual(
+    var cssc = newCssComp();
-          '@media (max-width: 999px){.class1.class2{prop1:value1;}}'
+    var rule = cssc.add([cls1, cls2]);
-        );
+    rule.set('style', { prop1: 'value1' });
-      });
+    var rule2 = cssc.add(cls2);
-
+    rule2.set('style', { prop2: 'value2' });
-      test('Rules mixed with media queries', () => {
+
-        var m1 = comp.get('components').add({ tagName: 'article' });
+    expect(obj.build(comp, { cssc })).toEqual(
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+      '.class1.class2{prop1:value1;}.class2{prop2:value2;}'
-        var cls2 = m1.get('classes').add({ name: 'class2' });
+    );
-
+  });
-        var cssc = newCssComp();
+
-
+  test('Rule with media query', () => {
-        var rule = cssc.add([cls1, cls2]);
+    var m1 = comp.get('components').add({ tagName: 'article' });
-        rule.set('style', { prop1: 'value1' });
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-        var rule2 = cssc.add(cls2);
+    var cls2 = m1.get('classes').add({ name: 'class2' });
-        rule2.set('style', { prop2: 'value2' });
+
-
+    var cssc = newCssComp();
-        var rule3 = cssc.add(cls1, '', '(max-width: 999px)');
+    var rule = cssc.add([cls1, cls2]);
-        rule3.set('style', { prop3: 'value3' });
+    rule.set('style', { prop1: 'value1' });
-        var rule4 = cssc.add(cls2, '', '(max-width: 999px)');
+    rule.set('mediaText', '(max-width: 999px)');
-        rule4.set('style', { prop4: 'value4' });
+
-
+    expect(obj.build(comp, { cssc })).toEqual(
-        var rule5 = cssc.add(cls1, '', '(max-width: 100px)');
+      '@media (max-width: 999px){.class1.class2{prop1:value1;}}'
-        rule5.set('style', { prop5: 'value5' });
+    );
-
+  });
-        expect(obj.build(comp, { cssc })).toEqual(
+
-          '.class1.class2{prop1:value1;}.class2{prop2:value2;}' +
+  test('Rules mixed with media queries', () => {
-            '@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}' +
+    var m1 = comp.get('components').add({ tagName: 'article' });
-            '@media (max-width: 100px){.class1{prop5:value5;}}'
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-        );
+    var cls2 = m1.get('classes').add({ name: 'class2' });
-      });
+
-
+    var cssc = newCssComp();
-      test('Avoid useless code', () => {
+
-        var m1 = comp.get('components').add({ tagName: 'article' });
+    var rule = cssc.add([cls1, cls2]);
-        var cls1 = m1.get('classes').add({ name: 'class1' });
+    rule.set('style', { prop1: 'value1' });
-
+    var rule2 = cssc.add(cls2);
-        var cssc = newCssComp();
+    rule2.set('style', { prop2: 'value2' });
-        var rule = cssc.add(cls1);
+
-        rule.set('style', { prop1: 'value1', prop2: 'value2' });
+    var rule3 = cssc.add(cls1, '', '(max-width: 999px)');
-
+    rule3.set('style', { prop3: 'value3' });
-        comp.get('components').remove(m1);
+    var rule4 = cssc.add(cls2, '', '(max-width: 999px)');
-        expect(obj.build(comp, { cssc })).toEqual('');
+    rule4.set('style', { prop4: 'value4' });
-      });
+
-
+    var rule5 = cssc.add(cls1, '', '(max-width: 100px)');
-      test('Render correctly a rule without avoidInlineStyle option', () => {
+    rule5.set('style', { prop5: 'value5' });
-        comp.setStyle({ color: 'red' });
+
-        const id = comp.getId();
+    expect(obj.build(comp, { cssc })).toEqual(
-        const result = `#${id}{color:red;}`;
+      '.class1.class2{prop1:value1;}.class2{prop2:value2;}' +
-        expect(obj.build(comp, { cssc: cc })).toEqual(result);
+        '@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}' +
-      });
+        '@media (max-width: 100px){.class1{prop5:value5;}}'
-
+    );
-      test('Render correctly a rule with avoidInlineStyle option', () => {
+  });
-        em.getConfig().avoidInlineStyle = 1;
+
-        comp = new Component(
+  test('Avoid useless code', () => {
-          {},
+    var m1 = comp.get('components').add({ tagName: 'article' });
-          {
+    var cls1 = m1.get('classes').add({ name: 'class1' });
-            em,
+
-            componentTypes: dcomp.componentTypes
+    var cssc = newCssComp();
-          }
+    var rule = cssc.add(cls1);
-        );
+    rule.set('style', { prop1: 'value1', prop2: 'value2' });
-        comp.setStyle({ color: 'red' });
+
-        const id = comp.getId();
+    comp.get('components').remove(m1);
-        const result = `#${id}{color:red;}`;
+    expect(obj.build(comp, { cssc })).toEqual('');
-        expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
+  });
-      });
+
-
+  test('Render correctly a rule without avoidInlineStyle option', () => {
-      test('Render correctly a rule with avoidInlineStyle and state', () => {
+    comp.setStyle({ color: 'red' });
-        em.getConfig().avoidInlineStyle = 1;
+    const id = comp.getId();
-        const state = 'hover';
+    const result = `#${id}{color:red;}`;
-        comp.config.avoidInlineStyle = 1;
+    expect(obj.build(comp, { cssc: cc })).toEqual(result);
-        comp.set('state', state);
+  });
-        comp.setStyle({ color: 'red' });
+
-        const id = comp.getId();
+  test('Render correctly a rule with avoidInlineStyle option', () => {
-        const result = `#${id}:${state}{color:red;}`;
+    em.getConfig().avoidInlineStyle = 1;
-        expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
+    comp = new Component(
-      });
+      {},
-
+      {
-      test('Render correctly a rule with avoidInlineStyle and w/o state', () => {
+        em,
-        em.getConfig().avoidInlineStyle = 1;
+        componentTypes: dcomp.componentTypes
-        const state = 'hover';
+      }
-        comp.config.avoidInlineStyle = 1;
+    );
-        comp.setStyle({ color: 'blue' });
+    comp.setStyle({ color: 'red' });
-        comp.set('state', state);
+    const id = comp.getId();
-        comp.setStyle({ color: 'red' });
+    const result = `#${id}{color:red;}`;
-        const id = comp.getId();
+    expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
-        const result = `#${id}{color:blue;}#${id}:${state}{color:red;}`;
+  });
-        expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
+
-      });
+  test('Render correctly a rule with avoidInlineStyle and state', () => {
-
+    em.getConfig().avoidInlineStyle = 1;
-      test('Media queries are correctly cleaned for the length', () => {
+    const state = 'hover';
-        [
+    comp.config.avoidInlineStyle = 1;
-          ['@media (max-width: 999px)', 999],
+    comp.set('state', state);
-          ['@media (min-width: 123%)', 123],
+    comp.setStyle({ color: 'red' });
-          ['@media (min-width: 1040rem)', 1040]
+    const id = comp.getId();
-        ].forEach(item => {
+    const result = `#${id}:${state}{color:red;}`;
-          expect(obj.getQueryLength(item[0])).toBe(item[1]);
+    expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
-        });
+  });
-      });
+
-
+  test('Render correctly a rule with avoidInlineStyle and w/o state', () => {
-      test('The media objects are correctly sorted', () => {
+    em.getConfig().avoidInlineStyle = 1;
-        expect(
+    const state = 'hover';
-          obj.sortMediaObject({
+    comp.config.avoidInlineStyle = 1;
-            '@media (max-width: 480px)': 1,
+    comp.setStyle({ color: 'blue' });
-            '@font-face': 2,
+    comp.set('state', state);
-            '@media (max-width: 768px)': 3,
+    comp.setStyle({ color: 'red' });
-            '@media (max-width: 1020ch)': 4,
+    const id = comp.getId();
-            '@media (max-width: 10%)': 5
+    const result = `#${id}{color:blue;}#${id}:${state}{color:red;}`;
-          })
+    expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
-        ).toEqual([
+  });
-          { key: '@font-face', value: 2 },
+
-          { key: '@media (max-width: 1020ch)', value: 4 },
+  test('Media queries are correctly cleaned for the length', () => {
-          { key: '@media (max-width: 768px)', value: 3 },
+    [
-          { key: '@media (max-width: 480px)', value: 1 },
+      ['@media (max-width: 999px)', 999],
-          { key: '@media (max-width: 10%)', value: 5 }
+      ['@media (min-width: 123%)', 123],
-        ]);
+      ['@media (min-width: 1040rem)', 1040]
-      });
+    ].forEach(item => {
-
+      expect(obj.getQueryLength(item[0])).toBe(item[1]);
-      test('The media objects, for the mobile first approach, are correctly sorted', () => {
-        expect(
-          obj.sortMediaObject({
-            '@media (min-width: 480px)': 1,
-            '@font-face': 2,
-            '@media (min-width: 768px)': 3,
-            '@media (min-width: 1020ch)': 4,
-            '@media (min-width: 10%)': 5
-          })
-        ).toEqual([
-          { key: '@font-face', value: 2 },
-          { key: '@media (min-width: 10%)', value: 5 },
-          { key: '@media (min-width: 480px)', value: 1 },
-          { key: '@media (min-width: 768px)', value: 3 },
-          { key: '@media (min-width: 1020ch)', value: 4 }
-        ]);
-      });
     });
-  }
+  });
-};
+
+  test('The media objects are correctly sorted', () => {
+    expect(
+      obj.sortMediaObject({
+        '@media (max-width: 480px)': 1,
+        '@font-face': 2,
+        '@media (max-width: 768px)': 3,
+        '@media (max-width: 1020ch)': 4,
+        '@media (max-width: 10%)': 5
+      })
+    ).toEqual([
+      { key: '@font-face', value: 2 },
+      { key: '@media (max-width: 1020ch)', value: 4 },
+      { key: '@media (max-width: 768px)', value: 3 },
+      { key: '@media (max-width: 480px)', value: 1 },
+      { key: '@media (max-width: 10%)', value: 5 }
+    ]);
+  });
+
+  test('The media objects, for the mobile first approach, are correctly sorted', () => {
+    expect(
+      obj.sortMediaObject({
+        '@media (min-width: 480px)': 1,
+        '@font-face': 2,
+        '@media (min-width: 768px)': 3,
+        '@media (min-width: 1020ch)': 4,
+        '@media (min-width: 10%)': 5
+      })
+    ).toEqual([
+      { key: '@font-face', value: 2 },
+      { key: '@media (min-width: 10%)', value: 5 },
+      { key: '@media (min-width: 480px)', value: 1 },
+      { key: '@media (min-width: 768px)', value: 3 },
+      { key: '@media (min-width: 1020ch)', value: 4 }
+    ]);
+  });
+});

test/specs/commands/index.js

@@ -115,6 +115,3 @@ describe('Commands', () => {
     });
   });
 });
-
-Models.run();
-CommandAbstract.run();

test/specs/commands/model/CommandModels.js

@@ -1,38 +1,34 @@
 import Command from 'commands/model/Command';
 import Commands from 'commands';
 
-module.exports = {
+describe('Command', () => {
-  run() {
+  let obj;
-    describe('Command', () => {
+
-      let obj;
+  beforeEach(() => {
-
+    obj = new Command();
-      beforeEach(() => {
+  });
-        obj = new Command();
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Has id property', () => {
-
+    expect(obj.has('id')).toEqual(true);
-      test('Has id property', () => {
+  });
-        expect(obj.has('id')).toEqual(true);
+});
-      });
+
-    });
+describe('Commands', () => {
-
+  var obj;
-    describe('Commands', () => {
+
-      var obj;
+  beforeEach(() => {
-
+    obj = new Commands();
-      beforeEach(() => {
+  });
-        obj = new Commands();
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Object is ok', () => {
-
+    expect(obj).toBeTruthy();
-      test('Object is ok', () => {
+  });
-        expect(obj).toBeTruthy();
+});
-      });
-    });
-  }
-};

test/specs/commands/view/CommandAbstract.js

@@ -1,94 +1,84 @@
 import CommandAbstract from 'commands/view/CommandAbstract';
 import Editor from 'editor/model/Editor';
 
-module.exports = {
+describe('CommandAbstract', () => {
-  run() {
+  let editor, editorTriggerSpy, command;
-    describe('CommandAbstract', () => {
-      let editor, editorTriggerSpy, command;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        editor = new Editor();
+    editor = new Editor();
-        editorTriggerSpy = sinon.spy(editor, 'trigger');
+    editorTriggerSpy = sinon.spy(editor, 'trigger');
 
-        command = new CommandAbstract();
+    command = new CommandAbstract();
-        command.id = 'test';
+    command.id = 'test';
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        command = null;
+    command = null;
-        editorTriggerSpy = null;
+    editorTriggerSpy = null;
-        editor = null;
+    editor = null;
-      });
+  });
 
-      test('callRun returns result when no "abort" option specified', () => {
+  test('callRun returns result when no "abort" option specified', () => {
-        const runStub = sinon.stub(command, 'run').returns('result');
+    const runStub = sinon.stub(command, 'run').returns('result');
 
-        const result = command.callRun(editor);
+    const result = command.callRun(editor);
-        expect(editorTriggerSpy.callCount).toEqual(3);
+    expect(editorTriggerSpy.callCount).toEqual(3);
-        expect(editorTriggerSpy.getCall(0).args).toEqual([
+    expect(editorTriggerSpy.getCall(0).args).toEqual(['run:test:before', {}]);
-          'run:test:before',
+    expect(editorTriggerSpy.getCall(1).args).toEqual([
-          {}
+      'run:test',
-        ]);
+      'result',
-        expect(editorTriggerSpy.getCall(1).args).toEqual([
+      {}
-          'run:test',
+    ]);
-          'result',
+    expect(editorTriggerSpy.getCall(2).args).toEqual([
-          {}
+      'run',
-        ]);
+      'test',
-        expect(editorTriggerSpy.getCall(2).args).toEqual([
+      'result',
-          'run',
+      {}
-          'test',
+    ]);
-          'result',
-          {}
-        ]);
 
-        expect(result).toEqual('result');
+    expect(result).toEqual('result');
-        expect(runStub.calledOnce).toEqual(true);
+    expect(runStub.calledOnce).toEqual(true);
-      });
+  });
 
-      test('callRun returns undefined when "abort" option is specified', () => {
+  test('callRun returns undefined when "abort" option is specified', () => {
-        const runStub = sinon.stub(command, 'run').returns('result');
+    const runStub = sinon.stub(command, 'run').returns('result');
 
-        const result = command.callRun(editor, { abort: true });
+    const result = command.callRun(editor, { abort: true });
 
-        expect(editorTriggerSpy.calledTwice).toEqual(true);
+    expect(editorTriggerSpy.calledTwice).toEqual(true);
-        expect(editorTriggerSpy.getCall(0).args).toEqual([
+    expect(editorTriggerSpy.getCall(0).args).toEqual([
-          'run:test:before',
+      'run:test:before',
-          { abort: true }
+      { abort: true }
-        ]);
+    ]);
-        expect(editorTriggerSpy.getCall(1).args).toEqual([
+    expect(editorTriggerSpy.getCall(1).args).toEqual([
-          'abort:test',
+      'abort:test',
-          { abort: true }
+      { abort: true }
-        ]);
+    ]);
 
-        expect(result).toEqual(undefined);
+    expect(result).toEqual(undefined);
-        expect(runStub.notCalled).toEqual(true);
+    expect(runStub.notCalled).toEqual(true);
-      });
+  });
 
-      test('callStop returns result', () => {
+  test('callStop returns result', () => {
-        const stopStub = sinon.stub(command, 'stop').returns('stopped');
+    const stopStub = sinon.stub(command, 'stop').returns('stopped');
 
-        const result = command.callStop(editor);
+    const result = command.callStop(editor);
 
-        expect(editorTriggerSpy.callCount).toEqual(3);
+    expect(editorTriggerSpy.callCount).toEqual(3);
-        expect(editorTriggerSpy.getCall(0).args).toEqual([
+    expect(editorTriggerSpy.getCall(0).args).toEqual(['stop:test:before', {}]);
-          'stop:test:before',
+    expect(editorTriggerSpy.getCall(1).args).toEqual([
-          {}
+      'stop:test',
-        ]);
+      'stopped',
-        expect(editorTriggerSpy.getCall(1).args).toEqual([
+      {}
-          'stop:test',
+    ]);
-          'stopped',
+    expect(editorTriggerSpy.getCall(2).args).toEqual([
-          {}
+      'stop',
-        ]);
+      'test',
-        expect(editorTriggerSpy.getCall(2).args).toEqual([
+      'stopped',
-          'stop',
+      {}
-          'test',
+    ]);
-          'stopped',
-          {}
-        ]);
 
-        expect(result).toEqual('stopped');
+    expect(result).toEqual('stopped');
-        expect(stopStub.calledOnce).toEqual(true);
+    expect(stopStub.calledOnce).toEqual(true);
-      });
+  });
-    });
+});
-  }
-};

test/specs/css_composer/e2e/CssComposer.js

@@ -1,202 +1,198 @@
 import Backbone from 'backbone';
 const $ = Backbone.$;
 
-module.exports = {
+describe('E2E tests', () => {
-  run() {
+  var fixtures;
-    describe('E2E tests', () => {
+  var fixture;
-      var fixtures;
+  var gjs;
-      var fixture;
+  var cssc;
-      var gjs;
+  var clsm;
-      var cssc;
+  var domc;
-      var clsm;
+  var rulesSet;
-      var domc;
+  var rulesSet2;
-      var rulesSet;
-      var rulesSet2;
 
-      beforeAll(() => {
+  beforeAll(() => {
-        fixtures = $('#fixtures');
+    fixtures = $('#fixtures');
-        fixture = $('<div class="csscomposer-fixture"></div>');
+    fixture = $('<div class="csscomposer-fixture"></div>');
-      });
+  });
 
-      beforeEach(done => {
+  beforeEach(done => {
-        //this.timeout(5000);
+    //this.timeout(5000);
-        gjs = grapesjs.init({
+    gjs = grapesjs.init({
-          stylePrefix: '',
+      stylePrefix: '',
-          storageManager: { autoload: 0, type: 'none' },
+      storageManager: { autoload: 0, type: 'none' },
-          assetManager: { storageType: 'none' },
+      assetManager: { storageType: 'none' },
-          container: 'csscomposer-fixture'
+      container: 'csscomposer-fixture'
-        });
+    });
-        cssc = gjs.CssComposer;
+    cssc = gjs.CssComposer;
-        clsm = gjs.SelectorManager;
+    clsm = gjs.SelectorManager;
-        domc = gjs.DomComponents;
+    domc = gjs.DomComponents;
-        fixture.empty().appendTo(fixtures);
+    fixture.empty().appendTo(fixtures);
-        gjs.render();
+    gjs.render();
-        rulesSet = [
+    rulesSet = [
-          { selectors: [{ name: 'test1' }, { name: 'test2' }] },
+      { selectors: [{ name: 'test1' }, { name: 'test2' }] },
-          { selectors: [{ name: 'test2' }, { name: 'test3' }] },
+      { selectors: [{ name: 'test2' }, { name: 'test3' }] },
-          { selectors: [{ name: 'test3' }] }
+      { selectors: [{ name: 'test3' }] }
-        ];
+    ];
-        rulesSet2 = [
+    rulesSet2 = [
-          {
+      {
-            selectors: [{ name: 'test1' }, { name: 'test2' }],
+        selectors: [{ name: 'test1' }, { name: 'test2' }],
-            state: ':active'
+        state: ':active'
-          },
+      },
-          { selectors: [{ name: 'test2' }, { name: 'test3' }] },
+      { selectors: [{ name: 'test2' }, { name: 'test3' }] },
-          { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' }
+      { selectors: [{ name: 'test3' }], mediaText: '(max-width: 900px)' }
-        ];
+    ];
-        done();
+    done();
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        gjs = null;
+    gjs = null;
-        cssc = null;
+    cssc = null;
-        clsm = null;
+    clsm = null;
-      });
+  });
 
-      afterAll(() => {
+  afterAll(() => {
-        fixture.remove();
+    fixture.remove();
-      });
+  });
 
-      test('Rules are correctly imported from default property', () => {
+  test('Rules are correctly imported from default property', () => {
-        var gj = grapesjs.init({
+    var gj = grapesjs.init({
-          stylePrefix: '',
+      stylePrefix: '',
-          storageManager: { autoload: 0, type: 'none' },
+      storageManager: { autoload: 0, type: 'none' },
-          cssComposer: { rules: rulesSet },
+      cssComposer: { rules: rulesSet },
-          container: 'csscomposer-fixture'
+      container: 'csscomposer-fixture'
-        });
+    });
-        var cssc = gj.editor.get('CssComposer');
+    var cssc = gj.editor.get('CssComposer');
-        expect(cssc.getAll().length).toEqual(rulesSet.length);
+    expect(cssc.getAll().length).toEqual(rulesSet.length);
-        var cls = gj.editor.get('SelectorManager').getAll();
+    var cls = gj.editor.get('SelectorManager').getAll();
-        expect(cls.length).toEqual(3);
+    expect(cls.length).toEqual(3);
-      });
+  });
 
-      test('New rule adds correctly the class inside selector manager', () => {
+  test('New rule adds correctly the class inside selector manager', () => {
-        var rules = cssc.getAll();
+    var rules = cssc.getAll();
-        rules.add({ selectors: [{ name: 'test1', private: true }] });
+    rules.add({ selectors: [{ name: 'test1', private: true }] });
-        var rule = clsm.getAll().at(0);
+    var rule = clsm.getAll().at(0);
-        expect(rule.get('name')).toEqual('test1');
+    expect(rule.get('name')).toEqual('test1');
-        expect(rule.get('private')).toEqual(true);
+    expect(rule.get('private')).toEqual(true);
-      });
+  });
 
-      test('New rules are correctly imported inside selector manager', () => {
+  test('New rules are correctly imported inside selector manager', () => {
-        var rules = cssc.getAll();
+    var rules = cssc.getAll();
-        rulesSet.forEach(item => {
+    rulesSet.forEach(item => {
-          rules.add(item);
+      rules.add(item);
-        });
+    });
-        var cls = clsm.getAll();
+    var cls = clsm.getAll();
-        expect(cls.length).toEqual(3);
+    expect(cls.length).toEqual(3);
-        expect(cls.at(0).get('name')).toEqual('test1');
+    expect(cls.at(0).get('name')).toEqual('test1');
-        expect(cls.at(1).get('name')).toEqual('test2');
+    expect(cls.at(1).get('name')).toEqual('test2');
-        expect(cls.at(2).get('name')).toEqual('test3');
+    expect(cls.at(2).get('name')).toEqual('test3');
-      });
+  });
 
-      test('Add rules from the new component added as a string with style tag', () => {
+  test('Add rules from the new component added as a string with style tag', () => {
-        var comps = domc.getComponents();
+    var comps = domc.getComponents();
-        var rules = cssc.getAll();
+    var rules = cssc.getAll();
-        comps.add(
+    comps.add(
-          '<div>Test</div><style>.test{color: red} .test2{color: blue}</style>'
+      '<div>Test</div><style>.test{color: red} .test2{color: blue}</style>'
-        );
+    );
-        expect(comps.length).toEqual(1);
+    expect(comps.length).toEqual(1);
-        expect(rules.length).toEqual(2);
+    expect(rules.length).toEqual(2);
-      });
+  });
 
-      test('Add raw rule objects with addCollection', () => {
+  test('Add raw rule objects with addCollection', () => {
-        cssc.addCollection(rulesSet);
+    cssc.addCollection(rulesSet);
-        expect(cssc.getAll().length).toEqual(3);
+    expect(cssc.getAll().length).toEqual(3);
-        expect(clsm.getAll().length).toEqual(3);
+    expect(clsm.getAll().length).toEqual(3);
-      });
+  });
 
-      test('Add raw rule objects twice with addCollection do not duplucate rules', () => {
+  test('Add raw rule objects twice with addCollection do not duplucate rules', () => {
-        var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2));
+    var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2));
-        var coll1 = cssc.addCollection(rulesSet2);
+    var coll1 = cssc.addCollection(rulesSet2);
-        var coll2 = cssc.addCollection(rulesSet2Copy);
+    var coll2 = cssc.addCollection(rulesSet2Copy);
-        expect(cssc.getAll().length).toEqual(3);
+    expect(cssc.getAll().length).toEqual(3);
-        expect(clsm.getAll().length).toEqual(3);
+    expect(clsm.getAll().length).toEqual(3);
-        expect(coll1).toEqual(coll2);
+    expect(coll1).toEqual(coll2);
-      });
+  });
 
-      test('Extend css rule style, if requested', () => {
+  test('Extend css rule style, if requested', () => {
-        var style1 = { color: 'red', width: '10px' };
+    var style1 = { color: 'red', width: '10px' };
-        var style2 = { height: '20px', width: '20px' };
+    var style2 = { height: '20px', width: '20px' };
-        var rule1 = {
+    var rule1 = {
-          selectors: ['test1'],
+      selectors: ['test1'],
-          style: style1
+      style: style1
-        };
+    };
-        var rule2 = {
+    var rule2 = {
-          selectors: ['test1'],
+      selectors: ['test1'],
-          style: style2
+      style: style2
-        };
+    };
-        var ruleOut = cssc.addCollection(rule1)[0];
+    var ruleOut = cssc.addCollection(rule1)[0];
-        // ruleOut is a Model
+    // ruleOut is a Model
-        ruleOut = JSON.parse(JSON.stringify(ruleOut));
+    ruleOut = JSON.parse(JSON.stringify(ruleOut));
-        var ruleResult = {
+    var ruleResult = {
-          selectors: [
+      selectors: [
-            {
+        {
-              active: true,
+          active: true,
-              label: 'test1',
+          label: 'test1',
-              name: 'test1',
+          name: 'test1',
-              type: clsm.Selector.TYPE_CLASS,
+          type: clsm.Selector.TYPE_CLASS,
-              private: false,
+          private: false,
-              protected: false
+          protected: false
-            }
+        }
-          ],
+      ],
-          style: {
+      style: {
-            color: 'red',
+        color: 'red',
-            width: '10px'
+        width: '10px'
-          }
+      }
-        };
+    };
-        expect(ruleOut).toEqual(ruleResult);
+    expect(ruleOut).toEqual(ruleResult);
-        var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0];
+    var ruleOut = cssc.addCollection(rule2, { extend: 1 })[0];
-        ruleOut = JSON.parse(JSON.stringify(ruleOut));
+    ruleOut = JSON.parse(JSON.stringify(ruleOut));
-        ruleResult.style = {
+    ruleResult.style = {
-          color: 'red',
+      color: 'red',
-          height: '20px',
+      height: '20px',
-          width: '20px'
+      width: '20px'
-        };
+    };
-        expect(ruleOut).toEqual(ruleResult);
+    expect(ruleOut).toEqual(ruleResult);
-      });
+  });
 
-      test('Do not extend with different selectorsAdd', () => {
+  test('Do not extend with different selectorsAdd', () => {
-        var style1 = { color: 'red', width: '10px' };
+    var style1 = { color: 'red', width: '10px' };
-        var style2 = { height: '20px', width: '20px' };
+    var style2 = { height: '20px', width: '20px' };
-        var rule1 = {
+    var rule1 = {
-          selectors: [],
+      selectors: [],
-          selectorsAdd: '*',
+      selectorsAdd: '*',
-          style: style1
+      style: style1
-        };
+    };
-        var rule2 = {
+    var rule2 = {
-          selectors: [],
+      selectors: [],
-          selectorsAdd: 'p',
+      selectorsAdd: 'p',
-          style: style2
+      style: style2
-        };
+    };
-        var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0];
+    var rule1Out = cssc.addCollection(rule1, { extend: 1 })[0];
-        var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0];
+    var rule2Out = cssc.addCollection(rule2, { extend: 1 })[0];
-        rule1Out = JSON.parse(JSON.stringify(rule1Out));
+    rule1Out = JSON.parse(JSON.stringify(rule1Out));
-        rule2Out = JSON.parse(JSON.stringify(rule2Out));
+    rule2Out = JSON.parse(JSON.stringify(rule2Out));
-        var rule1Result = {
+    var rule1Result = {
-          selectors: [],
+      selectors: [],
-          selectorsAdd: '*',
+      selectorsAdd: '*',
-          style: {
+      style: {
-            color: 'red',
+        color: 'red',
-            width: '10px'
+        width: '10px'
-          }
+      }
-        };
+    };
-        var rule2Result = {
+    var rule2Result = {
-          selectors: [],
+      selectors: [],
-          selectorsAdd: 'p',
+      selectorsAdd: 'p',
-          style: {
+      style: {
-            height: '20px',
+        height: '20px',
-            width: '20px'
+        width: '20px'
-          }
+      }
-        };
+    };
-        expect(rule1Out).toEqual(rule1Result);
+    expect(rule1Out).toEqual(rule1Result);
-        expect(rule2Out).toEqual(rule2Result);
+    expect(rule2Out).toEqual(rule2Result);
-      });
+  });
 
-      test('Add raw rule objects with width via addCollection', () => {
+  test('Add raw rule objects with width via addCollection', () => {
-        var coll1 = cssc.addCollection(rulesSet2);
+    var coll1 = cssc.addCollection(rulesSet2);
-        expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText);
+    expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText);
-      });
+  });
-    });
+});
-  }
-};

test/specs/css_composer/index.js

@@ -3,7 +3,7 @@ import CssRuleView from './view/CssRuleView';
 import CssRulesView from './view/CssRulesView';
 import CssComposer from 'css_composer';
 import e2e from './e2e/CssComposer';
-import utils from './../test_utils.js';
+import utils from './../../test_utils.js';
 import Editor from 'editor/model/Editor';
 
 describe('Css Composer', () => {
@@ -322,9 +322,4 @@ describe('Css Composer', () => {
       expect(obj.getAll().length).toEqual(toTest.length);
     });
   });
-
-  Models.run();
-  CssRuleView.run();
-  CssRulesView.run();
-  e2e.run();
 });

test/specs/css_composer/model/CssModels.js

@@ -3,125 +3,119 @@ import CssRules from 'css_composer/model/CssRules';
 import Selectors from 'selector_manager/model/Selectors';
 import Selector from 'selector_manager/model/Selector';
 
-module.exports = {
+describe('CssRule', () => {
-  run() {
+  let obj;
-    describe('CssRule', () => {
+
-      let obj;
+  beforeEach(() => {
-
+    obj = new CssRule();
-      beforeEach(() => {
+  });
-        obj = new CssRule();
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Has selectors property', () => {
-
+    expect(obj.has('selectors')).toEqual(true);
-      test('Has selectors property', () => {
+  });
-        expect(obj.has('selectors')).toEqual(true);
+
-      });
+  test('Has style property', () => {
-
+    expect(obj.has('style')).toEqual(true);
-      test('Has style property', () => {
+  });
-        expect(obj.has('style')).toEqual(true);
+
-      });
+  test('Has state property', () => {
-
+    expect(obj.has('state')).toEqual(true);
-      test('Has state property', () => {
+  });
-        expect(obj.has('state')).toEqual(true);
+
-      });
+  test('No default selectors', () => {
-
+    expect(obj.get('selectors').length).toEqual(0);
-      test('No default selectors', () => {
+  });
-        expect(obj.get('selectors').length).toEqual(0);
+
-      });
+  test('Compare returns true with the same selectors', () => {
-
+    var s1 = obj.get('selectors').add({ name: 'test1' });
-      test('Compare returns true with the same selectors', () => {
+    var s2 = obj.get('selectors').add({ name: 'test2' });
-        var s1 = obj.get('selectors').add({ name: 'test1' });
+    expect(obj.compare([s1, s2])).toEqual(true);
-        var s2 = obj.get('selectors').add({ name: 'test2' });
+  });
-        expect(obj.compare([s1, s2])).toEqual(true);
+
-      });
+  test('Compare with different state', () => {
-
+    var s1 = obj.get('selectors').add({ name: 'test1' });
-      test('Compare with different state', () => {
+    var s2 = obj.get('selectors').add({ name: 'test2' });
-        var s1 = obj.get('selectors').add({ name: 'test1' });
+    obj.set('state', 'hover');
-        var s2 = obj.get('selectors').add({ name: 'test2' });
+    expect(obj.compare([s1, s2])).toEqual(false);
-        obj.set('state', 'hover');
+    expect(obj.compare([s1, s2], 'hover')).toEqual(true);
-        expect(obj.compare([s1, s2])).toEqual(false);
+  });
-        expect(obj.compare([s1, s2], 'hover')).toEqual(true);
+
-      });
+  test('Compare with different mediaText', () => {
-
+    var s1 = obj.get('selectors').add({ name: 'test1' });
-      test('Compare with different mediaText', () => {
+    var s2 = obj.get('selectors').add({ name: 'test2' });
-        var s1 = obj.get('selectors').add({ name: 'test1' });
+    obj.set('state', 'hover');
-        var s2 = obj.get('selectors').add({ name: 'test2' });
+    obj.set('mediaText', '1000');
-        obj.set('state', 'hover');
+    expect(obj.compare([s1, s2])).toEqual(false);
-        obj.set('mediaText', '1000');
+    expect(obj.compare([s1, s2], 'hover')).toEqual(false);
-        expect(obj.compare([s1, s2])).toEqual(false);
+    expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true);
-        expect(obj.compare([s1, s2], 'hover')).toEqual(false);
+  });
-        expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true);
+
-      });
+  test('toCSS returns empty if there is no style', () => {
-
+    var s1 = obj.get('selectors').add({ name: 'test1' });
-      test('toCSS returns empty if there is no style', () => {
+    expect(obj.toCSS()).toEqual('');
-        var s1 = obj.get('selectors').add({ name: 'test1' });
+  });
-        expect(obj.toCSS()).toEqual('');
+
-      });
+  test('toCSS returns empty if there is no selectors', () => {
-
+    obj.setStyle({ color: 'red' });
-      test('toCSS returns empty if there is no selectors', () => {
+    expect(obj.toCSS()).toEqual('');
-        obj.setStyle({ color: 'red' });
+  });
-        expect(obj.toCSS()).toEqual('');
+
-      });
+  test('toCSS returns simple CSS', () => {
-
+    obj.get('selectors').add({ name: 'test1' });
-      test('toCSS returns simple CSS', () => {
+    obj.setStyle({ color: 'red' });
-        obj.get('selectors').add({ name: 'test1' });
+    expect(obj.toCSS()).toEqual(`.test1{color:red;}`);
-        obj.setStyle({ color: 'red' });
+  });
-        expect(obj.toCSS()).toEqual(`.test1{color:red;}`);
+
-      });
+  test('toCSS wraps correctly inside media rule', () => {
-
+    const media = '(max-width: 768px)';
-      test('toCSS wraps correctly inside media rule', () => {
+    obj.set('atRuleType', 'media');
-        const media = '(max-width: 768px)';
+    obj.set('mediaText', media);
-        obj.set('atRuleType', 'media');
+    obj.get('selectors').add({ name: 'test1' });
-        obj.set('mediaText', media);
+    obj.setStyle({ color: 'red' });
-        obj.get('selectors').add({ name: 'test1' });
+    expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`);
-        obj.setStyle({ color: 'red' });
+  });
-        expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`);
+
-      });
+  test('toCSS with a generic at-rule', () => {
-
+    obj.set('atRuleType', 'supports');
-      test('toCSS with a generic at-rule', () => {
+    obj.get('selectors').add({ name: 'test1' });
-        obj.set('atRuleType', 'supports');
+    obj.setStyle({ 'font-family': 'Open Sans' });
-        obj.get('selectors').add({ name: 'test1' });
+    expect(obj.toCSS()).toEqual(`@supports{.test1{font-family:Open Sans;}}`);
-        obj.setStyle({ 'font-family': 'Open Sans' });
+  });
-        expect(obj.toCSS()).toEqual(
+
-          `@supports{.test1{font-family:Open Sans;}}`
+  test('toCSS with a generic single at-rule', () => {
-        );
+    obj.set('atRuleType', 'font-face');
-      });
+    obj.set('singleAtRule', 1);
-
+    obj.setStyle({ 'font-family': 'Sans' });
-      test('toCSS with a generic single at-rule', () => {
+    expect(obj.toCSS()).toEqual(`@font-face{font-family:Sans;}`);
-        obj.set('atRuleType', 'font-face');
+  });
-        obj.set('singleAtRule', 1);
+
-        obj.setStyle({ 'font-family': 'Sans' });
+  test('toCSS with a generic at-rule and condition', () => {
-        expect(obj.toCSS()).toEqual(`@font-face{font-family:Sans;}`);
+    obj.set('atRuleType', 'font-face');
-      });
+    obj.set('mediaText', 'some-condition');
-
+    obj.get('selectors').add({ name: 'test1' });
-      test('toCSS with a generic at-rule and condition', () => {
+    obj.setStyle({ 'font-family': 'Open Sans' });
-        obj.set('atRuleType', 'font-face');
+    expect(obj.toCSS()).toEqual(
-        obj.set('mediaText', 'some-condition');
+      `@font-face some-condition{.test1{font-family:Open Sans;}}`
-        obj.get('selectors').add({ name: 'test1' });
+    );
-        obj.setStyle({ 'font-family': 'Open Sans' });
+  });
-        expect(obj.toCSS()).toEqual(
+});
-          `@font-face some-condition{.test1{font-family:Open Sans;}}`
+
-        );
+describe('CssRules', () => {
-      });
+  test('Creates collection item correctly', () => {
-    });
+    var c = new CssRules();
-
+    var m = c.add({});
-    describe('CssRules', () => {
+    expect(m instanceof CssRule).toEqual(true);
-      test('Creates collection item correctly', () => {
+  });
-        var c = new CssRules();
+});
-        var m = c.add({});
+
-        expect(m instanceof CssRule).toEqual(true);
+describe('Selectors', () => {
-      });
+  test('Creates collection item correctly', () => {
-    });
+    var c = new Selectors();
-
+    var m = c.add({});
-    describe('Selectors', () => {
+    expect(m instanceof Selector).toEqual(true);
-      test('Creates collection item correctly', () => {
+  });
-        var c = new Selectors();
+});
-        var m = c.add({});
-        expect(m instanceof Selector).toEqual(true);
-      });
-    });
-  }
-};

test/specs/css_composer/view/CssRuleView.js

@@ -1,95 +1,91 @@
 import CssRuleView from 'css_composer/view/CssRuleView';
 import CssRule from 'css_composer/model/CssRule';
 
-module.exports = {
+describe('CssRuleView', () => {
-  run() {
+  let obj;
-    describe('CssRuleView', () => {
+  let fixtures;
-      let obj;
-      let fixtures;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        var m = new CssRule();
+    var m = new CssRule();
-        obj = new CssRuleView({
+    obj = new CssRuleView({
-          model: m
+      model: m
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(obj.render().el);
+    fixtures.appendChild(obj.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj.model.destroy();
+    obj.model.destroy();
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(CssRuleView).toBeTruthy();
+    expect(CssRuleView).toBeTruthy();
-      });
+  });
 
-      test('Empty style inside', () => {
+  test('Empty style inside', () => {
-        expect(fixtures.innerHTML).toEqual('<style></style>');
+    expect(fixtures.innerHTML).toEqual('<style></style>');
-      });
+  });
 
-      test('On update of style always empty as there is no selectors', () => {
+  test('On update of style always empty as there is no selectors', () => {
-        obj.model.set('style', { prop: 'value' });
+    obj.model.set('style', { prop: 'value' });
-        expect(fixtures.innerHTML).toEqual('<style></style>');
+    expect(fixtures.innerHTML).toEqual('<style></style>');
-      });
+  });
 
-      describe('CssRuleView with selectors', () => {
+  describe('CssRuleView with selectors', () => {
-        let objReg;
+    let objReg;
 
-        beforeEach(() => {
+    beforeEach(() => {
-          var m = new CssRule({
+      var m = new CssRule({
-            selectors: [{ name: 'test1' }, { name: 'test2' }]
+        selectors: [{ name: 'test1' }, { name: 'test2' }]
-          });
+      });
-          objReg = new CssRuleView({
+      objReg = new CssRuleView({
-            model: m
+        model: m
-          });
+      });
-          objReg.render();
+      objReg.render();
-          document.body.innerHTML = '<div id="fixtures"></div>';
+      document.body.innerHTML = '<div id="fixtures"></div>';
-          fixtures = document.body.querySelector('#fixtures');
+      fixtures = document.body.querySelector('#fixtures');
-          fixtures.appendChild(objReg.el);
+      fixtures.appendChild(objReg.el);
-        });
+    });
 
-        afterEach(() => {
+    afterEach(() => {
-          objReg.model.destroy();
+      objReg.model.destroy();
-        });
+    });
 
-        test('Empty with no style', () => {
+    test('Empty with no style', () => {
-          expect(objReg.$el.html()).toEqual('');
+      expect(objReg.$el.html()).toEqual('');
-        });
+    });
 
-        test('Not empty on update of style', () => {
+    test('Not empty on update of style', () => {
-          objReg.model.set('style', { prop: 'value' });
+      objReg.model.set('style', { prop: 'value' });
-          expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
+      expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
-        });
+    });
 
-        test('State correctly rendered', () => {
+    test('State correctly rendered', () => {
-          objReg.model.set('style', { prop: 'value' });
+      objReg.model.set('style', { prop: 'value' });
-          objReg.model.set('state', 'hover');
+      objReg.model.set('state', 'hover');
-          expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}');
+      expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}');
-        });
+    });
 
-        test('State render changes on update', () => {
+    test('State render changes on update', () => {
-          objReg.model.set('style', { prop: 'value' });
+      objReg.model.set('style', { prop: 'value' });
-          objReg.model.set('state', 'hover');
+      objReg.model.set('state', 'hover');
-          objReg.model.set('state', '');
+      objReg.model.set('state', '');
-          expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
+      expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
-        });
+    });
 
-        test('Render media queries', () => {
+    test('Render media queries', () => {
-          objReg.model.set('style', { prop: 'value' });
+      objReg.model.set('style', { prop: 'value' });
-          objReg.model.set('mediaText', '(max-width: 999px)');
+      objReg.model.set('mediaText', '(max-width: 999px)');
-          expect(objReg.$el.html()).toEqual(
+      expect(objReg.$el.html()).toEqual(
-            '@media (max-width: 999px){.test1.test2{prop:value;}}'
+        '@media (max-width: 999px){.test1.test2{prop:value;}}'
-          );
+      );
-        });
+    });
 
-        test('Empty on clear', () => {
+    test('Empty on clear', () => {
-          objReg.model.set('style', { prop: 'value' });
+      objReg.model.set('style', { prop: 'value' });
-          objReg.model.set('style', {});
+      objReg.model.set('style', {});
-          expect(objReg.$el.html()).toEqual('');
+      expect(objReg.$el.html()).toEqual('');
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/css_composer/view/CssRulesView.js

@@ -2,108 +2,104 @@ import CssRulesView from 'css_composer/view/CssRulesView';
 import CssRules from 'css_composer/model/CssRules';
 import Editor from 'editor/model/Editor';
 
-module.exports = {
+describe('CssRulesView', () => {
-  run() {
+  let obj;
-    describe('CssRulesView', () => {
+  const prefix = 'rules';
-      let obj;
+  const devices = [
-      const prefix = 'rules';
+    {
-      const devices = [
+      name: 'Mobile portrait',
-        {
+      width: '320px',
-          name: 'Mobile portrait',
+      widthMedia: '480px'
-          width: '320px',
+    },
-          widthMedia: '480px'
+    {
-        },
+      name: 'Tablet',
-        {
+      width: '768px',
-          name: 'Tablet',
+      widthMedia: '992px'
-          width: '768px',
+    },
-          widthMedia: '992px'
+    {
-        },
+      name: 'Desktop',
-        {
+      width: '',
-          name: 'Desktop',
+      widthMedia: ''
-          width: '',
+    }
-          widthMedia: ''
+  ];
-        }
-      ];
 
-      beforeEach(() => {
+  beforeEach(() => {
-        const col = new CssRules([]);
+    const col = new CssRules([]);
-        obj = new CssRulesView({
+    obj = new CssRulesView({
-          collection: col,
+      collection: col,
-          config: {
+      config: {
-            em: new Editor({
+        em: new Editor({
-              deviceManager: {
+          deviceManager: {
-                devices
+            devices
-              }
-            })
           }
-        });
+        })
-        document.body.innerHTML = '<div id="fixtures"></div>';
+      }
-        document.body.querySelector('#fixtures').appendChild(obj.render().el);
+    });
-      });
+    document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.querySelector('#fixtures').appendChild(obj.render().el);
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj.collection.reset();
+    obj.collection.reset();
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(CssRulesView).toBeTruthy();
+    expect(CssRulesView).toBeTruthy();
-      });
+  });
 
-      test('Collection is empty. Styles structure bootstraped', () => {
+  test('Collection is empty. Styles structure bootstraped', () => {
-        expect(obj.$el.html()).toBeTruthy();
+    expect(obj.$el.html()).toBeTruthy();
-        const foundStylesContainers = obj.$el.find('div');
+    const foundStylesContainers = obj.$el.find('div');
-        expect(foundStylesContainers.length).toEqual(devices.length);
+    expect(foundStylesContainers.length).toEqual(devices.length);
 
-        const sortedDevicesWidthMedia = devices
+    const sortedDevicesWidthMedia = devices
-          .map(dvc => dvc.widthMedia)
+      .map(dvc => dvc.widthMedia)
-          .sort((left, right) => {
+      .sort((left, right) => {
-            return (
+        return (
-              ((right && right.replace('px', '')) || Number.MAX_VALUE) -
+          ((right && right.replace('px', '')) || Number.MAX_VALUE) -
-              ((left && left.replace('px', '')) || Number.MAX_VALUE)
+          ((left && left.replace('px', '')) || Number.MAX_VALUE)
-            );
+        );
-          })
+      })
-          .map(widthMedia => parseFloat(widthMedia));
+      .map(widthMedia => parseFloat(widthMedia));
 
-        foundStylesContainers.each(($styleC, idx) => {
+    foundStylesContainers.each(($styleC, idx) => {
-          const width = sortedDevicesWidthMedia[idx];
+      const width = sortedDevicesWidthMedia[idx];
-          expect($styleC.id).toEqual(`${prefix}${width ? `-${width}` : ''}`);
+      expect($styleC.id).toEqual(`${prefix}${width ? `-${width}` : ''}`);
-        });
+    });
-      });
+  });
 
-      test('Add new rule', () => {
+  test('Add new rule', () => {
-        sinon.stub(obj, 'addToCollection');
+    sinon.stub(obj, 'addToCollection');
-        obj.collection.add({});
+    obj.collection.add({});
-        expect(obj.addToCollection.calledOnce).toBeTruthy();
+    expect(obj.addToCollection.calledOnce).toBeTruthy();
-      });
+  });
 
-      test('Add correctly rules with different media queries', () => {
+  test('Add correctly rules with different media queries', () => {
-        const foundStylesContainers = obj.$el.find('div');
+    const foundStylesContainers = obj.$el.find('div');
-        const rules = [
+    const rules = [
-          {
+      {
-            selectorsAdd: '#testid'
+        selectorsAdd: '#testid'
-          },
+      },
-          {
+      {
-            selectorsAdd: '#testid2',
+        selectorsAdd: '#testid2',
-            mediaText: '(max-width: 1000px)'
+        mediaText: '(max-width: 1000px)'
-          },
+      },
-          {
+      {
-            selectorsAdd: '#testid3',
+        selectorsAdd: '#testid3',
-            mediaText: '(min-width: 900px)'
+        mediaText: '(min-width: 900px)'
-          },
+      },
-          {
+      {
-            selectorsAdd: '#testid4',
+        selectorsAdd: '#testid4',
-            mediaText: 'screen and (max-width: 900px) and (min-width: 600px)'
+        mediaText: 'screen and (max-width: 900px) and (min-width: 600px)'
-          }
+      }
-        ];
+    ];
-        obj.collection.add(rules);
+    obj.collection.add(rules);
-        const stylesCont = obj.el.querySelector(`#${obj.className}`);
+    const stylesCont = obj.el.querySelector(`#${obj.className}`);
-        expect(stylesCont.children.length).toEqual(rules.length);
+    expect(stylesCont.children.length).toEqual(rules.length);
-      });
+  });
 
-      test('Render new rule', () => {
+  test('Render new rule', () => {
-        obj.collection.add({});
+    obj.collection.add({});
-        expect(obj.$el.find(`#${prefix}`).html()).toBeTruthy();
+    expect(obj.$el.find(`#${prefix}`).html()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/device_manager/index.js

@@ -58,6 +58,4 @@ describe('DeviceManager', () => {
       expect(obj.render()).toBeTruthy();
     });
   });
-
-  DevicesView.run();
 });

test/specs/device_manager/view/DevicesView.js

@@ -1,68 +1,62 @@
 import DevicesView from 'device_manager/view/DevicesView';
 import Devices from 'device_manager/model/Devices';
 
-module.exports = {
+describe('DevicesView', () => {
-  run() {
+  var $fixtures;
-    describe('DevicesView', () => {
+  var $fixture;
-      var $fixtures;
+  var model;
-      var $fixture;
+  var view;
-      var model;
+  var editorModel;
-      var view;
+  var em;
-      var editorModel;
+
-      var em;
+  beforeEach(() => {
-
+    model = new Devices([]);
-      beforeEach(() => {
+    view = new DevicesView({
-        model = new Devices([]);
+      collection: model
-        view = new DevicesView({
+    });
-          collection: model
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    document.body.querySelector('#fixtures').appendChild(view.render().el);
-        document.body.innerHTML = '<div id="fixtures"></div>';
+  });
-        document.body.querySelector('#fixtures').appendChild(view.render().el);
+
-      });
+  afterEach(() => {
-
+    view.collection.reset();
-      afterEach(() => {
+  });
-        view.collection.reset();
+
-      });
+  test('The content is not empty', () => {
-
+    expect(view.el.innerHTML).toBeTruthy();
-      test('The content is not empty', () => {
+  });
-        expect(view.el.innerHTML).toBeTruthy();
+
-      });
+  test('No options without devices', () => {
-
+    expect(view.getOptions()).toEqual('');
-      test('No options without devices', () => {
+  });
-        expect(view.getOptions()).toEqual('');
+
-      });
+  test('Render new button', () => {
-
+    view.collection.add({});
-      test('Render new button', () => {
+    expect(view.$el.html()).toBeTruthy();
-        view.collection.add({});
+  });
-        expect(view.$el.html()).toBeTruthy();
+
+  describe('With configs', () => {
+    beforeEach(() => {
+      editorModel = new Backbone.Model();
+      model = new Devices([{ name: 'test1' }, { name: 'test2' }]);
+      view = new DevicesView({
+        collection: model,
+        config: { em: editorModel }
       });
+      document.body.innerHTML = '<div id="fixtures"></div>';
+      document.body.querySelector('#fixtures').appendChild(view.render().el);
+    });
 
-      describe('With configs', () => {
+    test('Update device on select change', () => {
-        beforeEach(() => {
+      view.$el.find('select').val('test2');
-          editorModel = new Backbone.Model();
+      view.updateDevice();
-          model = new Devices([{ name: 'test1' }, { name: 'test2' }]);
+      expect(view.config.em.get('device')).toEqual('test2');
-          view = new DevicesView({
+    });
-            collection: model,
-            config: { em: editorModel }
-          });
-          document.body.innerHTML = '<div id="fixtures"></div>';
-          document.body
-            .querySelector('#fixtures')
-            .appendChild(view.render().el);
-        });
-
-        test('Update device on select change', () => {
-          view.$el.find('select').val('test2');
-          view.updateDevice();
-          expect(view.config.em.get('device')).toEqual('test2');
-        });
 
-        test('Render options', () => {
+    test('Render options', () => {
-          expect(view.getOptions()).toEqual(
+      expect(view.getOptions()).toEqual(
-            '<option value="test1">test1</option><option value="test2">test2</option>'
+        '<option value="test1">test1</option><option value="test2">test2</option>'
-          );
+      );
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/dom_components/index.js

@@ -6,7 +6,7 @@ import ComponentsView from './view/ComponentsView';
 import ComponentTextView from './view/ComponentTextView';
 import ComponentImageView from './view/ComponentImageView';
 import Editor from 'editor/model/Editor';
-import utils from './../test_utils.js';
+import utils from './../../test_utils.js';
 
 describe('DOM Components', () => {
   describe('Main', () => {
@@ -267,13 +267,4 @@ describe('DOM Components', () => {
       expect(comp.get('editable')).toBe(1);
     });
   });
-
-  ComponentModels.run();
-
-  describe('Views', () => {
-    ComponentView.run();
-    ComponentsView.run();
-    ComponentTextView.run();
-    ComponentImageView.run();
-  });
 });

test/specs/dom_components/view/ComponentImageView.js

@@ -1,41 +1,37 @@
 import ComponentImageView from 'dom_components/view/ComponentImageView';
 import Component from 'dom_components/model/ComponentImage';
 
-module.exports = {
+describe('ComponentImageView', () => {
-  run() {
+  var model;
-    describe('ComponentImageView', () => {
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Component();
+    model = new Component();
-        view = new ComponentImageView({
+    view = new ComponentImageView({
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(view.render().el);
+    document.body.querySelector('#fixtures').appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.remove();
+    view.remove();
-      });
+  });
 
-      test('Component empty', () => {
+  test('Component empty', () => {
-        expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
+    expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
-      });
+  });
 
-      test('TagName is <img>', () => {
+  test('TagName is <img>', () => {
-        expect(view.el.tagName).toEqual('IMG');
+    expect(view.el.tagName).toEqual('IMG');
-      });
+  });
 
-      test('Update src attribute', () => {
+  test('Update src attribute', () => {
-        model.set('src', './');
+    model.set('src', './');
-        expect(view.el.getAttribute('src')).toEqual('./');
+    expect(view.el.getAttribute('src')).toEqual('./');
-      });
+  });
 
-      test('Renders correctly', () => {
+  test('Renders correctly', () => {
-        expect(view.render()).toBeTruthy();
+    expect(view.render()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/dom_components/view/ComponentTextView.js

@@ -1,46 +1,42 @@
 import ComponentTextView from 'dom_components/view/ComponentTextView';
 import Component from 'dom_components/model/Component';
 
-module.exports = {
+describe('ComponentTextView', () => {
-  run() {
+  var fixtures;
-    describe('ComponentTextView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Component();
+    model = new Component();
-        view = new ComponentTextView({
+    view = new ComponentTextView({
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.remove();
+    view.remove();
-      });
+  });
 
-      test('Component empty', () => {
+  test('Component empty', () => {
-        expect(fixtures.innerHTML).toEqual(
+    expect(fixtures.innerHTML).toEqual(
-          '<div data-gjs-type="default" data-highlightable="1"></div>'
+      '<div data-gjs-type="default" data-highlightable="1"></div>'
-        );
+    );
-      });
+  });
 
-      test('Input content is stored in model', () => {
+  test('Input content is stored in model', () => {
-        //view.enableEditing();
+    //view.enableEditing();
-        view.el.innerHTML = 'test';
+    view.el.innerHTML = 'test';
-        //view.disableEditing();
+    //view.disableEditing();
-        //model.get('content').should.equal('test');
+    //model.get('content').should.equal('test');
-      });
+  });
 
-      test('Init with content', () => {
+  test('Init with content', () => {
-        model = new Component({ content: 'test' });
+    model = new Component({ content: 'test' });
-        view = new ComponentTextView({ model });
+    view = new ComponentTextView({ model });
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-        expect(view.el.innerHTML).toEqual('test');
+    expect(view.el.innerHTML).toEqual('test');
-      });
+  });
-    });
+});
-  }
-};

test/specs/dom_components/view/ComponentV.js

@@ -3,144 +3,140 @@ import Component from 'dom_components/model/Component';
 import DomComponents from 'dom_components';
 import Editor from 'editor/model/Editor';
 
-module.exports = {
+describe('ComponentView', () => {
-  run() {
+  var fixtures;
-    describe('ComponentView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
+  var hClass = 'hc-state';
-      var view;
+  var dcomp;
-      var hClass = 'hc-state';
+  var compOpts;
-      var dcomp;
+  let em;
-      var compOpts;
+
-      let em;
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = {
-        dcomp = new DomComponents();
+      em,
-        compOpts = {
+      componentTypes: dcomp.componentTypes
-          em,
+    };
-          componentTypes: dcomp.componentTypes
+    model = new Component({}, compOpts);
-        };
+    view = new ComponentView({
-        model = new Component({}, compOpts);
+      model
-        view = new ComponentView({
-          model
-        });
-        document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
-      });
-
-      afterEach(() => {
-        view.remove();
-      });
-
-      test('Component empty', () => {
-        expect(fixtures.innerHTML).toEqual(
-          '<div data-gjs-type="default" data-highlightable="1"></div>'
-        );
-      });
-
-      test('Add helper class on update of state', () => {
-        model.set('state', 'test');
-        expect(fixtures.innerHTML).toEqual(
-          '<div data-gjs-type="default" data-highlightable="1" class="' +
-            hClass +
-            '"></div>'
-        );
-      });
-
-      test('Clean form helper state', () => {
-        model.set('state', 'test');
-        model.set('state', '');
-        expect(fixtures.innerHTML).toEqual(
-          '<div data-gjs-type="default" data-highlightable="1" class=""></div>'
-        );
-      });
-
-      test('Add helper class on status update', () => {
-        model.set('status', 'selected');
-        expect(fixtures.innerHTML).toEqual(
-          '<div data-gjs-type="default" data-highlightable="1" class="selected"></div>'
-        );
-      });
-
-      test('Get string of classes', () => {
-        model.set('attributes', { class: ['test', 'test2'] });
-        expect(view.getClasses()).toEqual('test test2');
-      });
-
-      test('Update attributes', () => {
-        model.set('attributes', {
-          title: 'value',
-          'data-test': 'value2'
-        });
-        expect(view.el.getAttribute('title')).toEqual('value');
-        expect(view.el.getAttribute('data-test')).toEqual('value2');
-      });
-
-      test('Update style', () => {
-        model.set('style', {
-          color: 'red',
-          float: 'left'
-        });
-        expect(view.el.getAttribute('style')).toEqual('color:red;float:left;');
-      });
-
-      test('Clean style', () => {
-        model.set('style', { color: 'red' });
-        model.set('style', {});
-        expect(view.el.getAttribute('style')).toEqual(null);
-      });
-
-      test('Add class', () => {
-        model.get('classes').add({ name: 'test' });
-        expect(view.el.getAttribute('class')).toEqual('test');
-      });
-
-      test('Add classes', () => {
-        model.get('classes').add([{ name: 'test' }, { name: 'test2' }]);
-        expect(view.el.getAttribute('class')).toEqual('test test2');
-      });
-
-      test('Update on remove of some class', () => {
-        var cls1 = model.get('classes').add({ name: 'test' });
-        var cls12 = model.get('classes').add({ name: 'test2' });
-        model.get('classes').remove(cls1);
-        expect(view.el.getAttribute('class')).toEqual('test2');
-      });
-
-      test('Init with different tag', () => {
-        model = new Component({ tagName: 'span' });
-        view = new ComponentView({ model });
-        fixtures.innerHTML = '';
-        fixtures.appendChild(view.render().el);
-        expect(view.render().el.tagName).toEqual('SPAN');
-      });
-
-      test('Init with nested components', () => {
-        model = new Component(
-          {
-            components: [{ tagName: 'span' }, { attributes: { title: 'test' } }]
-          },
-          compOpts
-        );
-        view = new ComponentView({
-          model,
-          componentTypes: dcomp.componentTypes
-        });
-        fixtures.innerHTML = '';
-        fixtures.appendChild(view.render().el);
-        expect(view.$el.html()).toEqual(
-          '<span data-gjs-type="default" data-highlightable="1"></span><div data-gjs-type="default" data-highlightable="1" title="test"></div>'
-        );
-      });
-
-      test('removeClass removes classes from attributes', () => {
-        model.addClass('class1');
-        model.removeClass('class1');
-        const result = model.getAttributes();
-        expect(result.class).toEqual(undefined);
-      });
     });
-  }
+    document.body.innerHTML = '<div id="fixtures"></div>';
-};
+    fixtures = document.body.querySelector('#fixtures');
+    fixtures.appendChild(view.render().el);
+  });
+
+  afterEach(() => {
+    view.remove();
+  });
+
+  test('Component empty', () => {
+    expect(fixtures.innerHTML).toEqual(
+      '<div data-gjs-type="default" data-highlightable="1"></div>'
+    );
+  });
+
+  test('Add helper class on update of state', () => {
+    model.set('state', 'test');
+    expect(fixtures.innerHTML).toEqual(
+      '<div data-gjs-type="default" data-highlightable="1" class="' +
+        hClass +
+        '"></div>'
+    );
+  });
+
+  test('Clean form helper state', () => {
+    model.set('state', 'test');
+    model.set('state', '');
+    expect(fixtures.innerHTML).toEqual(
+      '<div data-gjs-type="default" data-highlightable="1" class=""></div>'
+    );
+  });
+
+  test('Add helper class on status update', () => {
+    model.set('status', 'selected');
+    expect(fixtures.innerHTML).toEqual(
+      '<div data-gjs-type="default" data-highlightable="1" class="selected"></div>'
+    );
+  });
+
+  test('Get string of classes', () => {
+    model.set('attributes', { class: ['test', 'test2'] });
+    expect(view.getClasses()).toEqual('test test2');
+  });
+
+  test('Update attributes', () => {
+    model.set('attributes', {
+      title: 'value',
+      'data-test': 'value2'
+    });
+    expect(view.el.getAttribute('title')).toEqual('value');
+    expect(view.el.getAttribute('data-test')).toEqual('value2');
+  });
+
+  test('Update style', () => {
+    model.set('style', {
+      color: 'red',
+      float: 'left'
+    });
+    expect(view.el.getAttribute('style')).toEqual('color:red;float:left;');
+  });
+
+  test('Clean style', () => {
+    model.set('style', { color: 'red' });
+    model.set('style', {});
+    expect(view.el.getAttribute('style')).toEqual(null);
+  });
+
+  test('Add class', () => {
+    model.get('classes').add({ name: 'test' });
+    expect(view.el.getAttribute('class')).toEqual('test');
+  });
+
+  test('Add classes', () => {
+    model.get('classes').add([{ name: 'test' }, { name: 'test2' }]);
+    expect(view.el.getAttribute('class')).toEqual('test test2');
+  });
+
+  test('Update on remove of some class', () => {
+    var cls1 = model.get('classes').add({ name: 'test' });
+    var cls12 = model.get('classes').add({ name: 'test2' });
+    model.get('classes').remove(cls1);
+    expect(view.el.getAttribute('class')).toEqual('test2');
+  });
+
+  test('Init with different tag', () => {
+    model = new Component({ tagName: 'span' });
+    view = new ComponentView({ model });
+    fixtures.innerHTML = '';
+    fixtures.appendChild(view.render().el);
+    expect(view.render().el.tagName).toEqual('SPAN');
+  });
+
+  test('Init with nested components', () => {
+    model = new Component(
+      {
+        components: [{ tagName: 'span' }, { attributes: { title: 'test' } }]
+      },
+      compOpts
+    );
+    view = new ComponentView({
+      model,
+      componentTypes: dcomp.componentTypes
+    });
+    fixtures.innerHTML = '';
+    fixtures.appendChild(view.render().el);
+    expect(view.$el.html()).toEqual(
+      '<span data-gjs-type="default" data-highlightable="1"></span><div data-gjs-type="default" data-highlightable="1" title="test"></div>'
+    );
+  });
+
+  test('removeClass removes classes from attributes', () => {
+    model.addClass('class1');
+    model.removeClass('class1');
+    const result = model.getAttributes();
+    expect(result.class).toEqual(undefined);
+  });
+});

test/specs/dom_components/view/ComponentsView.js

@@ -2,48 +2,44 @@ import DomComponents from 'dom_components';
 import ComponentsView from 'dom_components/view/ComponentsView';
 import Components from 'dom_components/model/Components';
 
-module.exports = {
+describe('ComponentsView', () => {
-  run() {
+  var $fixtures;
-    describe('ComponentsView', () => {
+  var $fixture;
-      var $fixtures;
+  var model;
-      var $fixture;
+  var view;
-      var model;
+  var dcomp;
-      var view;
+  var compOpts;
-      var dcomp;
-      var compOpts;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        dcomp = new DomComponents();
+    dcomp = new DomComponents();
-        compOpts = {
+    compOpts = {
-          componentTypes: dcomp.componentTypes
+      componentTypes: dcomp.componentTypes
-        };
+    };
-        model = new Components([], compOpts);
+    model = new Components([], compOpts);
-        view = new ComponentsView({
+    view = new ComponentsView({
-          collection: model,
+      collection: model,
-          componentTypes: dcomp.componentTypes
+      componentTypes: dcomp.componentTypes
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(view.render().el);
+    document.body.querySelector('#fixtures').appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.collection.reset();
+    view.collection.reset();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(view.$el.html()).toBeFalsy();
+    expect(view.$el.html()).toBeFalsy();
-      });
+  });
 
-      test('Add new component', () => {
+  test('Add new component', () => {
-        sinon.stub(view, 'addToCollection');
+    sinon.stub(view, 'addToCollection');
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.addToCollection.calledOnce).toEqual(true);
+    expect(view.addToCollection.calledOnce).toEqual(true);
-      });
+  });
 
-      test('Render new component', () => {
+  test('Render new component', () => {
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.$el.html()).toBeTruthy();
+    expect(view.$el.html()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/modal/index.js

@@ -55,6 +55,4 @@ describe('Modal dialog', () => {
       expect(obj.isOpen()).toEqual(false);
     });
   });
-
-  ModalView.run();
 });

test/specs/modal/view/ModalView.js

@@ -1,58 +1,54 @@
 import ModalView from 'modal_dialog/view/ModalView';
 import Modal from 'modal_dialog/model/Modal';
 
-module.exports = {
+describe('ModalView', () => {
-  run() {
+  var model;
-    describe('ModalView', () => {
+  var view;
-      var model;
+  var editorModel;
-      var view;
+
-      var editorModel;
+  beforeEach(() => {
-
+    model = new Modal();
-      beforeEach(() => {
+    view = new ModalView({
-        model = new Modal();
+      model
-        view = new ModalView({
-          model
-        });
-        document.body.innerHTML = '<div id="fixtures"></div>';
-        document.body.querySelector('#fixtures').appendChild(view.render().el);
-      });
-
-      afterEach(() => {
-        view = null;
-        model = null;
-      });
-
-      test('The content is not empty', () => {
-        expect(view.el.innerHTML).toBeTruthy();
-      });
-
-      test('Get content', () => {
-        expect(view.getContent()).toBeTruthy();
-      });
-
-      test('Update content', () => {
-        model.set('content', 'test');
-        expect(view.getContent().get(0).innerHTML).toEqual('test');
-      });
-
-      test('Get title', () => {
-        expect(view.getTitle()).toBeTruthy();
-      });
-
-      test('Update title', () => {
-        model.set('title', 'test');
-        expect(view.getTitle().innerHTML).toEqual('test');
-      });
-
-      test('Close by default', () => {
-        view.updateOpen();
-        expect(view.el.style.display).toEqual('none');
-      });
-
-      test('Open dialog', () => {
-        model.set('open', 1);
-        expect(view.el.style.display).toEqual('');
-      });
     });
-  }
+    document.body.innerHTML = '<div id="fixtures"></div>';
-};
+    document.body.querySelector('#fixtures').appendChild(view.render().el);
+  });
+
+  afterEach(() => {
+    view = null;
+    model = null;
+  });
+
+  test('The content is not empty', () => {
+    expect(view.el.innerHTML).toBeTruthy();
+  });
+
+  test('Get content', () => {
+    expect(view.getContent()).toBeTruthy();
+  });
+
+  test('Update content', () => {
+    model.set('content', 'test');
+    expect(view.getContent().get(0).innerHTML).toEqual('test');
+  });
+
+  test('Get title', () => {
+    expect(view.getTitle()).toBeTruthy();
+  });
+
+  test('Update title', () => {
+    model.set('title', 'test');
+    expect(view.getTitle().innerHTML).toEqual('test');
+  });
+
+  test('Close by default', () => {
+    view.updateOpen();
+    expect(view.el.style.display).toEqual('none');
+  });
+
+  test('Open dialog', () => {
+    model.set('open', 1);
+    expect(view.el.style.display).toEqual('');
+  });
+});

test/specs/panels/e2e/PanelsE2e.js

@@ -1,70 +1,66 @@
-module.exports = {
+describe('E2E tests', () => {
-  run() {
+  var fixtures;
-    describe('E2E tests', () => {
+  var fixture;
-      var fixtures;
+  var obj;
-      var fixture;
+  var config;
-      var obj;
+  var editorName = 'panel-fixture';
-      var config;
-      var editorName = 'panel-fixture';
 
-      beforeAll(() => {
+  beforeAll(() => {
-        fixtures = $('<div id="#fixtures"></div>').appendTo('body');
+    fixtures = $('<div id="#fixtures"></div>').appendTo('body');
-      });
+  });
 
-      beforeEach(() => {
+  beforeEach(() => {
-        obj = grapesjs;
+    obj = grapesjs;
-        config = {
+    config = {
-          container: '#' + editorName,
+      container: '#' + editorName,
-          storageManager: { autoload: 0, type: 'none' }
+      storageManager: { autoload: 0, type: 'none' }
-        };
+    };
-        fixture = $('<div id="' + editorName + '"></div>');
+    fixture = $('<div id="' + editorName + '"></div>');
-        fixture.empty().appendTo(fixtures);
+    fixture.empty().appendTo(fixtures);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-        config = null;
+    config = null;
-        fixture.remove();
+    fixture.remove();
-      });
+  });
 
-      afterAll(() => {
+  afterAll(() => {
-        //fixture.remove();
+    //fixture.remove();
-      });
+  });
 
-      test('Command is correctly executed on button click', () => {
+  test('Command is correctly executed on button click', () => {
-        var commandId = 'command-test';
+    var commandId = 'command-test';
-        config.commands = {
+    config.commands = {
-          defaults: [
+      defaults: [
+        {
+          id: commandId,
+          run(ed, caller) {
+            ed.testValue = 'testValue';
+            caller.set('active', false);
+          }
+        }
+      ]
+    };
+    config.panels = {
+      defaults: [
+        {
+          id: 'toolbar-test',
+          buttons: [
             {
-              id: commandId,
+              id: 'button-test',
-              run(ed, caller) {
+              className: 'fa fa-smile-o',
-                ed.testValue = 'testValue';
+              command: commandId
-                caller.set('active', false);
-              }
             }
           ]
-        };
+        }
-        config.panels = {
+      ]
-          defaults: [
+    };
-            {
+    var editor = obj.init(config);
-              id: 'toolbar-test',
+    editor.testValue = '';
-              buttons: [
+    var button = editor.Panels.getButton('toolbar-test', 'button-test');
-                {
+    button.set('active', 1);
-                  id: 'button-test',
+    expect(editor.testValue).toEqual('testValue');
-                  className: 'fa fa-smile-o',
+    expect(button.get('active')).toEqual(false);
-                  command: commandId
+  });
-                }
+});
-              ]
-            }
-          ]
-        };
-        var editor = obj.init(config);
-        editor.testValue = '';
-        var button = editor.Panels.getButton('toolbar-test', 'button-test');
-        button.set('active', 1);
-        expect(editor.testValue).toEqual('testValue');
-        expect(button.get('active')).toEqual(false);
-      });
-    });
-  }
-};

test/specs/panels/index.js

@@ -166,14 +166,4 @@ describe('Panels', () => {
       });
     });
   });
-
-  Models.run();
-
-  describe('Views', () => {
-    PanelView.run();
-    PanelsView.run();
-    ButtonView.run();
-    ButtonsView.run();
-    e2e.run();
-  });
 });

test/specs/panels/model/PanelModels.js

@@ -2,133 +2,129 @@ import Button from 'panels/model/Button';
 import Buttons from 'panels/model/Buttons';
 import Panel from 'panels/model/Panel';
 
-module.exports = {
+describe('Button', () => {
-  run() {
+  var obj;
-    describe('Button', () => {
-      var obj;
-
-      beforeEach(() => {
-        obj = new Button();
-      });
-
-      afterEach(() => {
-        obj = null;
-      });
-
-      test('Has buttons instance', () => {
-        expect(obj.has('buttons')).toEqual(true);
-      });
-
-      test('Has no buttons', () => {
-        expect(obj.get('buttons').length).toEqual(0);
-      });
-
-      test('Init with other buttons inside correctly', () => {
-        obj = new Button({
-          buttons: [{}]
-        });
-        expect(obj.get('buttons') instanceof Buttons).toEqual(true);
-        expect(obj.get('buttons').length).toEqual(1);
-      });
-
-      test('Has a disable attribute with default value as false', () => {
-        expect(obj.get('disable')).toEqual(false);
-      });
-    });
 
-    describe('Buttons', () => {
+  beforeEach(() => {
-      var obj;
+    obj = new Button();
-
+  });
-      beforeEach(() => {
-        obj = new Buttons();
-      });
-
-      afterEach(() => {
-        obj = null;
-      });
-
-      test('Deactivates buttons', () => {
-        obj.add({ active: true });
-        obj.deactivateAll();
-        expect(obj.at(0).get('active')).toEqual(false);
-      });
-
-      test('Deactivates buttons with context', () => {
-        obj.add({ active: true });
-        obj.deactivateAll('someContext');
-        expect(obj.at(0).get('active')).toEqual(true);
-      });
-
-      test('Deactivates except one', () => {
-        var btn = obj.add({ active: true });
-        obj.deactivateAllExceptOne();
-        expect(obj.at(0).get('active')).toEqual(false);
-      });
-
-      test('Deactivates except one with model', () => {
-        var btn = obj.add({ active: true });
-        obj.deactivateAllExceptOne(btn);
-        expect(obj.at(0).get('active')).toEqual(true);
-      });
-
-      test('Disable all buttons', () => {
-        obj.add({ disable: false });
-        obj.disableAllButtons();
-        expect(obj.at(0).get('disable')).toEqual(true);
-      });
-
-      test('Disables buttons with context', () => {
-        obj.add({ disable: false, context: 'someContext' });
-        obj.disableAllButtons('someContext');
-        expect(obj.at(0).get('disable')).toEqual(true);
-      });
-
-      test('Disables except one', () => {
-        var btn = obj.add({ disable: false });
-        obj.disableAllButtonsExceptOne(btn);
-        expect(obj.at(0).get('disable')).toEqual(false);
-      });
-    });
 
-    describe('Panel', () => {
+  afterEach(() => {
-      var obj;
+    obj = null;
-
+  });
-      beforeEach(() => {
-        obj = new Panel();
-      });
-
-      afterEach(() => {
-        obj = null;
-      });
-
-      test('Has buttons instance', () => {
-        expect(obj.has('buttons')).toEqual(true);
-        expect(obj.get('buttons') instanceof Buttons).toEqual(true);
-      });
-
-      test('Has no buttons', () => {
-        expect(obj.get('buttons').length).toEqual(0);
-      });
-
-      test('Init with buttons inside correctly', () => {
-        obj = new Panel({
-          buttons: [{}]
-        });
-        expect(obj.get('buttons') instanceof Buttons).toEqual(true);
-        expect(obj.get('buttons').length).toEqual(1);
-      });
-    });
 
-    describe('Panels', () => {
+  test('Has buttons instance', () => {
-      var obj;
+    expect(obj.has('buttons')).toEqual(true);
+  });
 
-      beforeEach(() => {
+  test('Has no buttons', () => {
-        obj = new Panel();
+    expect(obj.get('buttons').length).toEqual(0);
-      });
+  });
 
-      afterEach(() => {
+  test('Init with other buttons inside correctly', () => {
-        obj = null;
+    obj = new Button({
-      });
+      buttons: [{}]
+    });
+    expect(obj.get('buttons') instanceof Buttons).toEqual(true);
+    expect(obj.get('buttons').length).toEqual(1);
+  });
+
+  test('Has a disable attribute with default value as false', () => {
+    expect(obj.get('disable')).toEqual(false);
+  });
+});
+
+describe('Buttons', () => {
+  var obj;
+
+  beforeEach(() => {
+    obj = new Buttons();
+  });
+
+  afterEach(() => {
+    obj = null;
+  });
+
+  test('Deactivates buttons', () => {
+    obj.add({ active: true });
+    obj.deactivateAll();
+    expect(obj.at(0).get('active')).toEqual(false);
+  });
+
+  test('Deactivates buttons with context', () => {
+    obj.add({ active: true });
+    obj.deactivateAll('someContext');
+    expect(obj.at(0).get('active')).toEqual(true);
+  });
+
+  test('Deactivates except one', () => {
+    var btn = obj.add({ active: true });
+    obj.deactivateAllExceptOne();
+    expect(obj.at(0).get('active')).toEqual(false);
+  });
+
+  test('Deactivates except one with model', () => {
+    var btn = obj.add({ active: true });
+    obj.deactivateAllExceptOne(btn);
+    expect(obj.at(0).get('active')).toEqual(true);
+  });
+
+  test('Disable all buttons', () => {
+    obj.add({ disable: false });
+    obj.disableAllButtons();
+    expect(obj.at(0).get('disable')).toEqual(true);
+  });
+
+  test('Disables buttons with context', () => {
+    obj.add({ disable: false, context: 'someContext' });
+    obj.disableAllButtons('someContext');
+    expect(obj.at(0).get('disable')).toEqual(true);
+  });
+
+  test('Disables except one', () => {
+    var btn = obj.add({ disable: false });
+    obj.disableAllButtonsExceptOne(btn);
+    expect(obj.at(0).get('disable')).toEqual(false);
+  });
+});
+
+describe('Panel', () => {
+  var obj;
+
+  beforeEach(() => {
+    obj = new Panel();
+  });
+
+  afterEach(() => {
+    obj = null;
+  });
+
+  test('Has buttons instance', () => {
+    expect(obj.has('buttons')).toEqual(true);
+    expect(obj.get('buttons') instanceof Buttons).toEqual(true);
+  });
+
+  test('Has no buttons', () => {
+    expect(obj.get('buttons').length).toEqual(0);
+  });
+
+  test('Init with buttons inside correctly', () => {
+    obj = new Panel({
+      buttons: [{}]
     });
-  }
+    expect(obj.get('buttons') instanceof Buttons).toEqual(true);
-};
+    expect(obj.get('buttons').length).toEqual(1);
+  });
+});
+
+describe('Panels', () => {
+  var obj;
+
+  beforeEach(() => {
+    obj = new Panel();
+  });
+
+  afterEach(() => {
+    obj = null;
+  });
+});

test/specs/panels/view/ButtonView.js

@@ -1,91 +1,87 @@
 import ButtonView from 'panels/view/ButtonView';
 import Button from 'panels/model/Button';
 
-module.exports = {
+describe('ButtonView', () => {
-  run() {
+  var fixtures;
-    describe('ButtonView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
+  var btnClass = 'btn';
-      var view;
-      var btnClass = 'btn';
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Button();
+    model = new Button();
-        view = new ButtonView({
+    view = new ButtonView({
-          model: model
+      model: model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.remove();
+    view.remove();
-      });
+  });
 
-      test('Button empty', () => {
+  test('Button empty', () => {
-        expect(fixtures.innerHTML).toEqual(
+    expect(fixtures.innerHTML).toEqual(
-          '<span class="' + btnClass + '"></span>'
+      '<span class="' + btnClass + '"></span>'
-        );
+    );
-      });
+  });
 
-      test('Update class', () => {
+  test('Update class', () => {
-        model.set('className', 'test');
+    model.set('className', 'test');
-        expect(view.el.getAttribute('class')).toEqual(btnClass + ' test');
+    expect(view.el.getAttribute('class')).toEqual(btnClass + ' test');
-      });
+  });
 
-      test('Update attributes', () => {
+  test('Update attributes', () => {
-        model.set('attributes', {
+    model.set('attributes', {
-          'data-test': 'test-value'
+      'data-test': 'test-value'
-        });
+    });
-        expect(view.el.getAttribute('data-test')).toEqual('test-value');
+    expect(view.el.getAttribute('data-test')).toEqual('test-value');
-      });
+  });
 
-      test('Check enable active', () => {
+  test('Check enable active', () => {
-        model.set('active', true, { silent: true });
+    model.set('active', true, { silent: true });
-        view.checkActive();
+    view.checkActive();
-        expect(view.el.getAttribute('class')).toContain(btnClass + ' active');
+    expect(view.el.getAttribute('class')).toContain(btnClass + ' active');
-      });
+  });
 
-      test('Check disable active', () => {
+  test('Check disable active', () => {
-        model.set('active', true, { silent: true });
+    model.set('active', true, { silent: true });
-        view.checkActive();
+    view.checkActive();
-        model.set('active', false, { silent: true });
+    model.set('active', false, { silent: true });
-        view.checkActive();
+    view.checkActive();
-        expect(view.el.getAttribute('class')).toEqual(btnClass);
+    expect(view.el.getAttribute('class')).toEqual(btnClass);
-      });
+  });
 
-      test('Disable the button', () => {
+  test('Disable the button', () => {
-        model.set('disable', true, { silent: true });
+    model.set('disable', true, { silent: true });
-        view.updateDisable();
+    view.updateDisable();
-        expect(view.el.getAttribute('class')).toEqual(btnClass + ' disabled');
+    expect(view.el.getAttribute('class')).toEqual(btnClass + ' disabled');
-      });
+  });
 
-      test('Enable the disabled button', () => {
+  test('Enable the disabled button', () => {
-        model.set('disable', true, { silent: true });
+    model.set('disable', true, { silent: true });
-        view.updateDisable();
+    view.updateDisable();
-        model.set('disable', false, { silent: true });
+    model.set('disable', false, { silent: true });
-        view.updateDisable();
+    view.updateDisable();
-        expect(view.el.getAttribute('class')).toEqual(btnClass);
+    expect(view.el.getAttribute('class')).toEqual(btnClass);
-      });
+  });
 
-      test('Cancels the click action when button is disabled', () => {
+  test('Cancels the click action when button is disabled', () => {
-        const stub = sinon.stub(view, 'toogleActive');
+    const stub = sinon.stub(view, 'toogleActive');
-        model.set('disable', true, { silent: true });
+    model.set('disable', true, { silent: true });
-        view.clicked();
+    view.clicked();
-        expect(stub.called).toEqual(false);
+    expect(stub.called).toEqual(false);
-      });
+  });
 
-      test('Enable the click action when button is enable', () => {
+  test('Enable the click action when button is enable', () => {
-        const stub = sinon.stub(view, 'toogleActive');
+    const stub = sinon.stub(view, 'toogleActive');
-        model.set('disable', false, { silent: true });
+    model.set('disable', false, { silent: true });
-        view.clicked();
+    view.clicked();
-        expect(stub.called).toEqual(true);
+    expect(stub.called).toEqual(true);
-      });
+  });
 
-      test('Renders correctly', () => {
+  test('Renders correctly', () => {
-        expect(view.render()).toBeTruthy();
+    expect(view.render()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/panels/view/ButtonsView.js

@@ -1,41 +1,37 @@
 import ButtonsView from 'panels/view/ButtonsView';
 import Buttons from 'panels/model/Buttons';
 
-module.exports = {
+describe('ButtonsView', () => {
-  run() {
+  var fixtures;
-    describe('ButtonsView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Buttons([]);
+    model = new Buttons([]);
-        view = new ButtonsView({
+    view = new ButtonsView({
-          collection: model
+      collection: model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.collection.reset();
+    view.collection.reset();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(view.$el.html()).toEqual('');
+    expect(view.$el.html()).toEqual('');
-      });
+  });
 
-      test('Add new button', () => {
+  test('Add new button', () => {
-        sinon.stub(view, 'addToCollection');
+    sinon.stub(view, 'addToCollection');
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.addToCollection.calledOnce).toEqual(true);
+    expect(view.addToCollection.calledOnce).toEqual(true);
-      });
+  });
 
-      test('Render new button', () => {
+  test('Render new button', () => {
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.$el.html()).toBeTruthy();
+    expect(view.$el.html()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/panels/view/PanelView.js

@@ -1,74 +1,70 @@
 import PanelView from 'panels/view/PanelView';
 import Panel from 'panels/model/Panel';
 
-module.exports = {
+describe('PanelView', () => {
-  run() {
+  var fixtures;
-    describe('PanelView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Panel();
+    model = new Panel();
-        view = new PanelView({
+    view = new PanelView({
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
-
-      afterEach(() => {
-        view.remove();
-      });
 
-      test('Panel empty', () => {
+  afterEach(() => {
-        fixtures.firstChild.className = '';
+    view.remove();
-        expect(fixtures.innerHTML).toEqual('<div class=""></div>');
+  });
-      });
 
-      test('Append content', () => {
+  test('Panel empty', () => {
-        model.set('appendContent', 'test');
+    fixtures.firstChild.className = '';
-        model.set('appendContent', 'test2');
+    expect(fixtures.innerHTML).toEqual('<div class=""></div>');
-        expect(view.$el.html()).toEqual('testtest2');
+  });
-      });
 
-      test('Update content', () => {
+  test('Append content', () => {
-        model.set('content', 'test');
+    model.set('appendContent', 'test');
-        model.set('content', 'test2');
+    model.set('appendContent', 'test2');
-        expect(view.$el.html()).toEqual('test2');
+    expect(view.$el.html()).toEqual('testtest2');
-      });
+  });
 
-      test('Hide panel', () => {
+  test('Update content', () => {
-        expect(view.$el.hasClass('hidden')).toBeFalsy();
+    model.set('content', 'test');
-        model.set('visible', false);
+    model.set('content', 'test2');
-        expect(view.$el.hasClass('hidden')).toBeTruthy();
+    expect(view.$el.html()).toEqual('test2');
-      });
+  });
 
-      test('Show panel', () => {
+  test('Hide panel', () => {
-        model.set('visible', false);
+    expect(view.$el.hasClass('hidden')).toBeFalsy();
-        expect(view.$el.hasClass('hidden')).toBeTruthy();
+    model.set('visible', false);
-        model.set('visible', true);
+    expect(view.$el.hasClass('hidden')).toBeTruthy();
-        expect(view.$el.hasClass('hidden')).toBeFalsy();
+  });
-      });
 
-      describe('Init with options', () => {
+  test('Show panel', () => {
-        beforeEach(() => {
+    model.set('visible', false);
-          model = new Panel({
+    expect(view.$el.hasClass('hidden')).toBeTruthy();
-            buttons: [{}]
+    model.set('visible', true);
-          });
+    expect(view.$el.hasClass('hidden')).toBeFalsy();
-          view = new PanelView({
+  });
-            model
-          });
-          document.body.innerHTML = '<div id="fixtures"></div>';
-          fixtures = document.body.querySelector('#fixtures');
-          fixtures.appendChild(view.render().el);
-        });
 
-        afterEach(() => {
+  describe('Init with options', () => {
-          view.remove();
+    beforeEach(() => {
-        });
+      model = new Panel({
+        buttons: [{}]
       });
+      view = new PanelView({
+        model
+      });
+      document.body.innerHTML = '<div id="fixtures"></div>';
+      fixtures = document.body.querySelector('#fixtures');
+      fixtures.appendChild(view.render().el);
+    });
+
+    afterEach(() => {
+      view.remove();
     });
-  }
+  });
-};
+});

test/specs/panels/view/PanelsView.js

@@ -1,42 +1,38 @@
 import PanelsView from 'panels/view/PanelsView';
 import Panels from 'panels/model/Panels';
 
-module.exports = {
+describe('PanelsView', () => {
-  run() {
+  var fixtures;
-    describe('PanelsView', () => {
+  var $fixture;
-      var fixtures;
+  var model;
-      var $fixture;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Panels([]);
+    model = new Panels([]);
-        view = new PanelsView({
+    view = new PanelsView({
-          collection: model
+      collection: model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.collection.reset();
+    view.collection.reset();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(view.$el.html()).toEqual('');
+    expect(view.$el.html()).toEqual('');
-      });
+  });
 
-      test('Add new panel', () => {
+  test('Add new panel', () => {
-        sinon.stub(view, 'addToCollection');
+    sinon.stub(view, 'addToCollection');
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.addToCollection.calledOnce).toEqual(true);
+    expect(view.addToCollection.calledOnce).toEqual(true);
-      });
+  });
 
-      test('Render new panel', () => {
+  test('Render new panel', () => {
-        view.collection.add({});
+    view.collection.add({});
-        expect(view.$el.html()).toBeTruthy();
+    expect(view.$el.html()).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/parser/index.js

@@ -1,7 +0,0 @@
-import ParserHtml from './model/ParserHtml';
-import ParserCss from './model/ParserCss';
-
-describe('Parser', () => {
-  ParserHtml.run();
-  ParserCss.run();
-});

test/specs/parser/model/ParserCss.js

@@ -1,498 +1,493 @@
 import { parseSelector } from 'parser/model/BrowserParserCss';
 import ParserCss from 'parser/model/ParserCss';
 
-module.exports = {
+describe('ParserCss', () => {
-  run() {
+  let obj;
-    describe('ParserCss', () => {
+  let config;
-      let obj;
+  let customParser;
-      let config;
+
-      let customParser;
+  beforeEach(() => {
-
+    config = {
-      beforeEach(() => {
+      em: {
-        config = {
+        getCustomParserCss: () => customParser
-          em: {
+      }
-            getCustomParserCss: () => customParser
+    };
-          }
+    obj = new ParserCss(config);
-        };
+  });
-        obj = new ParserCss(config);
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Parse selector', () => {
-
+    var str = '.test';
-      test('Parse selector', () => {
+    var result = [['test']];
-        var str = '.test';
+    expect(parseSelector(str).result).toEqual(result);
-        var result = [['test']];
+  });
-        expect(parseSelector(str).result).toEqual(result);
+
-      });
+  test('Parse selectors', () => {
-
+    var str = '.test1, .test1.test2, .test2.test3';
-      test('Parse selectors', () => {
+    var result = [['test1'], ['test1', 'test2'], ['test2', 'test3']];
-        var str = '.test1, .test1.test2, .test2.test3';
+    expect(parseSelector(str).result).toEqual(result);
-        var result = [['test1'], ['test1', 'test2'], ['test2', 'test3']];
+  });
-        expect(parseSelector(str).result).toEqual(result);
+
-      });
+  test('Ignore not valid selectors', () => {
-
+    var str = '.test1.test2, .test2 .test3, div > .test4, #test.test5, .test6';
-      test('Ignore not valid selectors', () => {
+    var result = [['test1', 'test2'], ['test6']];
-        var str =
+    expect(parseSelector(str).result).toEqual(result);
-          '.test1.test2, .test2 .test3, div > .test4, #test.test5, .test6';
+  });
-        var result = [['test1', 'test2'], ['test6']];
+
-        expect(parseSelector(str).result).toEqual(result);
+  test('Parse selectors with state', () => {
-      });
+    var str = '.test1. test2, .test2>test3, .test4.test5:hover';
-
+    var result = [['test4', 'test5:hover']];
-      test('Parse selectors with state', () => {
+    expect(parseSelector(str).result).toEqual(result);
-        var str = '.test1. test2, .test2>test3, .test4.test5:hover';
+  });
-        var result = [['test4', 'test5:hover']];
+
-        expect(parseSelector(str).result).toEqual(result);
+  test('Parse simple rule', () => {
-      });
+    var str = ' .test1 {color:red; width: 50px  }';
-
+    var result = {
-      test('Parse simple rule', () => {
+      selectors: ['test1'],
-        var str = ' .test1 {color:red; width: 50px  }';
+      style: {
-        var result = {
+        color: 'red',
-          selectors: ['test1'],
+        width: '50px'
-          style: {
+      }
-            color: 'red',
+    };
-            width: '50px'
+    expect(obj.parse(str)).toEqual([result]);
-          }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse rule with more selectors', () => {
-      });
+    var str = ' .test1.test2 {color:red; test: value}';
-
+    var result = {
-      test('Parse rule with more selectors', () => {
+      selectors: ['test1', 'test2'],
-        var str = ' .test1.test2 {color:red; test: value}';
+      style: { color: 'red', test: 'value' }
-        var result = {
+    };
-          selectors: ['test1', 'test2'],
+    expect(obj.parse(str)).toEqual([result]);
-          style: { color: 'red', test: 'value' }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse same rule with more selectors', () => {
-      });
+    var str = ' .test1.test2, .test3{ color:red }';
-
+    var result = [
-      test('Parse same rule with more selectors', () => {
+      {
-        var str = ' .test1.test2, .test3{ color:red }';
+        selectors: ['test1', 'test2'],
-        var result = [
+        style: { color: 'red' }
-          {
+      },
-            selectors: ['test1', 'test2'],
+      {
-            style: { color: 'red' }
+        selectors: ['test3'],
-          },
+        style: { color: 'red' }
-          {
+      }
-            selectors: ['test3'],
+    ];
-            style: { color: 'red' }
+    expect(obj.parse(str)).toEqual(result);
-          }
+  });
-        ];
+
-        expect(obj.parse(str)).toEqual(result);
+  test('Parse more rules', () => {
-      });
+    var str =
-
+      ' .test1.test2, .test3{ color:red } .test4, .test5.test6{ width:10px }';
-      test('Parse more rules', () => {
+    var result = [
-        var str =
+      {
-          ' .test1.test2, .test3{ color:red } .test4, .test5.test6{ width:10px }';
+        selectors: ['test1', 'test2'],
-        var result = [
+        style: { color: 'red' }
-          {
+      },
-            selectors: ['test1', 'test2'],
+      {
-            style: { color: 'red' }
+        selectors: ['test3'],
-          },
+        style: { color: 'red' }
-          {
+      },
-            selectors: ['test3'],
+      {
-            style: { color: 'red' }
+        selectors: ['test4'],
-          },
+        style: { width: '10px' }
-          {
+      },
-            selectors: ['test4'],
+      {
-            style: { width: '10px' }
+        selectors: ['test5', 'test6'],
-          },
+        style: { width: '10px' }
-          {
+      }
-            selectors: ['test5', 'test6'],
+    ];
-            style: { width: '10px' }
+    expect(obj.parse(str)).toEqual(result);
-          }
+  });
-        ];
+
-        expect(obj.parse(str)).toEqual(result);
+  test('Parse rule with state', () => {
-      });
+    var str = ' .test1.test2:hover{ color:red }';
-
+    var result = {
-      test('Parse rule with state', () => {
+      selectors: ['test1', 'test2'],
-        var str = ' .test1.test2:hover{ color:red }';
+      style: { color: 'red' },
-        var result = {
+      state: 'hover'
-          selectors: ['test1', 'test2'],
+    };
-          style: { color: 'red' },
+    expect(obj.parse(str)).toEqual([result]);
-          state: 'hover'
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse rule with state like after', () => {
-      });
+    var str = ' .test1.test2::after{ color:red }';
-
+    var result = {
-      test('Parse rule with state like after', () => {
+      selectors: ['test1', 'test2'],
-        var str = ' .test1.test2::after{ color:red }';
+      style: { color: 'red' },
-        var result = {
+      state: ':after'
-          selectors: ['test1', 'test2'],
+    };
-          style: { color: 'red' },
+    expect(obj.parse(str)).toEqual([result]);
-          state: ':after'
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse rule with nth-x state', () => {
-      });
+    var str = ' .test1.test2:nth-of-type(2n){ color:red }';
-
+    var result = {
-      test('Parse rule with nth-x state', () => {
+      selectors: ['test1', 'test2'],
-        var str = ' .test1.test2:nth-of-type(2n){ color:red }';
+      style: { color: 'red' },
-        var result = {
+      state: 'nth-of-type(2n)'
-          selectors: ['test1', 'test2'],
+    };
-          style: { color: 'red' },
+    expect(obj.parse(str)).toEqual([result]);
-          state: 'nth-of-type(2n)'
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  // Phantom don't find 'node.conditionText' so will skip it
-      });
+  test('Parse rule inside media query', () => {
-
+    var str =
-      // Phantom don't find 'node.conditionText' so will skip it
+      '@media only screen and (max-width: 992px){ .test1.test2:hover{ color:red }}';
-      test('Parse rule inside media query', () => {
+    var result = {
-        var str =
+      atRuleType: 'media',
-          '@media only screen and (max-width: 992px){ .test1.test2:hover{ color:red }}';
+      selectors: ['test1', 'test2'],
-        var result = {
+      style: { color: 'red' },
-          atRuleType: 'media',
+      state: 'hover',
-          selectors: ['test1', 'test2'],
+      mediaText: 'only screen and (max-width: 992px)'
-          style: { color: 'red' },
+    };
-          state: 'hover',
+    expect(obj.parse(str)).toEqual([result]);
-          mediaText: 'only screen and (max-width: 992px)'
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  // Phantom don't find 'node.conditionText' so will skip it
-      });
+  test('Parse rule inside media query', () => {
-
+    var str = '@media (max-width: 992px){ .test1.test2:hover{ color:red }}';
-      // Phantom don't find 'node.conditionText' so will skip it
+    var result = {
-      test('Parse rule inside media query', () => {
+      atRuleType: 'media',
-        var str = '@media (max-width: 992px){ .test1.test2:hover{ color:red }}';
+      selectors: ['test1', 'test2'],
-        var result = {
+      style: { color: 'red' },
-          atRuleType: 'media',
+      state: 'hover',
-          selectors: ['test1', 'test2'],
+      mediaText: '(max-width: 992px)'
-          style: { color: 'red' },
+    };
-          state: 'hover',
+    expect(obj.parse(str)).toEqual([result]);
-          mediaText: '(max-width: 992px)'
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  // Phantom doesn't find 'node.conditionText' so will skip it
-      });
+  test('Parse rules inside media queries', () => {
-
+    var str =
-      // Phantom doesn't find 'node.conditionText' so will skip it
+      '.test1:hover{ color:white }@media (max-width: 992px){ .test1.test2:hover{ color:red } .test2{ color: blue }}';
-      test('Parse rules inside media queries', () => {
+    var result = [
-        var str =
+      {
-          '.test1:hover{ color:white }@media (max-width: 992px){ .test1.test2:hover{ color:red } .test2{ color: blue }}';
+        selectors: ['test1'],
-        var result = [
+        style: { color: 'white' },
-          {
+        state: 'hover'
-            selectors: ['test1'],
+      },
-            style: { color: 'white' },
+      {
-            state: 'hover'
+        selectors: ['test1', 'test2'],
-          },
+        style: { color: 'red' },
-          {
+        state: 'hover',
-            selectors: ['test1', 'test2'],
+        atRuleType: 'media',
-            style: { color: 'red' },
+        mediaText: '(max-width: 992px)'
-            state: 'hover',
+      },
-            atRuleType: 'media',
+      {
-            mediaText: '(max-width: 992px)'
+        selectors: ['test2'],
-          },
+        style: { color: 'blue' },
-          {
+        atRuleType: 'media',
-            selectors: ['test2'],
+        mediaText: '(max-width: 992px)'
-            style: { color: 'blue' },
+      }
-            atRuleType: 'media',
+    ];
-            mediaText: '(max-width: 992px)'
+    expect(obj.parse(str)).toEqual(result);
-          }
+  });
-        ];
+
-        expect(obj.parse(str)).toEqual(result);
+  test('Parse rules with not class-based selectors', () => {
-      });
+    var str = ' .class1 .class2, div > .class3 { color:red }';
-
+    var result = {
-      test('Parse rules with not class-based selectors', () => {
+      selectors: [],
-        var str = ' .class1 .class2, div > .class3 { color:red }';
+      selectorsAdd: '.class1 .class2, div > .class3',
-        var result = {
+      style: { color: 'red' }
-          selectors: [],
+    };
-          selectorsAdd: '.class1 .class2, div > .class3',
+    expect(obj.parse(str)).toEqual([result]);
-          style: { color: 'red' }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse rule with mixed selectors', () => {
-      });
+    var str =
-
+      ' .class1 .class2, .class3, div > .class4, .class5.class6 { color:red }';
-      test('Parse rule with mixed selectors', () => {
+    var result = [
-        var str =
+      {
-          ' .class1 .class2, .class3, div > .class4, .class5.class6 { color:red }';
+        selectors: ['class3'],
-        var result = [
+        style: { color: 'red' }
-          {
+      },
-            selectors: ['class3'],
+      {
-            style: { color: 'red' }
+        selectors: ['class5', 'class6'],
-          },
+        selectorsAdd: '.class1 .class2, div > .class4',
-          {
+        style: { color: 'red' }
-            selectors: ['class5', 'class6'],
+      }
-            selectorsAdd: '.class1 .class2, div > .class4',
+    ];
-            style: { color: 'red' }
+    expect(obj.parse(str)).toEqual(result);
-          }
+  });
-        ];
+
-        expect(obj.parse(str)).toEqual(result);
+  test('Parse rule with important styles', () => {
-      });
+    var str =
-
+      ' .test1 {color:red !important; width: 100px; height: 10px !important}';
-      test('Parse rule with important styles', () => {
+    var result = {
-        var str =
+      selectors: ['test1'],
-          ' .test1 {color:red !important; width: 100px; height: 10px !important}';
+      style: {
-        var result = {
+        color: 'red !important',
-          selectors: ['test1'],
+        height: '10px !important',
-          style: {
+        width: '100px'
-            color: 'red !important',
+      }
-            height: '10px !important',
+    };
-            width: '100px'
+    expect(obj.parse(str)).toEqual([result]);
-          }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parse rule with CSS variables', () => {
-      });
+    var str = `:root {
-
+        --some-color: red;
-      test('Parse rule with CSS variables', () => {
+        --some-width: 55px;
-        var str = `:root {
+    }`;
-            --some-color: red;
+    var result = {
-            --some-width: 55px;
+      selectors: [],
-        }`;
+      selectorsAdd: ':root',
-        var result = {
+      style: {
-          selectors: [],
+        '--some-color': 'red',
-          selectorsAdd: ':root',
+        '--some-width': '55px'
-          style: {
+      }
-            '--some-color': 'red',
+    };
-            '--some-width': '55px'
+    expect(obj.parse(str)).toEqual([result]);
-          }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  // Can't test keyframes https://github.com/NV/CSSOM/issues/95
-      });
+  test.skip('Parse rule with a keyframes at-rule', () => {
-
+    var str = `@keyframes {
-      // Can't test keyframes https://github.com/NV/CSSOM/issues/95
+      from {opacity: 0;}
-      test.skip('Parse rule with a keyframes at-rule', () => {
+      to {opacity: 1;}
-        var str = `@keyframes {
+    }`;
-          from {opacity: 0;}
+    var result = [
-          to {opacity: 1;}
+      {
-        }`;
+        selectors: [],
-        var result = [
+        atRuleType: 'keyframes',
-          {
+        selectorsAdd: 'from',
-            selectors: [],
+        style: { opacity: '0' }
-            atRuleType: 'keyframes',
+      },
-            selectorsAdd: 'from',
+      {
-            style: { opacity: '0' }
+        selectors: [],
-          },
+        atRuleType: 'keyframes',
-          {
+        selectorsAdd: 'to',
-            selectors: [],
+        style: { opacity: '1' }
-            atRuleType: 'keyframes',
+      }
-            selectorsAdd: 'to',
+    ];
-            style: { opacity: '1' }
+    expect(obj.parse(str)).toEqual(result);
-          }
+  });
-        ];
+
-        expect(obj.parse(str)).toEqual(result);
+  test('Parse rule with font-face at-rule', () => {
-      });
+    var str = `@font-face {
-
+     font-family: "Open Sans";
-      test('Parse rule with font-face at-rule', () => {
+    }`;
-        var str = `@font-face {
+    var result = {
-         font-family: "Open Sans";
+      selectors: [],
-        }`;
+      selectorsAdd: '',
-        var result = {
+      atRuleType: 'font-face',
-          selectors: [],
+      singleAtRule: 1,
-          selectorsAdd: '',
+      style: { 'font-family': '"Open Sans"' }
-          atRuleType: 'font-face',
+    };
-          singleAtRule: 1,
+    expect(obj.parse(str)).toEqual([result]);
-          style: { 'font-family': '"Open Sans"' }
+  });
-        };
+
-        expect(obj.parse(str)).toEqual([result]);
+  test('Parses multiple font-face at-rules', () => {
-      });
+    const str = `
-
+      @font-face {
-      test('Parses multiple font-face at-rules', () => {
+        font-family: "Open Sans";
-        const str = `
+      }
-          @font-face {
+      @font-face {
-            font-family: "Open Sans";
+        font-family: 'Glyphicons Halflings';
-          }
+        src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)
-          @font-face {
+      }`;
-            font-family: 'Glyphicons Halflings';
+    const result = [
-            src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)
+      {
-          }`;
+        selectors: [],
-        const result = [
+        selectorsAdd: '',
-          {
+        style: { 'font-family': '"Open Sans"' },
-            selectors: [],
+        singleAtRule: 1,
-            selectorsAdd: '',
+        atRuleType: 'font-face'
-            style: { 'font-family': '"Open Sans"' },
+      },
-            singleAtRule: 1,
+      {
-            atRuleType: 'font-face'
+        selectors: [],
-          },
+        selectorsAdd: '',
-          {
+        style: {
-            selectors: [],
+          'font-family': "'Glyphicons Halflings'",
-            selectorsAdd: '',
-            style: {
-              'font-family': "'Glyphicons Halflings'",
-              src:
-                'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)'
-            },
-            singleAtRule: 1,
-            atRuleType: 'font-face'
-          }
-        ];
-        const parsed = obj.parse(str);
-        expect(parsed).toEqual(result);
-      });
-
-      test('Parse ID rule', () => {
-        var str = `#test { color: red }`;
-        var result = {
-          selectors: ['#test'],
-          style: { color: 'red' }
-        };
-        expect(obj.parse(str)).toEqual([result]);
-      });
-
-      test('Parse ID rule with state', () => {
-        var str = `#test:hover { color: red }`;
-        var result = {
-          selectors: ['#test'],
-          state: 'hover',
-          style: { color: 'red' }
-        };
-        expect(obj.parse(str)).toEqual([result]);
-      });
-
-      test('Avoid composed selectors with ID', () => {
-        var str = `#test.class, #test.class:hover, .class  { color: red }`;
-        var result = {
-          selectors: ['class'],
-          selectorsAdd: '#test.class, #test.class:hover',
-          style: { color: 'red' }
-        };
-        expect(obj.parse(str)).toEqual([result]);
-      });
-
-      test('Parse CSS with custom parser', () => {
-        var str = '.test1 { color:red }';
-        var result = {
-          selectors: ['test1'],
-          style: { color: 'blue' }
-        };
-        obj = new ParserCss({
-          parserCss: () => [result]
-        });
-        expect(obj.parse(str)).toEqual([result]);
-      });
-
-      test.skip('Parse CSS with custom async parser', async () => {
-        var str = '.test1 { color:red }';
-        var result = {
-          selectors: ['test1'],
-          style: { color: 'blue' }
-        };
-        obj = new ParserCss({
-          parserCss: async () => [result]
-        });
-        const cssResult = await obj.parse(str);
-        expect(cssResult).toEqual([result]);
-      });
-
-      test('Check node with font-face rule', () => {
-        const style = {
-          'font-family': '"Glyphicons Halflings"',
           src:
-            'url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot")'
+            'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)'
-        };
+        },
-        expect(
+        singleAtRule: 1,
-          obj.checkNode({
+        atRuleType: 'font-face'
-            atRule: 'font-face',
+      }
-            selectors: '',
+    ];
-            style: style
+    const parsed = obj.parse(str);
-          })
+    expect(parsed).toEqual(result);
-        ).toEqual([
+  });
-          {
+
-            style: style,
+  test('Parse ID rule', () => {
-            atRuleType: 'font-face',
+    var str = `#test { color: red }`;
-            singleAtRule: 1,
+    var result = {
-            selectors: []
+      selectors: ['#test'],
-          }
+      style: { color: 'red' }
-        ]);
+    };
-      });
+    expect(obj.parse(str)).toEqual([result]);
-
+  });
-      test('Check node with keyframes rule', () => {
+
-        const style = { opacity: 0 };
+  test('Parse ID rule with state', () => {
-        expect(
+    var str = `#test:hover { color: red }`;
-          obj.checkNode({
+    var result = {
-            atRule: 'keyframes',
+      selectors: ['#test'],
-            params: 'name',
+      state: 'hover',
-            selectors: 'from',
+      style: { color: 'red' }
-            style: style
+    };
-          })
+    expect(obj.parse(str)).toEqual([result]);
-        ).toEqual([
+  });
-          {
+
-            selectors: [],
+  test('Avoid composed selectors with ID', () => {
-            atRuleType: 'keyframes',
+    var str = `#test.class, #test.class:hover, .class  { color: red }`;
-            selectorsAdd: 'from',
+    var result = {
-            style: style,
+      selectors: ['class'],
-            mediaText: 'name'
+      selectorsAdd: '#test.class, #test.class:hover',
-          }
+      style: { color: 'red' }
-        ]);
+    };
-      });
+    expect(obj.parse(str)).toEqual([result]);
-
+  });
-      test('Check node with media rule', () => {
+
-        const style = { color: 'blue' };
+  test('Parse CSS with custom parser', () => {
-        expect(
+    var str = '.test1 { color:red }';
-          obj.checkNode({
+    var result = {
-            atRule: 'media',
+      selectors: ['test1'],
-            params: 'screen and (min-width: 480px)',
+      style: { color: 'blue' }
-            selectors: '.class-test.class2:hover, div > span ',
+    };
-            style
+    obj = new ParserCss({
-          })
+      parserCss: () => [result]
-        ).toEqual([
-          {
-            atRuleType: 'media',
-            selectors: ['class-test', 'class2'],
-            selectorsAdd: 'div > span',
-            style: style,
-            state: 'hover',
-            mediaText: 'screen and (min-width: 480px)'
-          }
-        ]);
-      });
-
-      test('Check node with a rule containing id', () => {
-        const style = { border: '1px solid black !important' };
-        expect(
-          obj.checkNode({
-            selectors: '#main:hover',
-            style
-          })
-        ).toEqual([
-          {
-            selectors: ['#main'],
-            state: 'hover',
-            style: style
-          }
-        ]);
-      });
-
-      test('Check node with multiple class selectors', () => {
-        const style = {
-          border: '1px solid black !important',
-          'background-repeat': 'repeat-y, no-repeat'
-        };
-        expect(
-          obj.checkNode({
-            selectors:
-              '.class1, .class1.class2:hover, div > .test:hover, span.test2',
-            style
-          })
-        ).toEqual([
-          {
-            selectors: ['class1'],
-            style: style
-          },
-          {
-            selectors: ['class1', 'class2'],
-            state: 'hover',
-            selectorsAdd: 'div > .test:hover, span.test2',
-            style: style
-          }
-        ]);
-      });
-
-      test('Check node with a rule containing CSS variables', () => {
-        const style = {
-          '--some-color': 'red',
-          '--some-width': '55px'
-        };
-        expect(
-          obj.checkNode({
-            selectors: ':root',
-            style
-          })
-        ).toEqual([
-          {
-            selectors: [],
-            selectorsAdd: ':root',
-            style: style
-          }
-        ]);
-      });
     });
-  }
+    expect(obj.parse(str)).toEqual([result]);
-};
+  });
+
+  test.skip('Parse CSS with custom async parser', async () => {
+    var str = '.test1 { color:red }';
+    var result = {
+      selectors: ['test1'],
+      style: { color: 'blue' }
+    };
+    obj = new ParserCss({
+      parserCss: async () => [result]
+    });
+    const cssResult = await obj.parse(str);
+    expect(cssResult).toEqual([result]);
+  });
+
+  test('Check node with font-face rule', () => {
+    const style = {
+      'font-family': '"Glyphicons Halflings"',
+      src:
+        'url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot")'
+    };
+    expect(
+      obj.checkNode({
+        atRule: 'font-face',
+        selectors: '',
+        style: style
+      })
+    ).toEqual([
+      {
+        style: style,
+        atRuleType: 'font-face',
+        singleAtRule: 1,
+        selectors: []
+      }
+    ]);
+  });
+
+  test('Check node with keyframes rule', () => {
+    const style = { opacity: 0 };
+    expect(
+      obj.checkNode({
+        atRule: 'keyframes',
+        params: 'name',
+        selectors: 'from',
+        style: style
+      })
+    ).toEqual([
+      {
+        selectors: [],
+        atRuleType: 'keyframes',
+        selectorsAdd: 'from',
+        style: style,
+        mediaText: 'name'
+      }
+    ]);
+  });
+
+  test('Check node with media rule', () => {
+    const style = { color: 'blue' };
+    expect(
+      obj.checkNode({
+        atRule: 'media',
+        params: 'screen and (min-width: 480px)',
+        selectors: '.class-test.class2:hover, div > span ',
+        style
+      })
+    ).toEqual([
+      {
+        atRuleType: 'media',
+        selectors: ['class-test', 'class2'],
+        selectorsAdd: 'div > span',
+        style: style,
+        state: 'hover',
+        mediaText: 'screen and (min-width: 480px)'
+      }
+    ]);
+  });
+
+  test('Check node with a rule containing id', () => {
+    const style = { border: '1px solid black !important' };
+    expect(
+      obj.checkNode({
+        selectors: '#main:hover',
+        style
+      })
+    ).toEqual([
+      {
+        selectors: ['#main'],
+        state: 'hover',
+        style: style
+      }
+    ]);
+  });
+
+  test('Check node with multiple class selectors', () => {
+    const style = {
+      border: '1px solid black !important',
+      'background-repeat': 'repeat-y, no-repeat'
+    };
+    expect(
+      obj.checkNode({
+        selectors:
+          '.class1, .class1.class2:hover, div > .test:hover, span.test2',
+        style
+      })
+    ).toEqual([
+      {
+        selectors: ['class1'],
+        style: style
+      },
+      {
+        selectors: ['class1', 'class2'],
+        state: 'hover',
+        selectorsAdd: 'div > .test:hover, span.test2',
+        style: style
+      }
+    ]);
+  });
+
+  test('Check node with a rule containing CSS variables', () => {
+    const style = {
+      '--some-color': 'red',
+      '--some-width': '55px'
+    };
+    expect(
+      obj.checkNode({
+        selectors: ':root',
+        style
+      })
+    ).toEqual([
+      {
+        selectors: [],
+        selectorsAdd: ':root',
+        style: style
+      }
+    ]);
+  });
+});

test/specs/parser/model/ParserHtml.js

@@ -2,507 +2,502 @@ import ParserHtml from 'parser/model/ParserHtml';
 import ParserCss from 'parser/model/ParserCss';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('ParserHtml', () => {
-  run() {
+  var obj;
-    describe('ParserHtml', () => {
-      var obj;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        var dom = new DomComponents();
+    var dom = new DomComponents();
-        obj = new ParserHtml({
+    obj = new ParserHtml({
-          textTags: ['br', 'b', 'i', 'u'],
+      textTags: ['br', 'b', 'i', 'u'],
-          pStylePrefix: 'gjs-'
+      pStylePrefix: 'gjs-'
-        });
+    });
-        obj.compTypes = dom.componentTypes;
+    obj.compTypes = dom.componentTypes;
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-      });
+  });
 
-      test('Simple div node', () => {
+  test('Simple div node', () => {
-        var str = '<div></div>';
+    var str = '<div></div>';
-        var result = { tagName: 'div' };
+    var result = { tagName: 'div' };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Simple article node', () => {
+  test('Simple article node', () => {
-        var str = '<article></article>';
+    var str = '<article></article>';
-        var result = { tagName: 'article' };
+    var result = { tagName: 'article' };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Node with attributes', () => {
+  test('Node with attributes', () => {
-        var str =
+    var str =
-          '<div id="test1" class="test2 test3" data-one="test4" strange="test5"></div>';
+      '<div id="test1" class="test2 test3" data-one="test4" strange="test5"></div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          classes: ['test2', 'test3'],
+      classes: ['test2', 'test3'],
-          attributes: {
+      attributes: {
-            'data-one': 'test4',
+        'data-one': 'test4',
-            id: 'test1',
+        id: 'test1',
-            strange: 'test5'
+        strange: 'test5'
-          }
+      }
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse style string to object', () => {
+  test('Parse style string to object', () => {
-        var str = 'color:black; width:100px; test:value;';
+    var str = 'color:black; width:100px; test:value;';
-        var result = {
+    var result = {
-          color: 'black',
+      color: 'black',
-          width: '100px',
+      width: '100px',
-          test: 'value'
+      test: 'value'
-        };
+    };
-        expect(obj.parseStyle(str)).toEqual(result);
+    expect(obj.parseStyle(str)).toEqual(result);
-      });
+  });
 
-      test('Parse style string with values containing colon to object', () => {
+  test('Parse style string with values containing colon to object', () => {
-        var str =
+    var str = 'background-image:url("https://some-website.ex"); test:value;';
-          'background-image:url("https://some-website.ex"); test:value;';
+    var result = {
-        var result = {
+      'background-image': 'url("https://some-website.ex")',
-          'background-image': 'url("https://some-website.ex")',
+      test: 'value'
-          test: 'value'
+    };
-        };
+    expect(obj.parseStyle(str)).toEqual(result);
-        expect(obj.parseStyle(str)).toEqual(result);
+  });
-      });
 
-      test('Parse class string to array', () => {
+  test('Parse class string to array', () => {
-        var str = 'test1 test2    test3 test-4';
+    var str = 'test1 test2    test3 test-4';
-        var result = ['test1', 'test2', 'test3', 'test-4'];
+    var result = ['test1', 'test2', 'test3', 'test-4'];
-        expect(obj.parseClass(str)).toEqual(result);
+    expect(obj.parseClass(str)).toEqual(result);
-      });
+  });
 
-      test('Parse class string to array with special classes', () => {
+  test('Parse class string to array with special classes', () => {
-        var str = 'test1 test2    test3 test-4 gjs-test';
+    var str = 'test1 test2    test3 test-4 gjs-test';
-        var result = ['test1', 'test2', 'test3', 'test-4', 'gjs-test'];
+    var result = ['test1', 'test2', 'test3', 'test-4', 'gjs-test'];
-        expect(obj.parseClass(str)).toEqual(result);
+    expect(obj.parseClass(str)).toEqual(result);
-      });
+  });
 
-      test('Style attribute is isolated', () => {
+  test('Style attribute is isolated', () => {
-        var str =
+    var str =
-          '<div id="test1" style="color:black; width:100px; test:value;"></div>';
+      '<div id="test1" style="color:black; width:100px; test:value;"></div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: { id: 'test1' },
+      attributes: { id: 'test1' },
-          style: {
+      style: {
-            color: 'black',
+        color: 'black',
-            width: '100px',
+        width: '100px',
-            test: 'value'
+        test: 'value'
-          }
+      }
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Class attribute is isolated', () => {
+  test('Class attribute is isolated', () => {
-        var str = '<div id="test1" class="test2 test3 test4"></div>';
+    var str = '<div id="test1" class="test2 test3 test4"></div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: { id: 'test1' },
+      attributes: { id: 'test1' },
-          classes: ['test2', 'test3', 'test4']
+      classes: ['test2', 'test3', 'test4']
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse images nodes', () => {
+  test('Parse images nodes', () => {
-        var str = '<img id="test1" src="./index.html"/>';
+    var str = '<img id="test1" src="./index.html"/>';
-        var result = {
+    var result = {
-          tagName: 'img',
+      tagName: 'img',
-          type: 'image',
+      type: 'image',
-          attributes: {
+      attributes: {
-            id: 'test1',
+        id: 'test1',
-            src: './index.html'
+        src: './index.html'
-          }
+      }
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse text nodes', () => {
+  test('Parse text nodes', () => {
-        var str = '<div id="test1">test2 </div>';
+    var str = '<div id="test1">test2 </div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: { id: 'test1' },
+      attributes: { id: 'test1' },
-          type: 'text',
+      type: 'text',
-          content: 'test2 '
+      content: 'test2 '
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse text with few text tags', () => {
+  test('Parse text with few text tags', () => {
-        var str =
+    var str =
-          '<div id="test1"><br/> test2 <br/> a b <b>b</b> <i>i</i> <u>u</u> test </div>';
+      '<div id="test1"><br/> test2 <br/> a b <b>b</b> <i>i</i> <u>u</u> test </div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: { id: 'test1' },
+      attributes: { id: 'test1' },
+      type: 'text',
+      components: [
+        { tagName: 'br' },
+        {
+          content: ' test2 ',
+          type: 'textnode',
+          tagName: ''
+        },
+        { tagName: 'br' },
+        {
+          content: ' a b ',
+          type: 'textnode',
+          tagName: ''
+        },
+        {
+          content: 'b',
           type: 'text',
-          components: [
+          tagName: 'b'
-            { tagName: 'br' },
+        },
-            {
+        {
-              content: ' test2 ',
+          content: ' ',
-              type: 'textnode',
+          type: 'textnode',
-              tagName: ''
+          tagName: ''
-            },
+        },
-            { tagName: 'br' },
+        {
-            {
+          content: 'i',
-              content: ' a b ',
+          tagName: 'i',
-              type: 'textnode',
+          type: 'text'
-              tagName: ''
+        },
-            },
+        {
-            {
+          content: ' ',
-              content: 'b',
+          type: 'textnode',
-              type: 'text',
+          tagName: ''
-              tagName: 'b'
+        },
-            },
+        {
-            {
+          content: 'u',
-              content: ' ',
+          tagName: 'u',
-              type: 'textnode',
+          type: 'text'
-              tagName: ''
+        },
-            },
+        {
-            {
+          content: ' test ',
-              content: 'i',
+          type: 'textnode',
-              tagName: 'i',
+          tagName: ''
-              type: 'text'
+        }
-            },
+      ]
-            {
+    };
-              content: ' ',
+    expect(obj.parse(str).html).toEqual(result);
-              type: 'textnode',
+  });
-              tagName: ''
-            },
-            {
-              content: 'u',
-              tagName: 'u',
-              type: 'text'
-            },
-            {
-              content: ' test ',
-              type: 'textnode',
-              tagName: ''
-            }
-          ]
-        };
-        expect(obj.parse(str).html).toEqual(result);
-      });
 
-      test('Parse text with few text tags and nested node', () => {
+  test('Parse text with few text tags and nested node', () => {
-        var str =
+    var str =
-          '<div id="test1">a b <b>b</b> <i>i</i>c <div>ABC</div> <i>i</i> <u>u</u> test </div>';
+      '<div id="test1">a b <b>b</b> <i>i</i>c <div>ABC</div> <i>i</i> <u>u</u> test </div>';
-        var result = {
+    var result = {
+      tagName: 'div',
+      attributes: { id: 'test1' },
+      type: 'text',
+      components: [
+        {
+          content: 'a b ',
+          type: 'textnode',
+          tagName: ''
+        },
+        {
+          content: 'b',
+          tagName: 'b',
+          type: 'text'
+        },
+        {
+          content: ' ',
+          type: 'textnode',
+          tagName: ''
+        },
+        {
+          content: 'i',
+          tagName: 'i',
+          type: 'text'
+        },
+        {
+          content: 'c ',
+          type: 'textnode',
+          tagName: ''
+        },
+        {
           tagName: 'div',
-          attributes: { id: 'test1' },
           type: 'text',
-          components: [
+          content: 'ABC'
-            {
+        },
-              content: 'a b ',
+        {
-              type: 'textnode',
+          content: ' ',
-              tagName: ''
+          type: 'textnode',
-            },
+          tagName: ''
-            {
+        },
-              content: 'b',
+        {
-              tagName: 'b',
+          content: 'i',
-              type: 'text'
+          tagName: 'i',
-            },
+          type: 'text'
-            {
+        },
-              content: ' ',
+        {
-              type: 'textnode',
+          content: ' ',
-              tagName: ''
+          type: 'textnode',
-            },
+          tagName: ''
-            {
+        },
-              content: 'i',
+        {
-              tagName: 'i',
+          content: 'u',
-              type: 'text'
+          tagName: 'u',
-            },
+          type: 'text'
-            {
+        },
-              content: 'c ',
+        {
-              type: 'textnode',
+          content: ' test ',
-              tagName: ''
+          type: 'textnode',
-            },
+          tagName: ''
-            {
+        }
-              tagName: 'div',
+      ]
-              type: 'text',
+    };
-              content: 'ABC'
+    expect(obj.parse(str).html).toEqual(result);
-            },
+  });
-            {
-              content: ' ',
-              type: 'textnode',
-              tagName: ''
-            },
-            {
-              content: 'i',
-              tagName: 'i',
-              type: 'text'
-            },
-            {
-              content: ' ',
-              type: 'textnode',
-              tagName: ''
-            },
-            {
-              content: 'u',
-              tagName: 'u',
-              type: 'text'
-            },
-            {
-              content: ' test ',
-              type: 'textnode',
-              tagName: ''
-            }
-          ]
-        };
-        expect(obj.parse(str).html).toEqual(result);
-      });
 
-      test('Parse nested nodes', () => {
+  test('Parse nested nodes', () => {
-        var str =
+    var str =
-          '<article id="test1">   <div></div> <footer id="test2"></footer>  Text mid <div id="last"></div></article>';
+      '<article id="test1">   <div></div> <footer id="test2"></footer>  Text mid <div id="last"></div></article>';
-        var result = {
+    var result = {
-          tagName: 'article',
+      tagName: 'article',
-          attributes: { id: 'test1' },
+      attributes: { id: 'test1' },
-          components: [
+      components: [
-            {
+        {
-              tagName: 'div'
+          tagName: 'div'
-            },
+        },
-            {
+        {
-              content: ' ',
+          content: ' ',
-              type: 'textnode',
+          type: 'textnode',
-              tagName: ''
+          tagName: ''
-            },
+        },
-            {
+        {
-              tagName: 'footer',
+          tagName: 'footer',
-              attributes: { id: 'test2' }
+          attributes: { id: 'test2' }
-            },
+        },
-            {
+        {
-              tagName: '',
+          tagName: '',
-              type: 'textnode',
+          type: 'textnode',
-              content: '  Text mid '
+          content: '  Text mid '
-            },
+        },
-            {
+        {
-              tagName: 'div',
+          tagName: 'div',
-              attributes: { id: 'last' }
+          attributes: { id: 'last' }
-            }
+        }
-          ]
+      ]
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse nested text nodes', () => {
+  test('Parse nested text nodes', () => {
-        var str = '<div>content1 <div>nested</div> content2</div>';
+    var str = '<div>content1 <div>nested</div> content2</div>';
-        var result = {
+    var result = {
+      tagName: 'div',
+      type: 'text',
+      components: [
+        {
+          tagName: '',
+          type: 'textnode',
+          content: 'content1 '
+        },
+        {
           tagName: 'div',
           type: 'text',
-          components: [
+          content: 'nested'
-            {
+        },
-              tagName: '',
+        {
-              type: 'textnode',
+          tagName: '',
-              content: 'content1 '
+          type: 'textnode',
-            },
+          content: ' content2'
-            {
+        }
-              tagName: 'div',
+      ]
-              type: 'text',
+    };
-              content: 'nested'
+    expect(obj.parse(str).html).toEqual(result);
-            },
+  });
-            {
-              tagName: '',
-              type: 'textnode',
-              content: ' content2'
-            }
-          ]
-        };
-        expect(obj.parse(str).html).toEqual(result);
-      });
 
-      test('Parse nested span text nodes', () => {
+  test('Parse nested span text nodes', () => {
-        var str = '<div>content1 <div><span>nested</span></div> content2</div>';
+    var str = '<div>content1 <div><span>nested</span></div> content2</div>';
-        var result = {
+    var result = {
+      tagName: 'div',
+      components: [
+        {
+          tagName: '',
+          type: 'textnode',
+          content: 'content1 '
+        },
+        {
           tagName: 'div',
           components: [
             {
-              tagName: '',
+              tagName: 'span',
-              type: 'textnode',
+              type: 'text',
-              content: 'content1 '
+              content: 'nested'
-            },
-            {
-              tagName: 'div',
-              components: [
-                {
-                  tagName: 'span',
-                  type: 'text',
-                  content: 'nested'
-                }
-              ]
-            },
-            {
-              tagName: '',
-              type: 'textnode',
-              content: ' content2'
             }
           ]
-        };
+        },
-        expect(obj.parse(str).html).toEqual(result);
+        {
-      });
+          tagName: '',
+          type: 'textnode',
+          content: ' content2'
+        }
+      ]
+    };
+    expect(obj.parse(str).html).toEqual(result);
+  });
 
-      test('Parse multiple nodes', () => {
+  test('Parse multiple nodes', () => {
-        var str = '<div></div><div></div>';
+    var str = '<div></div><div></div>';
-        var result = [{ tagName: 'div' }, { tagName: 'div' }];
+    var result = [{ tagName: 'div' }, { tagName: 'div' }];
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Remove script tags', () => {
+  test('Remove script tags', () => {
-        var str =
+    var str =
-          '<div><script>var test;</script></div><div></div><script>var test2;</script>';
+      '<div><script>var test;</script></div><div></div><script>var test2;</script>';
-        var result = [{ tagName: 'div' }, { tagName: 'div' }];
+    var result = [{ tagName: 'div' }, { tagName: 'div' }];
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Isolate styles', () => {
+  test('Isolate styles', () => {
-        var str =
+    var str =
-          '<div><style>.a{color: red}</style></div><div></div><style>.b{color: blue}</style>';
+      '<div><style>.a{color: red}</style></div><div></div><style>.b{color: blue}</style>';
-        var resHtml = [{ tagName: 'div' }, { tagName: 'div' }];
+    var resHtml = [{ tagName: 'div' }, { tagName: 'div' }];
-        var resCss = [
+    var resCss = [
-          {
+      {
-            selectors: ['a'],
+        selectors: ['a'],
-            style: { color: 'red' }
+        style: { color: 'red' }
-          },
+      },
-          {
+      {
-            selectors: ['b'],
+        selectors: ['b'],
-            style: { color: 'blue' }
+        style: { color: 'blue' }
-          }
+      }
-        ];
+    ];
-        var res = obj.parse(str, new ParserCss());
+    var res = obj.parse(str, new ParserCss());
-        expect(res.html).toEqual(resHtml);
+    expect(res.html).toEqual(resHtml);
-        expect(res.css).toEqual(resCss);
+    expect(res.css).toEqual(resCss);
-      });
+  });
 
-      test('Respect multiple font-faces contained in styles in html', () => {
+  test('Respect multiple font-faces contained in styles in html', () => {
-        const str = `
+    const str = `
-          <style>
+      <style>
-          @font-face {
+      @font-face {
-            font-family: "Open Sans";
+        font-family: "Open Sans";
-            src:url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)
+        src:url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)
-          }
+      }
-          @font-face {
+      @font-face {
-            font-family: 'Glyphicons Halflings';
+        font-family: 'Glyphicons Halflings';
-            src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)
+        src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)
-          }
+      }
-          </style>
+      </style>
-          <div>a div</div>
+      <div>a div</div>
-        `;
+    `;
 
-        const expected = [
+    const expected = [
-          {
+      {
-            selectors: [],
+        selectors: [],
-            selectorsAdd: '',
+        selectorsAdd: '',
-            style: {
+        style: {
-              'font-family': '"Open Sans"',
+          'font-family': '"Open Sans"',
-              src:
+          src:
-                'url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)'
+            'url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)'
-            },
+        },
-            singleAtRule: 1,
+        singleAtRule: 1,
-            atRuleType: 'font-face'
+        atRuleType: 'font-face'
-          },
+      },
-          {
+      {
-            selectors: [],
+        selectors: [],
-            selectorsAdd: '',
+        selectorsAdd: '',
-            style: {
+        style: {
-              'font-family': "'Glyphicons Halflings'",
+          'font-family': "'Glyphicons Halflings'",
-              src:
+          src:
-                'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)'
+            'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)'
-            },
+        },
-            singleAtRule: 1,
+        singleAtRule: 1,
-            atRuleType: 'font-face'
+        atRuleType: 'font-face'
-          }
+      }
-        ];
+    ];
 
-        const res = obj.parse(str, new ParserCss());
+    const res = obj.parse(str, new ParserCss());
-        expect(res.css).toEqual(expected);
+    expect(res.css).toEqual(expected);
-      });
+  });
 
-      test('Parse nested div with text and spaces', () => {
+  test('Parse nested div with text and spaces', () => {
-        var str = '<div> <p>TestText</p> </div>';
+    var str = '<div> <p>TestText</p> </div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          type: 'text',
+      type: 'text',
-          components: [
+      components: [
-            {
+        {
-              tagName: '',
+          tagName: '',
-              type: 'textnode',
+          type: 'textnode',
-              content: ' '
+          content: ' '
-            },
+        },
-            {
+        {
-              tagName: 'p',
+          tagName: 'p',
-              content: 'TestText',
+          content: 'TestText',
-              type: 'text'
+          type: 'text'
-            },
+        },
-            {
+        {
-              tagName: '',
+          tagName: '',
-              type: 'textnode',
+          type: 'textnode',
-              content: ' '
+          content: ' '
-            }
+        }
-          ]
+      ]
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse node with model attributes to fetch', () => {
+  test('Parse node with model attributes to fetch', () => {
-        var str =
+    var str =
-          '<div id="test1" data-test="test-value" data-gjs-draggable=".myselector" data-gjs-stuff="test">test2 </div>';
+      '<div id="test1" data-test="test-value" data-gjs-draggable=".myselector" data-gjs-stuff="test">test2 </div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          draggable: '.myselector',
+      draggable: '.myselector',
-          stuff: 'test',
+      stuff: 'test',
-          attributes: {
+      attributes: {
-            id: 'test1',
+        id: 'test1',
-            'data-test': 'test-value'
+        'data-test': 'test-value'
-          },
+      },
-          type: 'text',
+      type: 'text',
-          content: 'test2 '
+      content: 'test2 '
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse model attributes with true and false', () => {
+  test('Parse model attributes with true and false', () => {
-        var str =
+    var str =
-          '<div id="test1" data-test="test-value" data-gjs-draggable="true" data-gjs-stuff="false">test2 </div>';
+      '<div id="test1" data-test="test-value" data-gjs-draggable="true" data-gjs-stuff="false">test2 </div>';
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          draggable: true,
+      draggable: true,
-          stuff: false,
+      stuff: false,
-          attributes: {
+      attributes: {
-            id: 'test1',
+        id: 'test1',
-            'data-test': 'test-value'
+        'data-test': 'test-value'
-          },
+      },
-          type: 'text',
+      type: 'text',
-          content: 'test2 '
+      content: 'test2 '
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse attributes with object inside', () => {
+  test('Parse attributes with object inside', () => {
-        var str = `<div data-gjs-test='{ "prop1": "value1", "prop2": 10, "prop3": true}'>test2 </div>`;
+    var str = `<div data-gjs-test='{ "prop1": "value1", "prop2": 10, "prop3": true}'>test2 </div>`;
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: {},
+      attributes: {},
-          type: 'text',
+      type: 'text',
-          test: {
+      test: {
-            prop1: 'value1',
+        prop1: 'value1',
-            prop2: 10,
+        prop2: 10,
-            prop3: true
+        prop3: true
-          },
+      },
-          content: 'test2 '
+      content: 'test2 '
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
 
-      test('Parse attributes with arrays inside', () => {
+  test('Parse attributes with arrays inside', () => {
-        var str = `<div data-gjs-test='["value1", "value2"]'>test2 </div>`;
+    var str = `<div data-gjs-test='["value1", "value2"]'>test2 </div>`;
-        var result = {
+    var result = {
-          tagName: 'div',
+      tagName: 'div',
-          attributes: {},
+      attributes: {},
-          type: 'text',
+      type: 'text',
-          test: ['value1', 'value2'],
+      test: ['value1', 'value2'],
-          content: 'test2 '
+      content: 'test2 '
-        };
+    };
-        expect(obj.parse(str).html).toEqual(result);
+    expect(obj.parse(str).html).toEqual(result);
-      });
+  });
-    });
+});
-  }
-};

test/specs/selector_manager/e2e/ClassManager.js

@@ -1,134 +1,130 @@
 import Selectors from 'selector_manager/model/Selectors';
 import ClassTagsView from 'selector_manager/view/ClassTagsView';
 
-module.exports = {
+describe('E2E tests', () => {
-  run() {
+  var fixtures;
-    describe('E2E tests', () => {
+  var components;
-      var fixtures;
+  var tagEl;
-      var components;
+  var gjs;
-      var tagEl;
-      var gjs;
 
-      var instClassTagViewer = (gjs, fixtures) => {
+  var instClassTagViewer = (gjs, fixtures) => {
-        var tagEl;
+    var tagEl;
-        var clm = gjs.editor.get('SelectorManager');
+    var clm = gjs.editor.get('SelectorManager');
 
-        if (clm) {
+    if (clm) {
-          tagEl = new ClassTagsView({
+      tagEl = new ClassTagsView({
-            collection: new Selectors([]),
+        collection: new Selectors([]),
-            config: { em: gjs.editor }
+        config: { em: gjs.editor }
-          }).render();
+      }).render();
-          fixtures.appendChild(tagEl.el);
+      fixtures.appendChild(tagEl.el);
-        }
+    }
 
-        return tagEl;
+    return tagEl;
-      };
+  };
-      /*
+  /*
-        before(function () {
+    before(function () {
-          this.$fixtures  = $("#fixtures");
+      this.$fixtures  = $("#fixtures");
-          this.$fixture   = $('<div id="SelectorManager-fixture"></div>');
+      this.$fixture   = $('<div id="SelectorManager-fixture"></div>');
-        });
+    });
 */
-      beforeEach(() => {
+  beforeEach(() => {
-        document.body.innerHTML =
+    document.body.innerHTML =
-          '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
+      '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
-        fixtures = document.body.firstChild;
+    fixtures = document.body.firstChild;
-        gjs = grapesjs.init({
+    gjs = grapesjs.init({
-          stylePrefix: '',
+      stylePrefix: '',
-          storageManager: { autoload: 0, type: 0 },
+      storageManager: { autoload: 0, type: 0 },
-          assetManager: {
+      assetManager: {
-            storageType: 'none'
+        storageType: 'none'
-          },
+      },
-          container: '#SelectorManager-fixture'
+      container: '#SelectorManager-fixture'
-        });
+    });
-      });
+  });
 
-      describe('Interaction with Components', () => {
+  describe('Interaction with Components', () => {
-        beforeEach(() => {
+    beforeEach(() => {
-          components = gjs.getComponents();
+      components = gjs.getComponents();
-          tagEl = instClassTagViewer(gjs, fixtures);
+      tagEl = instClassTagViewer(gjs, fixtures);
-        });
+    });
 
-        test('Assign correctly new class to component', done => {
+    test('Assign correctly new class to component', done => {
-          var model = components.add({});
+      var model = components.add({});
-          expect(model.get('classes').length).toEqual(0);
+      expect(model.get('classes').length).toEqual(0);
-          gjs.select(model);
+      gjs.select(model);
-          setTimeout(() => {
+      setTimeout(() => {
-            tagEl.addNewTag('test');
+        tagEl.addNewTag('test');
-            expect(model.get('classes').length).toEqual(1);
+        expect(model.get('classes').length).toEqual(1);
-            expect(
+        expect(
-              model
+          model
-                .get('classes')
+            .get('classes')
-                .at(0)
+            .at(0)
-                .get('name')
+            .get('name')
-            ).toEqual('test');
+        ).toEqual('test');
-            done();
+        done();
-          });
+      });
-        });
+    });
 
-        test('Classes from components are correctly imported inside main container', () => {
+    test('Classes from components are correctly imported inside main container', () => {
-          var model = components.add([
+      var model = components.add([
-            { classes: ['test11', 'test12', 'test13'] },
+        { classes: ['test11', 'test12', 'test13'] },
-            { classes: ['test11', 'test22', 'test22'] }
+        { classes: ['test11', 'test22', 'test22'] }
-          ]);
+      ]);
-          expect(gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
+      expect(gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
-        });
+    });
 
-        test('Class imported into component is the same model from main container', () => {
+    test('Class imported into component is the same model from main container', () => {
-          var model = components.add({ classes: ['test1'] });
+      var model = components.add({ classes: ['test1'] });
-          var clModel = model.get('classes').at(0);
+      var clModel = model.get('classes').at(0);
-          var clModel2 = gjs.editor
+      var clModel2 = gjs.editor
-            .get('SelectorManager')
+        .get('SelectorManager')
-            .getAll()
+        .getAll()
-            .at(0);
+        .at(0);
-          expect(clModel).toEqual(clModel2);
+      expect(clModel).toEqual(clModel2);
-        });
+    });
 
-        test('Can assign only one time the same class on selected component and the class viewer', done => {
+    test('Can assign only one time the same class on selected component and the class viewer', done => {
-          var model = components.add({});
+      var model = components.add({});
-          gjs.select(model);
+      gjs.select(model);
-          setTimeout(() => {
+      setTimeout(() => {
-            tagEl.addNewTag('test');
+        tagEl.addNewTag('test');
-            tagEl.addNewTag('test');
+        tagEl.addNewTag('test');
-            expect(model.getSelectors().length).toEqual(1);
+        expect(model.getSelectors().length).toEqual(1);
-            expect(
+        expect(
-              model
+          model
-                .getSelectors()
+            .getSelectors()
-                .at(0)
+            .at(0)
-                .get('name')
+            .get('name')
-            ).toEqual('test');
+        ).toEqual('test');
-            expect(tagEl.collection.length).toEqual(1);
+        expect(tagEl.collection.length).toEqual(1);
-            expect(tagEl.collection.at(0).get('name')).toEqual('test');
+        expect(tagEl.collection.at(0).get('name')).toEqual('test');
-            done();
+        done();
-          });
+      });
-        });
+    });
 
-        test('Removing from container removes also from selected component', () => {
+    test('Removing from container removes also from selected component', () => {
-          var model = components.add({});
+      var model = components.add({});
-          gjs.editor.setSelected(model);
+      gjs.editor.setSelected(model);
-          tagEl.addNewTag('test');
+      tagEl.addNewTag('test');
-          tagEl
+      tagEl
-            .getClasses()
+        .getClasses()
-            .find('.tag #close')
+        .find('.tag #close')
-            .trigger('click');
+        .trigger('click');
-          setTimeout(() => expect(model.get('classes').length).toEqual(0));
+      setTimeout(() => expect(model.get('classes').length).toEqual(0));
-        });
+    });
 
-        test('Trigger correctly event on target with new class add', done => {
+    test('Trigger correctly event on target with new class add', done => {
-          var spy = sinon.spy();
+      var spy = sinon.spy();
-          var model = components.add({});
+      var model = components.add({});
-          gjs.select(model);
+      gjs.select(model);
-          setTimeout(() => {
+      setTimeout(() => {
-            tagEl.addNewTag('test');
+        tagEl.addNewTag('test');
-            gjs.editor.on('component:update:classes', spy);
+        gjs.editor.on('component:update:classes', spy);
-            tagEl.addNewTag('test');
+        tagEl.addNewTag('test');
-            expect(spy.called).toEqual(false);
+        expect(spy.called).toEqual(false);
-            tagEl.addNewTag('test2');
+        tagEl.addNewTag('test2');
-            expect(spy.called).toEqual(true);
+        expect(spy.called).toEqual(true);
-            done();
+        done();
-          });
-        });
       });
     });
-  }
+  });
-};
+});

test/specs/selector_manager/index.js

@@ -1,9 +1,5 @@
 import SelectorManager from 'selector_manager';
 import Selector from 'selector_manager/model/Selector';
-import Models from './model/SelectorModels';
-import ClassTagView from './view/ClassTagView';
-import ClassTagsView from './view/ClassTagsView';
-import e2e from './e2e/ClassManager';
 import Editor from 'editor/model/Editor';
 
 describe('SelectorManager', () => {
@@ -172,12 +168,4 @@ describe('SelectorManager', () => {
       expect(result.length).toEqual(1);
     });
   });
-
-  Models.run();
-
-  describe('Views', () => {
-    ClassTagView.run();
-    ClassTagsView.run();
-    e2e.run();
-  });
 });

test/specs/selector_manager/model/SelectorModels.js

@@ -1,68 +1,64 @@
 import Selector from 'selector_manager/model/Selector';
 import Selectors from 'selector_manager/model/Selectors';
 
-module.exports = {
+describe('Selector', () => {
-  run() {
+  var obj;
-    describe('Selector', () => {
-      var obj;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        obj = new Selector();
+    obj = new Selector();
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-      });
+  });
 
-      test('Has name property', () => {
+  test('Has name property', () => {
-        expect(obj.has('name')).toEqual(true);
+    expect(obj.has('name')).toEqual(true);
-      });
+  });
 
-      test('Has label property', () => {
+  test('Has label property', () => {
-        expect(obj.has('label')).toEqual(true);
+    expect(obj.has('label')).toEqual(true);
-      });
+  });
 
-      test('Has active property', () => {
+  test('Has active property', () => {
-        expect(obj.has('active')).toEqual(true);
+    expect(obj.has('active')).toEqual(true);
-      });
+  });
 
-      test('escapeName test', () => {
+  test('escapeName test', () => {
-        expect(Selector.escapeName('@Te sT*')).toEqual('-Te-sT-');
+    expect(Selector.escapeName('@Te sT*')).toEqual('-Te-sT-');
-      });
+  });
 
-      test('Name is corrected at instantiation', () => {
+  test('Name is corrected at instantiation', () => {
-        obj = new Selector({ name: '@Te sT*' });
+    obj = new Selector({ name: '@Te sT*' });
-        expect(obj.get('name')).toEqual('-Te-sT-');
+    expect(obj.get('name')).toEqual('-Te-sT-');
-      });
+  });
-    });
+});
 
-    describe('Selectors', () => {
+describe('Selectors', () => {
-      var obj;
+  var obj;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        obj = new Selectors();
+    obj = new Selectors();
-      });
+  });
 
-      test('Creates collection item correctly', () => {
+  test('Creates collection item correctly', () => {
-        var c = new Selectors();
+    var c = new Selectors();
-        var m = c.add({});
+    var m = c.add({});
-        expect(m instanceof Selector).toEqual(true);
+    expect(m instanceof Selector).toEqual(true);
-      });
+  });
 
-      test('getFullString with single class', () => {
+  test('getFullString with single class', () => {
-        obj.add({ name: 'test' });
+    obj.add({ name: 'test' });
-        expect(obj.getFullString()).toEqual('.test');
+    expect(obj.getFullString()).toEqual('.test');
-      });
+  });
 
-      test('getFullString with multiple classes', () => {
+  test('getFullString with multiple classes', () => {
-        obj.add([{ name: 'test' }, { name: 'test2' }]);
+    obj.add([{ name: 'test' }, { name: 'test2' }]);
-        expect(obj.getFullString()).toEqual('.test.test2');
+    expect(obj.getFullString()).toEqual('.test.test2');
-      });
+  });
 
-      test('getFullString with mixed selectors', () => {
+  test('getFullString with mixed selectors', () => {
-        obj.add([{ name: 'test' }, { name: 'test2', type: Selector.TYPE_ID }]);
+    obj.add([{ name: 'test' }, { name: 'test2', type: Selector.TYPE_ID }]);
-        expect(obj.getFullString()).toEqual('.test#test2');
+    expect(obj.getFullString()).toEqual('.test#test2');
-      });
+  });
-    });
+});
-  }
-};

test/specs/selector_manager/view/ClassTagView.js

@@ -2,96 +2,92 @@ import EditorModel from 'editor/model/Editor';
 import ClassTagView from 'selector_manager/view/ClassTagView';
 import Selectors from 'selector_manager/model/Selectors';
 
-module.exports = {
+describe('ClassTagView', () => {
-  run() {
+  var obj;
-    describe('ClassTagView', () => {
+  var fixtures;
-      var obj;
+  var testLabel;
-      var fixtures;
+  var coll;
-      var testLabel;
+  var em;
-      var coll;
-      var em;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        coll = new Selectors();
+    coll = new Selectors();
-        testLabel = 'TestLabel';
+    testLabel = 'TestLabel';
-        em = new EditorModel();
+    em = new EditorModel();
-        var model = coll.add({
+    var model = coll.add({
-          name: 'test',
+      name: 'test',
-          label: testLabel
+      label: testLabel
-        });
+    });
-        obj = new ClassTagView({
+    obj = new ClassTagView({
-          config: { em },
+      config: { em },
-          model,
+      model,
-          coll
+      coll
-        });
+    });
-        //obj.target = { get() {} };
+    //obj.target = { get() {} };
-        //_.extend(obj.target, Backbone.Events);
+    //_.extend(obj.target, Backbone.Events);
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(obj.render().el);
+    fixtures.appendChild(obj.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj.model = null;
+    obj.model = null;
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(ClassTagView).toBeTruthy();
+    expect(ClassTagView).toBeTruthy();
-      });
+  });
 
-      test('Not empty', () => {
+  test('Not empty', () => {
-        var $el = obj.$el;
+    var $el = obj.$el;
-        expect($el.html()).toBeTruthy();
+    expect($el.html()).toBeTruthy();
-      });
+  });
 
-      test('Not empty', () => {
+  test('Not empty', () => {
-        var $el = obj.$el;
+    var $el = obj.$el;
-        expect($el.html()).toContain(testLabel);
+    expect($el.html()).toContain(testLabel);
-      });
+  });
 
-      describe('Should be rendered correctly', () => {
+  describe('Should be rendered correctly', () => {
-        test('Has close button', () => {
+    test('Has close button', () => {
-          var $el = obj.$el;
+      var $el = obj.$el;
-          expect($el.find('#close')[0]).toBeTruthy();
+      expect($el.find('#close')[0]).toBeTruthy();
-        });
+    });
-        test('Has checkbox', () => {
+    test('Has checkbox', () => {
-          var $el = obj.$el;
+      var $el = obj.$el;
-          expect($el.find('#checkbox')[0]).toBeTruthy();
+      expect($el.find('#checkbox')[0]).toBeTruthy();
-        });
+    });
-        test('Has label', () => {
+    test('Has label', () => {
-          var $el = obj.$el;
+      var $el = obj.$el;
-          expect($el.find('#tag-label')[0]).toBeTruthy();
+      expect($el.find('#tag-label')[0]).toBeTruthy();
-        });
+    });
-      });
+  });
-      // To refactor.. the remove method relies on selected component...
+  // To refactor.. the remove method relies on selected component...
-      test.skip('Could be removed', () => {
+  test.skip('Could be removed', () => {
-        obj.$el.find('#close').trigger('click');
+    obj.$el.find('#close').trigger('click');
-        expect(fixtures.innerHTML).toBeFalsy();
+    expect(fixtures.innerHTML).toBeFalsy();
-      });
+  });
 
-      test('Checkbox toggles status', () => {
+  test('Checkbox toggles status', () => {
-        var spy = sinon.spy();
+    var spy = sinon.spy();
-        obj.model.on('change:active', spy);
+    obj.model.on('change:active', spy);
-        obj.model.set('active', true);
+    obj.model.set('active', true);
-        obj.$el.find('#checkbox').trigger('click');
+    obj.$el.find('#checkbox').trigger('click');
-        expect(obj.model.get('active')).toEqual(false);
+    expect(obj.model.get('active')).toEqual(false);
-        expect(spy.called).toEqual(true);
+    expect(spy.called).toEqual(true);
-      });
+  });
 
-      test('Label input is disabled', () => {
+  test('Label input is disabled', () => {
-        expect(obj.getInputEl().contentEditable).toBeFalsy();
+    expect(obj.getInputEl().contentEditable).toBeFalsy();
-      });
+  });
 
-      test('On double click label input is enable', () => {
+  test('On double click label input is enable', () => {
-        obj.$el.find('#tag-label').trigger('dblclick');
+    obj.$el.find('#tag-label').trigger('dblclick');
-        expect(obj.getInputEl().contentEditable).toEqual(true);
+    expect(obj.getInputEl().contentEditable).toEqual(true);
-      });
+  });
 
-      test('On blur label input turns back disabled', () => {
+  test('On blur label input turns back disabled', () => {
-        obj.$el.find('#tag-label').trigger('dblclick');
+    obj.$el.find('#tag-label').trigger('dblclick');
-        obj.endEditTag();
+    obj.endEditTag();
-        expect(obj.getInputEl().contentEditable).toEqual(false);
+    expect(obj.getInputEl().contentEditable).toEqual(false);
-      });
+  });
-    });
+});
-  }
-};

test/specs/selector_manager/view/ClassTagsView.js

@@ -3,206 +3,202 @@ import Selectors from 'selector_manager/model/Selectors';
 import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 
-module.exports = {
+describe('ClassTagsView', () => {
-  run() {
+  let testContext;
-    describe('ClassTagsView', () => {
+
-      let testContext;
+  beforeEach(() => {
-
+    testContext = {};
-      beforeEach(() => {
+  });
-        testContext = {};
+
-      });
+  var view;
-
+  var fixture;
-      var view;
+  var fixtures;
-      var fixture;
+  var testLabel;
-      var fixtures;
+  var coll;
-      var testLabel;
+  var target;
-      var coll;
+  var em;
-      var target;
+
-      var em;
+  beforeAll(() => {
-
+    document.body.innerHTML = '<div id="fixtures"></div>';
-      beforeAll(() => {
+    fixtures = document.body.querySelector('#fixtures');
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    fixture = $('<div class="classtag-fixture"></div>');
-        fixtures = document.body.querySelector('#fixtures');
+  });
-        fixture = $('<div class="classtag-fixture"></div>');
+
-      });
+  afterAll(() => {
-
+    fixture.remove();
-      afterAll(() => {
+  });
-        fixture.remove();
+
-      });
+  beforeEach(() => {
-
+    target = new Editor();
-      beforeEach(() => {
+    coll = new Selectors();
-        target = new Editor();
+    view = new ClassTagsView({
-        coll = new Selectors();
+      config: { em: target },
-        view = new ClassTagsView({
+      collection: coll
-          config: { em: target },
-          collection: coll
-        });
-
-        testContext.targetStub = {
-          add(v) {
-            return { name: v };
-          }
-        };
-
-        testContext.compTargetStub = new Component();
-
-        fixtures.innerHTML = '';
-        fixture.empty().appendTo(fixtures);
-        fixture.append(view.render().el);
-        testContext.btnAdd = view.$addBtn;
-        testContext.input = view.$el.find('input#' + view.newInputId);
-        testContext.$tags = fixture.find('#tags-c');
-        testContext.$states = fixture.find('#states');
-        testContext.$statesC = fixture.find('#input-c');
-      });
-
-      afterEach(() => {
-        delete view.collection;
-      });
-
-      test('Object exists', () => {
-        expect(ClassTagsView).toBeTruthy();
-      });
-
-      test('Not tags inside', () => {
-        expect(testContext.$tags.html()).toEqual('');
-      });
-
-      test('Add new tag triggers correct method', () => {
-        sinon.stub(view, 'addToClasses');
-        coll.add({ name: 'test' });
-        expect(view.addToClasses.calledOnce).toEqual(true);
-      });
-
-      test('Start new tag creation', () => {
-        testContext.btnAdd.trigger('click');
-        expect(testContext.btnAdd.css('display')).toEqual('none');
-        expect(testContext.input.css('display')).not.toEqual('none');
-      });
-
-      test('Stop tag creation', () => {
-        testContext.btnAdd.trigger('click');
-        testContext.input.val('test');
-        testContext.input.trigger('blur');
-        expect(testContext.btnAdd.css('display')).not.toEqual('none');
-        expect(testContext.input.css('display')).toEqual('none');
-        expect(testContext.input.val()).toEqual(null);
-      });
-
-      test.skip('Check keyup of ESC on input', function() {
-        this.btnAdd.click();
-        sinon.stub(view, 'addNewTag');
-        this.input.trigger({
-          type: 'keyup',
-          keyCode: 13
-        });
-        expect(view.addNewTag.calledOnce).toEqual(true);
-      });
-
-      test.skip('Check keyup on ENTER on input', function() {
-        this.btnAdd.click();
-        sinon.stub(view, 'endNewTag');
-        this.input.trigger({
-          type: 'keyup',
-          keyCode: 27
-        });
-        expect(view.endNewTag.calledOnce).toEqual(true);
-      });
-
-      test('Collection changes on update of target', done => {
-        coll.add({ name: 'test' });
-        target.trigger('component:toggled');
-        setTimeout(() => {
-          expect(coll.length).toEqual(0);
-          done();
-        });
-      });
-
-      test('Collection reacts on reset', () => {
-        coll.add([{ name: 'test1' }, { name: 'test2' }]);
-        sinon.stub(view, 'addToClasses');
-        coll.trigger('reset');
-        expect(view.addToClasses.calledTwice).toEqual(true);
-      });
-
-      test("Don't accept empty tags", () => {
-        view.addNewTag('');
-        expect(testContext.$tags.html()).toEqual('');
-      });
-
-      test('Accept new tags', () => {
-        view.compTarget = testContext.compTargetStub;
-        view.addNewTag('test');
-        view.compTarget = testContext.compTargetStub;
-        view.addNewTag('test2');
-        expect(testContext.$tags.children().length).toEqual(2);
-      });
-
-      test('New tag correctly added', () => {
-        coll.add({ label: 'test' });
-        expect(
-          testContext.$tags
-            .children()
-            .first()
-            .find('[data-tag-name]')
-            .text()
-        ).toEqual('test');
-      });
-
-      test('States are hidden in case no tags', () => {
-        view.updateStateVis();
-        expect(testContext.$statesC.css('display')).toEqual('none');
-      });
-
-      test('States are visible in case of more tags inside', () => {
-        coll.add({ label: 'test' });
-        view.updateStateVis();
-        expect(testContext.$statesC.css('display')).toEqual('block');
-      });
-
-      test('Update state visibility on new tag', () => {
-        sinon.stub(view, 'updateStateVis');
-        sinon.stub(target, 'get').returns(testContext.targetStub);
-        view.compTarget = testContext.compTargetStub;
-        view.addNewTag('test');
-        expect(view.updateStateVis.called).toEqual(true);
-      });
-
-      test('Update state visibility on removing of the tag', () => {
-        view.compTarget = testContext.compTargetStub;
-        view.addNewTag('test');
-        sinon.stub(view, 'updateStateVis');
-        coll.remove(coll.at(0));
-        expect(view.updateStateVis.calledOnce).toEqual(true);
-      });
-
-      test('Output correctly state options', () => {
-        var view = new ClassTagsView({
-          config: {
-            em: target,
-            states: [{ name: 'testName', label: 'testLabel' }]
-          },
-          collection: coll
-        });
-        expect(view.getStateOptions()).toEqual(
-          '<option value="testName">testLabel</option>'
-        );
-      });
-
-      describe('Should be rendered correctly', () => {
-        test('Has label', () => {
-          expect(view.$el.find('#label')[0]).toBeTruthy();
-        });
-        test('Has tags container', () => {
-          expect(view.$el.find('#tags-c')[0]).toBeTruthy();
-        });
-        test('Has add button', () => {
-          expect(view.$el.find('#add-tag')[0]).toBeTruthy();
-        });
-        test('Has states input', () => {
-          expect(view.$el.find('#states')[0]).toBeTruthy();
-        });
-      });
     });
-  }
+
-};
+    testContext.targetStub = {
+      add(v) {
+        return { name: v };
+      }
+    };
+
+    testContext.compTargetStub = new Component();
+
+    fixtures.innerHTML = '';
+    fixture.empty().appendTo(fixtures);
+    fixture.append(view.render().el);
+    testContext.btnAdd = view.$addBtn;
+    testContext.input = view.$el.find('input#' + view.newInputId);
+    testContext.$tags = fixture.find('#tags-c');
+    testContext.$states = fixture.find('#states');
+    testContext.$statesC = fixture.find('#input-c');
+  });
+
+  afterEach(() => {
+    delete view.collection;
+  });
+
+  test('Object exists', () => {
+    expect(ClassTagsView).toBeTruthy();
+  });
+
+  test('Not tags inside', () => {
+    expect(testContext.$tags.html()).toEqual('');
+  });
+
+  test('Add new tag triggers correct method', () => {
+    sinon.stub(view, 'addToClasses');
+    coll.add({ name: 'test' });
+    expect(view.addToClasses.calledOnce).toEqual(true);
+  });
+
+  test('Start new tag creation', () => {
+    testContext.btnAdd.trigger('click');
+    expect(testContext.btnAdd.css('display')).toEqual('none');
+    expect(testContext.input.css('display')).not.toEqual('none');
+  });
+
+  test('Stop tag creation', () => {
+    testContext.btnAdd.trigger('click');
+    testContext.input.val('test');
+    testContext.input.trigger('blur');
+    expect(testContext.btnAdd.css('display')).not.toEqual('none');
+    expect(testContext.input.css('display')).toEqual('none');
+    expect(testContext.input.val()).toEqual(null);
+  });
+
+  test.skip('Check keyup of ESC on input', function() {
+    this.btnAdd.click();
+    sinon.stub(view, 'addNewTag');
+    this.input.trigger({
+      type: 'keyup',
+      keyCode: 13
+    });
+    expect(view.addNewTag.calledOnce).toEqual(true);
+  });
+
+  test.skip('Check keyup on ENTER on input', function() {
+    this.btnAdd.click();
+    sinon.stub(view, 'endNewTag');
+    this.input.trigger({
+      type: 'keyup',
+      keyCode: 27
+    });
+    expect(view.endNewTag.calledOnce).toEqual(true);
+  });
+
+  test('Collection changes on update of target', done => {
+    coll.add({ name: 'test' });
+    target.trigger('component:toggled');
+    setTimeout(() => {
+      expect(coll.length).toEqual(0);
+      done();
+    });
+  });
+
+  test('Collection reacts on reset', () => {
+    coll.add([{ name: 'test1' }, { name: 'test2' }]);
+    sinon.stub(view, 'addToClasses');
+    coll.trigger('reset');
+    expect(view.addToClasses.calledTwice).toEqual(true);
+  });
+
+  test("Don't accept empty tags", () => {
+    view.addNewTag('');
+    expect(testContext.$tags.html()).toEqual('');
+  });
+
+  test('Accept new tags', () => {
+    view.compTarget = testContext.compTargetStub;
+    view.addNewTag('test');
+    view.compTarget = testContext.compTargetStub;
+    view.addNewTag('test2');
+    expect(testContext.$tags.children().length).toEqual(2);
+  });
+
+  test('New tag correctly added', () => {
+    coll.add({ label: 'test' });
+    expect(
+      testContext.$tags
+        .children()
+        .first()
+        .find('[data-tag-name]')
+        .text()
+    ).toEqual('test');
+  });
+
+  test('States are hidden in case no tags', () => {
+    view.updateStateVis();
+    expect(testContext.$statesC.css('display')).toEqual('none');
+  });
+
+  test('States are visible in case of more tags inside', () => {
+    coll.add({ label: 'test' });
+    view.updateStateVis();
+    expect(testContext.$statesC.css('display')).toEqual('block');
+  });
+
+  test('Update state visibility on new tag', () => {
+    sinon.stub(view, 'updateStateVis');
+    sinon.stub(target, 'get').returns(testContext.targetStub);
+    view.compTarget = testContext.compTargetStub;
+    view.addNewTag('test');
+    expect(view.updateStateVis.called).toEqual(true);
+  });
+
+  test('Update state visibility on removing of the tag', () => {
+    view.compTarget = testContext.compTargetStub;
+    view.addNewTag('test');
+    sinon.stub(view, 'updateStateVis');
+    coll.remove(coll.at(0));
+    expect(view.updateStateVis.calledOnce).toEqual(true);
+  });
+
+  test('Output correctly state options', () => {
+    var view = new ClassTagsView({
+      config: {
+        em: target,
+        states: [{ name: 'testName', label: 'testLabel' }]
+      },
+      collection: coll
+    });
+    expect(view.getStateOptions()).toEqual(
+      '<option value="testName">testLabel</option>'
+    );
+  });
+
+  describe('Should be rendered correctly', () => {
+    test('Has label', () => {
+      expect(view.$el.find('#label')[0]).toBeTruthy();
+    });
+    test('Has tags container', () => {
+      expect(view.$el.find('#tags-c')[0]).toBeTruthy();
+    });
+    test('Has add button', () => {
+      expect(view.$el.find('#add-tag')[0]).toBeTruthy();
+    });
+    test('Has states input', () => {
+      expect(view.$el.find('#states')[0]).toBeTruthy();
+    });
+  });
+});

test/specs/storage_manager/index.js

@@ -102,6 +102,4 @@ describe('Storage Manager', () => {
       });
     });
   });
-
-  Models.run();
 });

test/specs/storage_manager/model/Models.js

@@ -2,161 +2,157 @@ import 'whatwg-fetch';
 import LocalStorage from 'storage_manager/model/LocalStorage';
 import RemoteStorage from 'storage_manager/model/RemoteStorage';
 
-module.exports = {
+describe('LocalStorage', () => {
-  run() {
+  var obj;
-    describe('LocalStorage', () => {
+  var itemName = 'testItem';
-      var obj;
+  var data = {
-      var itemName = 'testItem';
+    item1: 'value1',
-      var data = {
+    item2: 'value2'
-        item1: 'value1',
+  };
-        item2: 'value2'
+
-      };
+  beforeEach(() => {
-
+    obj = new LocalStorage();
-      beforeEach(() => {
+  });
-        obj = new LocalStorage();
+
-      });
+  afterEach(() => {
-
+    obj = null;
-      afterEach(() => {
+  });
-        obj = null;
+
-      });
+  test('Store and load items', () => {
-
+    obj.store(data);
-      test('Store and load items', () => {
+    var result = obj.load(['item1', 'item2']);
-        obj.store(data);
+    expect(result).toEqual(data);
-        var result = obj.load(['item1', 'item2']);
+  });
-        expect(result).toEqual(data);
+
-      });
+  test('Store, update and load items', () => {
-
+    obj.store(data);
-      test('Store, update and load items', () => {
+    obj.store({ item3: 'value3' });
-        obj.store(data);
+    obj.store({ item2: 'value22' });
-        obj.store({ item3: 'value3' });
+    var result = obj.load(['item1', 'item2', 'item3']);
-        obj.store({ item2: 'value22' });
+    expect(result).toEqual({
-        var result = obj.load(['item1', 'item2', 'item3']);
+      item1: 'value1',
-        expect(result).toEqual({
+      item2: 'value22',
-          item1: 'value1',
+      item3: 'value3'
-          item2: 'value22',
-          item3: 'value3'
-        });
-      });
-
-      test('Remove items', () => {
-        var items = ['item1', 'item2', 'item3'];
-        obj.store(data);
-        obj.remove(items);
-        expect(obj.load(items)).toEqual({});
-      });
     });
-
+  });
-    describe('RemoteStorage', () => {
+
-      var obj;
+  test('Remove items', () => {
-      var itemName = 'testItem';
+    var items = ['item1', 'item2', 'item3'];
-      var endpointStore = 'testStoreEndpoint';
+    obj.store(data);
-      var endpointLoad = 'testLoadEndpoint';
+    obj.remove(items);
-      var params = { test: 'testValue' };
+    expect(obj.load(items)).toEqual({});
-      var storageOptions;
+  });
-      var data;
+});
-      var mockResponse = (body = {}) => {
+
-        return new window.Response(JSON.stringify(body), {
+describe('RemoteStorage', () => {
-          status: 200,
+  var obj;
-          headers: { 'Content-type': 'application/json' }
+  var itemName = 'testItem';
-        });
+  var endpointStore = 'testStoreEndpoint';
-      };
+  var endpointLoad = 'testLoadEndpoint';
-
+  var params = { test: 'testValue' };
-      beforeEach(() => {
+  var storageOptions;
-        data = {
+  var data;
-          item1: 'value1',
+  var mockResponse = (body = {}) => {
-          item2: 'value2'
+    return new window.Response(JSON.stringify(body), {
-        };
+      status: 200,
-        storageOptions = {
+      headers: { 'Content-type': 'application/json' }
-          urlStore: endpointStore,
+    });
-          urlLoad: endpointLoad,
+  };
-          params
+
-        };
+  beforeEach(() => {
-        obj = new RemoteStorage(storageOptions);
+    data = {
-        sinon
+      item1: 'value1',
-          .stub(obj, 'fetch')
+      item2: 'value2'
-          .returns(Promise.resolve(mockResponse({ data: 1 })));
+    };
-      });
+    storageOptions = {
-
+      urlStore: endpointStore,
-      afterEach(() => {
+      urlLoad: endpointLoad,
-        obj.fetch.restore();
+      params
-        obj = null;
+    };
-      });
+    obj = new RemoteStorage(storageOptions);
-
+    sinon
-      test('Store data', () => {
+      .stub(obj, 'fetch')
-        obj.store(data);
+      .returns(Promise.resolve(mockResponse({ data: 1 })));
-        const callResult = obj.fetch;
+  });
-        expect(callResult.called).toEqual(true);
+
-        expect(callResult.firstCall.args[0]).toEqual(endpointStore);
+  afterEach(() => {
-      });
+    obj.fetch.restore();
-
+    obj = null;
-      test('Load data', () => {
+  });
-        obj.load(['item1', 'item2']);
+
-        const callResult = obj.fetch;
+  test('Store data', () => {
-        expect(callResult.called).toEqual(true);
+    obj.store(data);
-        expect(callResult.firstCall.args[0]).toEqual(endpointLoad);
+    const callResult = obj.fetch;
-      });
+    expect(callResult.called).toEqual(true);
-
+    expect(callResult.firstCall.args[0]).toEqual(endpointStore);
-      test("Load data with credentials option as 'include' by default", () => {
+  });
-        obj.load(['item1', 'item2']);
+
-        const callResult = obj.fetch;
+  test('Load data', () => {
-        expect(callResult.called).toEqual(true);
+    obj.load(['item1', 'item2']);
-        expect(callResult.firstCall.args[1]).toMatchObject({
+    const callResult = obj.fetch;
-          credentials: 'include'
+    expect(callResult.called).toEqual(true);
-        });
+    expect(callResult.firstCall.args[0]).toEqual(endpointLoad);
-      });
+  });
-
+
-      test("Store data with credentials option as 'include' by default", () => {
+  test("Load data with credentials option as 'include' by default", () => {
-        obj.store(data);
+    obj.load(['item1', 'item2']);
-        const callResult = obj.fetch;
+    const callResult = obj.fetch;
-        expect(callResult.called).toEqual(true);
+    expect(callResult.called).toEqual(true);
-        expect(callResult.firstCall.args[1]).toMatchObject({
+    expect(callResult.firstCall.args[1]).toMatchObject({
-          credentials: 'include'
+      credentials: 'include'
-        });
+    });
-      });
+  });
-
+
-      test('Store data with credentials option as false ', () => {
+  test("Store data with credentials option as 'include' by default", () => {
-        obj = new RemoteStorage({ ...storageOptions, credentials: false });
+    obj.store(data);
-        sinon
+    const callResult = obj.fetch;
-          .stub(obj, 'fetch')
+    expect(callResult.called).toEqual(true);
-          .returns(Promise.resolve(mockResponse({ data: 1 })));
+    expect(callResult.firstCall.args[1]).toMatchObject({
-
+      credentials: 'include'
-        obj.store(data);
+    });
-        const callResult = obj.fetch;
+  });
-        expect(callResult.called).toEqual(true);
+
-        expect(callResult.firstCall.args[1]).toMatchObject({
+  test('Store data with credentials option as false ', () => {
-          credentials: false
+    obj = new RemoteStorage({ ...storageOptions, credentials: false });
-        });
+    sinon
-      });
+      .stub(obj, 'fetch')
-
+      .returns(Promise.resolve(mockResponse({ data: 1 })));
-      test('Load data with credentials option as false', () => {
+
-        obj = new RemoteStorage({ ...storageOptions, credentials: false });
+    obj.store(data);
-        sinon
+    const callResult = obj.fetch;
-          .stub(obj, 'fetch')
+    expect(callResult.called).toEqual(true);
-          .returns(Promise.resolve(mockResponse({ data: 1 })));
+    expect(callResult.firstCall.args[1]).toMatchObject({
-        obj.load(['item1', 'item2']);
+      credentials: false
-        const callResult = obj.fetch;
+    });
-        expect(callResult.called).toEqual(true);
+  });
-        expect(callResult.firstCall.args[1]).toMatchObject({
+
-          credentials: false
+  test('Load data with credentials option as false', () => {
-        });
+    obj = new RemoteStorage({ ...storageOptions, credentials: false });
-      });
+    sinon
-
+      .stub(obj, 'fetch')
-      test('Load data with custom fetch options as function', () => {
+      .returns(Promise.resolve(mockResponse({ data: 1 })));
-        const customOpts = { customOpt: 'customValue' };
+    obj.load(['item1', 'item2']);
-        obj = new RemoteStorage({
+    const callResult = obj.fetch;
-          ...storageOptions,
+    expect(callResult.called).toEqual(true);
-          fetchOptions: () => {
+    expect(callResult.firstCall.args[1]).toMatchObject({
-            return customOpts;
+      credentials: false
-          }
+    });
-        });
+  });
-        sinon
+
-          .stub(obj, 'fetch')
+  test('Load data with custom fetch options as function', () => {
-          .returns(Promise.resolve(mockResponse({ data: 1 })));
+    const customOpts = { customOpt: 'customValue' };
-        obj.load(['item1', 'item2']);
+    obj = new RemoteStorage({
-        const callResult = obj.fetch;
+      ...storageOptions,
-        expect(callResult.called).toEqual(true);
+      fetchOptions: () => {
-        expect(callResult.firstCall.args[1]).toMatchObject(customOpts);
+        return customOpts;
-      });
+      }
     });
-  }
+    sinon
-};
+      .stub(obj, 'fetch')
+      .returns(Promise.resolve(mockResponse({ data: 1 })));
+    obj.load(['item1', 'item2']);
+    const callResult = obj.fetch;
+    expect(callResult.called).toEqual(true);
+    expect(callResult.firstCall.args[1]).toMatchObject(customOpts);
+  });
+});

test/specs/style_manager/index.js

@@ -180,20 +180,5 @@ describe('StyleManager', () => {
         expect(prop1.get('name')).toEqual('Width');
       });
     });
-
-    Models.run();
-
-    describe('Views', () => {
-      SectorView.run();
-      SectorsView.run();
-      PropertyView.run();
-      PropertySelectView.run();
-      PropertyRadioView.run();
-      PropertyIntegerView.run();
-      PropertyColorView.run();
-      PropertyCompositeView.run();
-      PropertyStackView.run();
-      LayerView.run();
-    });
   });
 });

test/specs/style_manager/view/LayerView.js

@@ -1,59 +1,55 @@
 import LayerView from 'style_manager/view/LayerView';
 import Layers from 'style_manager/model/Layers';
 
-module.exports = {
+describe('LayerView', () => {
-  run() {
+  var component;
-    describe('LayerView', () => {
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+
-      var view;
+  beforeEach(() => {
-
+    var coll = new Layers();
-      beforeEach(() => {
+    model = coll.add({});
-        var coll = new Layers();
+    view = new LayerView({
-        model = coll.add({});
+      model
-        view = new LayerView({
-          model
-        });
-        document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.firstChild;
-        fixtures.appendChild(view.render().el);
-      });
-
-      afterAll(() => {
-        component = null;
-        view = null;
-        model = null;
-      });
-
-      test('Rendered correctly', () => {
-        var layer = view.el;
-        expect(fixtures.querySelector('.layer')).toBeTruthy();
-        expect(layer.querySelector('#label')).toBeTruthy();
-        expect(layer.querySelector('#close-layer')).toBeTruthy();
-        expect(view.getPropertiesWrapper()).toBeTruthy();
-        expect(view.getPreviewEl()).toBeTruthy();
-      });
-
-      test('Is not active by default', () => {
-        expect(view.$el.hasClass('active')).toEqual(false);
-      });
-
-      test('Is possible to activate it', () => {
-        view.model.set('active', 1);
-        expect(view.$el.hasClass('active')).toEqual(true);
-      });
-
-      test('Is possible to activate it with active()', () => {
-        view.active();
-        expect(view.$el.hasClass('active')).toEqual(true);
-      });
-
-      test('No preview', () => {
-        var style = view.el.querySelector('#preview').style;
-        expect(style.cssText).toBeFalsy();
-      });
     });
-  }
+    document.body.innerHTML = '<div id="fixtures"></div>';
-};
+    fixtures = document.body.firstChild;
+    fixtures.appendChild(view.render().el);
+  });
+
+  afterAll(() => {
+    component = null;
+    view = null;
+    model = null;
+  });
+
+  test('Rendered correctly', () => {
+    var layer = view.el;
+    expect(fixtures.querySelector('.layer')).toBeTruthy();
+    expect(layer.querySelector('#label')).toBeTruthy();
+    expect(layer.querySelector('#close-layer')).toBeTruthy();
+    expect(view.getPropertiesWrapper()).toBeTruthy();
+    expect(view.getPreviewEl()).toBeTruthy();
+  });
+
+  test('Is not active by default', () => {
+    expect(view.$el.hasClass('active')).toEqual(false);
+  });
+
+  test('Is possible to activate it', () => {
+    view.model.set('active', 1);
+    expect(view.$el.hasClass('active')).toEqual(true);
+  });
+
+  test('Is possible to activate it with active()', () => {
+    view.active();
+    expect(view.$el.hasClass('active')).toEqual(true);
+  });
+
+  test('No preview', () => {
+    var style = view.el.querySelector('#preview').style;
+    expect(style.cssText).toBeFalsy();
+  });
+});

test/specs/style_manager/view/PropertyColorView.js

@@ -4,165 +4,161 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('PropertyColorView', () => {
-  run() {
+  let em;
-    describe('PropertyColorView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propTarget;
-      var view;
+  var propName = 'testprop';
-      var propTarget;
+  var propValue = '#fff';
-      var propName = 'testprop';
+  var defValue = 'test2value';
-      var propValue = '#fff';
+
-      var defValue = 'test2value';
+  beforeAll(() => {
-
+    $.fn.spectrum = function() {
-      beforeAll(() => {
+      return this;
-        $.fn.spectrum = function() {
+    };
-          return this;
+  });
-        };
+
-      });
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    propTarget = { ...Backbone.Events };
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    target = new Component({}, compOpts);
-        propTarget = { ...Backbone.Events };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    model = new Property({
-        component = new Component({}, compOpts);
+      type: 'color',
-        model = new Property({
+      property: propName
-          type: 'color',
+    });
-          property: propName
+    propTarget.model = component;
-        });
+    view = new PropertyColorView({
-        propTarget.model = component;
+      model,
-        view = new PropertyColorView({
+      propTarget
-          model,
+    });
-          propTarget
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
-      });
+  afterEach(() => {
-
+    //view.remove(); // strange errors ???
-      afterEach(() => {
+  });
-        //view.remove(); // strange errors ???
+
-      });
+  afterAll(() => {
-
+    component = null;
-      afterAll(() => {
+    view = null;
-        component = null;
+    model = null;
-        view = null;
+  });
-        model = null;
+
-      });
+  test('Rendered correctly', () => {
-
+    var prop = view.el;
-      test('Rendered correctly', () => {
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+  });
-        expect(prop.querySelector('.field')).toBeTruthy();
+
-      });
+  test('Inputs rendered', () => {
-
+    var prop = view.el;
-      test('Inputs rendered', () => {
+    expect(prop.querySelector('input[type=text]')).toBeTruthy();
-        var prop = view.el;
+  });
-        expect(prop.querySelector('input[type=text]')).toBeTruthy();
+
-      });
+  test('Inputs should exist', () => {
-
+    expect(view.$input).toBeTruthy();
-      test('Inputs should exist', () => {
+    expect(view.$color).toBeTruthy();
-        expect(view.$input).toBeTruthy();
+  });
-        expect(view.$color).toBeTruthy();
+
-      });
+  test('Input value is empty', () => {
-
+    expect(view.model.get('value')).toBeFalsy();
-      test('Input value is empty', () => {
+    expect(view.getInputValue()).toBeFalsy();
-        expect(view.model.get('value')).toBeFalsy();
+  });
-        expect(view.getInputValue()).toBeFalsy();
+
-      });
+  test('Update model on setValue', () => {
-
+    view.setValue(propValue);
-      test('Update model on setValue', () => {
+    expect(view.getInputValue()).toEqual(propValue);
-        view.setValue(propValue);
+  });
-        expect(view.getInputValue()).toEqual(propValue);
+
+  test('Update model on input change', () => {
+    view.getInputEl().value = propValue;
+    view.inputValueChanged();
+    expect(view.model.get('value')).toEqual(propValue);
+  });
+
+  test('Update input on value change', () => {
+    view.model.set('value', propValue);
+    expect(view.getInputValue()).toEqual(propValue);
+  });
+
+  test('Update target on value change', () => {
+    view.selectedComponent = component;
+    view.model.set('value', propValue);
+    var compStyle = view.selectedComponent.get('style');
+    var assertStyle = {};
+    assertStyle[propName] = propValue;
+    expect(compStyle).toEqual(assertStyle);
+  });
+
+  describe('With target setted', () => {
+    beforeEach(() => {
+      target.model = component;
+      view = new PropertyColorView({
+        model,
+        propTarget: target
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update model on input change', () => {
+    test('Update value and input on target swap', () => {
-        view.getInputEl().value = propValue;
+      var style = {};
-        view.inputValueChanged();
+      style[propName] = propValue;
-        expect(view.model.get('value')).toEqual(propValue);
+      component.set('style', style);
-      });
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(propValue);
+      expect(view.getInputValue()).toEqual(propValue);
+    });
 
-      test('Update input on value change', () => {
+    test('Update value after multiple swaps', () => {
-        view.model.set('value', propValue);
+      var style = {};
-        expect(view.getInputValue()).toEqual(propValue);
+      style[propName] = propValue;
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      style[propName] = '#123123';
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual('#123123');
+      expect(view.getInputValue()).toEqual('#123123');
+    });
+  });
+
+  describe('Init property', () => {
+    beforeEach(() => {
+      component = new Component();
+      model = new Property({
+        type: 'color',
+        property: propName,
+        defaults: propValue
       });
-
+      view = new PropertyColorView({
-      test('Update target on value change', () => {
+        model
-        view.selectedComponent = component;
-        view.model.set('value', propValue);
-        var compStyle = view.selectedComponent.get('style');
-        var assertStyle = {};
-        assertStyle[propName] = propValue;
-        expect(compStyle).toEqual(assertStyle);
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      describe('With target setted', () => {
+    test('Value as default', () => {
-        beforeEach(() => {
+      expect(view.model.get('value')).toEqual(propValue);
-          target.model = component;
+    });
-          view = new PropertyColorView({
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(propValue);
-          expect(view.getInputValue()).toEqual(propValue);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] = '#123123';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual('#123123');
-          expect(view.getInputValue()).toEqual('#123123');
-        });
-      });
 
-      describe('Init property', () => {
+    test('Input value is the default', () => {
-        beforeEach(() => {
+      expect(view.getInputValue()).toEqual(propValue);
-          component = new Component();
-          model = new Property({
-            type: 'color',
-            property: propName,
-            defaults: propValue
-          });
-          view = new PropertyColorView({
-            model
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Value as default', () => {
-          expect(view.model.get('value')).toEqual(propValue);
-        });
-
-        test('Input value is the default', () => {
-          expect(view.getInputValue()).toEqual(propValue);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertyCompositeView.js

@@ -4,243 +4,239 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('PropertyCompositeView', () => {
-  run() {
+  let em;
-    describe('PropertyCompositeView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propName = 'testprop';
-      var view;
+  var propValue = 'test1value';
-      var propName = 'testprop';
+  var defValue = 'test2value';
-      var propValue = 'test1value';
+  var properties = [
-      var defValue = 'test2value';
+    {
-      var properties = [
+      property: 'subprop1'
-        {
+    },
-          property: 'subprop1'
+    {
-        },
+      type: 'integer',
-        {
+      property: 'subprop2',
-          type: 'integer',
+      defaults: 0,
-          property: 'subprop2',
+      units: ['%', 'px']
-          defaults: 0,
+    },
-          units: ['%', 'px']
+    {
-        },
+      type: 'select',
-        {
+      property: 'subprop3',
-          type: 'select',
+      defaults: 'val2',
-          property: 'subprop3',
+      list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }]
-          defaults: 'val2',
+    }
-          list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }]
+  ];
-        }
+
-      ];
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    target = new Component({}, compOpts);
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    target.model = component;
-        component = new Component({}, compOpts);
+    model = new PropertyComposite({
-        target.model = component;
+      type: 'composite',
-        model = new PropertyComposite({
+      property: propName,
-          type: 'composite',
+      properties
-          property: propName,
+    });
-          properties
+    view = new PropertyCompositeView({
-        });
+      model
-        view = new PropertyCompositeView({
+    });
-          model
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
+  afterAll(() => {
+    component = null;
+    view = null;
+    model = null;
+  });
+
+  test('Rendered correctly', () => {
+    var prop = view.el;
+    expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.label')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
+  });
+
+  test('Properties rendered', () => {
+    var prop = view.el;
+    expect(prop.querySelector('.properties')).toBeTruthy();
+  });
+
+  test('Properties rendered correctly', () => {
+    var children = view.el.querySelector('.properties').children;
+    expect(children.length).toEqual(properties.length);
+    expect(children[0].id).toEqual(properties[0].property);
+    expect(children[1].id).toEqual(properties[1].property);
+    expect(children[2].id).toEqual(properties[2].property);
+  });
+
+  test('Props should exist', () => {
+    expect(view.$props).toBeTruthy();
+  });
+
+  test('Input value is empty', () => {
+    expect(model.getFullValue()).toEqual('0 val2');
+  });
+
+  test('Update input on value change', () => {
+    view.model.set('value', propValue);
+    // Fetch always values from properties
+    expect(view.getInputValue()).toEqual('0 val2');
+  });
+
+  describe('With target setted', () => {
+    var prop2Val;
+    var prop3Val;
+    var prop2Unit;
+    var finalResult;
+    var $prop1;
+    var $prop2;
+    var $prop3;
+
+    beforeEach(() => {
+      model = new PropertyComposite({
+        type: 'composite',
+        property: propName,
+        properties
       });
-
+      view = new PropertyCompositeView({
-      afterAll(() => {
+        model,
-        component = null;
+        propTarget: target
-        view = null;
-        model = null;
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+      prop2Val = properties[1].defaults;
+      prop2Unit = properties[1].units[0];
+      prop3Val = properties[2].list[2].value;
+      finalResult = propValue + ' ' + prop2Val + ' ' + prop3Val;
+      $prop1 = view.$props.find('#' + properties[0].property + ' input');
+      $prop2 = view.$props.find('#' + properties[1].property + ' input');
+      $prop3 = view.$props.find('#' + properties[2].property + ' select');
+    });
 
-      test('Rendered correctly', () => {
+    test('Update model on input change', () => {
-        var prop = view.el;
+      $prop1.val(propValue).trigger('change');
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+      $prop3.val(prop3Val).trigger('change');
-        expect(prop.querySelector('.label')).toBeTruthy();
+      expect(model.getFullValue()).toEqual(finalResult);
-        expect(prop.querySelector('.field')).toBeTruthy();
+    });
-      });
 
-      test('Properties rendered', () => {
+    test('Update value on models change', () => {
-        var prop = view.el;
+      view.model
-        expect(prop.querySelector('.properties')).toBeTruthy();
+        .get('properties')
-      });
+        .at(0)
+        .set('value', propValue);
+      view.model
+        .get('properties')
+        .at(2)
+        .set('value', prop3Val);
+      expect(view.model.get('value')).toEqual(finalResult);
+    });
 
-      test('Properties rendered correctly', () => {
+    test('Update target on value change', () => {
-        var children = view.el.querySelector('.properties').children;
+      $prop1.val(propValue).trigger('change');
-        expect(children.length).toEqual(properties.length);
+      var compStyle = view.getTarget().get('style');
-        expect(children[0].id).toEqual(properties[0].property);
+      var assertStyle = {};
-        expect(children[1].id).toEqual(properties[1].property);
+      assertStyle[propName] = propValue + ' 0 val2';
-        expect(children[2].id).toEqual(properties[2].property);
+      expect(compStyle).toEqual(assertStyle);
-      });
+    });
 
-      test('Props should exist', () => {
+    test('Update target on detached value change', () => {
-        expect(view.$props).toBeTruthy();
+      model = new PropertyComposite({
+        type: 'composite',
+        property: propName,
+        properties,
+        detached: true
       });
-
+      view = new PropertyCompositeView({
-      test('Input value is empty', () => {
+        model,
-        expect(model.getFullValue()).toEqual('0 val2');
+        propTarget: target
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+      $prop1 = view.$props.find('#' + properties[0].property + ' input');
+      $prop1.val(propValue).trigger('change');
+      var compStyle = view.getTarget().get('style');
+      var assertStyle = {};
+      assertStyle[properties[0].property] = $prop1.val();
+      expect(compStyle).toEqual(assertStyle);
+    });
 
-      test('Update input on value change', () => {
+    test('Update value and input on target swap', () => {
-        view.model.set('value', propValue);
+      var style = {};
-        // Fetch always values from properties
+      style[propName] = finalResult;
-        expect(view.getInputValue()).toEqual('0 val2');
+      component.set('style', style);
-      });
+      view.propTarget.trigger('update');
+      expect($prop1.val()).toEqual(propValue);
+      expect($prop3.val()).toEqual(prop3Val);
+    });
 
-      describe('With target setted', () => {
+    test('Update value after multiple swaps', () => {
-        var prop2Val;
+      var style = {};
-        var prop3Val;
+      style[propName] = finalResult;
-        var prop2Unit;
+      component.set('style', style);
-        var finalResult;
+      view.propTarget.trigger('update');
-        var $prop1;
+      style[propName] =
-        var $prop2;
+        propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1';
-        var $prop3;
+      component.set('style', style);
-
+      view.propTarget.trigger('update');
-        beforeEach(() => {
+      expect($prop1.val()).toEqual(propValue + '2');
-          model = new PropertyComposite({
+      expect($prop2.val()).toEqual('2');
-            type: 'composite',
+      expect($prop3.val()).toEqual('val1');
-            property: propName,
+    });
-            properties
-          });
-          view = new PropertyCompositeView({
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-          prop2Val = properties[1].defaults;
-          prop2Unit = properties[1].units[0];
-          prop3Val = properties[2].list[2].value;
-          finalResult = propValue + ' ' + prop2Val + ' ' + prop3Val;
-          $prop1 = view.$props.find('#' + properties[0].property + ' input');
-          $prop2 = view.$props.find('#' + properties[1].property + ' input');
-          $prop3 = view.$props.find('#' + properties[2].property + ' select');
-        });
-
-        test('Update model on input change', () => {
-          $prop1.val(propValue).trigger('change');
-          $prop3.val(prop3Val).trigger('change');
-          expect(model.getFullValue()).toEqual(finalResult);
-        });
-
-        test('Update value on models change', () => {
-          view.model
-            .get('properties')
-            .at(0)
-            .set('value', propValue);
-          view.model
-            .get('properties')
-            .at(2)
-            .set('value', prop3Val);
-          expect(view.model.get('value')).toEqual(finalResult);
-        });
-
-        test('Update target on value change', () => {
-          $prop1.val(propValue).trigger('change');
-          var compStyle = view.getTarget().get('style');
-          var assertStyle = {};
-          assertStyle[propName] = propValue + ' 0 val2';
-          expect(compStyle).toEqual(assertStyle);
-        });
-
-        test('Update target on detached value change', () => {
-          model = new PropertyComposite({
-            type: 'composite',
-            property: propName,
-            properties,
-            detached: true
-          });
-          view = new PropertyCompositeView({
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-          $prop1 = view.$props.find('#' + properties[0].property + ' input');
-          $prop1.val(propValue).trigger('change');
-          var compStyle = view.getTarget().get('style');
-          var assertStyle = {};
-          assertStyle[properties[0].property] = $prop1.val();
-          expect(compStyle).toEqual(assertStyle);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = finalResult;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect($prop1.val()).toEqual(propValue);
-          expect($prop3.val()).toEqual(prop3Val);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = finalResult;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] =
-            propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect($prop1.val()).toEqual(propValue + '2');
-          expect($prop2.val()).toEqual('2');
-          expect($prop3.val()).toEqual('val1');
-        });
-
-        test('The value is correctly extracted from the composite string', () => {
-          var style = {};
-          style[propName] = 'value1 value2 value3 value4';
-          component.set('style', style);
-          expect(view.valueOnIndex(2)).toEqual('value3');
-          expect(view.valueOnIndex(0)).toEqual('value1');
-          expect(view.valueOnIndex(4)).toEqual(undefined);
-        });
-
-        test('Build value from properties', () => {
-          view.model
-            .get('properties')
-            .at(0)
-            .set('value', propValue);
-          view.model
-            .get('properties')
-            .at(2)
-            .set('value', prop3Val);
-          expect(model.getFullValue()).toEqual(finalResult);
-        });
-      });
 
-      describe('Init property', () => {
+    test('The value is correctly extracted from the composite string', () => {
-        beforeEach(() => {
+      var style = {};
-          model = new PropertyComposite({
+      style[propName] = 'value1 value2 value3 value4';
-            type: 'composite',
+      component.set('style', style);
-            property: propName,
+      expect(view.valueOnIndex(2)).toEqual('value3');
-            properties,
+      expect(view.valueOnIndex(0)).toEqual('value1');
-            defaults: defValue
+      expect(view.valueOnIndex(4)).toEqual(undefined);
-          });
+    });
-          view = new PropertyCompositeView({
+
-            model
+    test('Build value from properties', () => {
-          });
+      view.model
-          fixtures.innerHTML = '';
+        .get('properties')
-          view.render();
+        .at(0)
-          fixtures.appendChild(view.el);
+        .set('value', propValue);
-        });
+      view.model
-
+        .get('properties')
-        test('Value as default', () => {
+        .at(2)
-          expect(view.model.get('value')).toEqual(defValue);
+        .set('value', prop3Val);
-        });
+      expect(model.getFullValue()).toEqual(finalResult);
+    });
+  });
+
+  describe('Init property', () => {
+    beforeEach(() => {
+      model = new PropertyComposite({
+        type: 'composite',
+        property: propName,
+        properties,
+        defaults: defValue
+      });
+      view = new PropertyCompositeView({
+        model
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
+
+    test('Value as default', () => {
+      expect(view.model.get('value')).toEqual(defValue);
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertyIntegerView.js

@@ -4,200 +4,196 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('PropertyIntegerView', () => {
-  run() {
+  let em;
-    describe('PropertyIntegerView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propTarget;
-      var view;
+  var propName = 'testprop';
-      var propTarget;
+  var intValue = '55';
-      var propName = 'testprop';
+  var unitValue = 'px';
-      var intValue = '55';
+  var propValue = intValue + unitValue;
-      var unitValue = 'px';
+  var defValue = 'test2value';
-      var propValue = intValue + unitValue;
+  var units = ['px', '%', 'em'];
-      var defValue = 'test2value';
+  var minValue = -15;
-      var units = ['px', '%', 'em'];
+  var maxValue = 75;
-      var minValue = -15;
+  var unitsElSel = '.field-units select';
-      var maxValue = 75;
+
-      var unitsElSel = '.field-units select';
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    propTarget = { ...Backbone.Events };
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    target = new Component({}, compOpts);
-        propTarget = { ...Backbone.Events };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    model = new PropertyInteger({
-        component = new Component({}, compOpts);
+      units,
-        model = new PropertyInteger({
+      property: propName
-          units,
+    });
-          property: propName
+    propTarget.model = component;
-        });
+    view = new PropertyIntegerView({
-        propTarget.model = component;
+      model,
-        view = new PropertyIntegerView({
+      propTarget
-          model,
+    });
-          propTarget
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
-      });
+  afterEach(() => {
-
+    //view.remove(); // strange errors ???
-      afterEach(() => {
+  });
-        //view.remove(); // strange errors ???
+
-      });
+  afterAll(() => {
-
+    component = null;
-      afterAll(() => {
+    view = null;
-        component = null;
+    model = null;
-        view = null;
+  });
-        model = null;
+
-      });
+  test('Rendered correctly', () => {
-
+    var prop = view.el;
-      test('Rendered correctly', () => {
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+  });
-        expect(prop.querySelector('.field')).toBeTruthy();
+
-      });
+  test('Inputs rendered', () => {
-
+    var prop = view.el;
-      test('Inputs rendered', () => {
+    expect(prop.querySelector('input[type=text]')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector(unitsElSel)).toBeTruthy();
-        expect(prop.querySelector('input[type=text]')).toBeTruthy();
+  });
-        expect(prop.querySelector(unitsElSel)).toBeTruthy();
+
-      });
+  test('Units rendered', () => {
-
+    var select = view.el.querySelector(unitsElSel);
-      test('Units rendered', () => {
+    expect(select.children.length).toEqual(units.length);
-        var select = view.el.querySelector(unitsElSel);
+  });
-        expect(select.children.length).toEqual(units.length);
+
-      });
+  test('Units rendered correctly', () => {
-
+    var children = view.el.querySelector(unitsElSel).children;
-      test('Units rendered correctly', () => {
+    expect(children[0].textContent).toEqual(units[0]);
-        var children = view.el.querySelector(unitsElSel).children;
+    expect(children[1].textContent).toEqual(units[1]);
-        expect(children[0].textContent).toEqual(units[0]);
+    expect(children[2].textContent).toEqual(units[2]);
-        expect(children[1].textContent).toEqual(units[1]);
+  });
-        expect(children[2].textContent).toEqual(units[2]);
+
-      });
+  test('Inputs should exist', () => {
-
+    expect(view.input).toBeTruthy();
-      test('Inputs should exist', () => {
+    expect(view.unit).toBeTruthy();
-        expect(view.input).toBeTruthy();
+  });
-        expect(view.unit).toBeTruthy();
+
-      });
+  test('Input value is empty', () => {
-
+    expect(view.model.get('value')).toBeFalsy();
-      test('Input value is empty', () => {
+  });
-        expect(view.model.get('value')).toBeFalsy();
+
-      });
+  test('Update model on setValue', () => {
-
+    view.setValue(intValue + unitValue);
-      test('Update model on setValue', () => {
+    expect(view.model.get('value')).toEqual(parseFloat(intValue));
-        view.setValue(intValue + unitValue);
+    expect(view.model.get('unit')).toEqual(unitValue);
-        expect(view.model.get('value')).toEqual(parseFloat(intValue));
+    expect(view.getInputValue()).toEqual(intValue);
-        expect(view.model.get('unit')).toEqual(unitValue);
+    expect(view.unit.value).toEqual(unitValue);
-        expect(view.getInputValue()).toEqual(intValue);
+  });
-        expect(view.unit.value).toEqual(unitValue);
+
-      });
+  test('Update model on input change', () => {
+    view.$input.val(123).trigger('change');
+    expect(view.model.get('value')).toEqual(123);
+  });
+
+  test('Update model on unit change', () => {
+    view.$unit.val(units[1]).trigger('change');
+    expect(view.model.get('unit')).toEqual(units[1]);
+  });
+
+  test('Update input on value change', () => {
+    view.model.set('value', intValue);
+    expect(view.getInputValue()).toEqual(intValue);
+  });
+
+  test('Update target on value change', () => {
+    const val = `${intValue}%`;
+    view.model.setValue(val);
+    expect(view.getTargetValue()).toEqual(val);
+  });
+
+  describe('With target setted', () => {
+    beforeEach(() => {
+      target.model = component;
+      view = new PropertyIntegerView({
+        model,
+        propTarget: target
+      });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update model on input change', () => {
+    test('Update value and input on target swap', () => {
-        view.$input.val(123).trigger('change');
+      var style = {};
-        expect(view.model.get('value')).toEqual(123);
+      style[propName] = propValue;
-      });
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(parseFloat(intValue));
+      expect(view.getInputValue()).toEqual(intValue);
+    });
 
-      test('Update model on unit change', () => {
+    test('Update value after multiple swaps', () => {
-        view.$unit.val(units[1]).trigger('change');
+      var style = {};
-        expect(view.model.get('unit')).toEqual(units[1]);
+      style[propName] = propValue;
-      });
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      style[propName] = '20em';
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(20);
+      expect(view.model.get('unit')).toEqual('em');
+      expect(view.getInputValue()).toEqual('20');
+      expect(view.$unit.val()).toEqual('em');
+    });
+  });
+
+  describe('Init property', () => {
+    beforeEach(() => {
+      component = new Component();
+      model = new PropertyInteger({
+        units,
+        property: propName,
+        defaults: intValue,
+        min: minValue,
+        max: maxValue,
+        unit: units[1]
+      });
+      view = new PropertyIntegerView({
+        model
+      });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update input on value change', () => {
+    test('Value as default', () => {
-        view.model.set('value', intValue);
+      expect(view.model.get('value')).toEqual(parseInt(intValue));
-        expect(view.getInputValue()).toEqual(intValue);
+      expect(view.model.get('unit')).toEqual(units[1]);
-      });
+    });
 
-      test('Update target on value change', () => {
+    test('Input value is as default', () => {
-        const val = `${intValue}%`;
+      expect(view.getInputValue()).toEqual(intValue);
-        view.model.setValue(val);
+      expect(view.$unit.val()).toEqual(units[1]);
-        expect(view.getTargetValue()).toEqual(val);
+    });
-      });
 
-      describe('With target setted', () => {
+    test('Input follows min', () => {
-        beforeEach(() => {
+      view.$input.val(minValue - 50).trigger('change');
-          target.model = component;
+      expect(view.model.get('value')).toEqual(minValue);
-          view = new PropertyIntegerView({
+      expect(view.getInputValue()).toEqual(minValue + '');
-            model,
+    });
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(parseFloat(intValue));
-          expect(view.getInputValue()).toEqual(intValue);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] = '20em';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(20);
-          expect(view.model.get('unit')).toEqual('em');
-          expect(view.getInputValue()).toEqual('20');
-          expect(view.$unit.val()).toEqual('em');
-        });
-      });
 
-      describe('Init property', () => {
+    test('Input follows max', () => {
-        beforeEach(() => {
+      view.$input.val(maxValue + 50).trigger('change');
-          component = new Component();
+      expect(view.model.get('value')).toEqual(maxValue);
-          model = new PropertyInteger({
+      expect(view.getInputValue()).toEqual(maxValue + '');
-            units,
-            property: propName,
-            defaults: intValue,
-            min: minValue,
-            max: maxValue,
-            unit: units[1]
-          });
-          view = new PropertyIntegerView({
-            model
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Value as default', () => {
-          expect(view.model.get('value')).toEqual(parseInt(intValue));
-          expect(view.model.get('unit')).toEqual(units[1]);
-        });
-
-        test('Input value is as default', () => {
-          expect(view.getInputValue()).toEqual(intValue);
-          expect(view.$unit.val()).toEqual(units[1]);
-        });
-
-        test('Input follows min', () => {
-          view.$input.val(minValue - 50).trigger('change');
-          expect(view.model.get('value')).toEqual(minValue);
-          expect(view.getInputValue()).toEqual(minValue + '');
-        });
-
-        test('Input follows max', () => {
-          view.$input.val(maxValue + 50).trigger('change');
-          expect(view.model.get('value')).toEqual(maxValue);
-          expect(view.getInputValue()).toEqual(maxValue + '');
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertyRadioView.js

@@ -4,186 +4,178 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('PropertyRadioView', () => {
-  run() {
+  let em;
-    describe('PropertyRadioView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propTarget;
-      var view;
+  var propName = 'testprop';
-      var propTarget;
+  var propValue = 'test1value';
-      var propName = 'testprop';
+  var defValue = 'test2value';
-      var propValue = 'test1value';
+  var options = [
-      var defValue = 'test2value';
+    { value: 'test1value', title: 'testtitle' },
-      var options = [
+    { name: 'test2', value: 'test2value' }
-        { value: 'test1value', title: 'testtitle' },
+  ];
-        { name: 'test2', value: 'test2value' }
+
-      ];
+  // Have some issue with getCheckedEl() and jsdom
-
+  // this view.getInputEl().querySelector('input:checked') return null
-      // Have some issue with getCheckedEl() and jsdom
+  // but view.getInputEl().querySelectorAll('input:checked')[0] works
-      // this view.getInputEl().querySelector('input:checked') return null
+  var getCheckedEl = view =>
-      // but view.getInputEl().querySelectorAll('input:checked')[0] works
+    view.getInputEl().querySelectorAll('input:checked')[0];
-      var getCheckedEl = view =>
+
-        view.getInputEl().querySelectorAll('input:checked')[0];
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    propTarget = { ...Backbone.Events };
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    target = new Component({}, compOpts);
-        propTarget = { ...Backbone.Events };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    model = new Property({
-        component = new Component({}, compOpts);
+      type: 'radio',
-        model = new Property({
+      list: options,
-          type: 'radio',
+      property: propName
-          list: options,
+    });
-          property: propName
+    propTarget.model = component;
-        });
+    view = new PropertyRadioView({
-        propTarget.model = component;
+      model,
-        view = new PropertyRadioView({
+      propTarget
-          model,
+    });
-          propTarget
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
-      });
+  afterEach(() => {
-
+    //view.remove(); // strange errors ???
-      afterEach(() => {
+  });
-        //view.remove(); // strange errors ???
+
-      });
+  afterAll(() => {
-
+    component = null;
-      afterAll(() => {
+  });
-        component = null;
+
-      });
+  test('Rendered correctly', () => {
-
+    var prop = view.el;
-      test('Rendered correctly', () => {
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+  });
-        expect(prop.querySelector('.field')).toBeTruthy();
+
-      });
+  test('Radio rendered', () => {
-
+    var prop = view.el;
-      test('Radio rendered', () => {
+    expect(prop.querySelector('input[type=radio]')).toBeTruthy();
-        var prop = view.el;
+  });
-        expect(prop.querySelector('input[type=radio]')).toBeTruthy();
+
-      });
+  test('Options rendered', () => {
-
+    var input = view.el.querySelector('.field').firstChild;
-      test('Options rendered', () => {
+    expect(input.children.length).toEqual(options.length);
-        var input = view.el.querySelector('.field').firstChild;
+  });
-        expect(input.children.length).toEqual(options.length);
+
-      });
+  test('Options rendered correctly', () => {
-
+    var children = view.el.querySelector('.field').firstChild.children;
-      test('Options rendered correctly', () => {
+    expect(children[0].querySelector('label').textContent).toEqual(
-        var children = view.el.querySelector('.field').firstChild.children;
+      'test1value'
-        expect(children[0].querySelector('label').textContent).toEqual(
+    );
-          'test1value'
+    expect(children[1].querySelector('label').textContent).toEqual('test2');
-        );
+    expect(children[0].querySelector('input').value).toEqual(options[0].value);
-        expect(children[1].querySelector('label').textContent).toEqual('test2');
+    expect(children[1].querySelector('input').value).toEqual(options[1].value);
-        expect(children[0].querySelector('input').value).toEqual(
+    expect(children[0].querySelector('label').getAttribute('title')).toEqual(
-          options[0].value
+      options[0].title
-        );
+    );
-        expect(children[1].querySelector('input').value).toEqual(
+    expect(children[1].querySelector('label').getAttribute('title')).toEqual(
-          options[1].value
+      null
-        );
+    );
-        expect(
+  });
-          children[0].querySelector('label').getAttribute('title')
+
-        ).toEqual(options[0].title);
+  test('Input should exist', () => {
-        expect(
+    expect(view.input).toBeTruthy();
-          children[1].querySelector('label').getAttribute('title')
+  });
-        ).toEqual(null);
+
-      });
+  test('Input value is empty', () => {
-
+    expect(view.model.get('value')).toBeFalsy();
-      test('Input should exist', () => {
+  });
-        expect(view.input).toBeTruthy();
+
-      });
+  test('Update model on input change', () => {
-
+    view.setValue(propValue);
-      test('Input value is empty', () => {
+    expect(getCheckedEl(view).value).toEqual(propValue);
-        expect(view.model.get('value')).toBeFalsy();
+  });
+
+  test('Update input on value change', () => {
+    view.model.set('value', propValue);
+    expect(getCheckedEl(view).value).toEqual(propValue);
+  });
+
+  test('Update target on value change', () => {
+    view.selectedComponent = component;
+    view.model.set('value', propValue);
+    var compStyle = view.selectedComponent.get('style');
+    var assertStyle = {};
+    assertStyle[propName] = propValue;
+    expect(compStyle).toEqual(assertStyle);
+  });
+
+  describe('With target setted', () => {
+    beforeEach(() => {
+      target.model = component;
+      view = new PropertyRadioView({
+        model,
+        propTarget: target
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update model on input change', () => {
+    test('Update value and input on target swap', () => {
-        view.setValue(propValue);
+      var style = {};
-        expect(getCheckedEl(view).value).toEqual(propValue);
+      style[propName] = propValue;
-      });
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(propValue);
+      expect(getCheckedEl(view).value).toEqual(propValue);
+    });
 
-      test('Update input on value change', () => {
+    test('Update value after multiple swaps', () => {
-        view.model.set('value', propValue);
+      var style = {};
-        expect(getCheckedEl(view).value).toEqual(propValue);
+      style[propName] = propValue;
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      style[propName] = 'test2value';
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual('test2value');
+      expect(getCheckedEl(view).value).toEqual('test2value');
+    });
+  });
+
+  describe('Init property', () => {
+    beforeEach(() => {
+      component = new Component();
+      model = new Property({
+        type: 'select',
+        list: options,
+        defaults: defValue,
+        property: propName
       });
-
+      view = new PropertyRadioView({
-      test('Update target on value change', () => {
+        model
-        view.selectedComponent = component;
-        view.model.set('value', propValue);
-        var compStyle = view.selectedComponent.get('style');
-        var assertStyle = {};
-        assertStyle[propName] = propValue;
-        expect(compStyle).toEqual(assertStyle);
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      describe('With target setted', () => {
+    test('Value as default', () => {
-        beforeEach(() => {
+      expect(view.model.get('value')).toEqual(defValue);
-          target.model = component;
+    });
-          view = new PropertyRadioView({
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(propValue);
-          expect(getCheckedEl(view).value).toEqual(propValue);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] = 'test2value';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual('test2value');
-          expect(getCheckedEl(view).value).toEqual('test2value');
-        });
-      });
 
-      describe('Init property', () => {
+    test('Input value is as default', () => {
-        beforeEach(() => {
+      expect(view.model.getDefaultValue()).toEqual(defValue);
-          component = new Component();
-          model = new Property({
-            type: 'select',
-            list: options,
-            defaults: defValue,
-            property: propName
-          });
-          view = new PropertyRadioView({
-            model
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Value as default', () => {
-          expect(view.model.get('value')).toEqual(defValue);
-        });
-
-        test('Input value is as default', () => {
-          expect(view.model.getDefaultValue()).toEqual(defValue);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertySelectView.js

@@ -4,196 +4,192 @@ import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 import Component from 'dom_components/model/Component';
 
-module.exports = {
+describe('PropertySelectView', () => {
-  run() {
+  let em;
-    describe('PropertySelectView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propTarget;
-      var view;
+  var options;
-      var propTarget;
+  var propName = 'testprop';
-      var options;
+  var propValue = 'test1value';
-      var propName = 'testprop';
+  var defValue = 'test2value';
-      var propValue = 'test1value';
+  var options = [
-      var defValue = 'test2value';
+    { value: 'test1value', style: 'test:style' },
-      var options = [
+    { name: 'test2', value: 'test2value' }
-        { value: 'test1value', style: 'test:style' },
+  ];
-        { name: 'test2', value: 'test2value' }
+
-      ];
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    propTarget = { ...Backbone.Events };
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    target = new Component({}, compOpts);
-        propTarget = { ...Backbone.Events };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    model = new Property({
-        component = new Component({}, compOpts);
+      type: 'select',
-        model = new Property({
+      list: options,
-          type: 'select',
+      property: propName
-          list: options,
+    });
-          property: propName
+    propTarget.model = component;
-        });
+    view = new PropertySelectView({
-        propTarget.model = component;
+      model,
-        view = new PropertySelectView({
+      propTarget
-          model,
+    });
-          propTarget
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        });
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
-      });
+  afterEach(() => {
-
+    //view.remove(); // strange errors ???
-      afterEach(() => {
+  });
-        //view.remove(); // strange errors ???
+
-      });
+  afterAll(() => {
-
+    component = null;
-      afterAll(() => {
+  });
-        component = null;
+
-      });
+  test('Rendered correctly', () => {
-
+    var prop = view.el;
-      test('Rendered correctly', () => {
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+  });
-        expect(prop.querySelector('.field')).toBeTruthy();
+
-      });
+  test('Select rendered', () => {
-
+    var prop = view.el;
-      test('Select rendered', () => {
+    expect(prop.querySelector('select')).toBeTruthy();
-        var prop = view.el;
+  });
-        expect(prop.querySelector('select')).toBeTruthy();
+
-      });
+  test('Options rendered', () => {
-
+    var select = view.el.querySelector('select');
-      test('Options rendered', () => {
+    expect(select.children.length).toEqual(options.length);
-        var select = view.el.querySelector('select');
+  });
-        expect(select.children.length).toEqual(options.length);
+
-      });
+  test('Options rendered correctly', () => {
-
+    var select = view.el.querySelector('select');
-      test('Options rendered correctly', () => {
+    var children = select.children;
-        var select = view.el.querySelector('select');
+    expect(children[0].value).toEqual(options[0].value);
-        var children = select.children;
+    expect(children[1].value).toEqual(options[1].value);
-        expect(children[0].value).toEqual(options[0].value);
+    expect(children[0].textContent).toEqual(options[0].value);
-        expect(children[1].value).toEqual(options[1].value);
+    expect(children[1].textContent).toEqual(options[1].name);
-        expect(children[0].textContent).toEqual(options[0].value);
+    expect(children[0].getAttribute('style')).toEqual(options[0].style);
-        expect(children[1].textContent).toEqual(options[1].name);
+    expect(children[1].getAttribute('style')).toEqual(null);
-        expect(children[0].getAttribute('style')).toEqual(options[0].style);
+  });
-        expect(children[1].getAttribute('style')).toEqual(null);
+
+  test('Input should exist', () => {
+    expect(view.input).toBeTruthy();
+  });
+
+  test('Input value is empty', () => {
+    expect(view.model.get('value')).toBeFalsy();
+  });
+
+  test('Update model on input change', () => {
+    view.getInputEl().value = propValue;
+    view.inputValueChanged();
+    expect(view.model.get('value')).toEqual(propValue);
+  });
+
+  test('Update input on value change', () => {
+    view.model.set('value', propValue);
+    expect(view.getInputValue()).toEqual(propValue);
+  });
+
+  test('Update target on value change', () => {
+    view.selectedComponent = component;
+    view.model.set('value', propValue);
+    var compStyle = view.selectedComponent.get('style');
+    var assertStyle = {};
+    assertStyle[propName] = propValue;
+    expect(compStyle).toEqual(assertStyle);
+  });
+
+  describe('With target setted', () => {
+    beforeEach(() => {
+      target.model = component;
+      view = new PropertySelectView({
+        model,
+        propTarget: target
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Input should exist', () => {
+    test('Update value and input on target swap', () => {
-        expect(view.input).toBeTruthy();
+      var style = {};
-      });
+      style[propName] = propValue;
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(propValue);
+      expect(view.getInputValue()).toEqual(propValue);
+    });
 
-      test('Input value is empty', () => {
+    test('Update value after multiple swaps', () => {
-        expect(view.model.get('value')).toBeFalsy();
+      var style = {};
+      style[propName] = propValue;
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      style[propName] = 'test2value';
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual('test2value');
+      expect(view.getInputValue()).toEqual('test2value');
+    });
+  });
+
+  describe('Init property', () => {
+    beforeEach(() => {
+      component = new Component();
+      model = new Property({
+        type: 'select',
+        list: options,
+        defaults: defValue,
+        property: propName
       });
-
+      view = new PropertySelectView({
-      test('Update model on input change', () => {
+        model
-        view.getInputEl().value = propValue;
-        view.inputValueChanged();
-        expect(view.model.get('value')).toEqual(propValue);
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update input on value change', () => {
+    test('Value as default', () => {
-        view.model.set('value', propValue);
+      expect(view.model.get('value')).toEqual(defValue);
-        expect(view.getInputValue()).toEqual(propValue);
+    });
-      });
 
-      test('Update target on value change', () => {
+    test('Empty value as default', () => {
-        view.selectedComponent = component;
+      options = [
-        view.model.set('value', propValue);
+        { value: '', name: 'test' },
-        var compStyle = view.selectedComponent.get('style');
+        { value: 'test1value', name: 'test1' },
-        var assertStyle = {};
+        { value: 'test2value', name: 'test2' },
-        assertStyle[propName] = propValue;
+        { value: '', name: 'TestDef' }
-        expect(compStyle).toEqual(assertStyle);
+      ];
+      component = new Component();
+      model = new Property({
+        type: 'select',
+        list: options,
+        defaults: '',
+        property: 'emptyDefault'
       });
-
+      view = new PropertySelectView({
-      describe('With target setted', () => {
+        model
-        beforeEach(() => {
-          target.model = component;
-          view = new PropertySelectView({
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(propValue);
-          expect(view.getInputValue()).toEqual(propValue);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] = 'test2value';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual('test2value');
-          expect(view.getInputValue()).toEqual('test2value');
-        });
       });
+      view.render();
+      fixtures.innerHTML = '';
+      fixtures.appendChild(view.el);
+      expect(view.getInputValue()).toEqual('');
+    });
 
-      describe('Init property', () => {
+    test('Input value is as default', () => {
-        beforeEach(() => {
+      expect(view.model.getDefaultValue()).toEqual(defValue);
-          component = new Component();
-          model = new Property({
-            type: 'select',
-            list: options,
-            defaults: defValue,
-            property: propName
-          });
-          view = new PropertySelectView({
-            model
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Value as default', () => {
-          expect(view.model.get('value')).toEqual(defValue);
-        });
-
-        test('Empty value as default', () => {
-          options = [
-            { value: '', name: 'test' },
-            { value: 'test1value', name: 'test1' },
-            { value: 'test2value', name: 'test2' },
-            { value: '', name: 'TestDef' }
-          ];
-          component = new Component();
-          model = new Property({
-            type: 'select',
-            list: options,
-            defaults: '',
-            property: 'emptyDefault'
-          });
-          view = new PropertySelectView({
-            model
-          });
-          view.render();
-          fixtures.innerHTML = '';
-          fixtures.appendChild(view.el);
-          expect(view.getInputValue()).toEqual('');
-        });
-
-        test('Input value is as default', () => {
-          expect(view.model.getDefaultValue()).toEqual(defValue);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertyStackView.js

@@ -4,124 +4,120 @@ import Component from 'dom_components/model/Component';
 import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 
-module.exports = {
+describe('PropertyStackView', () => {
-  run() {
+  let em;
-    describe('PropertyStackView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propName = 'testprop';
-      var view;
+  var propValue = 'test1value';
-      var propName = 'testprop';
+  var defValue = 'test2value';
-      var propValue = 'test1value';
+  var layers = [
-      var defValue = 'test2value';
+    { value: 'lval1' },
-      var layers = [
+    { value: 'lval2 lval22' },
-        { value: 'lval1' },
+    { value: 'lval3 lval32 lval33' }
-        { value: 'lval2 lval22' },
+  ];
-        { value: 'lval3 lval32 lval33' }
+  var properties = [
-      ];
+    { property: 'subprop1' },
-      var properties = [
+    {
-        { property: 'subprop1' },
+      type: 'integer',
-        {
+      property: 'subprop2',
-          type: 'integer',
+      defaults: 0,
-          property: 'subprop2',
+      units: ['%', 'px']
-          defaults: 0,
+    },
-          units: ['%', 'px']
+    {
-        },
+      type: 'select',
-        {
+      property: 'subprop3',
-          type: 'select',
+      defaults: 'val2',
-          property: 'subprop3',
+      list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }]
-          defaults: 'val2',
+    }
-          list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }]
+  ];
-        }
-      ];
 
-      beforeEach(() => {
+  beforeEach(() => {
-        em = new Editor({});
+    em = new Editor({});
-        dcomp = new DomComponents();
+    dcomp = new DomComponents();
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        target = new Component({}, compOpts);
+    target = new Component({}, compOpts);
-        component = new Component({}, compOpts);
+    component = new Component({}, compOpts);
-        target.model = component;
+    target.model = component;
-        model = new Property({
+    model = new Property({
-          type: 'stack',
+      type: 'stack',
-          property: propName,
+      property: propName,
-          properties
+      properties
-        });
+    });
-        view = new PropertyStackView({
+    view = new PropertyStackView({
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.firstChild;
+    fixtures = document.body.firstChild;
-        view.render();
+    view.render();
-        fixtures.appendChild(view.el);
+    fixtures.appendChild(view.el);
-      });
+  });
 
-      afterAll(() => {
+  afterAll(() => {
-        component = null;
+    component = null;
-        view = null;
+    view = null;
-        model = null;
+    model = null;
-      });
+  });
 
-      test('Rendered correctly', () => {
+  test('Rendered correctly', () => {
-        var prop = view.el;
+    var prop = view.el;
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(prop.querySelector('.field')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('#add')).toBeTruthy();
+    expect(prop.querySelector('#add')).toBeTruthy();
-      });
+  });
 
-      test('Layers rendered', () => {
+  test('Layers rendered', () => {
-        expect(view.el.querySelector('.layers')).toBeTruthy();
+    expect(view.el.querySelector('.layers')).toBeTruthy();
-      });
+  });
 
-      test('Layers wrapper should exist', () => {
+  test('Layers wrapper should exist', () => {
-        expect(view.el.querySelector('[data-layers-wrapper]')).toBeTruthy();
+    expect(view.el.querySelector('[data-layers-wrapper]')).toBeTruthy();
-      });
+  });
 
-      test('Layers rendered correctly', () => {
+  test('Layers rendered correctly', () => {
-        var children = view.el.querySelector('[data-layers-wrapper]').children;
+    var children = view.el.querySelector('[data-layers-wrapper]').children;
-        expect(children.length).toEqual(1);
+    expect(children.length).toEqual(1);
-      });
+  });
 
-      test('Input value is on default', () => {
+  test('Input value is on default', () => {
-        expect(view.model.get('value')).toEqual('0 val2');
+    expect(view.model.get('value')).toEqual('0 val2');
-      });
+  });
 
-      test('Layers container is empty', () => {
+  test('Layers container is empty', () => {
-        var layers = view.el.querySelector('.layers');
+    var layers = view.el.querySelector('.layers');
-        expect(layers.innerHTML).toBeFalsy();
+    expect(layers.innerHTML).toBeFalsy();
-      });
+  });
 
-      describe('With layers', () => {
+  describe('With layers', () => {
-        beforeEach(() => {
+    beforeEach(() => {
-          model = new Property({
+      model = new Property({
-            type: 'stack',
+        type: 'stack',
-            property: propName,
+        property: propName,
-            properties
+        properties
-          });
+      });
-          view = new PropertyStackView({
+      view = new PropertyStackView({
-            model,
+        model,
-            propTarget: target
+        propTarget: target
-          });
+      });
-          fixtures.innerHTML = '';
+      fixtures.innerHTML = '';
-          view.render();
+      view.render();
-          fixtures.appendChild(view.el);
+      fixtures.appendChild(view.el);
-          model.get('layers').add(layers);
+      model.get('layers').add(layers);
-        });
+    });
 
-        test('Layers inserted', () => {
+    test('Layers inserted', () => {
-          expect(view.getLayers().length).toEqual(layers.length);
+      expect(view.getLayers().length).toEqual(layers.length);
-        });
+    });
 
-        test('Add layer', () => {
+    test('Add layer', () => {
-          view.addLayer();
+      view.addLayer();
-          expect(view.getLayers().length).toEqual(layers.length + 1);
+      expect(view.getLayers().length).toEqual(layers.length + 1);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/PropertyView.js

@@ -4,223 +4,219 @@ import Editor from 'editor/model/Editor';
 import DomComponents from 'dom_components';
 import Component from 'dom_components/model/Component';
 
-module.exports = {
+describe('PropertyView', () => {
-  run() {
+  let em;
-    describe('PropertyView', () => {
+  let dcomp;
-      let em;
+  let compOpts;
-      let dcomp;
+  var component;
-      let compOpts;
+  var fixtures;
-      var component;
+  var target;
-      var fixtures;
+  var model;
-      var target;
+  var view;
-      var model;
+  var propTarget;
-      var view;
+  var options;
-      var propTarget;
+  var propName = 'testprop';
-      var options;
+  var propValue = 'testvalue';
-      var propName = 'testprop';
+  var defValue = 'testDefault';
-      var propValue = 'testvalue';
+
-      var defValue = 'testDefault';
+  beforeEach(() => {
-
+    em = new Editor({});
-      beforeEach(() => {
+    dcomp = new DomComponents();
-        em = new Editor({});
+    compOpts = { em, componentTypes: dcomp.componentTypes };
-        dcomp = new DomComponents();
+    propTarget = { ...Backbone.Events };
-        compOpts = { em, componentTypes: dcomp.componentTypes };
+    target = new Component({}, compOpts);
-        propTarget = { ...Backbone.Events };
+    component = new Component({}, compOpts);
-        target = new Component({}, compOpts);
+    model = new Property({ property: propName });
-        component = new Component({}, compOpts);
+    propTarget.model = component;
-        model = new Property({ property: propName });
+    options = {
-        propTarget.model = component;
+      model,
-        options = {
+      propTarget
-          model,
+    };
-          propTarget
+    view = new PropertyView(options);
-        };
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        view = new PropertyView(options);
+    fixtures = document.body.firstChild;
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    view.render();
-        fixtures = document.body.firstChild;
+    fixtures.appendChild(view.el);
-        view.render();
+  });
-        fixtures.appendChild(view.el);
+
-      });
+  afterEach(() => {
-
+    //view.remove(); // strange errors ???
-      afterEach(() => {
+  });
-        //view.remove(); // strange errors ???
+
-      });
+  afterAll(() => {
-
+    component = null;
-      afterAll(() => {
+  });
-        component = null;
+
-      });
+  test('Rendered correctly', () => {
-
+    var prop = view.el;
-      test('Rendered correctly', () => {
+    expect(fixtures.querySelector('.property')).toBeTruthy();
-        var prop = view.el;
+    expect(prop.querySelector('.label')).toBeTruthy();
-        expect(fixtures.querySelector('.property')).toBeTruthy();
+    expect(prop.querySelector('.field')).toBeTruthy();
-        expect(prop.querySelector('.label')).toBeTruthy();
+  });
-        expect(prop.querySelector('.field')).toBeTruthy();
+
-      });
+  test('Input should exist', () => {
-
+    expect(view.getInputEl()).toBeTruthy();
-      test('Input should exist', () => {
+  });
-        expect(view.getInputEl()).toBeTruthy();
+
-      });
+  test('Input value is empty', () => {
-
+    expect(view.model.get('value')).toBeFalsy();
-      test('Input value is empty', () => {
+    expect(view.getInputValue()).toBeFalsy();
-        expect(view.model.get('value')).toBeFalsy();
+  });
-        expect(view.getInputValue()).toBeFalsy();
+
-      });
+  test('Model not change without update trigger', () => {
-
+    view.getInputEl().value = propValue;
-      test('Model not change without update trigger', () => {
+    expect(view.model.get('value')).toBeFalsy();
-        view.getInputEl().value = propValue;
+  });
-        expect(view.model.get('value')).toBeFalsy();
+
-      });
+  // Tests inputValueChanged()
-
+  test('Update model on input change', () => {
-      // Tests inputValueChanged()
+    view.getInputEl().value = propValue;
-      test('Update model on input change', () => {
+    view.inputValueChanged();
-        view.getInputEl().value = propValue;
+    expect(view.model.get('value')).toEqual(propValue);
-        view.inputValueChanged();
+  });
-        expect(view.model.get('value')).toEqual(propValue);
+
-      });
+  // Tests modelValueChanged() -> ...
-
+  test('Update input on value change', () => {
-      // Tests modelValueChanged() -> ...
+    view.model.set('value', propValue);
-      test('Update input on value change', () => {
+    expect(view.getInputValue()).toEqual(propValue);
-        view.model.set('value', propValue);
+  });
-        expect(view.getInputValue()).toEqual(propValue);
+
-      });
+  test('Update target on value change', () => {
-
+    view.model.set('value', propValue);
-      test('Update target on value change', () => {
+    var compStyle = view.getTargetModel().get('style');
-        view.model.set('value', propValue);
+    var assertStyle = {};
-        var compStyle = view.getTargetModel().get('style');
+    assertStyle[propName] = propValue;
-        var assertStyle = {};
+    expect(compStyle).toEqual(assertStyle);
-        assertStyle[propName] = propValue;
+  });
-        expect(compStyle).toEqual(assertStyle);
+
-      });
+  test('Update target on value change with functionName', () => {
+    view.model.set('functionName', 'testfunc');
+    view.model.set('value', propValue);
+    var compStyle = view.getTargetModel().get('style');
+    var assertStyle = {};
+    assertStyle[propName] = 'testfunc(' + propValue + ')';
+    expect(compStyle).toEqual(assertStyle);
+  });
+
+  test('Clean target from the property if its value is empty', () => {
+    view.model.set('value', propValue);
+    view.model.set('value', '');
+    var compStyle = view.getTargetModel().get('style');
+    expect(compStyle).toEqual({});
+  });
+
+  test('Check stylable element', () => {
+    expect(view.isTargetStylable()).toEqual(true);
+    component.set('stylable', false);
+    expect(view.isTargetStylable()).toEqual(false);
+    component.set('stylable', [propName]);
+    expect(view.isTargetStylable()).toEqual(true);
+    component.set('stylable', ['test1', propName]);
+    expect(view.isTargetStylable()).toEqual(true);
+    component.set('stylable', ['test1', 'test2']);
+    expect(view.isTargetStylable()).toEqual(false);
+  });
+
+  test('Target style is empty without values', () => {
+    expect(view.getTargetValue()).toBeFalsy();
+  });
+
+  test('Target style is correct', () => {
+    var style = {};
+    style[propName] = propValue;
+    component.set('style', style);
+    expect(view.getTargetValue()).toEqual(propValue);
+  });
+
+  test('Target style is empty with an other style', () => {
+    var style = {};
+    style[propName + '2'] = propValue;
+    component.set('style', style);
+    expect(view.getTargetValue()).toBeFalsy();
+  });
+
+  test('Fetch value from function', () => {
+    view.selectedComponent = component;
+    const val = `testfun(${propValue})`;
+    component.set('style', { [propName]: val });
+    view.model.set('functionName', 'testfun');
+    expect(view.getTargetValue()).toEqual(val);
+  });
+
+  describe('With target setted', () => {
+    beforeEach(() => {
+      target.model = component;
+      view = new PropertyView({
+        model,
+        propTarget: target
+      });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Update target on value change with functionName', () => {
+    test('updateTargetStyle', () => {
-        view.model.set('functionName', 'testfunc');
+      view.updateTargetStyle(propValue);
-        view.model.set('value', propValue);
+      var style = {};
-        var compStyle = view.getTargetModel().get('style');
+      style[propName] = propValue;
-        var assertStyle = {};
+      expect(component.get('style')).toEqual(style);
-        assertStyle[propName] = 'testfunc(' + propValue + ')';
+    });
-        expect(compStyle).toEqual(assertStyle);
-      });
 
-      test('Clean target from the property if its value is empty', () => {
+    test('updateTargetStyle with custom property', () => {
-        view.model.set('value', propValue);
+      view.updateTargetStyle(propValue, propName + '2');
-        view.model.set('value', '');
+      var style = {};
-        var compStyle = view.getTargetModel().get('style');
+      style[propName + '2'] = propValue;
-        expect(compStyle).toEqual({});
+      expect(component.get('style')).toEqual(style);
-      });
+    });
 
-      test('Check stylable element', () => {
+    test('Update value and input on target swap', () => {
-        expect(view.isTargetStylable()).toEqual(true);
+      var style = {};
-        component.set('stylable', false);
+      style[propName] = propValue;
-        expect(view.isTargetStylable()).toEqual(false);
+      component.set('style', style);
-        component.set('stylable', [propName]);
+      view.propTarget.trigger('update');
-        expect(view.isTargetStylable()).toEqual(true);
+      expect(view.model.get('value')).toEqual(propValue);
-        component.set('stylable', ['test1', propName]);
+      expect(view.getInputValue()).toEqual(propValue);
-        expect(view.isTargetStylable()).toEqual(true);
+    });
-        component.set('stylable', ['test1', 'test2']);
-        expect(view.isTargetStylable()).toEqual(false);
-      });
 
-      test('Target style is empty without values', () => {
+    test('Update value after multiple swaps', () => {
-        expect(view.getTargetValue()).toBeFalsy();
+      var style = {};
-      });
+      style[propName] = propValue;
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      style[propName] = propValue + '2';
+      component.set('style', style);
+      view.propTarget.trigger('update');
+      expect(view.model.get('value')).toEqual(propValue + '2');
+      expect(view.getInputValue()).toEqual(propValue + '2');
+    });
+  });
 
-      test('Target style is correct', () => {
+  describe('Init property', () => {
-        var style = {};
+    beforeEach(() => {
-        style[propName] = propValue;
+      component = new Component();
-        component.set('style', style);
+      model = new Property({
-        expect(view.getTargetValue()).toEqual(propValue);
+        property: propName,
+        defaults: defValue
       });
-
+      view = new PropertyView({
-      test('Target style is empty with an other style', () => {
+        model
-        var style = {};
-        style[propName + '2'] = propValue;
-        component.set('style', style);
-        expect(view.getTargetValue()).toBeFalsy();
       });
+      fixtures.innerHTML = '';
+      view.render();
+      fixtures.appendChild(view.el);
+    });
 
-      test('Fetch value from function', () => {
+    test('Value as default', () => {
-        view.selectedComponent = component;
+      expect(view.model.get('value')).toEqual(defValue);
-        const val = `testfun(${propValue})`;
+    });
-        component.set('style', { [propName]: val });
-        view.model.set('functionName', 'testfun');
-        expect(view.getTargetValue()).toEqual(val);
-      });
 
-      describe('With target setted', () => {
+    test('Placeholder as default', () => {
-        beforeEach(() => {
+      var input = view.getInputEl();
-          target.model = component;
+      expect(input.getAttribute('placeholder')).toEqual(defValue);
-          view = new PropertyView({
+    });
-            model,
-            propTarget: target
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('updateTargetStyle', () => {
-          view.updateTargetStyle(propValue);
-          var style = {};
-          style[propName] = propValue;
-          expect(component.get('style')).toEqual(style);
-        });
-
-        test('updateTargetStyle with custom property', () => {
-          view.updateTargetStyle(propValue, propName + '2');
-          var style = {};
-          style[propName + '2'] = propValue;
-          expect(component.get('style')).toEqual(style);
-        });
-
-        test('Update value and input on target swap', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(propValue);
-          expect(view.getInputValue()).toEqual(propValue);
-        });
-
-        test('Update value after multiple swaps', () => {
-          var style = {};
-          style[propName] = propValue;
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          style[propName] = propValue + '2';
-          component.set('style', style);
-          view.propTarget.trigger('update');
-          expect(view.model.get('value')).toEqual(propValue + '2');
-          expect(view.getInputValue()).toEqual(propValue + '2');
-        });
-      });
 
-      describe('Init property', () => {
+    test('Input value is set up to default', () => {
-        beforeEach(() => {
+      expect(view.getInputValue()).toEqual(defValue);
-          component = new Component();
-          model = new Property({
-            property: propName,
-            defaults: defValue
-          });
-          view = new PropertyView({
-            model
-          });
-          fixtures.innerHTML = '';
-          view.render();
-          fixtures.appendChild(view.el);
-        });
-
-        test('Value as default', () => {
-          expect(view.model.get('value')).toEqual(defValue);
-        });
-
-        test('Placeholder as default', () => {
-          var input = view.getInputEl();
-          expect(input.getAttribute('placeholder')).toEqual(defValue);
-        });
-
-        test('Input value is set up to default', () => {
-          expect(view.getInputValue()).toEqual(defValue);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/SectorView.js

@@ -1,91 +1,85 @@
 import SectorView from 'style_manager/view/SectorView';
 import Sector from 'style_manager/model/Sector';
 
-module.exports = {
+describe('SectorView', () => {
-  run() {
+  var fixtures;
-    describe('SectorView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Sector();
+    model = new Sector();
-        view = new SectorView({
+    view = new SectorView({
-          model
+      model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures');
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.remove();
+    view.remove();
-      });
+  });
 
-      test('Rendered correctly', () => {
+  test('Rendered correctly', () => {
-        var sector = view.el;
+    var sector = view.el;
-        expect(sector.querySelector('.title')).toBeTruthy();
+    expect(sector.querySelector('.title')).toBeTruthy();
-        var props = sector.querySelector('.properties');
+    var props = sector.querySelector('.properties');
-        expect(props).toBeTruthy();
+    expect(props).toBeTruthy();
-        expect(sector.classList.contains('open')).toEqual(true);
+    expect(sector.classList.contains('open')).toEqual(true);
-      });
+  });
 
-      test('No properties', () => {
+  test('No properties', () => {
-        var props = view.el.querySelector('.properties');
+    var props = view.el.querySelector('.properties');
-        expect(props.innerHTML).toEqual('');
+    expect(props.innerHTML).toEqual('');
-      });
+  });
 
-      test('Update on open', () => {
+  test('Update on open', () => {
-        var sector = view.el;
+    var sector = view.el;
-        var props = sector.querySelector('.properties');
+    var props = sector.querySelector('.properties');
-        model.set('open', false);
+    model.set('open', false);
-        expect(sector.classList.contains('open')).toEqual(false);
+    expect(sector.classList.contains('open')).toEqual(false);
-        expect(props.style.display).toEqual('none');
+    expect(props.style.display).toEqual('none');
-      });
+  });
 
-      test('Toggle on click', () => {
+  test('Toggle on click', () => {
-        var sector = view.el;
+    var sector = view.el;
-        view.$el.find('.title').click();
+    view.$el.find('.title').click();
-        expect(sector.classList.contains('open')).toEqual(false);
+    expect(sector.classList.contains('open')).toEqual(false);
-      });
+  });
 
-      describe('Init with options', () => {
+  describe('Init with options', () => {
-        beforeEach(() => {
+    beforeEach(() => {
-          model = new Sector({
+      model = new Sector({
-            open: false,
+        open: false,
-            name: 'TestName',
+        name: 'TestName',
-            properties: [
+        properties: [
-              { type: 'integer' },
+          { type: 'integer' },
-              { type: 'integer' },
+          { type: 'integer' },
-              { type: 'integer' }
+          { type: 'integer' }
-            ]
+        ]
-          });
+      });
-          view = new SectorView({
+      view = new SectorView({
-            model
+        model
-          });
+      });
-          //$fixture.empty().appendTo($fixtures);
+      //$fixture.empty().appendTo($fixtures);
-          //$fixture.html(view.render().el);
+      //$fixture.html(view.render().el);
-          document.body.innerHTML = '<div id="fixtures"></div>';
+      document.body.innerHTML = '<div id="fixtures"></div>';
-          fixtures = document.body.querySelector('#fixtures');
+      fixtures = document.body.querySelector('#fixtures');
-          fixtures.appendChild(view.render().el);
+      fixtures.appendChild(view.render().el);
-        });
+    });
 
-        test('Rendered correctly', () => {
+    test('Rendered correctly', () => {
-          var sector = view.el;
+      var sector = view.el;
-          var props = sector.querySelector('.properties');
+      var props = sector.querySelector('.properties');
-          expect(sector.querySelector('.title').innerHTML).toContain(
+      expect(sector.querySelector('.title').innerHTML).toContain('TestName');
-            'TestName'
+      expect(props).toBeTruthy();
-          );
+      expect(sector.classList.contains('open')).toEqual(false);
-          expect(props).toBeTruthy();
+      expect(props.style.display).toEqual('none');
-          expect(sector.classList.contains('open')).toEqual(false);
+    });
-          expect(props.style.display).toEqual('none');
-        });
 
-        test('Has properties', () => {
+    test('Has properties', () => {
-          var props = view.el.querySelector('.properties');
+      var props = view.el.querySelector('.properties');
-          expect(props.children.length).toEqual(3);
+      expect(props.children.length).toEqual(3);
-        });
-      });
     });
-  }
+  });
-};
+});

test/specs/style_manager/view/SectorsView.js

@@ -1,35 +1,31 @@
 import SectorsView from 'style_manager/view/SectorsView';
 import Sectors from 'style_manager/model/Sectors';
 
-module.exports = {
+describe('SectorsView', () => {
-  run() {
+  var fixtures;
-    describe('SectorsView', () => {
+  var model;
-      var fixtures;
+  var view;
-      var model;
-      var view;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        model = new Sectors([]);
+    model = new Sectors([]);
-        view = new SectorsView({
+    view = new SectorsView({
-          collection: model
+      collection: model
-        });
+    });
-        document.body.innerHTML = '<div id="fixtures"></div>';
+    document.body.innerHTML = '<div id="fixtures"></div>';
-        fixtures = document.body.firstChild;
+    fixtures = document.body.firstChild;
-        fixtures.appendChild(view.render().el);
+    fixtures.appendChild(view.render().el);
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        view.collection.reset();
+    view.collection.reset();
-      });
+  });
 
-      test('Collection is empty', () => {
+  test('Collection is empty', () => {
-        expect(view.el.innerHTML).toEqual('');
+    expect(view.el.innerHTML).toEqual('');
-      });
+  });
 
-      test('Add new sectors', () => {
+  test('Add new sectors', () => {
-        view.collection.add([{}, {}]);
+    view.collection.add([{}, {}]);
-        expect(view.el.children.length).toEqual(2);
+    expect(view.el.children.length).toEqual(2);
-      });
+  });
-    });
+});
-  }
-};

test/specs/trait_manager/index.js

@@ -1,20 +0,0 @@
-import TraitManager from 'trait_manager';
-import TraitsModel from './model/TraitsModel';
-import TraitsView from './view/TraitsView';
-
-describe('TraitManager', () => {
-  describe('Main', () => {
-    var obj;
-
-    beforeEach(() => {
-      obj = new TraitManager().init();
-    });
-
-    afterEach(() => {
-      obj = null;
-    });
-  });
-
-  TraitsModel.run();
-  TraitsView.run();
-});

test/specs/trait_manager/model/TraitsModel.js

@@ -1,28 +1,24 @@
 import Trait from 'trait_manager/model/Trait';
 import Component from 'dom_components/model/Component';
 
-module.exports = {
+describe('TraitModels', () => {
-  run() {
+  var obj;
-    describe('TraitModels', () => {
+  var target;
-      var obj;
+  var modelName = 'title';
-      var target;
-      var modelName = 'title';
 
-      beforeEach(() => {
+  beforeEach(() => {
-        target = new Component();
+    target = new Component();
-        obj = new Trait({
+    obj = new Trait({
-          name: modelName,
+      name: modelName,
-          target
+      target
-        });
+    });
-      });
+  });
 
-      afterEach(() => {
+  afterEach(() => {
-        obj = null;
+    obj = null;
-      });
+  });
 
-      test('Object exists', () => {
+  test('Object exists', () => {
-        expect(Trait).toBeTruthy();
+    expect(Trait).toBeTruthy();
-      });
+  });
-    });
+});
-  }
-};

test/specs/trait_manager/view/TraitsView.js

@@ -2,69 +2,65 @@ import Trait from 'trait_manager/model/Trait';
 import TraitView from 'trait_manager/view/TraitView';
 import Component from 'dom_components/model/Component';
 
-module.exports = {
+describe('TraitView', () => {
-  run() {
+  var obj;
-    describe('TraitView', () => {
+  var model;
-      var obj;
+  var modelName = 'title';
-      var model;
+  var target;
-      var modelName = 'title';
-      var target;
 
-      beforeEach(() => {
+  beforeEach(() => {
-        target = new Component();
+    target = new Component();
-        model = new Trait({
+    model = new Trait({
-          name: modelName,
+      name: modelName,
-          target
+      target
-        });
+    });
-        obj = new TraitView({
+    obj = new TraitView({
-          model
+      model
-        });
+    });
-      });
+  });
-
-      afterEach(() => {
-        obj = null;
-        model = null;
-        target = null;
-      });
 
-      test('Object exists', () => {
+  afterEach(() => {
-        expect(Trait).toBeTruthy();
+    obj = null;
-      });
+    model = null;
+    target = null;
+  });
 
-      test('Target has no attributes on init', () => {
+  test('Object exists', () => {
-        expect(target.get('attributes')).toEqual({});
+    expect(Trait).toBeTruthy();
-      });
+  });
 
-      test('On update of the value updates the target attributes', () => {
+  test('Target has no attributes on init', () => {
-        model.set('value', 'test');
+    expect(target.get('attributes')).toEqual({});
-        var eq = {};
+  });
-        eq[modelName] = 'test';
-        expect(target.get('attributes')).toEqual(eq);
-      });
 
-      test('Updates on different models do not alter other targets', () => {
+  test('On update of the value updates the target attributes', () => {
-        var target1 = new Component();
+    model.set('value', 'test');
-        var target2 = new Component();
+    var eq = {};
-        var model1 = new Trait({
+    eq[modelName] = 'test';
-          name: modelName,
+    expect(target.get('attributes')).toEqual(eq);
-          target: target1
+  });
-        });
-        var model2 = new Trait({
-          name: modelName,
-          target: target2
-        });
-        var obj1 = new TraitView({ model: model1 });
-        var obj2 = new TraitView({ model: model2 });
 
-        model1.set('value', 'test1');
+  test('Updates on different models do not alter other targets', () => {
-        model2.set('value', 'test2');
+    var target1 = new Component();
-        var eq1 = {};
+    var target2 = new Component();
-        eq1[modelName] = 'test1';
+    var model1 = new Trait({
-        var eq2 = {};
+      name: modelName,
-        eq2[modelName] = 'test2';
+      target: target1
-        expect(target1.get('attributes')).toEqual(eq1);
-        expect(target2.get('attributes')).toEqual(eq2);
-      });
     });
-  }
+    var model2 = new Trait({
-};
+      name: modelName,
+      target: target2
+    });
+    var obj1 = new TraitView({ model: model1 });
+    var obj2 = new TraitView({ model: model2 });
+
+    model1.set('value', 'test1');
+    model2.set('value', 'test2');
+    var eq1 = {};
+    eq1[modelName] = 'test1';
+    var eq2 = {};
+    eq2[modelName] = 'test2';
+    expect(target1.get('attributes')).toEqual(eq1);
+    expect(target2.get('attributes')).toEqual(eq2);
+  });
+});

test/specs/utils/Sorter.js

@@ -1,438 +1,432 @@
-define(function(require, exports, module) {
+// import Sorter from '../../../src/utils/Sorter.js'
-  'use strict';
+
-  var Sorter = require('undefined');
+// TODO: Migrate this file to Jest
-
+
-  module.exports = {
+describe.skip('Sorter', () => {
-    run: function() {
+  var fixture;
-      describe('Sorter', () => {
+  var obj;
-        var fixtures;
+  var parent;
-        var fixture;
+  var plh;
-        var obj;
+  var html;
-        var parent;
+
-        var plh;
+  beforeAll(function() {
-        var html;
+    fixture = $('<div class="sorter-fixture"></div>').get(0);
-
+  });
-        beforeAll(function() {
+
-          fixture = $('<div class="sorter-fixture"></div>').get(0);
+  beforeEach(() => {
-        });
+    parent = document.createElement('div');
-
+    parent.setAttribute('class', 'parent1');
-        beforeEach(() => {
+    plh = document.createElement('div');
-          parent = document.createElement('div');
+    document.body.appendChild(parent);
-          parent.setAttribute('class', 'parent1');
+    obj = new Sorter({ container: '.parent1' });
-          plh = document.createElement('div');
+    document.body.appendChild(fixture);
-          document.body.appendChild(parent);
+    fixture.appendChild(parent);
-          obj = new Sorter({ container: '.parent1' });
+    html =
-          document.body.appendChild(fixture);
+      '<div id="el1" style="overflow: hidden;">' +
-          fixture.appendChild(parent);
+      '<div id="el2">ba' +
-          html =
+      '<p id="baa">baa</p>' +
-            '<div id="el1" style="overflow: hidden;">' +
+      '<span id="elspan">bab</span>' +
-            '<div id="el2">ba' +
+      '<span id="bac" style="display:block;">bac</span>' +
-            '<p id="baa">baa</p>' +
+      '<div id="eldiv">eldiv</div>' +
-            '<span id="elspan">bab</span>' +
+      '</div>' +
-            '<span id="bac" style="display:block;">bac</span>' +
+      '</div>' +
-            '<div id="eldiv">eldiv</div>' +
+      '<div id="a">' +
-            '</div>' +
+      '<div id="aa">aa' +
-            '</div>' +
+      '<p id="aaa">aaa</p>' +
-            '<div id="a">' +
+      '<span id="aab">aab</span>' +
-            '<div id="aa">aa' +
+      '<span id="aac" style="display:block;">aac</span>' +
-            '<p id="aaa">aaa</p>' +
+      '</div>' +
-            '<span id="aab">aab</span>' +
+      '<div id="ab" style="float: left;">ab</div>' +
-            '<span id="aac" style="display:block;">aac</span>' +
+      '<div id="ac" style="position: absolute;">ac' +
-            '</div>' +
+      '<div id="aca" style="float: left;">aca</div>' +
-            '<div id="ab" style="float: left;">ab</div>' +
+      '<div id="acb">acb</div>' +
-            '<div id="ac" style="position: absolute;">ac' +
+      '</div>' +
-            '<div id="aca" style="float: left;">aca</div>' +
+      '<div id="ad" style="overflow: hidden;">ad' +
-            '<div id="acb">acb</div>' +
+      '<p id="ada">ada</p>' +
-            '</div>' +
+      '<span id="adb">adb</span>' +
-            '<div id="ad" style="overflow: hidden;">ad' +
+      '<span id="adc" style="display:block;">adc</span>' +
-            '<p id="ada">ada</p>' +
+      '</div>' +
-            '<span id="adb">adb</span>' +
+      '</div>';
-            '<span id="adc" style="display:block;">adc</span>' +
+  });
-            '</div>' +
+
-            '</div>';
+  afterEach(() => {
-        });
+    document.body.removeChild(fixture);
-
+    obj = null;
-        afterEach(() => {
+    parent = null;
-          document.body.removeChild(fixture);
+    html = null;
-          obj = null;
+  });
-          parent = null;
+
-          html = null;
+  test('matches class', () => {
-        });
+    var el = document.createElement('div');
-
+    el.setAttribute('class', 'test test2');
-        test('matches class', () => {
+    parent.appendChild(el);
-          var el = document.createElement('div');
+    obj.matches(el, '.test').should.equal(true);
-          el.setAttribute('class', 'test test2');
+    obj.matches(el, '.test2').should.equal(true);
-          parent.appendChild(el);
+    obj.matches(el, '.test3').should.equal(false);
-          obj.matches(el, '.test').should.equal(true);
+  });
-          obj.matches(el, '.test2').should.equal(true);
+
-          obj.matches(el, '.test3').should.equal(false);
+  test('matches id', () => {
-        });
+    var el = document.createElement('div');
-
+    el.setAttribute('id', 'test2');
-        test('matches id', () => {
+    parent.appendChild(el);
-          var el = document.createElement('div');
+    obj.matches(el, '#test2').should.equal(true);
-          el.setAttribute('id', 'test2');
+    obj.matches(el, '.test2').should.equal(false);
-          parent.appendChild(el);
+    obj.matches(el, '#test').should.equal(false);
-          obj.matches(el, '#test2').should.equal(true);
+  });
-          obj.matches(el, '.test2').should.equal(false);
+
-          obj.matches(el, '#test').should.equal(false);
+  test('matches tag', () => {
-        });
+    var el = document.createElement('span');
-
+    parent.appendChild(el);
-        test('matches tag', () => {
+    obj.matches(el, 'span').should.equal(true);
-          var el = document.createElement('span');
+    obj.matches(el, 'div').should.equal(false);
-          parent.appendChild(el);
+    obj.matches(el, '*').should.equal(true);
-          obj.matches(el, 'span').should.equal(true);
+  });
-          obj.matches(el, 'div').should.equal(false);
+
-          obj.matches(el, '*').should.equal(true);
+  test('Creates placeholder', () => {
-        });
+    obj.createPlaceholder().className.should.equal('placeholder');
-
+  });
-        test('Creates placeholder', () => {
+
-          obj.createPlaceholder().className.should.equal('placeholder');
+  test('isInFlow to overflow hidden', () => {
-        });
+    parent.innerHTML = html;
-
+    var el = parent.querySelector('#el1');
-        test('isInFlow to overflow hidden', () => {
+    obj.isInFlow(el).should.equal(false);
-          parent.innerHTML = html;
+  });
-          var el = parent.querySelector('#el1');
+
-          obj.isInFlow(el).should.equal(false);
+  test('isInFlow inner to overflow', () => {
-        });
+    parent.innerHTML = html;
-
+    var el = parent.querySelector('#el2');
-        test('isInFlow inner to overflow', () => {
+    if (!el) {
-          parent.innerHTML = html;
+      console.log('phantom issue');
-          var el = parent.querySelector('#el2');
+      return;
-          if (!el) {
+    }
-            console.log('phantom issue');
+    obj.isInFlow(el).should.equal(true);
-            return;
+  });
-          }
+
-          obj.isInFlow(el).should.equal(true);
+  test('isInFlow for span', () => {
-        });
+    parent.innerHTML = html;
-
+    var el = parent.querySelector('#elspan');
-        test('isInFlow for span', () => {
+    obj.isInFlow(el).should.equal(false);
-          parent.innerHTML = html;
+  });
-          var el = parent.querySelector('#elspan');
+
-          obj.isInFlow(el).should.equal(false);
+  test('isInFlow for div #a', () => {
-        });
+    parent.innerHTML = html;
-
+    var el = parent.querySelector('#a');
-        test('isInFlow for div #a', () => {
+    if (!el) {
-          parent.innerHTML = html;
+      console.log('phantom issue');
-          var el = parent.querySelector('#a');
+      return;
-          if (!el) {
+    }
-            console.log('phantom issue');
+    obj.isInFlow(el).should.equal(true);
-            return;
+  });
-          }
+
-          obj.isInFlow(el).should.equal(true);
+  test('isInFlow for div #aa', () => {
-        });
+    parent.innerHTML = html;
-
+    var el = parent.querySelector('#aa');
-        test('isInFlow for div #aa', () => {
+    if (!el) {
-          parent.innerHTML = html;
+      console.log('phantom issue');
-          var el = parent.querySelector('#aa');
+      return;
-          if (!el) {
-            console.log('phantom issue');
-            return;
-          }
-          obj.isInFlow(el).should.equal(true);
-        });
-
-        test('isInFlow for p #aaa', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#aaa');
-          if (!el) {
-            console.log('phantom issue');
-            return;
-          }
-          obj.isInFlow(el).should.equal(true);
-        });
-
-        test('isInFlow for span #aab', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#aab');
-          obj.isInFlow(el).should.equal(false);
-        });
-
-        test('isInFlow for span #aac with display block', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#aac');
-          if (!el)
-            // in phantom doesnt work
-            return;
-          obj.isInFlow(el).should.equal(true);
-        });
-
-        test('isInFlow for div #ab with float left', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#ab');
-          obj.isInFlow(el).should.equal(false);
-        });
-
-        test('isInFlow for div #ac in absolute', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#ac');
-          obj.isInFlow(el).should.equal(false);
-        });
-
-        test('isInFlow for div #acb inside absolute', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#acb');
-          if (!el) {
-            console.log('phantom issue');
-            return;
-          }
-          obj.isInFlow(el).should.equal(true);
-        });
-
-        test('isInFlow for div #ad overflow hidden', () => {
-          parent.innerHTML = html;
-          var el = parent.querySelector('#ad');
-          obj.isInFlow(el).should.equal(false);
-        });
-
-        describe('Closest method', () => {
-          var parent2;
-          var parent3;
-
-          beforeEach(() => {
-            parent2 = document.createElement('span');
-            parent2.setAttribute('class', 'parent2');
-            parent3 = document.createElement('div');
-            parent3.setAttribute('class', 'parent3');
-            parent.appendChild(parent2);
-            parent2.appendChild(parent3);
-          });
-
-          test('Closest by class', () => {
-            var el = document.createElement('div');
-            parent3.appendChild(el);
-            obj.closest(el, '.parent2').should.deep.equal(parent2);
-            obj.closest(el, '.parent3').should.deep.equal(parent3);
-            obj.closest(el, '.parent1').should.deep.equal(parent);
-          });
-
-          test('Closest by tag', () => {
-            var el = document.createElement('div');
-            el.setAttribute('class', 'el');
-            parent3.appendChild(el);
-            obj.closest(el, 'span').should.deep.equal(parent2);
-            obj.closest(el, 'div').should.deep.equal(parent3);
-            obj.closest(el, '*').should.deep.equal(parent3);
-          });
-        });
-
-        describe('With elements', () => {
-          var vertDims;
-          var parent2;
-          var parent3;
-          var sib1;
-          var sib2;
-          var sib3;
-          var sib4;
-          var el;
-
-          beforeEach(() => {
-            parent2 = document.createElement('span');
-            parent2.setAttribute('class', 'parent2');
-            parent3 = document.createElement('div');
-            parent3.setAttribute('class', 'parent3');
-            parent.appendChild(parent2);
-            parent2.appendChild(parent3);
-            el = document.createElement('div');
-            el.setAttribute('class', 'el');
-            parent3.appendChild(el);
-
-            sib1 = document.createElement('div');
-            sib2 = document.createElement('div');
-            sib3 = document.createElement('div');
-            sib4 = document.createElement('div');
-            sib1.style.width = '100px';
-            sib1.style.height = '50px';
-            sib2.style.width = '100px';
-            sib2.style.height = '50px';
-            sib3.style.width = '100px';
-            sib3.style.height = '50px';
-            sib3.style.float = 'left';
-            sib4.style.width = '70px';
-            sib4.style.height = '50px';
-            sib4.style.float = 'left';
-            el.appendChild(sib1);
-            el.appendChild(sib2);
-            el.appendChild(sib3);
-            el.appendChild(sib4);
-
-            vertDims = [
-              [0, 0, 50, 100, true],
-              [50, 0, 50, 100, true],
-              [100, 0, 50, 100, true],
-              [150, 0, 50, 70, true]
-            ];
-          });
-
-          test('startSort inits correctly inits', () => {
-            obj.startSort(el);
-            obj.moved.should.equal(0);
-            obj.plh.style.display.should.equal('none');
-          });
-
-          test('onMove', () => {
-            var target = document.createElement('div');
-            obj.startSort(el);
-            obj.onMove({
-              pageX: 0,
-              pageY: 0,
-              target: target
-            });
-            obj.moved.should.equal(1);
-          });
-
-          test('getDim from element', () => {
-            var subPos = obj.offset(sib1);
-            var top = subPos.top;
-            var left = subPos.left;
-            var result = [top, left, 50, 100];
-            obj.getDim(sib1).should.deep.equal(result);
-          });
-
-          test('getChildrenDim from element', () => {
-            el.style.position = 'absolute';
-            el.style.top = '0';
-            var ch = obj.getChildrenDim(el);
-            ch = ch.map(function(v) {
-              return v.slice(0, 5);
-            });
-            var subPos = obj.offset(sib1);
-            var top = subPos.top;
-            var left = subPos.left;
-            var result = [
-              [top, left, 50, 100, true],
-              [top + 50, left + 0, 50, 100, true],
-              [top + 100, left + 0, 50, 100, true],
-              [top + 100, left + 100, 50, 70, true]
-            ];
-            ch.should.deep.equal(result);
-          });
-
-          test('nearBorders', () => {
-            obj.borderOffset = 10;
-            var dim = [0, 0, 100, 200];
-            obj.nearBorders(dim, 20, 15).should.equal(false);
-            obj.nearBorders(dim, 3, 4).should.equal(true);
-            obj.nearBorders(dim, 500, 500).should.equal(true);
-          });
-
-          test('dimsFromTarget', () => {
-            var child1 = document.createElement('div');
-            var child2 = document.createElement('div');
-            child1.style.width = '30px';
-            child1.style.height = '30px';
-            child2.style.width = '30px';
-            child2.style.height = '20px';
-            sib3.appendChild(child1);
-            sib3.appendChild(child2);
-
-            var subPos = obj.offset(sib1);
-            var top = subPos.top;
-            var left = subPos.left;
-            var topSib3 = top + 100;
-            var leftSib3 = left + 0;
-            var resultParent = [
-              [top, left, 50, 100, true],
-              [top + 50, left + 0, 50, 100, true],
-              [topSib3, leftSib3, 50, 100, true],
-              [top + 100, left + 100, 50, 70, true]
-            ];
-            var resultChildren = [
-              [topSib3, leftSib3, 30, 30, true],
-              [topSib3 + 30, left + 0, 20, 30, true]
-            ];
-
-            var dims = obj.dimsFromTarget(sib3);
-            dims = dims.map(function(v) {
-              return v.slice(0, 5);
-            });
-            dims.should.deep.equal(resultParent);
-
-            // Inside target
-            var dims = obj.dimsFromTarget(sib3, leftSib3 + 15, topSib3 + 15);
-            dims = dims.map(function(v) {
-              return v.slice(0, 5);
-            });
-            dims.should.deep.equal(resultChildren);
-
-            // Exactly on border
-            var bOffset = obj.borderOffset;
-            var dims = obj.dimsFromTarget(
-              sib3,
-              leftSib3 + bOffset,
-              topSib3 + bOffset
-            );
-            dims = dims.map(function(v) {
-              return v.slice(0, 5);
-            });
-            dims.should.deep.equal(resultChildren);
-
-            // Slightly near border
-            var dims = obj.dimsFromTarget(
-              sib3,
-              leftSib3 + bOffset - 3,
-              topSib3 + bOffset
-            );
-            dims = dims.map(function(v) {
-              return v.slice(0, 5);
-            });
-            dims.should.deep.equal(resultParent);
-          });
-
-          describe('findPosition', () => {
-            beforeEach(() => {});
-
-            test('Vertical dimensions', () => {
-              var result = { index: 0, method: 'before' };
-              obj.findPosition(vertDims, -10, -10).should.deep.equal(result);
-              obj.findPosition(vertDims, 0, 0).should.deep.equal(result);
-              obj.findPosition(vertDims, 10, 10).should.deep.equal(result);
-
-              var result = { index: 1, method: 'before' };
-              obj.findPosition(vertDims, 10, 30).should.deep.equal(result);
-              obj.findPosition(vertDims, 10, 70).should.deep.equal(result);
-
-              var result = { index: 2, method: 'before' };
-              obj.findPosition(vertDims, 10, 76).should.deep.equal(result);
-
-              var result = { index: 3, method: 'before' };
-              obj.findPosition(vertDims, 100, 140).should.deep.equal(result);
-              obj.findPosition(vertDims, 100, 160).should.deep.equal(result);
-
-              var result = { index: 3, method: 'after' };
-              obj.findPosition(vertDims, 1000, 1000).should.deep.equal(result);
-            });
-          });
-
-          describe('movePlaceholder', () => {
-            beforeEach(() => {
-              vertDims = [
-                [0, 10, 50, 100, true],
-                [50, 20, 50, 70, true],
-                [100, 30, 50, 100, true],
-                [150, 40, 50, 70, true]
-              ];
-            });
-
-            test('Vertical dimensions with before position', () => {
-              var pos = { index: 2, method: 'before' };
-              obj.movePlaceholder(plh, vertDims, pos);
-              var style = plh.style;
-              style.top.should.equal('100px');
-              style.left.should.equal('30px');
-              style.width.should.equal('100px');
-            });
-
-            test('Vertical dimensions with after position', () => {
-              var pos = { index: 1, method: 'after' };
-              obj.movePlaceholder(plh, vertDims, pos);
-              var style = plh.style;
-              style.top.should.equal('100px');
-              style.left.should.equal('20px');
-              style.width.should.equal('70px');
-            });
-          });
-        });
-      });
     }
-  };
+    obj.isInFlow(el).should.equal(true);
+  });
+
+  test('isInFlow for p #aaa', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#aaa');
+    if (!el) {
+      console.log('phantom issue');
+      return;
+    }
+    obj.isInFlow(el).should.equal(true);
+  });
+
+  test('isInFlow for span #aab', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#aab');
+    obj.isInFlow(el).should.equal(false);
+  });
+
+  test('isInFlow for span #aac with display block', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#aac');
+    if (!el)
+      // in phantom doesnt work
+      return;
+    obj.isInFlow(el).should.equal(true);
+  });
+
+  test('isInFlow for div #ab with float left', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#ab');
+    obj.isInFlow(el).should.equal(false);
+  });
+
+  test('isInFlow for div #ac in absolute', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#ac');
+    obj.isInFlow(el).should.equal(false);
+  });
+
+  test('isInFlow for div #acb inside absolute', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#acb');
+    if (!el) {
+      console.log('phantom issue');
+      return;
+    }
+    obj.isInFlow(el).should.equal(true);
+  });
+
+  test('isInFlow for div #ad overflow hidden', () => {
+    parent.innerHTML = html;
+    var el = parent.querySelector('#ad');
+    obj.isInFlow(el).should.equal(false);
+  });
+
+  describe('Closest method', () => {
+    var parent2;
+    var parent3;
+
+    beforeEach(() => {
+      parent2 = document.createElement('span');
+      parent2.setAttribute('class', 'parent2');
+      parent3 = document.createElement('div');
+      parent3.setAttribute('class', 'parent3');
+      parent.appendChild(parent2);
+      parent2.appendChild(parent3);
+    });
+
+    test('Closest by class', () => {
+      var el = document.createElement('div');
+      parent3.appendChild(el);
+      obj.closest(el, '.parent2').should.deep.equal(parent2);
+      obj.closest(el, '.parent3').should.deep.equal(parent3);
+      obj.closest(el, '.parent1').should.deep.equal(parent);
+    });
+
+    test('Closest by tag', () => {
+      var el = document.createElement('div');
+      el.setAttribute('class', 'el');
+      parent3.appendChild(el);
+      obj.closest(el, 'span').should.deep.equal(parent2);
+      obj.closest(el, 'div').should.deep.equal(parent3);
+      obj.closest(el, '*').should.deep.equal(parent3);
+    });
+  });
+
+  describe('With elements', () => {
+    var vertDims;
+    var parent2;
+    var parent3;
+    var sib1;
+    var sib2;
+    var sib3;
+    var sib4;
+    var el;
+
+    beforeEach(() => {
+      parent2 = document.createElement('span');
+      parent2.setAttribute('class', 'parent2');
+      parent3 = document.createElement('div');
+      parent3.setAttribute('class', 'parent3');
+      parent.appendChild(parent2);
+      parent2.appendChild(parent3);
+      el = document.createElement('div');
+      el.setAttribute('class', 'el');
+      parent3.appendChild(el);
+
+      sib1 = document.createElement('div');
+      sib2 = document.createElement('div');
+      sib3 = document.createElement('div');
+      sib4 = document.createElement('div');
+      sib1.style.width = '100px';
+      sib1.style.height = '50px';
+      sib2.style.width = '100px';
+      sib2.style.height = '50px';
+      sib3.style.width = '100px';
+      sib3.style.height = '50px';
+      sib3.style.float = 'left';
+      sib4.style.width = '70px';
+      sib4.style.height = '50px';
+      sib4.style.float = 'left';
+      el.appendChild(sib1);
+      el.appendChild(sib2);
+      el.appendChild(sib3);
+      el.appendChild(sib4);
+
+      vertDims = [
+        [0, 0, 50, 100, true],
+        [50, 0, 50, 100, true],
+        [100, 0, 50, 100, true],
+        [150, 0, 50, 70, true]
+      ];
+    });
+
+    test('startSort inits correctly inits', () => {
+      obj.startSort(el);
+      obj.moved.should.equal(0);
+      obj.plh.style.display.should.equal('none');
+    });
+
+    test('onMove', () => {
+      var target = document.createElement('div');
+      obj.startSort(el);
+      obj.onMove({
+        pageX: 0,
+        pageY: 0,
+        target: target
+      });
+      obj.moved.should.equal(1);
+    });
+
+    test('getDim from element', () => {
+      var subPos = obj.offset(sib1);
+      var top = subPos.top;
+      var left = subPos.left;
+      var result = [top, left, 50, 100];
+      obj.getDim(sib1).should.deep.equal(result);
+    });
+
+    test('getChildrenDim from element', () => {
+      el.style.position = 'absolute';
+      el.style.top = '0';
+      var ch = obj.getChildrenDim(el);
+      ch = ch.map(function(v) {
+        return v.slice(0, 5);
+      });
+      var subPos = obj.offset(sib1);
+      var top = subPos.top;
+      var left = subPos.left;
+      var result = [
+        [top, left, 50, 100, true],
+        [top + 50, left + 0, 50, 100, true],
+        [top + 100, left + 0, 50, 100, true],
+        [top + 100, left + 100, 50, 70, true]
+      ];
+      ch.should.deep.equal(result);
+    });
+
+    test('nearBorders', () => {
+      obj.borderOffset = 10;
+      var dim = [0, 0, 100, 200];
+      obj.nearBorders(dim, 20, 15).should.equal(false);
+      obj.nearBorders(dim, 3, 4).should.equal(true);
+      obj.nearBorders(dim, 500, 500).should.equal(true);
+    });
+
+    test('dimsFromTarget', () => {
+      var child1 = document.createElement('div');
+      var child2 = document.createElement('div');
+      child1.style.width = '30px';
+      child1.style.height = '30px';
+      child2.style.width = '30px';
+      child2.style.height = '20px';
+      sib3.appendChild(child1);
+      sib3.appendChild(child2);
+
+      var subPos = obj.offset(sib1);
+      var top = subPos.top;
+      var left = subPos.left;
+      var topSib3 = top + 100;
+      var leftSib3 = left + 0;
+      var resultParent = [
+        [top, left, 50, 100, true],
+        [top + 50, left + 0, 50, 100, true],
+        [topSib3, leftSib3, 50, 100, true],
+        [top + 100, left + 100, 50, 70, true]
+      ];
+      var resultChildren = [
+        [topSib3, leftSib3, 30, 30, true],
+        [topSib3 + 30, left + 0, 20, 30, true]
+      ];
+
+      var dims = obj.dimsFromTarget(sib3);
+      dims = dims.map(function(v) {
+        return v.slice(0, 5);
+      });
+      dims.should.deep.equal(resultParent);
+
+      // Inside target
+      var dims = obj.dimsFromTarget(sib3, leftSib3 + 15, topSib3 + 15);
+      dims = dims.map(function(v) {
+        return v.slice(0, 5);
+      });
+      dims.should.deep.equal(resultChildren);
+
+      // Exactly on border
+      var bOffset = obj.borderOffset;
+      var dims = obj.dimsFromTarget(
+        sib3,
+        leftSib3 + bOffset,
+        topSib3 + bOffset
+      );
+      dims = dims.map(function(v) {
+        return v.slice(0, 5);
+      });
+      dims.should.deep.equal(resultChildren);
+
+      // Slightly near border
+      var dims = obj.dimsFromTarget(
+        sib3,
+        leftSib3 + bOffset - 3,
+        topSib3 + bOffset
+      );
+      dims = dims.map(function(v) {
+        return v.slice(0, 5);
+      });
+      dims.should.deep.equal(resultParent);
+    });
+
+    describe('findPosition', () => {
+      beforeEach(() => {});
+
+      test('Vertical dimensions', () => {
+        var result = { index: 0, method: 'before' };
+        obj.findPosition(vertDims, -10, -10).should.deep.equal(result);
+        obj.findPosition(vertDims, 0, 0).should.deep.equal(result);
+        obj.findPosition(vertDims, 10, 10).should.deep.equal(result);
+
+        var result = { index: 1, method: 'before' };
+        obj.findPosition(vertDims, 10, 30).should.deep.equal(result);
+        obj.findPosition(vertDims, 10, 70).should.deep.equal(result);
+
+        var result = { index: 2, method: 'before' };
+        obj.findPosition(vertDims, 10, 76).should.deep.equal(result);
+
+        var result = { index: 3, method: 'before' };
+        obj.findPosition(vertDims, 100, 140).should.deep.equal(result);
+        obj.findPosition(vertDims, 100, 160).should.deep.equal(result);
+
+        var result = { index: 3, method: 'after' };
+        obj.findPosition(vertDims, 1000, 1000).should.deep.equal(result);
+      });
+    });
+
+    describe('movePlaceholder', () => {
+      beforeEach(() => {
+        vertDims = [
+          [0, 10, 50, 100, true],
+          [50, 20, 50, 70, true],
+          [100, 30, 50, 100, true],
+          [150, 40, 50, 70, true]
+        ];
+      });
+
+      test('Vertical dimensions with before position', () => {
+        var pos = { index: 2, method: 'before' };
+        obj.movePlaceholder(plh, vertDims, pos);
+        var style = plh.style;
+        style.top.should.equal('100px');
+        style.left.should.equal('30px');
+        style.width.should.equal('100px');
+      });
+
+      test('Vertical dimensions with after position', () => {
+        var pos = { index: 1, method: 'after' };
+        obj.movePlaceholder(plh, vertDims, pos);
+        var style = plh.style;
+        style.top.should.equal('100px');
+        style.left.should.equal('20px');
+        style.width.should.equal('70px');
+      });
+    });
+  });
 });

test/specs/utils/main.js

@@ -1,9 +0,0 @@
-define((require, exports, module) => {
-  'use strict';
-  var Utils = require('Utils');
-  var Sorter = require('undefined');
-
-  describe('Utils', () => {
-    Sorter.run();
-  });
-});