From b75d0b2ec9e241d12a18dfa2f3018468fec2a633 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 5 May 2016 20:29:31 +0200 Subject: [PATCH] Add ProprtyColorView tests --- src/style_manager/view/PropertyColorView.js | 26 +-- test/specs/style_manager/main.js | 5 +- .../style_manager/view/PropertyColorView.js | 163 ++++++++++++++++++ .../style_manager/view/PropertyIntegerView.js | 4 +- 4 files changed, 182 insertions(+), 16 deletions(-) create mode 100644 test/specs/style_manager/view/PropertyColorView.js diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index fbb58b793..9af6e0fad 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/src/style_manager/view/PropertyColorView.js @@ -1,14 +1,14 @@ -define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyColor.html'], +define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyColor.html'], function (Backbone, PropertyView, Spectrum, propertyTemplate) { - /** + /** * @class PropertyColorView * */ return PropertyView.extend({ - + template: _.template(propertyTemplate), - - /** - * @inheritdoc + + /** + * @inheritdoc * */ valueChanged: function(){ PropertyView.prototype.valueChanged.apply(this, arguments); @@ -17,7 +17,7 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo this.$colorPicker.spectrum("set", v).css('background-color', v); } }, - + /** @inheritdoc */ renderInput: function() { if(!this.$input){ @@ -33,25 +33,25 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo cancelText: 'тип', move: function(color) { var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString(); - that.$colorPicker.css('background-color', c); + that.$colorPicker.get(0).style.backgroundColor = c; }, change: function(color) { var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString(); c = c.replace(/ /g,''); - that.$colorPicker.css('background-color', c); + that.$colorPicker.get(0).style.backgroundColor = c; that.model.set('value', c); } }); this.$el.find('#' + this.pfx + 'input-holder').append(this.$colorPicker); } - this.setValue(this.componentValue,0); + this.setValue(this.componentValue, 0); }, - + /** @inheritdoc */ setValue: function(value, f){ PropertyView.prototype.setValue.apply(this, arguments); - var v = this.model.get('value') || this.defaultValue; - v = value || v; + var v = this.model.get('value') || this.defaultValue; + v = value || v; if(this.$colorPicker) this.$colorPicker.spectrum("set", v).css('background-color',v); }, diff --git a/test/specs/style_manager/main.js b/test/specs/style_manager/main.js index 791440f36..843831d30 100644 --- a/test/specs/style_manager/main.js +++ b/test/specs/style_manager/main.js @@ -9,6 +9,7 @@ define([ modulePath + '/view/PropertySelectView', modulePath + '/view/PropertyRadioView', modulePath + '/view/PropertyIntegerView', + modulePath + '/view/PropertyColorView', ], function( StyleManager, @@ -18,7 +19,8 @@ define([ PropertyView, PropertySelectView, PropertyRadioView, - PropertyIntegerView + PropertyIntegerView, + PropertyColorView ) { describe('StyleManager', function() { @@ -191,6 +193,7 @@ define([ PropertySelectView.run(); PropertyRadioView.run(); PropertyIntegerView.run(); + PropertyColorView.run(); }); diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js new file mode 100644 index 000000000..f9a1dd804 --- /dev/null +++ b/test/specs/style_manager/view/PropertyColorView.js @@ -0,0 +1,163 @@ +var path = 'StyleManager/view/'; +define([path + 'PropertyColorView', 'StyleManager/model/Property', 'DomComponents/model/Component'], + function(PropertyColorView, Property, Component) { + + return { + run : function(){ + + describe('PropertyColorView', function() { + + var component; + var $fixtures; + var $fixture; + var target; + var model; + var view; + var propName = 'testprop'; + var propValue = '#fff'; + var defValue = 'test2value'; + + before(function () { + $fixtures = $("#fixtures"); + $fixture = $('
'); + }); + + beforeEach(function () { + target = new Component(); + component = new Component(); + model = new Property({ + type: 'color', + property: propName + }); + view = new PropertyColorView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + afterEach(function () { + //view.remove(); // strange errors ??? + }); + + after(function () { + $fixture.remove(); + delete component; + delete view; + delete model; + }); + + 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('Inputs rendered', function() { + var prop = view.el; + prop.querySelector('input[type=text]').should.be.ok; + prop.querySelector('.color-picker').should.be.ok; + }); + + it('Inputs should exist', function() { + view.$input.should.be.ok; + view.$colorPicker.should.be.ok; + }); + + it('Input value is empty', function() { + view.model.get('value').should.be.empty; + view.$input.val().should.be.empty; + }); + + it('Update model on setValue', function() { + view.setValue(propValue); + view.model.get('value').should.equal(propValue); + view.$input.val().should.equal(propValue); + }); + + 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.getInputValue().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 PropertyColorView({ + 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.getInputValue().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] = '#123123'; + component.set('style', style); + view.propTarget.trigger('update'); + view.model.get('value').should.equal('#123123'); + view.$input.val().should.equal('#123123'); + }); + + }) + + describe('Init property', function() { + + beforeEach(function () { + component = new Component(); + model = new Property({ + type: 'color', + property: propName, + defaults: propValue, + }); + view = new PropertyColorView({ + model: model + }); + $fixture.empty().appendTo($fixtures); + $fixture.html(view.render().el); + }); + + it('Value as default', function() { + view.model.get('value').should.equal(propValue); + }); + + it('Input value is as default', function() { + view.$input.val().should.equal(propValue); + }); + + }); + + }); + } + }; + +}); \ No newline at end of file diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js index 51292627a..e3b2983d4 100644 --- a/test/specs/style_manager/view/PropertyIntegerView.js +++ b/test/specs/style_manager/view/PropertyIntegerView.js @@ -156,7 +156,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone }); }) -/* + describe('Init property', function() { beforeEach(function () { @@ -200,7 +200,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone }); }); -*/ + }); } };