Update style manager tests

test/specs/style_manager/index.js

@@ -11,125 +11,124 @@ const PropertyCompositeView = require('./view/PropertyCompositeView');
 const PropertyStackView = require('./view/PropertyStackView');
 const LayerView = require('./view/LayerView');
 
-describe.only('StyleManager', function() {
+describe('StyleManager', () => {
 
-  describe('Main', function() {
-    /*
+  describe('Main', () => {
     var obj;
 
-    beforeEach(function () {
+    beforeEach(() => {
       obj = new StyleManager().init({
         sectors: []
       });
     });
 
-    afterEach(function () {
+    afterEach(() => {
       obj = null;
     });
 
-    it('Object exists', function() {
-      obj.should.be.ok;
+    it('Object exists', () => {
+      expect(obj).toExist();
     });
 
-    it('No sectors', function() {
-      obj.getSectors().length.should.equal(0);
+    it('No sectors', () => {
+      expect(obj.getSectors().length).toEqual(0);
     });
 
-    it('Add sector', function() {
+    it('Add sector', () => {
       obj.addSector('test', {
         name: 'Test name'
       });
-      obj.getSectors().length.should.equal(1);
       var sector = obj.getSectors().at(0);
-      sector.get('id').should.equal('test');
-      sector.get('name').should.equal('Test name');
+      expect(obj.getSectors().length).toEqual(1);
+      expect(sector.get('id')).toEqual('test');
+      expect(sector.get('name')).toEqual('Test name');
     });
 
-     it('Add sectors', function() {
+     it('Add sectors', () => {
       obj.addSector('test', {});
       obj.addSector('test2', {});
-      obj.getSectors().length.should.equal(2);
+      expect(obj.getSectors().length).toEqual(2);
      });
 
-    it("Can't create more than one sector with the same id", function() {
+    it("Can't create more than one sector with the same id", () => {
       var sect1 = obj.addSector('test', {});
       var sect2 = obj.addSector('test', {});
-      obj.getSectors().length.should.equal(1);
-      sect1.should.deep.equal(sect2);
+      expect(obj.getSectors().length).toEqual(1);
+      expect(sect1).toEqual(sect2);
     });
 
-    it('Get inexistent sector', function() {
-      (obj.getSector('test') == null).should.equal(true);
+    it('Get inexistent sector', () => {
+      expect(obj.getSector('test')).toEqual(null);
     });
 
-    it('Get sector', function() {
+    it('Get sector', () => {
       var sect1 = obj.addSector('test', { name: 'Test' });
       var sect2 = obj.getSector('test');
-      sect1.should.deep.equal(sect2);
+      expect(sect1).toEqual(sect2);
     });
 
-    it('Add property to inexistent sector', function() {
-      (obj.addProperty('test', {}) == null).should.equal(true);
+    it('Add property to inexistent sector', () => {
+      expect(obj.addProperty('test', {})).toEqual(null);
     });
 
-    it('Add property', function() {
+    it('Add property', () => {
       obj.addSector('test', {});
-      (obj.addProperty('test', {}) == null).should.equal(false);
-      obj.getProperties('test').length.should.equal(1);
+      expect(obj.addProperty('test', {})).toExist();
+      expect(obj.getProperties('test').length).toEqual(1);
     });
 
-    it('Check added property', function() {
+    it('Check added property', () => {
       obj.addSector('test', {});
       var prop = obj.addProperty('test', {
         'name': 'test',
       });
-      prop.get('name').should.equal('test');
+      expect(prop.get('name')).toEqual('test');
     });
 
-    it('Add properties', function() {
+    it('Add properties', () => {
       obj.addSector('test', {});
       obj.addProperty('test', [{}, {}]);
-      obj.getProperties('test').length.should.equal(2);
+      expect(obj.getProperties('test').length).toEqual(2);
     });
 
-    it('Get property from inexistent sector', function() {
-      (obj.getProperty('test', 'test-prop') == null).should.equal(true);
+    it('Get property from inexistent sector', () => {
+      expect(obj.getProperty('test', 'test-prop')).toEqual(null);
     });
 
-    it("Can't get properties without proper name", function() {
+    it("Can't get properties without proper name", () => {
       obj.addSector('test', {});
       obj.addProperty('test', [{}, {}]);
-      obj.getProperty('test', 'test-prop').should.be.empty;
+      expect(obj.getProperty('test', 'test-prop')).toEqual([]);
     });
 
-    it("Get property with proper name", function() {
+    it("Get property with proper name", () => {
       obj.addSector('test', {});
       var prop1 = obj.addProperty('test', {property: 'test-prop'});
       var prop2 = obj.getProperty('test', 'test-prop');
-      prop1.should.deep.equal(prop2);
+      expect(prop1).toEqual(prop2);
     });
 
-    it("Get properties with proper name", function() {
+    it("Get properties with proper name", () => {
       obj.addSector('test', {});
       var prop1 = obj.addProperty('test',[
         {property: 'test-prop'},
         {property: 'test-prop'}
       ]);
-      obj.getProperty('test', 'test-prop').length.should.equal(2);
+      expect(obj.getProperty('test', 'test-prop').length).toEqual(2);
     });
 
-    it('Get inexistent properties', function() {
-      (obj.getProperties('test') == null).should.equal(true);
-      (obj.getProperties() == null).should.equal(true);
+    it('Get inexistent properties', () => {
+      expect(obj.getProperties('test')).toEqual(null);
+      expect(obj.getProperties()).toEqual(null);
     });
 
-    it('Renders correctly', function() {
-      obj.render().should.be.ok;
+    it('Renders correctly', () => {
+      expect(obj.render()).toExist();
     });
 
-    describe('Init with configuration', function() {
+    describe('Init with configuration', () => {
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new StyleManager().init({
           sectors: [{
             id: 'dim',
@@ -152,32 +151,30 @@ describe.only('StyleManager', function() {
         });
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Sectors added', function() {
-        obj.getSectors().length.should.equal(2);
+      it('Sectors added', () => {
+        expect(obj.getSectors().length).toEqual(2);
         var sect1 = obj.getSector('dim');
-        sect1.get('name').should.equal('Dimension');
+        expect(sect1.get('name')).toEqual('Dimension');
       });
 
-      it('Properties added', function() {
+      it('Properties added', () => {
         var sect1 = obj.getSector('dim');
         var sect2 = obj.getSector('pos');
-        sect1.get('properties').length.should.equal(2);
-        sect2.get('properties').length.should.equal(1);
+        expect(sect1.get('properties').length).toEqual(2);
+        expect(sect2.get('properties').length).toEqual(1);
       });
 
-      it('Property is correct', function() {
+      it('Property is correct', () => {
         var prop1 = obj.getProperty('dim', 'width');
-        prop1.get('name').should.equal('Width');
+        expect(prop1.get('name')).toEqual('Width');
       });
 
     });
 
-    */
-
     Models.run();
     SectorView.run();
     SectorsView.run();

test/specs/style_manager/model/Models.js

@@ -7,14 +7,14 @@ const Layers = require('style_manager/model/Layers');
 const PropertyFactory = require('style_manager/model/PropertyFactory');
 
 module.exports = {
-  run : function(){
+  run() {
 
-    describe('Sector', function() {
+    describe('Sector', () => {
 
       var obj;
       var confToExt;
 
-      beforeEach(function () {
+      beforeEach(() => {
         confToExt = {
           buildProps: ['display', 'float'],
           properties: [{
@@ -28,26 +28,26 @@ module.exports = {
         obj = new Sector();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Has id property', function() {
+      it('Has id property', () => {
         expect(obj.has('id')).toEqual(true);
       });
 
-      it('Has no properties', function() {
+      it('Has no properties', () => {
         expect(obj.get('properties').length).toEqual(0);
       });
 
-      it('Init with properties', function() {
+      it('Init with properties', () => {
         obj = new Sector({
           properties: [{}, {}]
         });
         expect(obj.get('properties').length).toEqual(2);
       });
 
-      it('Build properties', function() {
+      it('Build properties', () => {
         var res = obj.buildProperties(['display', 'float']);
         expect(res.length).toEqual(2);
         expect(res[0]).toEqual({
@@ -63,7 +63,7 @@ module.exports = {
         });
       });
 
-      it('Extend properties', function() {
+      it('Extend properties', () => {
         obj = new Sector(confToExt);
         expect(obj.get('properties').length).toEqual(3);
         var prop0 = obj.get('properties').at(0);
@@ -71,7 +71,7 @@ module.exports = {
         expect(prop0.get('defaults')).toEqual('block');
       });
 
-      it('Do not extend properties', function() {
+      it('Do not extend properties', () => {
         confToExt.extendBuilded = 0;
         obj = new Sector(confToExt);
         expect(obj.get('properties').length).toEqual(3);
@@ -80,7 +80,7 @@ module.exports = {
         expect(prop0.get('defaults')).toEqual('');
       });
 
-      it('Extend composed properties', function() {
+      it('Extend composed properties', () => {
         obj = new Sector({
           buildProps: ['margin', 'float'],
           properties: [{
@@ -106,118 +106,118 @@ module.exports = {
 
     });
 
-    describe('Sectors', function() {
+    describe('Sectors', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new Sectors();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Object exists', function() {
+      it('Object exists', () => {
         expect(obj).toExist();
       });
 
     });
 
-    describe('Property', function() {
+    describe('Property', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new Property();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Has property field', function() {
+      it('Has property field', () => {
         expect(obj.has('property')).toEqual(true);
       });
 
-      it('Has no properties', function() {
+      it('Has no properties', () => {
         expect(obj.get('properties').length).toEqual(0);
       });
 
-      it('Has no layers', function() {
+      it('Has no layers', () => {
         expect(obj.get('layers').length).toEqual(0);
       });
 
     });
 
-    describe('Properties', function() {
+    describe('Properties', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new Properties();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Object exists', function() {
+      it('Object exists', () => {
         expect(obj).toExist();
       });
 
     });
 
-    describe('Layer', function() {
+    describe('Layer', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new Layer();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Has index property', function() {
+      it('Has index property', () => {
         expect(obj.has('index')).toEqual(true);
       });
 
-      it('Is active', function() {
+      it('Is active', () => {
         expect(obj.get('active')).toEqual(true);
       });
 
     });
 
-    describe('Layers', function() {
+    describe('Layers', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new Layers();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Object exists', function() {
+      it('Object exists', () => {
         expect(obj).toExist();
       });
 
-      it('Init index on add', function() {
+      it('Init index on add', () => {
         var model = obj.add({});
         expect(model.get('index')).toEqual(1);
       });
 
-      it('Increment index', function() {
+      it('Increment index', () => {
         var model = obj.add({});
         var model2 = obj.add({});
         expect(model2.get('index')).toEqual(2);
       });
 
-      it('Cache index', function() {
+      it('Cache index', () => {
         var model = obj.add({});
         var model2 = obj.add({});
         obj.remove(model2);
@@ -225,7 +225,7 @@ module.exports = {
         expect(model3.get('index')).toEqual(3);
       });
 
-      it('Reset index on reset', function() {
+      it('Reset index on reset', () => {
         var model = obj.add({});
         var model2 = obj.add({});
         obj.reset();
@@ -234,23 +234,23 @@ module.exports = {
 
     });
 
-    describe('PropertyFactory', function() {
+    describe('PropertyFactory', () => {
 
       var obj;
 
-      beforeEach(function () {
+      beforeEach(() => {
         obj = new PropertyFactory();
       });
 
-      afterEach(function () {
+      afterEach(() => {
         obj = null;
       });
 
-      it('Object exists', function() {
+      it('Object exists', () => {
         expect(obj).toExist();
       });
 
-      it('Build single prop', function() {
+      it('Build single prop', () => {
         expect(obj.build('float')).toEqual([{
           property: 'float',
           type: 'radio',
@@ -263,7 +263,7 @@ module.exports = {
         }]);
       });
 
-      it('Build display', function() {
+      it('Build display', () => {
         expect(obj.build('display')).toEqual([{
           property: 'display',
           type: 'select',
@@ -277,7 +277,7 @@ module.exports = {
         }]);
       });
 
-      it('Build position', function() {
+      it('Build position', () => {
         expect(obj.build('position')).toEqual([{
           property: 'position',
           type: 'radio',
@@ -291,7 +291,7 @@ module.exports = {
         }]);
       });
 
-      it('Build top, left, right, bottom', function() {
+      it('Build top, left, right, bottom', () => {
         var res = {
           type: 'integer',
           units: ['px','%'],
@@ -307,7 +307,7 @@ module.exports = {
         expect(obj.build('left')).toEqual([res]);
       });
 
-      it('Build width and height family', function() {
+      it('Build width and height family', () => {
         var res = {
           type: 'integer',
           units: ['px','%'],
@@ -329,7 +329,7 @@ module.exports = {
         expect(obj.build('max-width')).toEqual([res]);
       });
 
-      it('Build margin', function() {
+      it('Build margin', () => {
         var res = {
           property: 'margin',
           type: 'composite',
@@ -362,7 +362,7 @@ module.exports = {
         expect(obj.build('margin')).toEqual([res]);
       });
 
-      it('Build padding', function() {
+      it('Build padding', () => {
         var res = {
           property: 'padding',
           type: 'composite',
@@ -395,7 +395,7 @@ module.exports = {
         expect(obj.build('padding')).toEqual([res]);
       });
 
-      it('Build font-family', function() {
+      it('Build font-family', () => {
         var ss = ', sans-serif';
         var ms = ', monospace';
         var ff = 'font-family: ';
@@ -423,7 +423,7 @@ module.exports = {
         expect(obj.build('font-family')).toEqual([res]);
       });
 
-      it('Build font-size', function() {
+      it('Build font-size', () => {
         var res = {
           type: 'integer',
           units: ['px','em', 'rem', '%'],
@@ -448,7 +448,7 @@ module.exports = {
         expect(obj.build('font-size')).toEqual([res]);
       });
 
-      it('Build letter-spacing', function() {
+      it('Build letter-spacing', () => {
         var res = {
           type: 'integer',
           units: ['px','em', 'rem', '%'],
@@ -463,7 +463,7 @@ module.exports = {
         expect(obj.build('letter-spacing')).toEqual([res]);
       });
 
-      it('Build font-weight', function() {
+      it('Build font-weight', () => {
         var res = {
           type: 'select',
           defaults: '400',
@@ -481,7 +481,7 @@ module.exports = {
         expect(obj.build('font-weight')).toEqual([res]);
       });
 
-      it('Build color', function() {
+      it('Build color', () => {
         var res = {
           property: 'color',
           type: 'color',
@@ -490,7 +490,7 @@ module.exports = {
         expect(obj.build('color')).toEqual([res]);
       });
 
-      it('Build line-height', function() {
+      it('Build line-height', () => {
         var res = {
           type: 'integer',
           units: ['px','em', 'rem', '%'],
@@ -505,7 +505,7 @@ module.exports = {
         expect(obj.build('line-height')).toEqual([res]);
       });
 
-      it('Build text-align', function() {
+      it('Build text-align', () => {
         var res = {
           type: 'radio',
           defaults: 'left',
@@ -518,7 +518,7 @@ module.exports = {
         expect(obj.build('text-align')).toEqual([res]);
       });
 
-      it('Build text-shadow', function() {
+      it('Build text-shadow', () => {
         var res = {
           type: 'stack',
           preview: true,
@@ -548,7 +548,7 @@ module.exports = {
         expect(obj.build('text-shadow')).toEqual([res]);
       });
 
-      it('Build border-radius-c', function() {
+      it('Build border-radius-c', () => {
         var res = {
           type: 'integer',
           units: ['px', '%'],
@@ -559,7 +559,7 @@ module.exports = {
         expect(obj.build('border-radius-c')).toEqual([res]);
       });
 
-      it('Build border-radius', function() {
+      it('Build border-radius', () => {
         var res = {
           property: 'border-radius',
           type: 'composite',
@@ -593,7 +593,7 @@ module.exports = {
         expect(obj.build('border-radius')).toEqual([res]);
       });
 
-      it('Build background-color', function() {
+      it('Build background-color', () => {
         var res = {
           type : 'color',
           defaults: 'none'
@@ -602,7 +602,7 @@ module.exports = {
         expect(obj.build('background-color')).toEqual([res]);
       });
 
-      it('Build border', function() {
+      it('Build border', () => {
         var res = {
           property: 'border',
           type: 'composite',
@@ -634,7 +634,7 @@ module.exports = {
         expect(obj.build('border')).toEqual([res]);
       });
 
-      it('Build box-shadow', function() {
+      it('Build box-shadow', () => {
         var res = {
           property: 'box-shadow',
           type: 'stack',
@@ -675,7 +675,7 @@ module.exports = {
         expect(obj.build('box-shadow')).toEqual([res]);
       });
 
-      it('Build background', function() {
+      it('Build background', () => {
         var res = {
           property: 'background',
           type: 'stack',
@@ -728,7 +728,7 @@ module.exports = {
         expect(obj.build('background')).toEqual([res]);
       });
 
-      it('Build transition', function() {
+      it('Build transition', () => {
         var res = {
           property: 'transition',
           type: 'stack',
@@ -763,7 +763,7 @@ module.exports = {
         expect(obj.build('transition')).toEqual([res]);
       });
 
-      it('Build perspective', function() {
+      it('Build perspective', () => {
         var res = {
           property: 'perspective',
           type: 'integer',
@@ -774,7 +774,7 @@ module.exports = {
         expect(obj.build('perspective')).toEqual([res]);
       });
 
-      it('Build transform', function() {
+      it('Build transform', () => {
         var res = {
           property: 'transform',
           type: 'composite',
@@ -816,7 +816,7 @@ module.exports = {
         expect(obj.build('transform')).toEqual([res]);
       });
 
-      it('Build cursor', function() {
+      it('Build cursor', () => {
         var res = {
           type: 'select',
           property: 'cursor',
@@ -834,7 +834,7 @@ module.exports = {
         expect(obj.build('cursor')).toEqual([res]);
       });
 
-      it('Build overflow', function() {
+      it('Build overflow', () => {
         var res = {
           type: 'select',
           property: 'overflow',

test/specs/style_manager/view/LayerView.js

@@ -2,9 +2,9 @@ const LayerView = require('style_manager/view/LayerView');
 const Layers = require('style_manager/model/Layers');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('LayerView', function() {
+      describe('LayerView', () => {
 
         var component;
         var $fixtures;
@@ -13,33 +13,33 @@ module.exports = {
         var model;
         var view;
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="layer-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           var coll = new Layers();
           model = coll.add({});
           view = new LayerView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.remove();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
           view = null;
           model = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var layer = view.el;
           expect($fixture.get(0).querySelector('.layer')).toExist();
           expect(layer.querySelector('#label')).toExist();
@@ -49,24 +49,24 @@ module.exports = {
           expect(layer.querySelector('#preview')).toExist();
         });
 
-        it('getIndex returns default value', function() {
+        it('getIndex returns default value', () => {
           expect(view.getIndex()).toEqual(0);
         });
 
-        it('No preview', function() {
+        it('No preview', () => {
           var style = view.el.querySelector('#preview').style;
           expect(style.cssText).toNotExist();
         });
 
-        it('Changes on value trigger onPreview', function() {
+        it('Changes on value trigger onPreview', () => {
           var called = 0;
-          view.onPreview = function(){called = 1};
+          view.onPreview = () => {called = 1};
           view.model.set('preview', true);
           view.model.set('value', 'test');
           expect(called).toEqual(1);
         });
 
-        it('Update props', function() {
+        it('Update props', () => {
           view.model.set('props', $('<div>'));
           expect(view.el.querySelector('#inputs').innerHTML).toExist();
           expect(view.model.get('props')).toEqual(null);

test/specs/style_manager/view/PropertyColorView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyColorView', function() {
+      describe('PropertyColorView', () => {
 
         var component;
         var $fixtures;
@@ -17,13 +17,13 @@ module.exports = {
         var propValue = '#fff';
         var defValue = 'test2value';
 
-        before(function () {
-          $.fn.spectrum = function(){};
+        before(() => {
+          $.fn.spectrum = () => {};
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           model = new Property({
@@ -31,63 +31,63 @@ module.exports = {
             property: propName
           });
           view = new PropertyColorView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
           view = null;
           model = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Inputs rendered', function() {
+        it('Inputs rendered', () => {
           var prop = view.el;
           expect(prop.querySelector('input[type=text]')).toExist();
           expect(prop.querySelector('.field-color-picker')).toExist();
         });
 
-        it('Inputs should exist', function() {
+        it('Inputs should exist', () => {
           expect(view.$input).toExist();
           expect(view.$color).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
           expect(view.$input.val()).toNotExist();
         });
 
-        it('Update model on setValue', function() {
+        it('Update model on setValue', () => {
           view.setValue(propValue);
           expect(view.model.get('value')).toEqual(propValue);
           expect(view.$input.val()).toEqual(propValue);
         });
 
-        it('Update model on input change', function() {
+        it('Update model on input change', () => {
           view.$input.val(propValue).trigger('change');
           expect(view.model.get('value')).toEqual(propValue);
         });
 
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.getInputValue()).toEqual(propValue);
         });
 
-        it('Update target on value change', function() {
+        it('Update target on value change', () => {
           view.selectedComponent = component;
           view.model.set('value', propValue);
           var compStyle = view.selectedComponent.get('style');
@@ -96,19 +96,19 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             target.model = component;
             view = new PropertyColorView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -117,7 +117,7 @@ module.exports = {
             expect(view.getInputValue()).toEqual(propValue);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -131,9 +131,9 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             component = new Component();
             model = new Property({
               type: 'color',
@@ -141,17 +141,17 @@ module.exports = {
               defaults: propValue,
             });
             view = new PropertyColorView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(propValue);
           });
 
-          it('Input value is as default', function() {
+          it('Input value is as default', () => {
             expect(view.$input.val()).toEqual(propValue);
           });
 

test/specs/style_manager/view/PropertyCompositeView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyCompositeView', function() {
+      describe('PropertyCompositeView', () => {
 
         var component;
         var $fixtures;
@@ -36,51 +36,51 @@ module.exports = {
           },
         ];
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           target.model = component;
           model = new Property({
             type: 'composite',
             property: propName,
-            properties: properties
+            properties
           });
           view = new PropertyCompositeView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
           view = null;
           model = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Properties rendered', function() {
+        it('Properties rendered', () => {
           var prop = view.el;
           expect(prop.querySelector('.properties')).toExist();
         });
 
-        it('Properties rendered correctly', function() {
+        it('Properties rendered correctly', () => {
           var children = view.el.querySelector('.properties').children;
           expect(children.length).toEqual(properties.length + 1);
           expect(children[0].id).toEqual(properties[0].property);
@@ -88,20 +88,20 @@ module.exports = {
           expect(children[2].id).toEqual(properties[2].property);
         });
 
-        it('Props should exist', function() {
+        it('Props should exist', () => {
           expect(view.$props).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
         });
 
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.$input.val()).toEqual(propValue);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
           var prop2Val;
           var prop3Val;
@@ -111,14 +111,14 @@ module.exports = {
           var $prop2;
           var $prop3;
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Property({
               type: 'composite',
               property: propName,
-              properties: properties
+              properties
             });
             view = new PropertyCompositeView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
@@ -132,19 +132,19 @@ module.exports = {
             $prop3 = view.$props.find('#' + properties[2].property + ' select');
           });
 
-          it('Update model on input change', function() {
+          it('Update model on input change', () => {
             $prop1.val(propValue).trigger('change');
             $prop3.val(prop3Val).trigger('change');
             expect(view.model.get('value')).toEqual(finalResult);
           });
 
-          it('Update value on models change', function() {
+          it('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);
           });
 
-          it('Update target on value change', function() {
+          it('Update target on value change', () => {
             $prop1.val(propValue).trigger('change');
             var compStyle = view.getTarget().get('style');
             var assertStyle = {};
@@ -152,15 +152,15 @@ module.exports = {
             expect(compStyle).toEqual(assertStyle);
           });
 
-          it('Update target on detached value change', function() {
+          it('Update target on detached value change', () => {
             model = new Property({
               type: 'composite',
               property: propName,
-              properties: properties,
+              properties,
               detached: true,
             });
             view = new PropertyCompositeView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.html(view.render().el);
@@ -172,7 +172,7 @@ module.exports = {
             expect(compStyle).toEqual(assertStyle);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = finalResult;
             component.set('style', style);
@@ -181,7 +181,7 @@ module.exports = {
             expect($prop3.val()).toEqual(prop3Val);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = finalResult;
             component.set('style', style);
@@ -194,7 +194,7 @@ module.exports = {
             expect($prop3.val()).toEqual('val1');
           });
 
-          it('The value is correctly extracted from the composite string', function() {
+          it('The value is correctly extracted from the composite string', () => {
             var style = {};
             style[propName] = 'value1 value2 value3 value4';
             component.set('style', style);
@@ -203,7 +203,7 @@ module.exports = {
             expect(view.valueOnIndex(4)).toEqual(null);
           });
 
-          it('Build value from properties', function() {
+          it('Build value from properties', () => {
             view.model.get('properties').at(0).set('value', propValue);
             view.model.get('properties').at(2).set('value', prop3Val);
             expect(view.build()).toEqual(finalResult);
@@ -211,23 +211,23 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Property({
               type: 'composite',
               property: propName,
-              properties: properties,
+              properties,
               defaults: defValue,
             });
             view = new PropertyCompositeView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(defValue);
           });
 

test/specs/style_manager/view/PropertyIntegerView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyIntegerView', function() {
+      describe('PropertyIntegerView', () => {
 
         var component;
         var $fixtures;
@@ -23,73 +23,73 @@ module.exports = {
         var maxValue = 75;
         var unitsElSel = '.field-units select';
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           model = new Property({
             type: 'integer',
-            units: units,
+            units,
             property: propName
           });
           view = new PropertyIntegerView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
           view = null;
           model = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Inputs rendered', function() {
+        it('Inputs rendered', () => {
           var prop = view.el;
           expect(prop.querySelector('input[type=text]')).toExist();
           expect(prop.querySelector(unitsElSel)).toExist();
         });
 
-        it('Units rendered', function() {
+        it('Units rendered', () => {
           var select = view.el.querySelector(unitsElSel);
           expect(select.children.length).toEqual(units.length);
         });
 
-        it('Units rendered correctly', function() {
+        it('Units rendered correctly', () => {
           var children = view.el.querySelector(unitsElSel).children;
           expect(children[0].textContent).toEqual(units[0]);
           expect(children[1].textContent).toEqual(units[1]);
           expect(children[2].textContent).toEqual(units[2]);
         });
 
-        it('Inputs should exist', function() {
+        it('Inputs should exist', () => {
           expect(view.$input).toExist();
           expect(view.$unit).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
           expect(view.model.get('unit')).toEqual('px');
         });
 
-        it('Update model on setValue', function() {
+        it('Update model on setValue', () => {
           view.setValue(intValue + unitValue);
           expect(view.model.get('value')).toEqual(parseFloat(intValue));
           expect(view.model.get('unit')).toEqual(unitValue);
@@ -97,22 +97,22 @@ module.exports = {
           expect(view.$unit.val()).toEqual(unitValue);
         });
 
-        it('Update model on input change', function() {
+        it('Update model on input change', () => {
           view.$input.val(123).trigger('change');
           expect(view.model.get('value')).toEqual(123);
         });
 
-        it('Update model on unit change', function() {
+        it('Update model on unit change', () => {
           view.$unit.val(units[1]).trigger('change');
           expect(view.model.get('unit')).toEqual(units[1]);
         });
 
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', intValue);
           expect(view.getInputValue()).toEqual(intValue);
         });
 
-        it('Update target on value change', function() {
+        it('Update target on value change', () => {
           view.selectedComponent = component;
           view.model.set('value', intValue);
           var compStyle = view.selectedComponent.get('style');
@@ -121,19 +121,19 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             target.model = component;
             view = new PropertyIntegerView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -142,7 +142,7 @@ module.exports = {
             expect(view.getInputValue()).toEqual(intValue);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -158,13 +158,13 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             component = new Component();
             model = new Property({
               type: 'integer',
-              units: units,
+              units,
               property: propName,
               defaults: intValue,
               min: minValue,
@@ -172,29 +172,29 @@ module.exports = {
               unit: units[1],
             });
             view = new PropertyIntegerView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(parseInt(intValue));
             expect(view.model.get('unit')).toEqual(units[1]);
           });
 
-          it('Input value is as default', function() {
+          it('Input value is as default', () => {
             expect(view.$input.val()).toEqual(intValue);
             expect(view.$unit.val()).toEqual(units[1]);
           });
 
-          it('Input follows min', function() {
+          it('Input follows min', () => {
             view.$input.val(minValue - 50).trigger('change');
             expect(view.model.get('value')).toEqual(minValue);
             expect(view.$input.val()).toEqual(minValue + "");
           });
 
-          it('Input follows max', function() {
+          it('Input follows max', () => {
             view.$input.val(maxValue + 50).trigger('change');
             expect(view.model.get('value')).toEqual(maxValue);
             expect(view.$input.val()).toEqual(maxValue + "");

test/specs/style_manager/view/PropertyRadioView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyRadioView', function() {
+      describe('PropertyRadioView', () => {
 
         var component;
         var $fixtures;
@@ -21,12 +21,12 @@ module.exports = {
               { name: 'test2', value: 'test2value'}
             ];
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           model = new Property({
@@ -35,39 +35,39 @@ module.exports = {
             property: propName
           });
           view = new PropertyRadioView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Radio rendered', function() {
+        it('Radio rendered', () => {
           var prop = view.el;
           expect(prop.querySelector('input[type=radio]')).toExist();
         });
 
-        it('Options rendered', function() {
+        it('Options rendered', () => {
           var input = view.el.querySelector('#input-holder');
           expect(input.children.length).toEqual(options.length);
         });
 
-        it('Options rendered correctly', function() {
+        it('Options rendered correctly', () => {
           var children = view.el.querySelector('#input-holder').children;
           expect(children[0].querySelector('label').textContent).toEqual('test1value');
           expect(children[1].querySelector('label').textContent).toEqual('test2');
@@ -77,26 +77,26 @@ module.exports = {
           expect(children[1].querySelector('label').getAttribute('title')).toEqual(null);
         });
 
-        it('Input should exist', function() {
+        it('Input should exist', () => {
           expect(view.$input).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
         });
 
-        it('Update model on input change', function() {
+        it('Update model on input change', () => {
           view.setValue(propValue);
           expect(view.model.get('value')).toEqual(propValue);
           expect(view.getInputValue()).toEqual(propValue);
         });
 
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.getInputValue()).toEqual(propValue);
         });
 
-        it('Update target on value change', function() {
+        it('Update target on value change', () => {
           view.selectedComponent = component;
           view.model.set('value', propValue);
           var compStyle = view.selectedComponent.get('style');
@@ -105,19 +105,19 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             target.model = component;
             view = new PropertyRadioView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -126,7 +126,7 @@ module.exports = {
             expect(view.getInputValue()).toEqual(propValue);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -140,9 +140,9 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             component = new Component();
             model = new Property({
               type: 'select',
@@ -151,17 +151,17 @@ module.exports = {
               property: propName
             });
             view = new PropertyRadioView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(defValue);
           });
 
-          it('Input value is as default', function() {
+          it('Input value is as default', () => {
             expect(view.getInputValue()).toEqual(defValue);
           });
 

test/specs/style_manager/view/PropertySelectView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertySelectView', function() {
+      describe('PropertySelectView', () => {
 
         var component;
         var $fixtures;
@@ -21,12 +21,12 @@ module.exports = {
               {name: 'test2', value: 'test2value'}
             ];
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           model = new Property({
@@ -35,39 +35,39 @@ module.exports = {
             property: propName
           });
           view = new PropertySelectView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Select rendered', function() {
+        it('Select rendered', () => {
           var prop = view.el;
           expect(prop.querySelector('select')).toExist();
         });
 
-        it('Options rendered', function() {
+        it('Options rendered', () => {
           var select = view.el.querySelector('select');
           expect(select.children.length).toEqual(options.length);
         });
 
-        it('Options rendered correctly', function() {
+        it('Options rendered correctly', () => {
           var select = view.el.querySelector('select');
           var children = select.children;
           expect(children[0].value).toEqual(options[0].value);
@@ -78,25 +78,25 @@ module.exports = {
           expect(children[1].getAttribute('style')).toEqual(null);
         });
 
-        it('Input should exist', function() {
+        it('Input should exist', () => {
           expect(view.$input).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
         });
 
-        it('Update model on input change', function() {
+        it('Update model on input change', () => {
           view.$input.val(propValue).trigger('change');
           expect(view.model.get('value')).toEqual(propValue);
         });
 
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.$input.val()).toEqual(propValue);
         });
 
-        it('Update target on value change', function() {
+        it('Update target on value change', () => {
           view.selectedComponent = component;
           view.model.set('value', propValue);
           var compStyle = view.selectedComponent.get('style');
@@ -105,19 +105,19 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             target.model = component;
             view = new PropertySelectView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -126,7 +126,7 @@ module.exports = {
             expect(view.$input.val()).toEqual(propValue);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -140,9 +140,9 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             component = new Component();
             model = new Property({
               type: 'select',
@@ -151,17 +151,17 @@ module.exports = {
               property: propName
             });
             view = new PropertySelectView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(defValue);
           });
 
-          it('Empty value as default', function() {
+          it('Empty value as default', () => {
             options = [
                 {value: 'test1value', name: 'test1'},
                 {value: 'test2value', name: 'test2'},
@@ -175,13 +175,13 @@ module.exports = {
               property: 'emptyDefault'
             });
             view = new PropertySelectView({
-              model: model
+              model
             });
             $fixture.html(view.render().el);
             expect(view.$input.val()).toEqual('');
           });
 
-          it('Input value is as default', function() {
+          it('Input value is as default', () => {
             expect(view.$input.val()).toEqual(defValue);
           });
 

test/specs/style_manager/view/PropertyStackView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyStackView', function() {
+      describe('PropertyStackView', () => {
 
         var component;
         var $fixtures;
@@ -41,39 +41,39 @@ module.exports = {
           },
         ];
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           target.model = component;
           model = new Property({
             type: 'stack',
             property: propName,
-            properties: properties
+            properties
           });
           view = new PropertyStackView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
           view = null;
           model = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
@@ -81,15 +81,15 @@ module.exports = {
           expect(prop.querySelector('#add')).toExist();
         });
 
-        it('Layers rendered', function() {
+        it('Layers rendered', () => {
           expect(view.el.querySelector('.layers')).toExist();
         });
 
-        it('Layers should exist', function() {
+        it('Layers should exist', () => {
           expect(view.$props).toExist();
         });
 
-        it('Layers rendered correctly', function() {
+        it('Layers rendered correctly', () => {
           var children = view.$props.get(0).children;
           expect(children.length).toEqual(properties.length + 1);
           expect(children[0].id).toEqual(properties[0].property);
@@ -97,25 +97,25 @@ module.exports = {
           expect(children[2].id).toEqual(properties[2].property);
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
         });
 
-        it('Layers container is empty', function() {
+        it('Layers container is empty', () => {
           var layers = view.el.querySelector('.layers');
           expect(layers.innerHTML).toNotExist();
         });
 
-        describe('With layers', function() {
+        describe('With layers', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Property({
               type: 'stack',
               property: propName,
-              properties: properties,
+              properties,
             });
             view = new PropertyStackView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
@@ -123,27 +123,27 @@ module.exports = {
             model.get('layers').add(layers);
           });
 
-          it('Layers inserted', function() {
+          it('Layers inserted', () => {
             expect(view.getLayers().length).toEqual(layers.length);
           });
 
-          it('Get value on index', function() {
+          it('Get value on index', () => {
             view.model.set('stackIndex', 1);
             expect(view.valueOnIndex(1)).toEqual('lval22');
           });
 
-          it('createValue merges layers', function() {
+          it('createValue merges layers', () => {
             expect(view.createValue()).toEqual('lval1, lval2 lval22, lval3 lval32 lval33');
           });
 
-          it('Add layer', function() {
+          it('Add layer', () => {
             view.addLayer();
             expect(view.getLayers().length).toEqual(layers.length + 1);
           });
 
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
           var prop2Val;
           var prop3Val;
@@ -153,14 +153,14 @@ module.exports = {
           var $prop2;
           var $prop3;
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Property({
               type: 'stack',
               property: propName,
-              properties: properties
+              properties
             });
             view = new PropertyStackView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
@@ -175,19 +175,19 @@ module.exports = {
             $prop3 = view.$props.find('#' + properties[2].property + ' select');
           });
 
-          it('Update model on input change', function() {
+          it('Update model on input change', () => {
             $prop1.val(propValue).trigger('change');
             $prop3.val(prop3Val).trigger('change');
             expect(view.model.get('value')).toEqual(finalResult);
           });
 
-          it('Update value on models change', function() {
+          it('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);
           });
 
-          it('Update target on value change', function() {
+          it('Update target on value change', () => {
             $prop1.val(propValue).trigger('change');
             var compStyle = view.getTarget().get('style');
             var assertStyle = {};
@@ -195,7 +195,7 @@ module.exports = {
             expect(compStyle).toEqual(assertStyle);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             var finalResult2 = 'A B C';
             style[propName] = finalResult + ', ' + finalResult2;
@@ -206,7 +206,7 @@ module.exports = {
             expect(layers.at(1).get('value')).toEqual(finalResult2);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             var finalResult2 = 'A2 B2 C2';
             style[propName] = finalResult;
@@ -220,7 +220,7 @@ module.exports = {
             expect(layers.at(1).get('value')).toEqual(finalResult2);
           });
 
-          it('The value is correctly extracted from the composite string', function() {
+          it('The value is correctly extracted from the composite string', () => {
             var style = {};
             style[propName] = 'value1 value2, value3 value4';
             component.set('style', style);
@@ -232,7 +232,7 @@ module.exports = {
 
           });
 
-          it('The value is correctly extracted from the string with functions', function() {
+          it('The value is correctly extracted from the string with functions', () => {
             var style = {};
             style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb,   aAS5b, sS.6b) value3';
             component.set('style', style);
@@ -243,7 +243,7 @@ module.exports = {
             expect(view.valueOnIndex(2)).toEqual(null);
           });
 
-          it('Build value from properties', function() {
+          it('Build value from properties', () => {
             view.model.get('properties').at(0).set('value', propValue);
             view.model.get('properties').at(2).set('value', prop3Val);
             expect(view.build()).toEqual(finalResult);
@@ -251,7 +251,7 @@ module.exports = {
 
         });
 
-        describe('Detached with target setted', function() {
+        describe('Detached with target setted', () => {
 
           var prop2Val;
           var prop3Val;
@@ -267,15 +267,15 @@ module.exports = {
             subprop555: 'T, T, T',
           };
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Property({
               type: 'stack',
               property: propName,
-              properties: properties,
+              properties,
               detached: true,
             });
             view = new PropertyStackView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.html(view.render().el);
@@ -289,7 +289,7 @@ module.exports = {
             $prop3 = view.$props.find('#' + properties[2].property + ' select');
           });
 
-          it('Returns correctly layers array from target', function() {
+          it('Returns correctly layers array from target', () => {
             component.set('style', compStyle);
             var result = [{
               subprop1: '1px',
@@ -307,7 +307,7 @@ module.exports = {
             expect(view.getLayersFromTarget()).toEqual(result);
           });
 
-          it('Update target on detached value change', function() {
+          it('Update target on detached value change', () => {
             $prop1.val(propValue).trigger('change');
             var compStyle = view.getTarget().get('style');
             var assertStyle = {};
@@ -317,7 +317,7 @@ module.exports = {
             expect(compStyle).toEqual(assertStyle);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             component.set('style', compStyle);
             view.propTarget.trigger('update');

test/specs/style_manager/view/PropertyView.js

@@ -3,9 +3,9 @@ const Property = require('style_manager/model/Property');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('PropertyView', function() {
+      describe('PropertyView', () => {
 
         var component;
         var $fixtures;
@@ -17,71 +17,71 @@ module.exports = {
         var propValue = 'testvalue';
         var defValue = 'testDefault';
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sm-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           target = new Component();
           component = new Component();
           model = new Property({property: propName});
           view = new PropertyView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           //view.remove(); // strange errors ???
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
           component = null;
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var prop = view.el;
           expect($fixture.get(0).querySelector('.property')).toExist();
           expect(prop.querySelector('.label')).toExist();
           expect(prop.querySelector('.field')).toExist();
         });
 
-        it('Input should exist', function() {
+        it('Input should exist', () => {
           expect(view.$input).toExist();
         });
 
-        it('Input value is empty', function() {
+        it('Input value is empty', () => {
           expect(view.model.get('value')).toNotExist();
           expect(view.$input.val()).toNotExist();
         });
 
-        it('Model not change without update trigger', function() {
+        it('Model not change without update trigger', () => {
           view.$input.val(propValue);
           expect(view.model.get('value')).toNotExist();
         });
 
         // Tests valueUpdated()
-        it('Update model on input change', function() {
+        it('Update model on input change', () => {
           view.$input.val(propValue).trigger('change');
           expect(view.model.get('value')).toEqual(propValue);
         });
 
         // Tests getValueForTarget()
-        it('Get value for target', function() {
+        it('Get value for target', () => {
           view.model.set('value', propValue);
           expect(view.getValueForTarget()).toEqual(propValue);
         });
 
         // Tests valueChanged() -> ...
-        it('Update input on value change', function() {
+        it('Update input on value change', () => {
           view.model.set('value', propValue);
           expect(view.$input.val()).toEqual(propValue);
         });
 
-        it('Update target on value change', function() {
+        it('Update target on value change', () => {
           view.selectedComponent = component;
           view.model.set('value', propValue);
           var compStyle = view.selectedComponent.get('style');
@@ -90,7 +90,7 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        it('Update target on value change with functionName', function() {
+        it('Update target on value change with functionName', () => {
           view.selectedComponent = component;
           view.model.set('functionName', 'testfunc');
           view.model.set('value', propValue);
@@ -100,7 +100,7 @@ module.exports = {
           expect(compStyle).toEqual(assertStyle);
         });
 
-        it('Clean target from the property if its value is empty', function() {
+        it('Clean target from the property if its value is empty', () => {
           view.selectedComponent = component;
           view.model.set('value', propValue);
           view.model.set('value', '');
@@ -108,7 +108,7 @@ module.exports = {
           expect(compStyle).toEqual({});
         });
 
-        it('Check stylable element', function() {
+        it('Check stylable element', () => {
           view.selectedComponent = component;
           expect(view.isTargetStylable()).toEqual(true);
           component.set('stylable', false);
@@ -121,12 +121,12 @@ module.exports = {
           expect(view.isTargetStylable()).toEqual(false);
         });
 
-        it('Target style is empty without values', function() {
+        it('Target style is empty without values', () => {
           view.selectedComponent = component;
           expect(view.getComponentValue()).toNotExist();
         });
 
-        it('Target style is correct', function() {
+        it('Target style is correct', () => {
           view.selectedComponent = component;
           var style = {};
           style[propName] = propValue;
@@ -134,7 +134,7 @@ module.exports = {
           expect(view.getComponentValue()).toEqual(propValue);
         });
 
-        it('Target style is empty with an other style', function() {
+        it('Target style is empty with an other style', () => {
           view.selectedComponent = component;
           var style = {};
           style[propName + '2'] = propValue;
@@ -142,7 +142,7 @@ module.exports = {
           expect(view.getComponentValue()).toNotExist();
         });
 
-        it('Fetch value from function', function() {
+        it('Fetch value from function', () => {
           view.selectedComponent = component;
           var style = {};
           style[propName] = 'testfun(' + propValue + ')';
@@ -151,33 +151,33 @@ module.exports = {
           expect(view.getComponentValue()).toEqual(propValue);
         });
 
-        describe('With target setted', function() {
+        describe('With target setted', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             target.model = component;
             view = new PropertyView({
-              model: model,
+              model,
               propTarget: target
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('updateTargetStyle', function() {
+          it('updateTargetStyle', () => {
             view.updateTargetStyle(propValue);
             var style = {};
             style[propName] = propValue;
             expect(component.get('style')).toEqual(style);
           });
 
-          it('updateTargetStyle with custom property', function() {
+          it('updateTargetStyle with custom property', () => {
             view.updateTargetStyle(propValue, propName + '2');
             var style = {};
             style[propName + '2'] = propValue;
             expect(component.get('style')).toEqual(style);
           });
 
-          it('Update value and input on target swap', function() {
+          it('Update value and input on target swap', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -186,7 +186,7 @@ module.exports = {
             expect(view.$input.val()).toEqual(propValue);
           });
 
-          it('Update value after multiple swaps', function() {
+          it('Update value after multiple swaps', () => {
             var style = {};
             style[propName] = propValue;
             component.set('style', style);
@@ -200,30 +200,30 @@ module.exports = {
 
         })
 
-        describe('Init property', function() {
+        describe('Init property', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             component = new Component();
             model = new Property({
               property: propName,
               defaults: defValue
             });
             view = new PropertyView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          it('Value as default', function() {
+          it('Value as default', () => {
             expect(view.model.get('value')).toEqual(defValue);
           });
 
-          it('Placeholder as default', function() {
+          it('Placeholder as default', () => {
             expect(view.$input.attr('placeholder')).toEqual(defValue);
           });
 
-          it('Input value is empty', function() {
+          it('Input value is empty', () => {
             expect(view.$input.val()).toEqual(defValue);
           });
 

test/specs/style_manager/view/SectorView.js

@@ -2,38 +2,38 @@ const SectorView = require('style_manager/view/SectorView');
 const Sector = require('style_manager/model/Sector');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('SectorView', function() {
+      describe('SectorView', () => {
 
         var $fixtures;
         var $fixture;
         var model;
         var view;
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sector-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           model = new Sector();
           view = new SectorView({
-            model: model
+            model
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
 
-        afterEach(function () {
+        afterEach(() => {
           view.remove();
         });
 
-        after(function () {
+        after(() => {
           $fixture.remove();
         });
 
-        it('Rendered correctly', function() {
+        it('Rendered correctly', () => {
           var sector = view.el;
           expect(sector.querySelector('.title')).toExist();
           var props = sector.querySelector('.properties');
@@ -41,12 +41,12 @@ module.exports = {
           expect(sector.classList.contains('open')).toEqual(true);
         });
 
-        it('No properties', function() {
+        it('No properties', () => {
           var props = view.el.querySelector('.properties');
           expect(props.innerHTML).toEqual('<div class="clear"></div>');
         });
 
-        it('Update on open', function() {
+        it('Update on open', () => {
           var sector = view.el;
           var props = sector.querySelector('.properties');
           model.set('open', false);
@@ -54,15 +54,15 @@ module.exports = {
           expect(props.style.display).toEqual('none');
         });
 
-        it('Toggle on click', function() {
+        it('Toggle on click', () => {
           var sector = view.el;
           view.$el.find('.title').click();
           expect(sector.classList.contains('open')).toEqual(false);
         });
 
-        describe('Init with options', function() {
+        describe('Init with options', () => {
 
-          beforeEach(function () {
+          beforeEach(() => {
             model = new Sector({
               open: false,
               name: 'TestName',
@@ -73,17 +73,17 @@ module.exports = {
               ]
             });
             view = new SectorView({
-              model: model
+              model
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
           });
 
-          afterEach(function () {
+          afterEach(() => {
             view.remove();
           });
 
-          it('Rendered correctly2', function() {
+          it('Rendered correctly2', () => {
             var sector = view.el;
             var props = sector.querySelector('.properties');
             expect(sector.querySelector('.title').innerHTML).toContain('TestName');
@@ -92,7 +92,7 @@ module.exports = {
             expect(props.style.display).toEqual('none');
           });
 
-          it('Has properties', function() {
+          it('Has properties', () => {
             var props = view.el.querySelector('.properties');
             expect(props.children.length).toEqual(4); // Last one is 'clear' element
           });

test/specs/style_manager/view/SectorsView.js

@@ -2,21 +2,21 @@ const SectorsView = require('style_manager/view/SectorsView');
 const Sectors = require('style_manager/model/Sectors');
 
 module.exports = {
-  run : function(){
+  run() {
 
-      describe('SectorsView', function() {
+      describe('SectorsView', () => {
 
         var $fixtures;
         var $fixture;
         var model;
         var view;
 
-        before(function () {
+        before(() => {
           $fixtures  = $("#fixtures");
           $fixture   = $('<div class="sectors-fixture"></div>');
         });
 
-        beforeEach(function () {
+        beforeEach(() => {
           model = new Sectors([]);
           view = new SectorsView({
             collection: model
@@ -25,19 +25,19 @@ 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.innerHTML).toEqual('');
         });
 
-        it("Add new sectors", function (){
+        it("Add new sectors", () => {
           view.collection.add([{}, {}]);
           expect(view.el.children.length).toEqual(2);
         });

test/specs/test_utils.js

@@ -1,15 +1,15 @@
 module.exports = {
-  storageMock: function() {
+  storageMock() {
     var db = {};
     return {
       id: 'testStorage',
-      store: function(data){
+      store(data) {
         db = data;
       },
-      load: function(keys){
+      load(keys) {
         return db;
       },
-      getDb: function(){
+      getDb() {
         return db;
       },
     };