diff --git a/src/panels/view/PanelView.js b/src/panels/view/PanelView.js index f6c5b04ad..568406213 100644 --- a/src/panels/view/PanelView.js +++ b/src/panels/view/PanelView.js @@ -1,20 +1,20 @@ define(['backbone','./ButtonsView'], function(Backbone, ButtonsView) { - /** + /** * @class PanelView * */ return Backbone.View.extend({ - + initialize: function(o){ - this.config = o.config; - this.pfx = this.config.stylePrefix; - this.buttons = this.model.get('buttons'); - this.className = this.pfx + 'panel'; - this.id = this.pfx + this.model.get('id'); + this.config = o.config || {}; + this.pfx = this.config.stylePrefix || ''; + this.buttons = this.model.get('buttons'); + this.className = this.pfx + 'panel'; + this.id = this.pfx + this.model.get('id'); this.listenTo(this.model, 'change:appendContent', this.appendContent); this.listenTo(this.model, 'change:content', this.updateContent); }, - + /** * Append content of the panel * */ @@ -22,7 +22,7 @@ function(Backbone, ButtonsView) { { this.$el.append(this.model.get('appendContent')); }, - + /** * Update content * */ @@ -30,15 +30,18 @@ function(Backbone, ButtonsView) { { this.$el.html(this.model.get('content')); }, - - + + render: function() { this.$el.attr('class', _.result(this, 'className')); - this.$el.attr('id', this.id); + + if(this.id) + this.$el.attr('id', this.id); + if(this.buttons.length){ var buttons = new ButtonsView({ - collection : this.buttons, - config : this.config, + collection: this.buttons, + config: this.config, }); this.$el.append(buttons.render().el); } diff --git a/test/specs/panels/e2e/CssComposer.js b/test/specs/panels/e2e/CssComposer.js deleted file mode 100644 index 5727060a8..000000000 --- a/test/specs/panels/e2e/CssComposer.js +++ /dev/null @@ -1,82 +0,0 @@ - -define(function(require) { - - return { - run : function(){ - describe('E2E tests', function() { - - before(function () { - this.$fixtures = $("#fixtures"); - this.$fixture = $('
'); - }); - - beforeEach(function () { - this.Grapes = require('editor/main'); - this.gjs = new this.Grapes({ - stylePrefix: '', - storageType: 'none', - storageManager: { storageType: 'none', }, - assetManager: { storageType: 'none', }, - container: 'csscomposer-fixture', - }); - this.cssc = this.gjs.editor.get('CssComposer'); - this.clsm = this.gjs.editor.get('ClassManager'); - this.$fixture.empty().appendTo(this.$fixtures); - this.gjs.render(); - this.rulesSet = [ - { selectors: [{name: 'test1'}, {name: 'test2'}] }, - { selectors: [{name: 'test2'}, {name: 'test3'}] }, - { selectors: [{name: 'test3'}] } - ]; - }); - - afterEach(function () { - delete this.Grapes; - delete this.gjs; - delete this.cssc; - delete this.clsm; - }); - - after(function () { - this.$fixture.remove(); - }); - - it('Rules are correctly imported from default property', function() { - var gj = new this.Grapes({ - stylePrefix: '', - storageType: 'none', - storageManager: { storageType: 'none', }, - assetManager: { storageType: 'none', }, - cssComposer: { defaults: this.rulesSet}, - container: 'csscomposer-fixture', - }); - var cssc = gj.editor.get('CssComposer'); - cssc.getRules().length.should.equal(this.rulesSet.length); - var cls = gj.editor.get('ClassManager').getClasses(); - cls.length.should.equal(3); - }); - - - it('New rule adds correctly the class inside classe manager', function() { - var rules = this.cssc.getRules(); - rules.add({ selectors: [{name: 'test1'}] }); - this.clsm.getClasses().at(0).get('name').should.equal('test1'); - }); - - it('New rules are correctly imported inside classe manager', function() { - var rules = this.cssc.getRules(); - this.rulesSet.forEach(function(item){ - rules.add(item); - }); - var cls = this.clsm.getClasses(); - cls.length.should.equal(3); - cls.at(0).get('name').should.equal('test1'); - cls.at(1).get('name').should.equal('test2'); - cls.at(2).get('name').should.equal('test3'); - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/panels/main.js b/test/specs/panels/main.js index 5fead008f..ecaff7068 100644 --- a/test/specs/panels/main.js +++ b/test/specs/panels/main.js @@ -2,11 +2,13 @@ var modulePath = './../../../test/specs/panels'; define([ 'Panels', - modulePath + '/model/PanelModels' + modulePath + '/model/PanelModels', + modulePath + '/view/PanelView' ], function( Panels, - Models + Models, + PanelView ) { describe('Panels', function() { @@ -99,6 +101,7 @@ define([ }); Models.run(); + PanelView.run(); }); }); \ No newline at end of file diff --git a/test/specs/panels/view/CssRuleView.js b/test/specs/panels/view/CssRuleView.js deleted file mode 100644 index 9e91748bf..000000000 --- a/test/specs/panels/view/CssRuleView.js +++ /dev/null @@ -1,114 +0,0 @@ -var path = 'CssComposer/view/'; -define([path + 'CssRuleView', 'CssComposer/model/CssRule'], - function(CssRuleView, CssRule) { - - return { - run : function(){ - describe('CssRuleView', function() { - - before(function () { - this.$fixtures = $("#fixtures"); - this.$fixture = $('
'); - }); - - beforeEach(function () { - var m = new CssRule(); - this.view = new CssRuleView({ - model: m - }); - this.$fixture.empty().appendTo(this.$fixtures); - this.$fixture.html(this.view.render().el); - }); - - afterEach(function () { - this.view.model.destroy(); - }); - - after(function () { - this.$fixture.remove(); - }); - - it('Object exists', function() { - CssRuleView.should.be.exist; - }); - - it('Correct behaviour of renderSelectors with single selector', function() { - this.view.model.get('selectors').add({name: 'test'}); - this.view.renderSelectors().should.equal('.test'); - }); - - it('Correct behaviour of renderSelectors with multiple selectors', function() { - this.view.model.get('selectors').add([{name: 'test2'}, {name: 'test1'}]); - this.view.renderSelectors().should.equal('.test2.test1'); - }); - - it('Correct behaviour of renderProperties with single property', function() { - this.view.model.set('style', {'prop': 'value'}); - this.view.renderProperties().should.equal('prop:value;'); - }); - - it('Correct behaviour of renderProperties with multiple properties', function() { - this.view.model.set('style', {'prop2': 'value2', 'prop3': 'value3'}); - this.view.renderProperties().should.equal('prop2:value2;prop3:value3;'); - }); - - it('Empty style inside', function() { - this.$fixture.html().should.equal(''); - }); - - it('On update of style always empty as there is no selectors', function() { - this.view.model.set('style', {'prop':'value'}); - this.$fixture.html().should.equal(''); - }); - - describe('CssRuleView with selectors', function() { - - beforeEach(function () { - var m = new CssRule({ - selectors: [{name:'test1'}, {name:'test2'}] - }); - this.regView = new CssRuleView({ - model: m - }); - this.regView.render(); - }); - - afterEach(function () { - this.regView.model.destroy(); - }); - - it('Empty with no style', function() { - this.regView.$el.html().should.equal(''); - }); - - it('Not empty on update of style', function() { - this.regView.model.set('style', {'prop':'value'}); - this.regView.$el.html().should.equal('.test1.test2{prop:value;}'); - }); - - it('State correctly rendered', function() { - this.regView.model.set('style', {'prop':'value'}); - this.regView.model.set('state', 'hover'); - this.regView.$el.html().should.equal('.test1.test2:hover{prop:value;}'); - }); - - it('State render changes on update', function() { - this.regView.model.set('style', {'prop':'value'}); - this.regView.model.set('state', 'hover'); - this.regView.model.set('state', ''); - this.regView.$el.html().should.equal('.test1.test2{prop:value;}'); - }); - - it('Empty on clear', function() { - this.regView.model.set('style', {'prop':'value'}); - this.regView.model.set('style', {}); - this.regView.$el.html().should.equal(''); - }); - - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/panels/view/CssRulesView.js b/test/specs/panels/view/CssRulesView.js deleted file mode 100644 index 3bcd33d41..000000000 --- a/test/specs/panels/view/CssRulesView.js +++ /dev/null @@ -1,54 +0,0 @@ -var path = 'CssComposer/view/'; -define([path + 'CssRulesView', 'CssComposer/model/CssRules'], - function(CssRulesView, CssRules) { - - return { - run : function(){ - describe('CssRulesView', function() { - - before(function () { - this.$fixtures = $("#fixtures"); - this.$fixture = $('
'); - }); - - beforeEach(function () { - var col = new CssRules([]); - this.view = new CssRulesView({ - collection: col - }); - this.$fixture.empty().appendTo(this.$fixtures); - this.$fixture.html(this.view.render().el); - }); - - afterEach(function () { - this.view.collection.reset(); - }); - - after(function () { - this.$fixture.remove(); - }); - - it('Object exists', function() { - CssRulesView.should.be.exist; - }); - - it("Collection is empty", function (){ - this.view.$el.html().should.be.empty; - }); - - it("Add new rule", function (){ - sinon.stub(this.view, "addToCollection"); - this.view.collection.add({}); - this.view.addToCollection.calledOnce.should.equal(true); - }); - - it("Render new rule", function (){ - this.view.collection.add({}); - this.view.$el.html().should.not.be.empty; - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/panels/view/PanelView.js b/test/specs/panels/view/PanelView.js new file mode 100644 index 000000000..df9935834 --- /dev/null +++ b/test/specs/panels/view/PanelView.js @@ -0,0 +1,76 @@ +var path = 'Panels/view/'; +define([path + 'PanelView', 'Panels/model/Panel'], + function(PanelView, Panel) { + + return { + run : function(){ + + describe('PanelView', function() { + + var $fixtures; + var $fixture; + var model; + var view; + + before(function () { + $fixtures = $("#fixtures"); + $fixture = $('
'); + }); + + beforeEach(function () { + model = new Panel(); + view = new PanelView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + afterEach(function () { + view.remove(); + }); + + after(function () { + $fixture.remove(); + }); + + it('Panel empty', function() { + $fixture.html().should.be.equal('
'); + }); + + it('Append content', function() { + model.set('appendContent','test'); + model.set('appendContent','test2'); + view.$el.html().should.be.equal('testtest2'); + }); + + it('Update content', function() { + model.set('content','test'); + model.set('content','test2'); + view.$el.html().should.be.equal('test2'); + }); + + describe('Init with options', function() { + + beforeEach(function () { + model = new Panel({ + buttons: [{}] + }); + view = new PanelView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + afterEach(function () { + view.remove(); + }); + + }); + + }); + } + }; + +}); \ No newline at end of file