From f85a073d8e2ed7d1a738364d3cd79a6c8d0a2bfd Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 3 May 2016 13:45:28 +0200 Subject: [PATCH] Add PropertySelectView tests --- src/style_manager/view/PropertySelectView.js | 19 +- src/style_manager/view/PropertyView.js | 2 +- test/specs/style_manager/main.js | 5 +- .../style_manager/view/PropertySelectView.js | 175 ++++++++++++++++++ test/specs/style_manager/view/PropertyView.js | 36 +++- test/specs/style_manager/view/SectorView.js | 2 +- test/specs/style_manager/view/SectorsView.js | 2 +- 7 files changed, 222 insertions(+), 19 deletions(-) create mode 100644 test/specs/style_manager/view/PropertySelectView.js diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index 5ecd63042..62e18188c 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/src/style_manager/view/PropertySelectView.js @@ -9,26 +9,27 @@ define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'], initialize: function(options) { PropertyView.prototype.initialize.apply(this, arguments); - this.list = this.model.get('list'); + this.list = this.model.get('list') || []; }, /** @inheritdoc */ renderInput: function() { var pfx = this.pfx; if(!this.$input){ - if(this.list && this.list.length){ - this.input = ''; + if(this.list && this.list.length){ _.each(this.list,function(el){ var name = el.name ? el.name : el.value; var style = el.style ? el.style.replace(/"/g,'"') : ''; - this.input += ''; - },this); - - this.input += ''; - this.$input = $(this.input); - this.$el.find('#'+ pfx +'input-holder').html(this.$input); + var styleAttr = style ? 'style="' + style + '"' : ''; + this.input += ''; + }, this); } + + this.input += ''; + this.$input = $(this.input); + this.$el.find('#'+ pfx +'input-holder').html(this.$input); } this.setValue(this.componentValue, 0); }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index ebc289f20..f898ec120 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -79,7 +79,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat this.componentValue = this.defaultValue + (this.unit || ''); // todo model // Check if wrap inside function is required - if(this.func){ + if(this.model.get('functionName')){ var v = this.fetchFromFunction(this.componentValue); if(v) this.componentValue = v; diff --git a/test/specs/style_manager/main.js b/test/specs/style_manager/main.js index 4f71d9af4..e36644a1c 100644 --- a/test/specs/style_manager/main.js +++ b/test/specs/style_manager/main.js @@ -6,13 +6,15 @@ define([ modulePath + '/view/SectorView', modulePath + '/view/SectorsView', modulePath + '/view/PropertyView', + modulePath + '/view/PropertySelectView', ], function( StyleManager, Models, SectorView, SectorsView, - PropertyView + PropertyView, + PropertySelectView ) { describe('StyleManager', function() { @@ -182,6 +184,7 @@ define([ SectorView.run(); SectorsView.run(); PropertyView.run(); + PropertySelectView.run(); }); diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js new file mode 100644 index 000000000..91ab93079 --- /dev/null +++ b/test/specs/style_manager/view/PropertySelectView.js @@ -0,0 +1,175 @@ +var path = 'StyleManager/view/'; +define([path + 'PropertySelectView', 'StyleManager/model/Property', 'DomComponents/model/Component'], + function(PropertySelectView, Property, Component) { + + return { + run : function(){ + + describe('PropertySelectView', function() { + + var component; + var $fixtures; + var $fixture; + var target; + var model; + var view; + var propName = 'testprop'; + var propValue = 'test1value'; + var defValue = 'test2value'; + var options = [ + {value: 'test1value', style: 'test:style'}, + {name: 'test2', value: 'test2value'} + ]; + + before(function () { + $fixtures = $("#fixtures"); + $fixture = $('
'); + }); + + beforeEach(function () { + target = new Component(); + component = new Component(); + model = new Property({ + type: 'select', + list: options, + property: propName + }); + view = new PropertySelectView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + afterEach(function () { + //view.remove(); // strange errors ??? + }); + + after(function () { + $fixture.remove(); + delete component; + }); + + it('Rendered correctly', function() { + var prop = view.el; + $fixture.get(0).querySelector('.property').should.be.ok; + prop.querySelector('.label').should.be.ok; + prop.querySelector('.field').should.be.ok; + }); + + it('Select rendered', function() { + var prop = view.el; + prop.querySelector('select').should.be.ok; + }); + + it('Options rendered', function() { + var select = view.el.querySelector('select'); + select.children.length.should.equal(options.length); + }); + + it('Options rendered correctly', function() { + var select = view.el.querySelector('select'); + var children = select.children; + children[0].value.should.equal(options[0].value); + children[1].value.should.equal(options[1].value); + children[0].textContent.should.equal(options[0].value); + children[1].textContent.should.equal(options[1].name); + children[0].getAttribute('style').should.equal(options[0].style); + (children[1].getAttribute('style') == null).should.equal(true); + }); + + it('Input should exist', function() { + view.$input.should.be.ok; + }); + + it('Input value is empty', function() { + view.model.get('value').should.be.empty; + (view.$input.val() === null).should.equal(true); + }); + + it('Update model on input change', function() { + view.$input.val(propValue).trigger('change'); + view.model.get('value').should.equal(propValue); + }); + + it('Update input on value change', function() { + view.model.set('value', propValue); + view.$input.val().should.equal(propValue); + }); + + it('Update target on value change', function() { + view.selectedComponent = component; + view.model.set('value', propValue); + var compStyle = view.selectedComponent.get('style'); + var assertStyle = {}; + assertStyle[propName] = propValue; + compStyle.should.deep.equal(assertStyle); + }); + + describe('With target setted', function() { + + beforeEach(function () { + target.model = component; + view = new PropertySelectView({ + model: model, + propTarget: target + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + it('Update value and input on target swap', function() { + var style = {}; + style[propName] = propValue; + component.set('style', style); + view.propTarget.trigger('update'); + view.model.get('value').should.equal(propValue); + view.$input.val().should.equal(propValue); + }); + + it('Update value after multiple swaps', function() { + var style = {}; + style[propName] = propValue; + component.set('style', style); + view.propTarget.trigger('update'); + style[propName] = 'test2value'; + component.set('style', style); + view.propTarget.trigger('update'); + view.model.get('value').should.equal('test2value'); + view.$input.val().should.equal('test2value'); + }); + + }) + + describe('Init property', function() { + + beforeEach(function () { + component = new Component(); + model = new Property({ + type: 'select', + list: options, + defaults: defValue, + property: propName + }); + view = new PropertySelectView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + it('Value as default', function() { + view.model.get('value').should.equal(defValue); + }); + + it('Input value is as default', function() { + view.$input.val().should.equal(defValue); + }); + + }); + + }); + } + }; + +}); \ No newline at end of file diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js index 52357bccd..c8352d0bc 100644 --- a/test/specs/style_manager/view/PropertyView.js +++ b/test/specs/style_manager/view/PropertyView.js @@ -19,7 +19,7 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod before(function () { $fixtures = $("#fixtures"); - $fixture = $('
'); + $fixture = $('
'); }); beforeEach(function () { @@ -111,12 +111,34 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod view.isTargetStylable().should.equal(false); }); - it.skip('Get target style', function() { - //getComponentValue + it('Target style is empty without values', function() { + view.selectedComponent = component; + view.getComponentValue().should.be.empty; + }); + + it('Target style is correct', function() { + view.selectedComponent = component; + var style = {}; + style[propName] = propValue; + component.set('style', style); + view.getComponentValue().should.equal(propValue); }); - it.skip('Fetch value from function', function() { - //fetchFromFunction + it('Target style is empty with an other style', function() { + view.selectedComponent = component; + var style = {}; + style[propName + '2'] = propValue; + component.set('style', style); + view.getComponentValue().should.be.empty; + }); + + it('Fetch value from function', function() { + view.selectedComponent = component; + var style = {}; + style[propName] = 'testfun(' + propValue + ')'; + component.set('style', style); + view.model.set('functionName', 'testfun'); + view.getComponentValue().should.equal(propValue); }); describe('With target setted', function() { @@ -131,12 +153,13 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod $fixture.html(view.render().el); }); - it('Update value on target swap', function() { + it('Update value and input on target swap', function() { var style = {}; style[propName] = propValue; component.set('style', style); view.propTarget.trigger('update'); view.model.get('value').should.equal(propValue); + view.$input.val().should.equal(propValue); }); it('Update value after multiple swaps', function() { @@ -148,6 +171,7 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod component.set('style', style); view.propTarget.trigger('update'); view.model.get('value').should.equal(propValue + '2'); + view.$input.val().should.equal(propValue + '2'); }); }) diff --git a/test/specs/style_manager/view/SectorView.js b/test/specs/style_manager/view/SectorView.js index b764d8281..3ce41fd02 100644 --- a/test/specs/style_manager/view/SectorView.js +++ b/test/specs/style_manager/view/SectorView.js @@ -14,7 +14,7 @@ define([path + 'SectorView', 'StyleManager/model/Sector'], before(function () { $fixtures = $("#fixtures"); - $fixture = $('
'); + $fixture = $('
'); }); beforeEach(function () { diff --git a/test/specs/style_manager/view/SectorsView.js b/test/specs/style_manager/view/SectorsView.js index dfa5b7c91..11870cadd 100644 --- a/test/specs/style_manager/view/SectorsView.js +++ b/test/specs/style_manager/view/SectorsView.js @@ -14,7 +14,7 @@ define([path + 'SectorsView', 'StyleManager/model/Sectors'], before(function () { $fixtures = $("#fixtures"); - $fixture = $('
'); + $fixture = $('
'); }); beforeEach(function () {