From 072f11d0419e88fd384d41d9f0a169f85e8fffaf Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 11 Jan 2022 14:28:57 +0100 Subject: [PATCH] Update property view tests --- src/style_manager/model/PropertyComposite.js | 6 +- .../style_manager/view/PropertyColorView.js | 104 +++------- .../view/PropertyCompositeView.js | 183 ++---------------- .../style_manager/view/PropertyIntegerView.js | 113 ++++------- .../style_manager/view/PropertyRadioView.js | 98 +++------- .../style_manager/view/PropertySelectView.js | 90 +++------ .../style_manager/view/PropertyStackView.js | 48 +---- 7 files changed, 130 insertions(+), 512 deletions(-) diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index 7695c0092..bbc02832e 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/src/style_manager/model/PropertyComposite.js @@ -315,11 +315,7 @@ export default class PropertyComposite extends Property { } getFullValue() { - if (this.get('detached')) { - return ''; - } - - return this.get('properties').getFullValue(); + return this.__getFullValue(); } __canClearProp(prop) { diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js index 2e5e80214..7531eccaf 100644 --- a/test/specs/style_manager/view/PropertyColorView.js +++ b/test/specs/style_manager/view/PropertyColorView.js @@ -1,4 +1,3 @@ -import Backbone from 'backbone'; import PropertyColorView from 'style_manager/view/PropertyColorView'; import Property from 'style_manager/model/Property'; import Component from 'dom_components/model/Component'; @@ -9,18 +8,16 @@ describe('PropertyColorView', () => { let em; let dcomp; let compOpts; - var component; - var fixtures; - var target; - var model; - var view; - var propTarget; - var propName = 'testprop'; - var propValue = '#fff'; - var defValue = 'test2value'; + let component; + let fixtures; + let target; + let model; + let view; + let propName = 'testprop'; + let propValue = '#fff'; beforeAll(() => { - $.fn.spectrum = function() { + $.fn.spectrum = function () { return this; }; }); @@ -29,18 +26,16 @@ describe('PropertyColorView', () => { em = new Editor({}); dcomp = new DomComponents(); compOpts = { em, componentTypes: dcomp.componentTypes }; - propTarget = { ...Backbone.Events }; target = new Component({}, compOpts); component = new Component({}, compOpts); - model = new Property({ - type: 'color', - property: propName - }); - propTarget.model = component; - view = new PropertyColorView({ - model, - propTarget - }); + model = new Property( + { + type: 'color', + property: propName, + }, + { em } + ); + view = new PropertyColorView({ model }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; view.render(); @@ -70,72 +65,31 @@ describe('PropertyColorView', () => { }); test('Inputs should exist', () => { - expect(view.$input).toBeTruthy(); - expect(view.$color).toBeTruthy(); + expect(view.inputInst).toBeTruthy(); }); test('Input value is empty', () => { expect(view.model.get('value')).toBeFalsy(); - expect(view.getInputValue()).toBeFalsy(); + expect(view.getInputEl().value).toBeFalsy(); }); test('Update model on setValue', () => { view.setValue(propValue); - expect(view.getInputValue()).toEqual(propValue); + expect(view.getInputEl().value).toEqual(propValue); }); test('Update model on input change', () => { view.getInputEl().value = propValue; - view.inputValueChanged(); + view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} }); expect(view.model.get('value')).toEqual(propValue); }); - test('Update input on value change', () => { + test('Update input on value change', done => { view.model.set('value', propValue); - expect(view.getInputValue()).toEqual(propValue); - }); - - test('Update target on value change', () => { - view.selectedComponent = component; - view.model.set('value', propValue); - var compStyle = view.selectedComponent.get('style'); - var assertStyle = {}; - assertStyle[propName] = propValue; - expect(compStyle).toEqual(assertStyle); - }); - - describe('With target setted', () => { - beforeEach(() => { - target.model = component; - view = new PropertyColorView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - }); - - test('Update value and input on target swap', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual(propValue); - expect(view.getInputValue()).toEqual(propValue); - }); - - test('Update value after multiple swaps', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - style[propName] = '#123123'; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual('#123123'); - expect(view.getInputValue()).toEqual('#123123'); - }); + setTimeout(() => { + expect(view.getInputEl().value).toEqual(propValue); + done(); + }, 11); }); describe('Init property', () => { @@ -144,10 +98,10 @@ describe('PropertyColorView', () => { model = new Property({ type: 'color', property: propName, - defaults: propValue + defaults: propValue, }); view = new PropertyColorView({ - model + model, }); fixtures.innerHTML = ''; view.render(); @@ -155,11 +109,11 @@ describe('PropertyColorView', () => { }); test('Value as default', () => { - expect(view.model.get('value')).toEqual(propValue); + expect(view.model.getValue()).toEqual(propValue); }); test('Input value is the default', () => { - expect(view.getInputValue()).toEqual(propValue); + expect(view.getInputEl().value).toEqual(propValue); }); }); }); diff --git a/test/specs/style_manager/view/PropertyCompositeView.js b/test/specs/style_manager/view/PropertyCompositeView.js index d46bab0fd..fceaaa41e 100644 --- a/test/specs/style_manager/view/PropertyCompositeView.js +++ b/test/specs/style_manager/view/PropertyCompositeView.js @@ -14,24 +14,22 @@ describe('PropertyCompositeView', () => { var model; var view; var propName = 'testprop'; - var propValue = 'test1value'; - var defValue = 'test2value'; var properties = [ { - property: 'subprop1' + property: 'subprop1', }, { type: 'integer', property: 'subprop2', defaults: 0, - units: ['%', 'px'] + units: ['%', 'px'], }, { type: 'select', property: 'subprop3', defaults: 'val2', - list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }] - } + list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }], + }, ]; beforeEach(() => { @@ -41,14 +39,15 @@ describe('PropertyCompositeView', () => { target = new Component({}, compOpts); component = new Component({}, compOpts); target.model = component; - model = new PropertyComposite({ - type: 'composite', - property: propName, - properties - }); - view = new PropertyCompositeView({ - model - }); + model = new PropertyComposite( + { + type: 'composite', + property: propName, + properties, + }, + { em } + ); + view = new PropertyCompositeView({ model }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; view.render(); @@ -76,167 +75,13 @@ describe('PropertyCompositeView', () => { test('Properties rendered correctly', () => { var children = view.el.querySelector('.properties').children; expect(children.length).toEqual(properties.length); - expect(children[0].id).toEqual(properties[0].property); - expect(children[1].id).toEqual(properties[1].property); - expect(children[2].id).toEqual(properties[2].property); }); test('Props should exist', () => { - expect(view.$props).toBeTruthy(); + expect(view.props).toBeTruthy(); }); test('Input value is empty', () => { expect(model.getFullValue()).toEqual('0 val2'); }); - - test('Update input on value change', () => { - view.model.set('value', propValue); - // Fetch always values from properties - expect(view.getInputValue()).toEqual('0 val2'); - }); - - describe('With target setted', () => { - var prop2Val; - var prop3Val; - var prop2Unit; - var finalResult; - var $prop1; - var $prop2; - var $prop3; - - beforeEach(() => { - model = new PropertyComposite({ - type: 'composite', - property: propName, - properties - }); - view = new PropertyCompositeView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - prop2Val = properties[1].defaults; - prop2Unit = properties[1].units[0]; - prop3Val = properties[2].list[2].value; - finalResult = propValue + ' ' + prop2Val + ' ' + prop3Val; - $prop1 = view.$props.find('#' + properties[0].property + ' input'); - $prop2 = view.$props.find('#' + properties[1].property + ' input'); - $prop3 = view.$props.find('#' + properties[2].property + ' select'); - }); - - test('Update model on input change', () => { - $prop1.val(propValue).trigger('change'); - $prop3.val(prop3Val).trigger('change'); - expect(model.getFullValue()).toEqual(finalResult); - }); - - test('Update value on models change', () => { - view.model - .get('properties') - .at(0) - .set('value', propValue); - view.model - .get('properties') - .at(2) - .set('value', prop3Val); - expect(view.model.get('value')).toEqual(finalResult); - }); - - test('Update target on value change', () => { - $prop1.val(propValue).trigger('change'); - var compStyle = view.getTarget().get('style'); - var assertStyle = {}; - assertStyle[propName] = propValue + ' 0 val2'; - expect(compStyle).toEqual(assertStyle); - }); - - test('Update target on detached value change', () => { - model = new PropertyComposite({ - type: 'composite', - property: propName, - properties, - detached: true - }); - view = new PropertyCompositeView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - $prop1 = view.$props.find('#' + properties[0].property + ' input'); - $prop1.val(propValue).trigger('change'); - var compStyle = view.getTarget().get('style'); - var assertStyle = {}; - assertStyle[properties[0].property] = $prop1.val(); - expect(compStyle).toEqual(assertStyle); - }); - - test('Update value and input on target swap', () => { - var style = {}; - style[propName] = finalResult; - component.set('style', style); - view.propTarget.trigger('update'); - expect($prop1.val()).toEqual(propValue); - expect($prop3.val()).toEqual(prop3Val); - }); - - test('Update value after multiple swaps', () => { - var style = {}; - style[propName] = finalResult; - component.set('style', style); - view.propTarget.trigger('update'); - style[propName] = - propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1'; - component.set('style', style); - view.propTarget.trigger('update'); - expect($prop1.val()).toEqual(propValue + '2'); - expect($prop2.val()).toEqual('2'); - expect($prop3.val()).toEqual('val1'); - }); - - test('The value is correctly extracted from the composite string', () => { - var style = {}; - style[propName] = 'value1 value2 value3 value4'; - component.set('style', style); - expect(view.valueOnIndex(2)).toEqual('value3'); - expect(view.valueOnIndex(0)).toEqual('value1'); - expect(view.valueOnIndex(4)).toEqual(undefined); - }); - - test('Build value from properties', () => { - view.model - .get('properties') - .at(0) - .set('value', propValue); - view.model - .get('properties') - .at(2) - .set('value', prop3Val); - expect(model.getFullValue()).toEqual(finalResult); - }); - }); - - describe('Init property', () => { - beforeEach(() => { - model = new PropertyComposite({ - type: 'composite', - property: propName, - properties, - defaults: defValue - }); - view = new PropertyCompositeView({ - model - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - }); - - test('Value as default', () => { - expect(view.model.get('value')).toEqual(defValue); - }); - }); }); diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js index 44cfb0f0d..eaf3818ea 100644 --- a/test/specs/style_manager/view/PropertyIntegerView.js +++ b/test/specs/style_manager/view/PropertyIntegerView.js @@ -1,4 +1,3 @@ -import Backbone from 'backbone'; import PropertyNumberView from 'style_manager/view/PropertyNumberView'; import PropertyNumber from 'style_manager/model/PropertyNumber'; import Component from 'dom_components/model/Component'; @@ -14,12 +13,10 @@ describe('PropertyNumberView', () => { var target; var model; var view; - var propTarget; var propName = 'testprop'; var intValue = '55'; var unitValue = 'px'; var propValue = intValue + unitValue; - var defValue = 'test2value'; var units = ['px', '%', 'em']; var minValue = -15; var maxValue = 75; @@ -29,18 +26,16 @@ describe('PropertyNumberView', () => { em = new Editor({}); dcomp = new DomComponents(); compOpts = { em, componentTypes: dcomp.componentTypes }; - propTarget = { ...Backbone.Events }; target = new Component({}, compOpts); component = new Component({}, compOpts); - model = new PropertyNumber({ - units, - property: propName, - }); - propTarget.model = component; - view = new PropertyNumberView({ - model, - propTarget, - }); + model = new PropertyNumber( + { + units, + property: propName, + }, + { em } + ); + view = new PropertyNumberView({ model }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; view.render(); @@ -72,19 +67,18 @@ describe('PropertyNumberView', () => { test('Units rendered', () => { var select = view.el.querySelector(unitsElSel); - expect(select.children.length).toEqual(units.length); + expect(select.children.length).toEqual(units.length + 1); // (+ hidden option) }); test('Units rendered correctly', () => { var children = view.el.querySelector(unitsElSel).children; - expect(children[0].textContent).toEqual(units[0]); - expect(children[1].textContent).toEqual(units[1]); - expect(children[2].textContent).toEqual(units[2]); + expect(children[1].textContent).toEqual(units[0]); + expect(children[2].textContent).toEqual(units[1]); + expect(children[3].textContent).toEqual(units[2]); }); test('Inputs should exist', () => { expect(view.input).toBeTruthy(); - expect(view.unit).toBeTruthy(); }); test('Input value is empty', () => { @@ -95,78 +89,39 @@ describe('PropertyNumberView', () => { view.setValue(intValue + unitValue); expect(view.model.get('value')).toEqual(parseFloat(intValue)); expect(view.model.get('unit')).toEqual(unitValue); - expect(view.getInputValue()).toEqual(intValue); - expect(view.unit.value).toEqual(unitValue); + expect(view.getInputEl().value).toEqual(intValue); }); test('Update model on input change', () => { - view.$input.val(123).trigger('change'); + view.inputInst.inputEl.val(123).trigger('change'); expect(view.model.get('value')).toEqual(123); }); test('Update model on unit change', () => { - view.$unit.val(units[1]).trigger('change'); + view.inputInst.unitEl.value = units[1]; + view.inputInst.handleUnitChange({ stopPropagation() {} }); expect(view.model.get('unit')).toEqual(units[1]); }); test('Update input on value change', () => { view.model.set('value', intValue); - expect(view.getInputValue()).toEqual(intValue); - }); - - test('Update target on value change', () => { - const val = `${intValue}%`; - view.model.setValue(val); - expect(view.getTargetValue()).toEqual(val); - }); - - describe('With target setted', () => { - beforeEach(() => { - target.model = component; - view = new PropertyNumberView({ - model, - propTarget: target, - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - }); - - test('Update value and input on target swap', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual(parseFloat(intValue)); - expect(view.getInputValue()).toEqual(intValue); - }); - - test('Update value after multiple swaps', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - style[propName] = '20em'; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual(20); - expect(view.model.get('unit')).toEqual('em'); - expect(view.getInputValue()).toEqual('20'); - expect(view.$unit.val()).toEqual('em'); - }); + expect(view.getInputEl().value).toEqual(intValue); }); describe('Init property', () => { beforeEach(() => { component = new Component(); - model = new PropertyNumber({ - units, - property: propName, - defaults: intValue, - min: minValue, - max: maxValue, - unit: units[1], - }); + model = new PropertyNumber( + { + units, + property: propName, + defaults: intValue, + min: minValue, + max: maxValue, + unit: units[1], + }, + { em } + ); view = new PropertyNumberView({ model, }); @@ -181,20 +136,20 @@ describe('PropertyNumberView', () => { }); test('Input value is as default', () => { - expect(view.getInputValue()).toEqual(intValue); - expect(view.$unit.val()).toEqual(units[1]); + expect(view.getInputEl().value).toEqual(intValue); + expect(view.inputInst.unitEl.value).toEqual(units[1]); }); test('Input follows min', () => { - view.$input.val(minValue - 50).trigger('change'); + view.inputInst.inputEl.val(minValue - 50).trigger('change'); expect(view.model.get('value')).toEqual(minValue); - expect(view.getInputValue()).toEqual(minValue + ''); + expect(view.getInputEl().value).toEqual(minValue + ''); }); test('Input follows max', () => { - view.$input.val(maxValue + 50).trigger('change'); + view.inputInst.inputEl.val(maxValue + 50).trigger('change'); expect(view.model.get('value')).toEqual(maxValue); - expect(view.getInputValue()).toEqual(maxValue + ''); + expect(view.getInputEl().value).toEqual(maxValue + ''); }); }); }); diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js index 53d817c5e..03ce818a1 100644 --- a/test/specs/style_manager/view/PropertyRadioView.js +++ b/test/specs/style_manager/view/PropertyRadioView.js @@ -1,6 +1,5 @@ -import Backbone from 'backbone'; import PropertyRadioView from 'style_manager/view/PropertyRadioView'; -import Property from 'style_manager/model/Property'; +import Property from 'style_manager/model/PropertySelect'; import Component from 'dom_components/model/Component'; import Editor from 'editor/model/Editor'; import DomComponents from 'dom_components'; @@ -14,38 +13,34 @@ describe('PropertyRadioView', () => { var target; var model; var view; - var propTarget; var propName = 'testprop'; var propValue = 'test1value'; var defValue = 'test2value'; var options = [ { value: 'test1value', title: 'testtitle' }, - { name: 'test2', value: 'test2value' } + { name: 'test2', value: 'test2value' }, ]; // Have some issue with getCheckedEl() and jsdom // this view.getInputEl().querySelector('input:checked') return null // but view.getInputEl().querySelectorAll('input:checked')[0] works - var getCheckedEl = view => - view.getInputEl().querySelectorAll('input:checked')[0]; + var getCheckedEl = view => view.getInputEl().querySelectorAll('input:checked')[0]; beforeEach(() => { em = new Editor({}); dcomp = new DomComponents(); compOpts = { em, componentTypes: dcomp.componentTypes }; - propTarget = { ...Backbone.Events }; target = new Component({}, compOpts); component = new Component({}, compOpts); - model = new Property({ - type: 'radio', - list: options, - property: propName - }); - propTarget.model = component; - view = new PropertyRadioView({ - model, - propTarget - }); + model = new Property( + { + type: 'radio', + list: options, + property: propName, + }, + { em } + ); + view = new PropertyRadioView({ model }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; view.render(); @@ -79,18 +74,12 @@ describe('PropertyRadioView', () => { test('Options rendered correctly', () => { var children = view.el.querySelector('.field').firstChild.children; - expect(children[0].querySelector('label').textContent).toEqual( - 'test1value' - ); + expect(children[0].querySelector('label').textContent).toEqual('test1value'); expect(children[1].querySelector('label').textContent).toEqual('test2'); expect(children[0].querySelector('input').value).toEqual(options[0].value); expect(children[1].querySelector('input').value).toEqual(options[1].value); - expect(children[0].querySelector('label').getAttribute('title')).toEqual( - options[0].title - ); - expect(children[1].querySelector('label').getAttribute('title')).toEqual( - null - ); + expect(children[0].querySelector('label').getAttribute('title')).toEqual(options[0].title); + expect(children[1].querySelector('label').getAttribute('title')).toEqual(null); }); test('Input should exist', () => { @@ -103,55 +92,16 @@ describe('PropertyRadioView', () => { test('Update model on input change', () => { view.setValue(propValue); - expect(getCheckedEl(view).value).toEqual(propValue); + view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} }); + expect(view.model.get('value')).toEqual(propValue); }); - test('Update input on value change', () => { + test('Update input on value change', done => { view.model.set('value', propValue); - expect(getCheckedEl(view).value).toEqual(propValue); - }); - - test('Update target on value change', () => { - view.selectedComponent = component; - view.model.set('value', propValue); - var compStyle = view.selectedComponent.get('style'); - var assertStyle = {}; - assertStyle[propName] = propValue; - expect(compStyle).toEqual(assertStyle); - }); - - describe('With target setted', () => { - beforeEach(() => { - target.model = component; - view = new PropertyRadioView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - }); - - test('Update value and input on target swap', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual(propValue); + setTimeout(() => { expect(getCheckedEl(view).value).toEqual(propValue); - }); - - test('Update value after multiple swaps', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - style[propName] = 'test2value'; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual('test2value'); - expect(getCheckedEl(view).value).toEqual('test2value'); - }); + done(); + }, 11); }); describe('Init property', () => { @@ -161,10 +111,10 @@ describe('PropertyRadioView', () => { type: 'select', list: options, defaults: defValue, - property: propName + property: propName, }); view = new PropertyRadioView({ - model + model, }); fixtures.innerHTML = ''; view.render(); @@ -172,7 +122,7 @@ describe('PropertyRadioView', () => { }); test('Value as default', () => { - expect(view.model.get('value')).toEqual(defValue); + expect(view.model.getValue()).toEqual(defValue); }); test('Input value is as default', () => { diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js index 8b35b8fc2..26090681b 100644 --- a/test/specs/style_manager/view/PropertySelectView.js +++ b/test/specs/style_manager/view/PropertySelectView.js @@ -1,4 +1,3 @@ -import Backbone from 'backbone'; import PropertySelectView from 'style_manager/view/PropertySelectView'; import Property from 'style_manager/model/PropertyRadio'; import Editor from 'editor/model/Editor'; @@ -14,33 +13,30 @@ describe('PropertySelectView', () => { var target; var model; var view; - var propTarget; var options; var propName = 'testprop'; var propValue = 'test1value'; var defValue = 'test2value'; var options = [ { value: 'test1value', style: 'test:style' }, - { name: 'test2', value: 'test2value' } + { name: 'test2', value: 'test2value' }, ]; beforeEach(() => { em = new Editor({}); dcomp = new DomComponents(); compOpts = { em, componentTypes: dcomp.componentTypes }; - propTarget = { ...Backbone.Events }; target = new Component({}, compOpts); component = new Component({}, compOpts); - model = new Property({ - type: 'select', - list: options, - property: propName - }); - propTarget.model = component; - view = new PropertySelectView({ - model, - propTarget - }); + model = new Property( + { + type: 'select', + list: options, + property: propName, + }, + { em } + ); + view = new PropertySelectView({ model }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; view.render(); @@ -93,56 +89,16 @@ describe('PropertySelectView', () => { test('Update model on input change', () => { view.getInputEl().value = propValue; - view.inputValueChanged(); + view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} }); expect(view.model.get('value')).toEqual(propValue); }); - test('Update input on value change', () => { - view.model.set('value', propValue); - expect(view.getInputValue()).toEqual(propValue); - }); - - test('Update target on value change', () => { - view.selectedComponent = component; + test('Update input on value change', done => { view.model.set('value', propValue); - var compStyle = view.selectedComponent.get('style'); - var assertStyle = {}; - assertStyle[propName] = propValue; - expect(compStyle).toEqual(assertStyle); - }); - - describe('With target setted', () => { - beforeEach(() => { - target.model = component; - view = new PropertySelectView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - }); - - test('Update value and input on target swap', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual(propValue); - expect(view.getInputValue()).toEqual(propValue); - }); - - test('Update value after multiple swaps', () => { - var style = {}; - style[propName] = propValue; - component.set('style', style); - view.propTarget.trigger('update'); - style[propName] = 'test2value'; - component.set('style', style); - view.propTarget.trigger('update'); - expect(view.model.get('value')).toEqual('test2value'); - expect(view.getInputValue()).toEqual('test2value'); - }); + setTimeout(() => { + expect(view.getInputEl().value).toEqual(propValue); + done(); + }, 11); }); describe('Init property', () => { @@ -152,10 +108,10 @@ describe('PropertySelectView', () => { type: 'select', list: options, defaults: defValue, - property: propName + property: propName, }); view = new PropertySelectView({ - model + model, }); fixtures.innerHTML = ''; view.render(); @@ -163,7 +119,7 @@ describe('PropertySelectView', () => { }); test('Value as default', () => { - expect(view.model.get('value')).toEqual(defValue); + expect(view.model.getValue()).toEqual(defValue); }); test('Empty value as default', () => { @@ -171,22 +127,22 @@ describe('PropertySelectView', () => { { value: '', name: 'test' }, { value: 'test1value', name: 'test1' }, { value: 'test2value', name: 'test2' }, - { value: '', name: 'TestDef' } + { value: '', name: 'TestDef' }, ]; component = new Component(); model = new Property({ type: 'select', list: options, defaults: '', - property: 'emptyDefault' + property: 'emptyDefault', }); view = new PropertySelectView({ - model + model, }); view.render(); fixtures.innerHTML = ''; fixtures.appendChild(view.el); - expect(view.getInputValue()).toEqual(''); + expect(view.getInputEl().value).toEqual(''); }); test('Input value is as default', () => { diff --git a/test/specs/style_manager/view/PropertyStackView.js b/test/specs/style_manager/view/PropertyStackView.js index 3c8205a18..1943f44e5 100644 --- a/test/specs/style_manager/view/PropertyStackView.js +++ b/test/specs/style_manager/view/PropertyStackView.js @@ -14,27 +14,20 @@ describe('PropertyStackView', () => { var model; var view; var propName = 'testprop'; - var propValue = 'test1value'; - var defValue = 'test2value'; - var layers = [ - { value: 'lval1' }, - { value: 'lval2 lval22' }, - { value: 'lval3 lval32 lval33' } - ]; var properties = [ { property: 'subprop1' }, { type: 'integer', property: 'subprop2', defaults: 0, - units: ['%', 'px'] + units: ['%', 'px'], }, { type: 'select', property: 'subprop3', defaults: 'val2', - list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }] - } + list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }], + }, ]; beforeEach(() => { @@ -47,10 +40,10 @@ describe('PropertyStackView', () => { model = new Property({ type: 'stack', property: propName, - properties + properties, }); view = new PropertyStackView({ - model + model, }); document.body.innerHTML = '
'; fixtures = document.body.firstChild; @@ -85,39 +78,8 @@ describe('PropertyStackView', () => { expect(children.length).toEqual(1); }); - test('Input value is on default', () => { - expect(view.model.get('value')).toEqual('0 val2'); - }); - test('Layers container is empty', () => { var layers = view.el.querySelector('.layers'); expect(layers.innerHTML).toBeFalsy(); }); - - describe('With layers', () => { - beforeEach(() => { - model = new Property({ - type: 'stack', - property: propName, - properties - }); - view = new PropertyStackView({ - model, - propTarget: target - }); - fixtures.innerHTML = ''; - view.render(); - fixtures.appendChild(view.el); - model.get('layers').add(layers); - }); - - test('Layers inserted', () => { - expect(view.getLayers().length).toEqual(layers.length); - }); - - test('Add layer', () => { - view.addLayer(); - expect(view.getLayers().length).toEqual(layers.length + 1); - }); - }); });