Add css composer tests

src/css_composer/main.js

@@ -50,11 +50,11 @@ define(function(require) {
          */
         storageKey: function(){
           var keys = [];
-          var smc = c.stm.getConfig() || {};
+          var smc = (c.stm && c.stm.getConfig()) || {};
           if(smc.storeCss)
             keys.push('css');
           if(smc.storeStyles)
-            keys.push('style');
+            keys.push('styles');
           return keys;
         },
 
@@ -136,7 +136,7 @@ define(function(require) {
           var keys = this.storageKey();
           if(keys.indexOf('css') >= 0)
             obj.css = c.em.getCss();
-          if(keys.indexOf('style') >= 0)
+          if(keys.indexOf('styles') >= 0)
             obj.styles = JSON.stringify(rules);
           if(!noStore)
             c.stm.store(obj);

styles/css/main.css

@@ -2719,7 +2719,7 @@ div.gjs-select {
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
   position: absolute;
-  width: 83%;
+  width: 85%;
   height: 100%;
   bottom: 0;
   left: 0;
@@ -2900,12 +2900,12 @@ ol.example li.placeholder:before {
   text-align: center;
   z-index: 3; }
   .gjs-pn-panel#gjs-pn-commands, .gjs-pn-panel#gjs-pn-options2 {
-    width: 83%;
+    width: 85%;
     left: 0;
     top: 0;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
   .gjs-pn-panel#gjs-pn-options {
-    right: 17%;
+    right: 15%;
     top: 0; }
   .gjs-pn-panel#gjs-pn-options2 {
     bottom: 150px;
@@ -2917,13 +2917,13 @@ ol.example li.placeholder:before {
   .gjs-pn-panel#gjs-pn-views {
     border-bottom: 2px solid rgba(0, 0, 0, 0.3);
     right: 0;
-    width: 17%;
+    width: 15%;
     z-index: 4; }
   .gjs-pn-panel#gjs-pn-views-container {
     height: 100%;
     padding: 42px 0 0;
     right: 0;
-    width: 17%;
+    width: 15%;
     overflow: auto;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
 

styles/scss/main.scss

@@ -38,7 +38,7 @@ $colorGreen:	#62c462;
 $tagBg: #804f7b;
 $secColor: $tagBg;
 $imageCompDim:	50px;
-$leftWidth: 17%;
+$leftWidth: 15%;
 
 $fontPath: '../fonts';
 $fontName: 'main-fonts';

test/specs/css_composer/main.js

@@ -5,14 +5,16 @@ define([
 				modulePath + '/model/CssModels',
 				modulePath + '/view/CssRuleView',
 				modulePath + '/view/CssRulesView',
-				modulePath + '/e2e/CssComposer'
+				modulePath + '/e2e/CssComposer',
+				'./../test_utils.js'
 				 ],
 	function(
 					CssComposer,
 					Models,
 					CssRuleView,
 					CssRulesView,
-					e2e
+					e2e,
+					utils
 					) {
 
 		describe('Css Composer', function() {
@@ -21,8 +23,29 @@ define([
 
 				var obj;
 
+				var config;
+				var storagMock = utils.storageMock();
+				var editorModel = {
+					getCss: function(){return 'testCss';},
+					getCacheLoad: function(){
+						return storagMock.load();
+					}
+				};
+
+				var setSmConfig = function(){
+					config.stm = storagMock;
+					config.stm.getConfig =  function(){
+						return { storeCss: 1, storeStyles: 1}
+					};
+				};
+				var setEm = function(){
+					config.em = editorModel;
+				}
+
+
 				beforeEach(function () {
-					obj = new CssComposer().init();
+					config = {};
+					obj = new CssComposer().init(config);
 				});
 
 				afterEach(function () {
@@ -33,6 +56,22 @@ define([
 					CssComposer.should.be.exist;
 				});
 
+				it('storageKey returns array', function() {
+					obj.storageKey().should.be.instanceOf(Array);
+				});
+
+				it('storageKey returns correct composition', function() {
+					setSmConfig();
+					obj.storageKey().should.eql(['css', 'styles']);
+				});
+
+				it('Store data', function() {
+					setSmConfig();
+					setEm();
+					var expected = { css: 'testCss', styles: '[]',};
+					obj.store(1).should.deep.equal(expected);
+				});
+
 				it("Rules are empty", function() {
 					obj.getAll().length.should.equal(0);
 				});