From 3297266b9ce2302e523385543415fe400aee9785 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 6 Jun 2017 00:05:41 +0200
Subject: [PATCH] Update device manager tests

---
 test/helper.js                                |   1 +
 test/main.js                                  |   1 +
 test/specs/css_composer/e2e/CssComposer.js    |   2 +-
 test/specs/device_manager/index.js            |  67 +++++++++
 test/specs/device_manager/main.js             |  70 ---------
 test/specs/device_manager/view/DevicesView.js | 136 +++++++++---------
 test/specs/dom_components/index.js            |  52 ++++---
 test/specs/dom_components/model/Component.js  | 104 +++++++-------
 .../dom_components/view/ComponentImageView.js |  22 +--
 .../dom_components/view/ComponentTextView.js  |  22 +--
 test/specs/dom_components/view/ComponentV.js  |  46 +++---
 .../dom_components/view/ComponentsView.js     |  18 +--
 12 files changed, 267 insertions(+), 274 deletions(-)
 create mode 100644 test/specs/device_manager/index.js
 delete mode 100644 test/specs/device_manager/main.js

diff --git a/test/helper.js b/test/helper.js
index 34201b3a5..baef2802f 100644
--- a/test/helper.js
+++ b/test/helper.js
@@ -30,6 +30,7 @@ global._ = _;
 global.expect = expect;
 global.sinon = sinon;
 global.grapesjs = grapesjs;
+global.Backbone = Backbone;
 window.$ = $;
 Backbone.$ = $;
 
diff --git a/test/main.js b/test/main.js
index 9c9958d24..3d3f24ffa 100644
--- a/test/main.js
+++ b/test/main.js
@@ -14,5 +14,6 @@ describe('Main', () => {
   require(`${path}code_manager`);
   require(`${path}commands`);
   require(`${path}css_composer`);
+  require(`${path}device_manager`);
   require(`${path}dom_components`);
 });
diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js
index b06f88f3d..130e4664c 100644
--- a/test/specs/css_composer/e2e/CssComposer.js
+++ b/test/specs/css_composer/e2e/CssComposer.js
@@ -15,7 +15,7 @@ module.exports = {
           fixture = $('<div class="csscomposer-fixture"></div>');
         });
 
