Update devices tests

src/commands/view/OpenStyleManager.js

@@ -19,7 +19,7 @@ define(['StyleManager'], function(StyleManager) {
 
 					// Device Manager
 					var dvm = em.DeviceManager;
-					if(dvm)
+					if(dvm && config.showDevices)
 						this.$cn2.append(dvm.render());
 
 					// Class Manager container

src/device_manager/config/config.js

@@ -3,5 +3,7 @@ define(function () {
 
     'devices': [],
 
+    deviceLabel: 'Device',
+
 	};
 });

src/device_manager/template/devices.html

@@ -1,4 +1,4 @@
-<div class="<%= ppfx %>device-label">Device</div>
+<div class="<%= ppfx %>device-label"><%= deviceLabel %></div>
 <div class="<%= ppfx %>field <%= ppfx %>select">
   <span id="<%= ppfx %>input-holder">
     <select class="<%= ppfx %>devices"></select>

src/device_manager/view/DevicesView.js

@@ -20,9 +20,7 @@ function(Backbone, devicesTemplate) {
      * Start adding new device
      * @return {[type]} [description]
      */
-    startAdd: function(){
-      console.log('start new device');
-    },
+    startAdd: function(){},
 
     /**
      * Update device of the editor
@@ -53,7 +51,10 @@ function(Backbone, devicesTemplate) {
 
     render: function() {
       var pfx = this.ppfx;
-      this.$el.html(this.template({ ppfx: pfx }));
+      this.$el.html(this.template({
+        ppfx: pfx,
+        deviceLabel: this.config.deviceLabel
+      }));
       this.devicesEl = this.$el.find('.' + pfx + 'devices');
       this.devicesEl.append(this.getOptions());
       this.el.className = pfx + 'devices-c';

src/editor/config/config.js

@@ -96,6 +96,9 @@ define(function () {
 	    }],
 		},
 
+		// If true render a select of available devices
+		showDevices: 1,
+
 		// Dom element
 		el: '',
 

src/editor/main.js

@@ -39,6 +39,7 @@
  * @param {Object} [config.commands={}] Commands configuration, see the relative documentation
  * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation
  * @param {Object} [config.panels={}] Panels configuration, see the relative documentation
+ * @param {Object} [config.showDevices=true] If true render a select of available devices inside style manager panel
  * @example
  * var editor = grapesjs.init({
  * 	container : '#gjs',

test/specs/device_manager/main.js

@@ -1,9 +1,9 @@
 var modulePath = './../../../test/specs/device_manager';
 
 define([ 'DeviceManager',
-        //modulePath + '/model/DeviceModels',
+        modulePath + '/view/DevicesView',
          ],
-  function(DeviceManager) {
+  function(DeviceManager, DevicesView) {
 
     describe('DeviceManager', function() {
 
@@ -66,5 +66,7 @@ define([ 'DeviceManager',
 
       });
 
+      DevicesView.run();
+
     });
 });

test/specs/device_manager/view/DevicesView.js

@@ -0,0 +1,82 @@
+var path = 'DeviceManager/view/';
+define([path + 'DevicesView', 'DeviceManager/model/Devices'],
+  function(DevicesView, Devices) {
+
+    return {
+      run : function(){
+          describe('DevicesView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+            var editorModel;
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="devices-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Devices([]);
+              view = new DevicesView({
+                collection: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              view.collection.reset();
+            });
+
+            after(function () {
+              $fixture.remove();
+            });
+
+            it("The content is not empty", function (){
+              view.el.innerHTML.should.be.not.empty;
+            });
+
+            it("No options without devices", function (){
+              view.getOptions().should.equal('');
+            });
+
+            it("Render new button", function (){
+              view.collection.add({});
+              view.$el.html().should.not.be.empty;
+            });
+
+            describe('With configs', function() {
+
+              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>');
+              });
+
+            });
+
+        });
+      }
+    };
+
+});