diff --git a/src/style_manager/model/PropertyInteger.js b/src/style_manager/model/PropertyInteger.js index 8383b5fee..2c52e5562 100644 --- a/src/style_manager/model/PropertyInteger.js +++ b/src/style_manager/model/PropertyInteger.js @@ -19,6 +19,15 @@ module.exports = Property.extend({ max: '', }), + init() { + const unit = this.get('unit'); + const units = this.get('units'); + + if (units.length && !unit) { + this.set('unit', units[0]); + } + }, + getFullValue() { let value = this.get('value') + this.get('unit'); return Property.prototype.getFullValue.apply(this, [value]); diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index faffe8044..7fef6004b 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/src/style_manager/view/PropertyColorView.js @@ -8,20 +8,22 @@ module.exports = require('./PropertyIntegerView').extend({ }, setValue(value) { - this.input.setValue(value, {silent: 1}); + this.inputInst.setValue(value, {silent: 1}); }, onRender() { if (!this.input) { - var inputColor = new InputColor({ + const inputColor = new InputColor({ target: this.target, model: this.model, ppfx: this.ppfx }); - this.input = inputColor.render(); - this.$el.append(this.input.$el); - this.$input = this.input.inputEl; - this.$color = this.input.colorEl; + const input = inputColor.render(); + this.$el.append(input.$el); + this.$input = input.inputEl; + this.$color = input.colorEl; + this.input = this.$input.get(0); + this.inputInst = input; } }, diff --git a/src/style_manager/view/PropertyIntegerView.js b/src/style_manager/view/PropertyIntegerView.js index b3b417312..d8b4a41b0 100644 --- a/src/style_manager/view/PropertyIntegerView.js +++ b/src/style_manager/view/PropertyIntegerView.js @@ -18,19 +18,21 @@ module.exports = require('./PropertyView').extend({ }, setValue(value) { - this.input.setValue(value, {silent: 1}); + this.inputInst.setValue(value, {silent: 1}); }, onRender() { if (!this.input) { - var inputNumber = new InputNumber({ + const inputNumber = new InputNumber({ model: this.model, ppfx: this.ppfx }); - this.input = inputNumber.render(); - this.$el.append(this.input.$el); - this.$input = this.input.inputEl; - this.$unit = this.input.unitEl; + const input = inputNumber.render(); + this.$el.append(input.$el); + this.$input = input.inputEl; + this.$unit = input.unitEl; + this.input = this.$input.get(0); + this.inputInst = input; } }, diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index b469d60c2..fcdbd3f70 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -114,7 +114,7 @@ module.exports = PropertyCompositeView.extend({ valueOnIndex(index, propView) { let result; const model = this.model; - const propModel = propView.model; + const propModel = propView && propView.model; const layerIndex = model.get('stackIndex'); // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px... diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 766d77551..ecf71d0e1 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -646,7 +646,7 @@ module.exports = { property: 'box-shadow-blur', type: 'integer', units: ['px'], - defaults: 5, + defaults: '5px', min: 0, },{ property: 'box-shadow-spread', diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js index 8d441ebf3..ffaff1d02 100644 --- a/test/specs/style_manager/view/PropertyColorView.js +++ b/test/specs/style_manager/view/PropertyColorView.js @@ -38,7 +38,8 @@ module.exports = { propTarget }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -72,13 +73,12 @@ module.exports = { it('Input value is empty', () => { expect(view.model.get('value')).toNotExist(); - expect(view.$input.val()).toNotExist(); + expect(view.getInputValue()).toNotExist(); }); it('Update model on setValue', () => { view.setValue(propValue); - expect(view.model.get('value')).toEqual(propValue); - expect(view.$input.val()).toEqual(propValue); + expect(view.getInputValue()).toEqual(propValue); }); it('Update model on input change', () => { @@ -109,7 +109,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Update value and input on target swap', () => { @@ -148,15 +149,16 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Value as default', () => { expect(view.model.get('value')).toEqual(propValue); }); - it('Input value is as default', () => { - expect(view.$input.val()).toEqual(propValue); + it('Input value is empty', () => { + expect(view.getInputValue()).toEqual(''); }); }); diff --git a/test/specs/style_manager/view/PropertyCompositeView.js b/test/specs/style_manager/view/PropertyCompositeView.js index 8c41c3842..57b772446 100644 --- a/test/specs/style_manager/view/PropertyCompositeView.js +++ b/test/specs/style_manager/view/PropertyCompositeView.js @@ -53,7 +53,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -98,7 +99,7 @@ module.exports = { it('Update input on value change', () => { view.model.set('value', propValue); // Fetch always values from properties - expect(view.$input.val()).toEqual('0% val2'); + expect(view.getInputValue()).toEqual('0% val2'); }); describe('With target setted', () => { @@ -122,7 +123,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); prop2Val = properties[1].defaults; prop2Unit = properties[1].units[0]; prop3Val = properties[2].list[2].value; @@ -163,7 +165,8 @@ module.exports = { model, propTarget: target }); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); $prop1 = view.$props.find('#' + properties[0].property + ' input'); $prop1.val(propValue).trigger('change'); var compStyle = view.getTarget().get('style'); @@ -224,7 +227,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Value as default', () => { diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js index b00c5e464..fd061f9e8 100644 --- a/test/specs/style_manager/view/PropertyIntegerView.js +++ b/test/specs/style_manager/view/PropertyIntegerView.js @@ -44,7 +44,8 @@ module.exports = { propTarget }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -90,14 +91,13 @@ module.exports = { it('Input value is empty', () => { expect(view.model.get('value')).toNotExist(); - expect(view.model.get('unit')).toEqual('px'); }); it('Update model on setValue', () => { view.setValue(intValue + unitValue); expect(view.model.get('value')).toEqual(parseFloat(intValue)); expect(view.model.get('unit')).toEqual(unitValue); - expect(view.$input.val()).toEqual(intValue); + expect(view.getInputValue()).toEqual(intValue); expect(view.$unit.val()).toEqual(unitValue); }); @@ -134,7 +134,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Update value and input on target swap', () => { @@ -156,7 +157,7 @@ module.exports = { view.propTarget.trigger('update'); expect(view.model.get('value')).toEqual(20); expect(view.model.get('unit')).toEqual('em'); - expect(view.$input.val()).toEqual('20'); + expect(view.getInputValue()).toEqual('20'); expect(view.$unit.val()).toEqual('em'); }); @@ -179,7 +180,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Value as default', () => { @@ -188,20 +190,20 @@ module.exports = { }); it('Input value is as default', () => { - expect(view.$input.val()).toEqual(intValue); + expect(view.getInputValue()).toEqual(''); expect(view.$unit.val()).toEqual(units[1]); }); it('Input follows min', () => { view.$input.val(minValue - 50).trigger('change'); expect(view.model.get('value')).toEqual(minValue); - expect(view.$input.val()).toEqual(minValue + ""); + expect(view.getInputValue()).toEqual(minValue + ""); }); it('Input follows max', () => { view.$input.val(maxValue + 50).trigger('change'); expect(view.model.get('value')).toEqual(maxValue); - expect(view.$input.val()).toEqual(maxValue + ""); + expect(view.getInputValue()).toEqual(maxValue + ""); }); }); diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js index 38d4b5de5..37e1a60b9 100644 --- a/test/specs/style_manager/view/PropertyRadioView.js +++ b/test/specs/style_manager/view/PropertyRadioView.js @@ -42,7 +42,8 @@ module.exports = { propTarget }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -91,7 +92,6 @@ module.exports = { it('Update model on input change', () => { view.setValue(propValue); - expect(view.model.get('value')).toEqual(propValue); expect(view.getInputValue()).toEqual(propValue); }); @@ -118,7 +118,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Update value and input on target swap', () => { @@ -158,7 +159,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render() + $fixture.html(view.el); }); it('Value as default', () => { @@ -166,7 +168,7 @@ module.exports = { }); it('Input value is as default', () => { - expect(view.getInputValue()).toEqual(defValue); + expect(view.model.getDefaultValue()).toEqual(defValue); }); }); diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js index 37f71d477..24266324c 100644 --- a/test/specs/style_manager/view/PropertySelectView.js +++ b/test/specs/style_manager/view/PropertySelectView.js @@ -43,7 +43,8 @@ module.exports = { propTarget }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -84,7 +85,7 @@ module.exports = { }); it('Input should exist', () => { - expect(view.$input).toExist(); + expect(view.input).toExist(); }); it('Input value is empty', () => { @@ -92,13 +93,14 @@ module.exports = { }); it('Update model on input change', () => { - view.$input.val(propValue).trigger('change'); + view.getInputEl().value = propValue; + view.inputValueChanged(); expect(view.model.get('value')).toEqual(propValue); }); it('Update input on value change', () => { view.model.set('value', propValue); - expect(view.$input.val()).toEqual(propValue); + expect(view.getInputValue()).toEqual(propValue); }); it('Update target on value change', () => { @@ -119,7 +121,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Update value and input on target swap', () => { @@ -128,7 +131,7 @@ module.exports = { component.set('style', style); view.propTarget.trigger('update'); expect(view.model.get('value')).toEqual(propValue); - expect(view.$input.val()).toEqual(propValue); + expect(view.getInputValue()).toEqual(propValue); }); it('Update value after multiple swaps', () => { @@ -140,7 +143,7 @@ module.exports = { component.set('style', style); view.propTarget.trigger('update'); expect(view.model.get('value')).toEqual('test2value'); - expect(view.$input.val()).toEqual('test2value'); + expect(view.getInputValue()).toEqual('test2value'); }); }) @@ -159,7 +162,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Value as default', () => { @@ -168,6 +172,7 @@ module.exports = { it('Empty value as default', () => { options = [ + {value: '', name: 'test'}, {value: 'test1value', name: 'test1'}, {value: 'test2value', name: 'test2'}, {value: '', name: 'TestDef'} @@ -182,12 +187,13 @@ module.exports = { view = new PropertySelectView({ model }); - $fixture.html(view.render().el); - expect(view.$input.val()).toEqual(''); + view.render(); + $fixture.html(view.el); + expect(view.getInputValue()).toEqual(''); }); it('Input value is as default', () => { - expect(view.$input.val()).toEqual(defValue); + expect(view.model.getDefaultValue()).toEqual(defValue); }); }); diff --git a/test/specs/style_manager/view/PropertyStackView.js b/test/specs/style_manager/view/PropertyStackView.js index 6f9cd7bea..e9c812d39 100644 --- a/test/specs/style_manager/view/PropertyStackView.js +++ b/test/specs/style_manager/view/PropertyStackView.js @@ -59,7 +59,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -119,7 +120,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); model.get('layers').add(layers); }); @@ -164,7 +166,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); prop3Val = properties[2].list[2].value; prop2Val = properties[1].defaults; prop2Unit = properties[1].units[0]; @@ -278,7 +281,8 @@ module.exports = { model, propTarget: target }); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); prop3Val = properties[2].list[2].value; prop2Val = properties[1].defaults; prop2Unit = properties[1].units[0]; diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js index 34a1d939a..b628159fc 100644 --- a/test/specs/style_manager/view/PropertyView.js +++ b/test/specs/style_manager/view/PropertyView.js @@ -36,7 +36,8 @@ module.exports = { }; view = new PropertyView(options); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); afterEach(() => { @@ -56,29 +57,30 @@ module.exports = { }); it('Input should exist', () => { - expect(view.$input).toExist(); + expect(view.getInputEl()).toExist(); }); it('Input value is empty', () => { expect(view.model.get('value')).toNotExist(); - expect(view.$input.val()).toNotExist(); + expect(view.getInputValue()).toNotExist(); }); it('Model not change without update trigger', () => { - view.$input.val(propValue); + view.getInputEl().value = propValue; expect(view.model.get('value')).toNotExist(); }); // Tests inputValueChanged() it('Update model on input change', () => { - view.$input.val(propValue).trigger('change'); + view.getInputEl().value = propValue; + view.inputValueChanged(); expect(view.model.get('value')).toEqual(propValue); }); // Tests modelValueChanged() -> ... it('Update input on value change', () => { view.model.set('value', propValue); - expect(view.$input.val()).toEqual(propValue); + expect(view.getInputValue()).toEqual(propValue); }); it('Update target on value change', () => { @@ -153,7 +155,8 @@ module.exports = { propTarget: target }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('updateTargetStyle', () => { @@ -176,7 +179,7 @@ module.exports = { component.set('style', style); view.propTarget.trigger('update'); expect(view.model.get('value')).toEqual(propValue); - expect(view.$input.val()).toEqual(propValue); + expect(view.getInputValue()).toEqual(propValue); }); it('Update value after multiple swaps', () => { @@ -188,7 +191,7 @@ module.exports = { component.set('style', style); view.propTarget.trigger('update'); expect(view.model.get('value')).toEqual(propValue + '2'); - expect(view.$input.val()).toEqual(propValue + '2'); + expect(view.getInputValue()).toEqual(propValue + '2'); }); }) @@ -205,7 +208,8 @@ module.exports = { model }); $fixture.empty().appendTo($fixtures); - $fixture.html(view.render().el); + view.render(); + $fixture.html(view.el); }); it('Value as default', () => { @@ -213,11 +217,12 @@ module.exports = { }); it('Placeholder as default', () => { - expect(view.$input.attr('placeholder')).toEqual(defValue); + var input = view.getInputEl(); + expect(input.getAttribute('placeholder')).toEqual(defValue); }); it('Input value is empty', () => { - expect(view.$input.val()).toEqual(defValue); + expect(view.getInputValue()).toEqual(''); }); });