-        beforeEach(function(done) {
+        beforeEach(done => {
           //this.timeout(5000);
           gjs = grapesjs.init({
             stylePrefix: '',
diff --git a/test/specs/device_manager/index.js b/test/specs/device_manager/index.js
new file mode 100644
index 000000000..78d4d8bcd
--- /dev/null
+++ b/test/specs/device_manager/index.js
@@ -0,0 +1,67 @@
+const DeviceManager = require('device_manager');
+const DevicesView = require('./view/DevicesView');
+
+describe('DeviceManager', () => {
+
+  describe('Main', () => {
+
+    var obj;
+    var testNameDevice;
+    var testWidthDevice;
+
+    beforeEach(() => {
+      testNameDevice = 'Tablet';
+      testWidthDevice = '100px';
+      obj = new DeviceManager().init();
+    });
+
+    afterEach(() => {
+      obj = null;
+    });
+
+    it('Object exists', () => {
+      expect(obj).toExist();
+    });
+
+    it('No device inside', () => {
+      var coll = obj.getAll();
+      expect(coll.length).toEqual(0);
+    });
+
+    it('Add new device', () => {
+      var model = obj.add(testNameDevice, testWidthDevice);
+      expect(obj.getAll().length).toEqual(1);
+    });
+
+    it('Added device has correct data', () => {
+      var model = obj.add(testNameDevice, testWidthDevice);
+      expect(model.get('name')).toEqual(testNameDevice);
+      expect(model.get('width')).toEqual(testWidthDevice);
+    });
+
+    it('Add device width options', () => {
+      var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'});
+      expect(model.get('opt')).toEqual('value');
+    });
+
+    it('The name of the device is unique', () => {
+      var model = obj.add(testNameDevice, testWidthDevice);
+      var model2 = obj.add(testNameDevice, '2px');
+      expect(model).toEqual(model2);
+    });
+
+    it('Get device by name', () => {
+      var model = obj.add(testNameDevice, testWidthDevice);
+      var model2 = obj.get(testNameDevice);
+      expect(model).toEqual(model2);
+    });
+
+    it('Render devices', () => {
+      expect(obj.render()).toExist();
+    });
+
+  });
+
+  DevicesView.run();
+
+});
diff --git a/test/specs/device_manager/main.js b/test/specs/device_manager/main.js
deleted file mode 100644
index ebb971839..000000000
--- a/test/specs/device_manager/main.js
+++ /dev/null
@@ -1,70 +0,0 @@
-define(function(require, exports, module){
-  'use strict';
-  var DeviceManager = require('DeviceManager');
-  var DevicesView = require('undefined');
-
-    describe('DeviceManager', function() {
-
-      describe('Main', function() {
-
-        var obj;
-        var testNameDevice;
-        var testWidthDevice;
-
-        beforeEach(function () {
-          testNameDevice = 'Tablet';
-          testWidthDevice = '100px';
-          obj = new DeviceManager().init();
-        });
-
-        afterEach(function () {
-          delete obj;
-        });
-
-        it('Object exists', function() {
-          obj.should.be.exist;
-        });
-
-        it('No device inside', function() {
-          var coll = obj.getAll();
-          coll.length.should.equal(0);
-        });
-
-        it('Add new device', function() {
-          var model = obj.add(testNameDevice, testWidthDevice);
-          obj.getAll().length.should.equal(1);
-        });
-
-        it('Added device has correct data', function() {
-          var model = obj.add(testNameDevice, testWidthDevice);
-          model.get('name').should.equal(testNameDevice);
-          model.get('width').should.equal(testWidthDevice);
-        });
-
-        it('Add device width options', function() {
-          var model = obj.add(testNameDevice, testWidthDevice, {opt: 'value'});
-          model.get('opt').should.equal('value');
-        });
-
-        it('The name of the device is unique', function() {
-          var model = obj.add(testNameDevice, testWidthDevice);
-          var model2 = obj.add(testNameDevice, '2px');
-          model.should.deep.equal(model2);
-        });
-
-        it('Get device by name', function() {
-          var model = obj.add(testNameDevice, testWidthDevice);
-          var model2 = obj.get(testNameDevice);
-          model.should.deep.equal(model2);
-        });
-
-        it('Render devices', function() {
-          obj.render().should.be.ok;
-        });
-
-      });
-
-      DevicesView.run();
-
-    });
-});
\ No newline at end of file
diff --git a/test/specs/device_manager/view/DevicesView.js b/test/specs/device_manager/view/DevicesView.js
index 1a8a0206c..e2836b0a0 100644
--- a/test/specs/device_manager/view/DevicesView.js
+++ b/test/specs/device_manager/view/DevicesView.js
@@ -1,83 +1,79 @@
-define(function(require, exports, module){
-  'use strict';
-  var DevicesView = require('undefined');
-  var Devices = require('DeviceManager/model/Devices');
-
-    module.exports = {
-      run : function(){
-          describe('DevicesView', function() {
-
-            var $fixtures;
-            var $fixture;
-            var model;
-            var view;
-            var editorModel;
+const DevicesView = require('device_manager/view/DevicesView');
+const Devices = require('device_manager/model/Devices');
+
+module.exports = {
+  run() {
+      describe('DevicesView', () => {
+
+        var $fixtures;
+        var $fixture;
+        var model;
+        var view;
+        var editorModel;
+
+        before(() => {
+          $fixtures  = $("#fixtures");
+          $fixture   = $('<div class="devices-fixture"></div>');
+        });
 
-            before(function () {
-              $fixtures  = $("#fixtures");
-              $fixture   = $('<div class="devices-fixture"></div>');
-            });
+        beforeEach(() => {
+          model = new Devices([]);
+          view = new DevicesView({
+            collection: model
+          });
+          $fixture.empty().appendTo($fixtures);
+          $fixture.html(view.render().el);
+        });
 
-            beforeEach(function () {
-              model = new Devices([]);
-              view = new DevicesView({
-                collection: model
-              });
-              $fixture.empty().appendTo($fixtures);
-              $fixture.html(view.render().el);
-            });
+        afterEach(() => {
+          view.collection.reset();
+        });
 
-            afterEach(function () {
-              view.collection.reset();
-            });
+        after(() => {
+          $fixture.remove();
+        });
 
-            after(function () {
-              $fixture.remove();
-            });
+        it("The content is not empty", () => {
+          expect(view.el.innerHTML).toExist();
+        });
 
-            it("The content is not empty", function (){
-              view.el.innerHTML.should.be.not.empty;
-            });
+        it("No options without devices", () => {
+          expect(view.getOptions()).toEqual('');
+        });
 
-            it("No options without devices", function (){
-              view.getOptions().should.equal('');
-            });
+        it("Render new button", () => {
+          view.collection.add({});
+          expect(view.$el.html()).toExist();
+        });
 
-            it("Render new button", function (){
-              view.collection.add({});
-              view.$el.html().should.not.be.empty;
+        describe('With configs', () => {
+
+          beforeEach(() => {
+            editorModel = new Backbone.Model();
+            model = new Devices([
+              {name:'test1'},
+              {name:'test2'}
+            ]);
+            view = new DevicesView({
+              collection: model,
+              config: { em: editorModel }
             });
+            $fixture.empty().appendTo($fixtures);
+            $fixture.html(view.render().el);
+          });
 
-            describe('With configs', function() {
+          it("Update device on select change", () => {
+            view.$el.find('select').val('test2');
+            view.updateDevice();
+            expect(view.config.em.get('device')).toEqual('test2');
+          });
 
-              beforeEach(function () {
-                editorModel = new Backbone.Model();
-                model = new Devices([
-                  {name:'test1'},
-                  {name:'test2'}
-                ]);
-                view = new DevicesView({
-                  collection: model,
-                  config: { em: editorModel }
-                });
-                $fixture.empty().appendTo($fixtures);
-                $fixture.html(view.render().el);
-              });
-
-              it("Update device on select change", function (){
-                view.$el.find('select').val('test2');
-                view.updateDevice();
-                view.config.em.get('device').should.equal('test2');
-              });
-
-              it("Render options", function (){
-                view.getOptions().should.equal('<option value="test1">test1</option><option value="test2">test2</option>');
-              });
-
-            });
+          it("Render options", () => {
+            expect(view.getOptions()).toEqual('<option value="test1">test1</option><option value="test2">test2</option>');
+          });
 
         });
-      }
-    };
 
-});
\ No newline at end of file
+    });
+  }
+};
diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js
index 0e496bbe1..5c35a96cb 100644
--- a/test/specs/dom_components/index.js
+++ b/test/specs/dom_components/index.js
@@ -6,9 +6,9 @@ const ComponentTextView = require('./view/ComponentTextView');
 const ComponentImageView = require('./view/ComponentImageView');
 const utils = require('./../test_utils.js');
 
-describe('DOM Components', function() {
+describe('DOM Components', () => {
 
-  describe('Main', function() {
+  describe('Main', () => {
 
     var obj;
     var config;
@@ -17,48 +17,46 @@ describe('DOM Components', function() {
       config: {
         loadCompsOnRender: 0,
       },
-      get: function(){return;},
-      getHtml: function(){return 'testHtml';},
-      getComponents: function(){return {test: 1};},
-      getCacheLoad: function(){
+      get() {return;},
+      getHtml() {return 'testHtml';},
+      getComponents() {return {test: 1};},
+      getCacheLoad() {
         return storagMock.load();
       }
     };
     // Methods
-    var setSmConfig = function(){
+    var setSmConfig = () => {
       config.stm = storagMock;
-      config.stm.getConfig =  function(){
-        return {
-          storeHtml: 1,
-          storeComponents: 1,
-        }
-      };
+      config.stm.getConfig =  () => ({
+        storeHtml: 1,
+        storeComponents: 1
+      });
     };
-    var setEm = function(){
+    var setEm = () => {
       config.em = editorModel;
     }
 
 
-    beforeEach(function () {
+    beforeEach(() => {
       config = {};
       obj = new DomComponents().init(config);
     });
 
-    afterEach(function () {
+    afterEach(() => {
       obj = null;
     });
 
-    it('Object exists', function() {
+    it('Object exists', () => {
       expect(DomComponents).toExist();
     });
 
-    it('storageKey returns array', function() {
+    it('storageKey returns array', () => {
       expect(obj.storageKey() instanceof Array).toEqual(true);
     });
 
-    it('storageKey returns correct composition', function() {
+    it('storageKey returns correct composition', () => {
       config.stm = {
-        getConfig: function(){
+        getConfig() {
           return {
             storeHtml: 1,
             storeComponents: 1,
@@ -68,7 +66,7 @@ describe('DOM Components', function() {
       expect(obj.storageKey()).toEqual(['html', 'components']);
     });
 
-    it('Store data', function() {
+    it('Store data', () => {
       setSmConfig();
       setEm();
       var expected = {
@@ -78,32 +76,32 @@ describe('DOM Components', function() {
       expect(obj.store(1)).toEqual(expected);
     });
 
-    it('Store and load data', function() {
+    it('Store and load data', () => {
       setSmConfig();
       setEm();
       obj.store();
       expect(obj.load()).toEqual({test: 1});
     });
 
-    it('Wrapper exists', function() {
+    it('Wrapper exists', () => {
       expect(obj.getWrapper()).toExist();
     });
 
-    it('No components inside', function() {
+    it('No components inside', () => {
       expect(obj.getComponents().length).toEqual(0);
     });
 
-    it('Add new component', function() {
+    it('Add new component', () => {
       var comp = obj.addComponent({});
       expect(obj.getComponents().length).toEqual(1);
     });
 
-    it('Add more components at once', function() {
+    it('Add more components at once', () => {
       var comp = obj.addComponent([{},{}]);
       expect(obj.getComponents().length).toEqual(2);
     });
 
-    it('Render wrapper', function() {
+    it('Render wrapper', () => {
       expect(obj.render()).toExist();
     });
   });
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index 48f7b0dda..019f2108a 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -8,14 +8,14 @@ const ComponentVideo = require('dom_components/model/ComponentVideo');
 const Components = require('dom_components/model/Components');
 
 module.exports = {
-  run : function(){
+  run() {
       var obj;
       var dcomp;
       var compOpts;
 
-      describe('Component', function() {
+      describe('Component', () => {
 
-        beforeEach(function () {
+        beforeEach(() => {
           obj = new Component();
           dcomp = new DomComponents();
           compOpts = {
@@ -23,15 +23,15 @@ module.exports = {
           };
         });
 
-        afterEach(function () {
+        afterEach(() => {
           obj = null;
         });
 
-        it('Has no children', function() {
+        it('Has no children', () => {
           expect(obj.get('components').length).toEqual(0);
         });
 
-        it('Clones correctly', function() {
+        it('Clones correctly', () => {
           var sAttr = obj.attributes;
           var cloned = obj.clone();
           var eAttr = cloned.attributes;
@@ -42,7 +42,7 @@ module.exports = {
           expect(sAttr.length).toEqual(eAttr.length);
         });
 
-        it('Clones correctly with traits', function() {
+        it('Clones correctly with traits', () => {
           obj.get('traits').at(0).set('value', 'testTitle');
           var cloned = obj.clone();
           cloned.set('stylable', 0);
@@ -51,21 +51,21 @@ module.exports = {
           expect(obj.get('stylable')).toEqual(true);
         });
 
-        it('Has expected name', function() {
+        it('Has expected name', () => {
           expect(obj.getName()).toEqual('Box');
         });
 
-        it('Has expected name 2', function() {
+        it('Has expected name 2', () => {
           obj.cid = 'c999';
           obj.set('type','testType');
           expect(obj.getName()).toEqual('TestType');
         });
 
-        it('Component toHTML', function() {
+        it('Component toHTML', () => {
           expect(obj.toHTML()).toEqual('<div></div>');
         });
 
-        it('Component toHTML with attributes', function() {
+        it('Component toHTML with attributes', () => {
           obj = new Component({
             tagName: 'article',
             attributes: {
@@ -76,40 +76,40 @@ module.exports = {
           expect(obj.toHTML()).toEqual('<article data-test1="value1" data-test2="value2"></article>');
         });
 
-        it('Component toHTML with classes', function() {
+        it('Component toHTML with classes', () => {
           obj = new Component({
             tagName: 'article'
           });
-          ['class1', 'class2'].forEach(function(item){
+          ['class1', 'class2'].forEach(item => {
             obj.get('classes').add({name: item});
           });
           expect(obj.toHTML()).toEqual('<article class="class1 class2"></article>');
         });
 
-        it('Component toHTML with children', function() {
+        it('Component toHTML with children', () => {
           obj = new Component({tagName: 'article'}, compOpts);
           obj.get('components').add({tagName: 'span'});
           expect(obj.toHTML()).toEqual('<article><span></span></article>');
         });
 
-        it('Component toHTML with more children', function() {
+        it('Component toHTML with more children', () => {
           obj = new Component({tagName: 'article'}, compOpts);
           obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]);
           expect(obj.toHTML()).toEqual('<article><span></span><div></div></article>');
         });
 
-        it('Component toHTML with no closing tag', function() {
+        it('Component toHTML with no closing tag', () => {
           obj = new Component({void: 1});
           expect(obj.toHTML()).toEqual('<div/>');
         });
 
-        it('Component parse empty div', function() {
+        it('Component parse empty div', () => {
           var el = document.createElement('div');
           obj = Component.isComponent(el);
           expect(obj).toEqual({tagName: 'div'});
         });
 
-        it('Component parse span', function() {
+        it('Component parse span', () => {
           var el = document.createElement('span');
           obj = Component.isComponent(el);
           expect(obj).toEqual({tagName: 'span'});
@@ -117,30 +117,30 @@ module.exports = {
 
     });
 
-    describe('Image Component', function() {
+    describe('Image Component', () => {
 
-        beforeEach(function () {
+        beforeEach(() => {
           obj = new ComponentImage();
         });
 
-        afterEach(function () {
+        afterEach(() => {
           obj = null;
         });
 
-        it('Has src property', function() {
+        it('Has src property', () => {
           expect(obj.has('src')).toEqual(true);
         });
 
-        it('Not droppable', function() {
+        it('Not droppable', () => {
           expect(obj.get('droppable')).toEqual(false);
         });
 
-        it('ComponentImage toHTML', function() {
+        it('ComponentImage toHTML', () => {
           obj = new ComponentImage();
           expect(obj.toHTML()).toEqual('<img/>');
         });
 
-        it('Component toHTML with attributes', function() {
+        it('Component toHTML with attributes', () => {
           obj = new ComponentImage({
             attributes: {'alt': 'AltTest'},
             src: 'testPath'
@@ -148,19 +148,19 @@ module.exports = {
           expect(obj.toHTML()).toEqual('<img alt="AltTest" src="testPath"/>');
         });
 
-        it('Refuse not img element', function() {
+        it('Refuse not img element', () => {
           var el = document.createElement('div');
           obj = ComponentImage.isComponent(el);
           expect(obj).toEqual('');
         });
 
-        it('Component parse img element', function() {
+        it('Component parse img element', () => {
           var el = document.createElement('img');
           obj = ComponentImage.isComponent(el);
           expect(obj).toEqual({type: 'image'});
         });
 
-        it('Component parse img element with src', function() {
+        it('Component parse img element with src', () => {
           var el = document.createElement('img');
           el.src = 'http://localhost/';
           obj = ComponentImage.isComponent(el);
@@ -169,25 +169,25 @@ module.exports = {
 
     });
 
-    describe('Text Component', function() {
+    describe('Text Component', () => {
 
-        beforeEach(function () {
+        beforeEach(() => {
           obj  = new ComponentText();
         });
 
-        afterEach(function () {
+        afterEach(() => {
           obj = null;
         });
 
-        it('Has content property', function() {
+        it('Has content property', () => {
           expect(obj.has('content')).toEqual(true);
         });
 
-        it('Not droppable', function() {
+        it('Not droppable', () => {
           expect(obj.get('droppable')).toEqual(false);
         });
 
-        it('Component toHTML with attributes', function() {
+        it('Component toHTML with attributes', () => {
           obj = new ComponentText({
             attributes: {'data-test': 'value'},
             content: 'test content'
@@ -197,9 +197,9 @@ module.exports = {
 
     });
 
-    describe('Link Component', function() {
+    describe('Link Component', () => {
 
-      it('Component parse a element', function() {
+      it('Component parse a element', () => {
         var el = document.createElement('a');
         obj = ComponentLink.isComponent(el);
         expect(obj).toEqual({type: 'link'});
@@ -207,16 +207,16 @@ module.exports = {
 
     });
 
-    describe('Map Component', function() {
+    describe('Map Component', () => {
 
-      it('Component parse map iframe', function() {
+      it('Component parse map iframe', () => {
         var src = 'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed';
         var el = $('<iframe src="' + src + '"></iframe>');
         obj = ComponentMap.isComponent(el.get(0));
-        expect(obj).toEqual({type: 'map', src: src});
+        expect(obj).toEqual({type: 'map', src});
       });
 
-      it('Component parse not map iframe', function() {
+      it('Component parse not map iframe', () => {
         var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>');
         obj = ComponentMap.isComponent(el.get(0));
         expect(obj).toEqual('');
@@ -224,53 +224,53 @@ module.exports = {
 
     });
 
-    describe('Video Component', function() {
+    describe('Video Component', () => {
 
-      it('Component parse video', function() {
+      it('Component parse video', () => {
         var src = 'http://localhost/';
         var el = $('<video src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
-        expect(obj).toEqual({type: 'video', src: src});
+        expect(obj).toEqual({type: 'video', src});
       });
 
-      it('Component parse youtube video iframe', function() {
+      it('Component parse youtube video iframe', () => {
         var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?';
         var el = $('<iframe src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
-        expect(obj).toEqual({type: 'video', provider: 'yt', src: src});
+        expect(obj).toEqual({type: 'video', provider: 'yt', src});
       });
 
-      it('Component parse vimeo video iframe', function() {
+      it('Component parse vimeo video iframe', () => {
         var src = 'http://player.vimeo.com/video/2?';
         var el = $('<iframe src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
-        expect(obj).toEqual({type: 'video', provider: 'vi', src: src});
+        expect(obj).toEqual({type: 'video', provider: 'vi', src});
       });
 
     });
 
-    describe('Components', function() {
+    describe('Components', () => {
 
-        beforeEach(function () {
+        beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
             defaultTypes: dcomp.componentTypes,
           }
         });
 
-        it('Creates component correctly', function() {
+        it('Creates component correctly', () => {
           var c = new Components({}, compOpts);
           var m = c.add({});
           expect(m instanceof Component).toEqual(true);
         });
 
-        it('Creates image component correctly', function() {
+        it('Creates image component correctly', () => {
           var c = new Components({}, compOpts);
           var m = c.add({ type: 'image' });
           expect(m instanceof ComponentImage).toEqual(true);
         });
 
-        it('Creates text component correctly', function() {
+        it('Creates text component correctly', () => {
           var c = new Components({}, compOpts);
           var m = c.add({ type: 'text' });
           expect(m instanceof ComponentText).toEqual(true);
diff --git a/test/specs/dom_components/view/ComponentImageView.js b/test/specs/dom_components/view/ComponentImageView.js
index a9169d708..6f642346d 100644
--- a/test/specs/dom_components/view/ComponentImageView.js
+++ b/test/specs/dom_components/view/ComponentImageView.js
@@ -2,52 +2,52 @@ const ComponentImageView = require('dom_components/view/ComponentImageView');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('ComponentImageView', function() {
+      describe('ComponentImageView', () => {
 
         var $fixtures;
         var $fixture;
         var model;
         var view;
 
-        before(function () {
+        before(() => {
           $fixtures = $("#fixtures");
           $fixture = $('<div class="components-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           model = new Component();
           view = new ComponentImageView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.remove();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
         });
 
-        it('Component empty', function() {
+        it('Component empty', () => {
           expect(view.el.getAttribute('onmousedown')).toEqual('return false');
           expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
         });
 
-        it('TagName is <img>', function() {
+        it('TagName is <img>', () => {
           expect(view.el.tagName).toEqual('IMG');
         });
 
-        it('Update src attribute', function() {
+        it('Update src attribute', () => {
           model.set('src', './');
           expect(view.el.getAttribute('src')).toEqual('./');
         });
 
-        it('Renders correctly', function() {
+        it('Renders correctly', () => {
           expect(view.render()).toExist();
         });
     });
diff --git a/test/specs/dom_components/view/ComponentTextView.js b/test/specs/dom_components/view/ComponentTextView.js
index 72b676d3c..bc199c4b0 100644
--- a/test/specs/dom_components/view/ComponentTextView.js
+++ b/test/specs/dom_components/view/ComponentTextView.js
@@ -2,51 +2,51 @@ const ComponentTextView = require('dom_components/view/ComponentTextView');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('ComponentTextView', function() {
+      describe('ComponentTextView', () => {
 
         var $fixtures;
         var $fixture;
         var model;
         var view;
 
-        before(function () {
+        before(() => {
           $fixtures = $("#fixtures");
           $fixture = $('<div class="components-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           model = new Component();
           view = new ComponentTextView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.remove();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
         });
 
-        it('Component empty', function() {
+        it('Component empty', () => {
           expect($fixture.html()).toEqual('<div data-highlightable="1"></div>');
         });
 
-        it('Input content is stored in model', function() {
+        it('Input content is stored in model', () => {
           //view.enableEditing();
           view.el.innerHTML = 'test';
           //view.disableEditing();
           //model.get('content').should.equal('test');
         });
 
-        it('Init with content', function() {
+        it('Init with content', () => {
           model = new Component({ content: 'test' });
-          view = new ComponentTextView({ model: model });
+          view = new ComponentTextView({ model });
           expect(view.render().el.innerHTML).toEqual('test');
         });
 
diff --git a/test/specs/dom_components/view/ComponentV.js b/test/specs/dom_components/view/ComponentV.js
index fe1493bf7..930462cf3 100644
--- a/test/specs/dom_components/view/ComponentV.js
+++ b/test/specs/dom_components/view/ComponentV.js
@@ -3,9 +3,9 @@ const Component = require('dom_components/model/Component');
 const DomComponents = require('dom_components');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('ComponentView', function() {
+      describe('ComponentView', () => {
 
         var $fixtures;
         var $fixture;
@@ -15,58 +15,58 @@ module.exports = {
         var dcomp;
         var compOpts;
 
-        before(function () {
+        before(() => {
           $fixtures = $("#fixtures");
           $fixture = $('<div class="components-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
             defaultTypes: dcomp.componentTypes,
           };
           model = new Component();
           view = new ComponentView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.remove();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
         });
 
-        it('Component empty', function() {
+        it('Component empty', () => {
           expect($fixture.html()).toEqual('<div data-highlightable="1"></div>');
         });
 
-        it('Add helper class on update of state', function() {
+        it('Add helper class on update of state', () => {
           model.set('state', 'test');
           expect($fixture.html()).toEqual('<div data-highlightable="1" class="' + hClass + '"></div>');
         });
 
-        it('Clean form helper state', function() {
+        it('Clean form helper state', () => {
           model.set('state', 'test');
           model.set('state', '');
           expect($fixture.html()).toEqual('<div data-highlightable="1" class=""></div>');
         });
 
-        it('Add helper class on status update', function() {
+        it('Add helper class on status update', () => {
           model.set('status', 'selected');
           expect($fixture.html()).toEqual('<div data-highlightable="1" class="selected"></div>');
         });
 
-        it('Get string of classes', function() {
+        it('Get string of classes', () => {
           model.set('attributes', { class: ['test', 'test2']});
           expect(view.getClasses()).toEqual('test test2');
         });
 
-        it('Update attributes', function() {
+        it('Update attributes', () => {
           model.set('attributes', {
             title: 'value',
             'data-test': 'value2',
@@ -75,7 +75,7 @@ module.exports = {
           expect(view.el.getAttribute('data-test')).toEqual('value2');
         });
 
-        it('Update style', function() {
+        it('Update style', () => {
           model.set('style', {
             color: 'red',
             float: 'left'
@@ -83,13 +83,13 @@ module.exports = {
           expect(view.el.getAttribute('style')).toEqual('color:red;float:left;');
         });
 
-        it('Clean style', function() {
+        it('Clean style', () => {
           model.set('style', { color: 'red'});
           model.set('style', {});
           expect(view.el.getAttribute('style')).toEqual('');
         });
 
-        it('Get style string', function() {
+        it('Get style string', () => {
           model.set('style',  {
             color: 'red',
             float: 'left'
@@ -97,30 +97,30 @@ module.exports = {
           expect(view.getStyleString()).toEqual('color:red;float:left;');
         });
 
-        it('Add class', function() {
+        it('Add class', () => {
           model.get('classes').add({name: 'test'});
           expect(view.el.getAttribute('class')).toEqual('test');
         });
 
-        it('Add classes', function() {
+        it('Add classes', () => {
           model.get('classes').add([{name: 'test'}, {name: 'test2'}]);
           expect(view.el.getAttribute('class')).toEqual('test test2');
         });
 
-        it('Update on remove of some class', function() {
+        it('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');
         });
 
-        it('Init with different tag', function() {
+        it('Init with different tag', () => {
           model = new Component({ tagName: 'span' });
-          view = new ComponentView({ model: model });
+          view = new ComponentView({ model });
           expect(view.render().el.tagName).toEqual('SPAN');
         });
 
-        it('Init with nested components', function() {
+        it('Init with nested components', () => {
           model = new Component({
             components: [
               { tagName: 'span'},
@@ -128,7 +128,7 @@ module.exports = {
             ]
           }, compOpts);
           view = new ComponentView({
-            model: model,
+            model,
             defaultTypes: dcomp.componentTypes,
           });
           expect(view.render().$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>');
diff --git a/test/specs/dom_components/view/ComponentsView.js b/test/specs/dom_components/view/ComponentsView.js
index ec96f8746..8f3f1b730 100644
--- a/test/specs/dom_components/view/ComponentsView.js
+++ b/test/specs/dom_components/view/ComponentsView.js
@@ -3,8 +3,8 @@ const ComponentsView = require('dom_components/view/ComponentsView');
 const Components = require('dom_components/model/Components');
 
 module.exports = {
-  run : function() {
-      describe('ComponentsView', function() {
+  run() {
+      describe('ComponentsView', () => {
 
         var $fixtures;
         var $fixture;
@@ -13,12 +13,12 @@ module.exports = {
         var dcomp;
         var compOpts;
 
-        before(function () {
+        before(() => {
           $fixtures = $("#fixtures");
           $fixture = $('<div class="components-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
             defaultTypes: dcomp.componentTypes,
@@ -32,25 +32,25 @@ module.exports = {
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.collection.reset();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
         });
 
-        it("Collection is empty", function (){
+        it("Collection is empty", () => {
           expect(view.$el.html()).toNotExist();
         });
 
-        it("Add new component", function (){
+        it("Add new component", () => {
           sinon.stub(view, "addToCollection");
           view.collection.add({});
           expect(view.addToCollection.calledOnce).toEqual(true);
         });
 
-        it("Render new component", function (){
+        it("Render new component", () => {
           view.collection.add({});
           expect(view.$el.html()).toExist();
         });