tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update property view tests

up-style-manager
Artur Arseniev 5 years ago
parent
2c52b3d7f3
commit
072f11d041
7 changed files with 130 additions and 512 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/style_manager/model/PropertyComposite.js
  2. 104
      test/specs/style_manager/view/PropertyColorView.js
  3. 183
      test/specs/style_manager/view/PropertyCompositeView.js
  4. 113
      test/specs/style_manager/view/PropertyIntegerView.js
  5. 98
      test/specs/style_manager/view/PropertyRadioView.js
  6. 90
      test/specs/style_manager/view/PropertySelectView.js
  7. 48
      test/specs/style_manager/view/PropertyStackView.js

6
src/style_manager/model/PropertyComposite.js
View File

@ -315,11 +315,7 @@ export default class PropertyComposite extends Property {
} }
getFullValue() { getFullValue() {
if (this.get('detached')) { return this.__getFullValue();
return '';
}
return this.get('properties').getFullValue();
} }
__canClearProp(prop) { __canClearProp(prop) {

104
test/specs/style_manager/view/PropertyColorView.js
View File

@ -1,4 +1,3 @@
import Backbone from 'backbone';
import PropertyColorView from 'style_manager/view/PropertyColorView'; import PropertyColorView from 'style_manager/view/PropertyColorView';
import Property from 'style_manager/model/Property'; import Property from 'style_manager/model/Property';
import Component from 'dom_components/model/Component'; import Component from 'dom_components/model/Component';
@ -9,18 +8,16 @@ describe('PropertyColorView', () => {
let em; let em;
let dcomp; let dcomp;
let compOpts; let compOpts;
var component; let component;
var fixtures; let fixtures;
var target; let target;
var model; let model;
var view; let view;
var propTarget; let propName = 'testprop';
var propName = 'testprop'; let propValue = '#fff';
var propValue = '#fff';
var defValue = 'test2value';
beforeAll(() => { beforeAll(() => {
$.fn.spectrum = function() { $.fn.spectrum = function () {
return this; return this;
}; };
}); });
@ -29,18 +26,16 @@ describe('PropertyColorView', () => {
em = new Editor({}); em = new Editor({});
dcomp = new DomComponents(); dcomp = new DomComponents();
compOpts = { em, componentTypes: dcomp.componentTypes }; compOpts = { em, componentTypes: dcomp.componentTypes };
propTarget = { ...Backbone.Events };
target = new Component({}, compOpts); target = new Component({}, compOpts);
component = new Component({}, compOpts); component = new Component({}, compOpts);
model = new Property({ model = new Property(
type: 'color', {
property: propName type: 'color',
}); property: propName,
propTarget.model = component; },
view = new PropertyColorView({ { em }
model, );
propTarget view = new PropertyColorView({ model });
});
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
view.render(); view.render();
@ -70,72 +65,31 @@ describe('PropertyColorView', () => {
}); });
test('Inputs should exist', () => { test('Inputs should exist', () => {
expect(view.$input).toBeTruthy(); expect(view.inputInst).toBeTruthy();
expect(view.$color).toBeTruthy();
}); });
test('Input value is empty', () => { test('Input value is empty', () => {
expect(view.model.get('value')).toBeFalsy(); expect(view.model.get('value')).toBeFalsy();
expect(view.getInputValue()).toBeFalsy(); expect(view.getInputEl().value).toBeFalsy();
}); });
test('Update model on setValue', () => { test('Update model on setValue', () => {
view.setValue(propValue); view.setValue(propValue);
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputEl().value).toEqual(propValue);
}); });
test('Update model on input change', () => { test('Update model on input change', () => {
view.getInputEl().value = propValue; view.getInputEl().value = propValue;
view.inputValueChanged(); view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
expect(view.model.get('value')).toEqual(propValue); 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); view.model.set('value', propValue);
expect(view.getInputValue()).toEqual(propValue); setTimeout(() => {
}); expect(view.getInputEl().value).toEqual(propValue);
done();
test('Update target on value change', () => { }, 11);
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');
});
}); });
describe('Init property', () => { describe('Init property', () => {
@ -144,10 +98,10 @@ describe('PropertyColorView', () => {
model = new Property({ model = new Property({
type: 'color', type: 'color',
property: propName, property: propName,
defaults: propValue defaults: propValue,
}); });
view = new PropertyColorView({ view = new PropertyColorView({
model model,
}); });
fixtures.innerHTML = ''; fixtures.innerHTML = '';
view.render(); view.render();
@ -155,11 +109,11 @@ describe('PropertyColorView', () => {
}); });
test('Value as default', () => { test('Value as default', () => {
expect(view.model.get('value')).toEqual(propValue); expect(view.model.getValue()).toEqual(propValue);
}); });
test('Input value is the default', () => { test('Input value is the default', () => {
expect(view.getInputValue()).toEqual(propValue); expect(view.getInputEl().value).toEqual(propValue);
}); });
}); });
}); });

183
test/specs/style_manager/view/PropertyCompositeView.js
View File

@ -14,24 +14,22 @@ describe('PropertyCompositeView', () => {
var model; var model;
var view; var view;
var propName = 'testprop'; var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var properties = [ var properties = [
{ {
property: 'subprop1' property: 'subprop1',
}, },
{ {
type: 'integer', type: 'integer',
property: 'subprop2', property: 'subprop2',
defaults: 0, defaults: 0,
units: ['%', 'px'] units: ['%', 'px'],
}, },
{ {
type: 'select', type: 'select',
property: 'subprop3', property: 'subprop3',
defaults: 'val2', defaults: 'val2',
list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }] list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }],
} },
]; ];
beforeEach(() => { beforeEach(() => {
@ -41,14 +39,15 @@ describe('PropertyCompositeView', () => {
target = new Component({}, compOpts); target = new Component({}, compOpts);
component = new Component({}, compOpts); component = new Component({}, compOpts);
target.model = component; target.model = component;
model = new PropertyComposite({ model = new PropertyComposite(
type: 'composite', {
property: propName, type: 'composite',
properties property: propName,
}); properties,
view = new PropertyCompositeView({ },
model { em }
}); );
view = new PropertyCompositeView({ model });
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
view.render(); view.render();
@ -76,167 +75,13 @@ describe('PropertyCompositeView', () => {
test('Properties rendered correctly', () => { test('Properties rendered correctly', () => {
var children = view.el.querySelector('.properties').children; var children = view.el.querySelector('.properties').children;
expect(children.length).toEqual(properties.length); 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', () => { test('Props should exist', () => {
expect(view.$props).toBeTruthy(); expect(view.props).toBeTruthy();
}); });
test('Input value is empty', () => { test('Input value is empty', () => {
expect(model.getFullValue()).toEqual('0 val2'); 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);
});
});
}); });

113
test/specs/style_manager/view/PropertyIntegerView.js
View File

@ -1,4 +1,3 @@
import Backbone from 'backbone';
import PropertyNumberView from 'style_manager/view/PropertyNumberView'; import PropertyNumberView from 'style_manager/view/PropertyNumberView';
import PropertyNumber from 'style_manager/model/PropertyNumber'; import PropertyNumber from 'style_manager/model/PropertyNumber';
import Component from 'dom_components/model/Component'; import Component from 'dom_components/model/Component';
@ -14,12 +13,10 @@ describe('PropertyNumberView', () => {
var target; var target;
var model; var model;
var view; var view;
var propTarget;
var propName = 'testprop'; var propName = 'testprop';
var intValue = '55'; var intValue = '55';
var unitValue = 'px'; var unitValue = 'px';
var propValue = intValue + unitValue; var propValue = intValue + unitValue;
var defValue = 'test2value';
var units = ['px', '%', 'em']; var units = ['px', '%', 'em'];
var minValue = -15; var minValue = -15;
var maxValue = 75; var maxValue = 75;
@ -29,18 +26,16 @@ describe('PropertyNumberView', () => {
em = new Editor({}); em = new Editor({});
dcomp = new DomComponents(); dcomp = new DomComponents();
compOpts = { em, componentTypes: dcomp.componentTypes }; compOpts = { em, componentTypes: dcomp.componentTypes };
propTarget = { ...Backbone.Events };
target = new Component({}, compOpts); target = new Component({}, compOpts);
component = new Component({}, compOpts); component = new Component({}, compOpts);
model = new PropertyNumber({ model = new PropertyNumber(
units, {
property: propName, units,
}); property: propName,
propTarget.model = component; },
view = new PropertyNumberView({ { em }
model, );
propTarget, view = new PropertyNumberView({ model });
});
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
view.render(); view.render();
@ -72,19 +67,18 @@ describe('PropertyNumberView', () => {
test('Units rendered', () => { test('Units rendered', () => {
var select = view.el.querySelector(unitsElSel); 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', () => { test('Units rendered correctly', () => {
var children = view.el.querySelector(unitsElSel).children; var children = view.el.querySelector(unitsElSel).children;
expect(children[0].textContent).toEqual(units[0]); expect(children[1].textContent).toEqual(units[0]);
expect(children[1].textContent).toEqual(units[1]); expect(children[2].textContent).toEqual(units[1]);
expect(children[2].textContent).toEqual(units[2]); expect(children[3].textContent).toEqual(units[2]);
}); });
test('Inputs should exist', () => { test('Inputs should exist', () => {
expect(view.input).toBeTruthy(); expect(view.input).toBeTruthy();
expect(view.unit).toBeTruthy();
}); });
test('Input value is empty', () => { test('Input value is empty', () => {
@ -95,78 +89,39 @@ describe('PropertyNumberView', () => {
view.setValue(intValue + unitValue); view.setValue(intValue + unitValue);
expect(view.model.get('value')).toEqual(parseFloat(intValue)); expect(view.model.get('value')).toEqual(parseFloat(intValue));
expect(view.model.get('unit')).toEqual(unitValue); expect(view.model.get('unit')).toEqual(unitValue);
expect(view.getInputValue()).toEqual(intValue); expect(view.getInputEl().value).toEqual(intValue);
expect(view.unit.value).toEqual(unitValue);
}); });
test('Update model on input change', () => { 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); expect(view.model.get('value')).toEqual(123);
}); });
test('Update model on unit change', () => { 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]); expect(view.model.get('unit')).toEqual(units[1]);
}); });
test('Update input on value change', () => { test('Update input on value change', () => {
view.model.set('value', intValue); view.model.set('value', intValue);
expect(view.getInputValue()).toEqual(intValue); expect(view.getInputEl().value).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');
});
}); });
describe('Init property', () => { describe('Init property', () => {
beforeEach(() => { beforeEach(() => {
component = new Component(); component = new Component();
model = new PropertyNumber({ model = new PropertyNumber(
units, {
property: propName, units,
defaults: intValue, property: propName,
min: minValue, defaults: intValue,
max: maxValue, min: minValue,
unit: units[1], max: maxValue,
}); unit: units[1],
},
{ em }
);
view = new PropertyNumberView({ view = new PropertyNumberView({
model, model,
}); });
@ -181,20 +136,20 @@ describe('PropertyNumberView', () => {
}); });
test('Input value is as default', () => { test('Input value is as default', () => {
expect(view.getInputValue()).toEqual(intValue); expect(view.getInputEl().value).toEqual(intValue);
expect(view.$unit.val()).toEqual(units[1]); expect(view.inputInst.unitEl.value).toEqual(units[1]);
}); });
test('Input follows min', () => { 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.model.get('value')).toEqual(minValue);
expect(view.getInputValue()).toEqual(minValue + ''); expect(view.getInputEl().value).toEqual(minValue + '');
}); });
test('Input follows max', () => { 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.model.get('value')).toEqual(maxValue);
expect(view.getInputValue()).toEqual(maxValue + ''); expect(view.getInputEl().value).toEqual(maxValue + '');
}); });
}); });
}); });

98
test/specs/style_manager/view/PropertyRadioView.js
View File

@ -1,6 +1,5 @@
import Backbone from 'backbone';
import PropertyRadioView from 'style_manager/view/PropertyRadioView'; 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 Component from 'dom_components/model/Component';
import Editor from 'editor/model/Editor'; import Editor from 'editor/model/Editor';
import DomComponents from 'dom_components'; import DomComponents from 'dom_components';
@ -14,38 +13,34 @@ describe('PropertyRadioView', () => {
var target; var target;
var model; var model;
var view; var view;
var propTarget;
var propName = 'testprop'; var propName = 'testprop';
var propValue = 'test1value'; var propValue = 'test1value';
var defValue = 'test2value'; var defValue = 'test2value';
var options = [ var options = [
{ value: 'test1value', title: 'testtitle' }, { value: 'test1value', title: 'testtitle' },
{ name: 'test2', value: 'test2value' } { name: 'test2', value: 'test2value' },
]; ];
// Have some issue with getCheckedEl() and jsdom // Have some issue with getCheckedEl() and jsdom
// this view.getInputEl().querySelector('input:checked') return null // this view.getInputEl().querySelector('input:checked') return null
// but view.getInputEl().querySelectorAll('input:checked')[0] works // but view.getInputEl().querySelectorAll('input:checked')[0] works
var getCheckedEl = view => var getCheckedEl = view => view.getInputEl().querySelectorAll('input:checked')[0];
view.getInputEl().querySelectorAll('input:checked')[0];
beforeEach(() => { beforeEach(() => {
em = new Editor({}); em = new Editor({});
dcomp = new DomComponents(); dcomp = new DomComponents();
compOpts = { em, componentTypes: dcomp.componentTypes }; compOpts = { em, componentTypes: dcomp.componentTypes };
propTarget = { ...Backbone.Events };
target = new Component({}, compOpts); target = new Component({}, compOpts);
component = new Component({}, compOpts); component = new Component({}, compOpts);
model = new Property({ model = new Property(
type: 'radio', {
list: options, type: 'radio',
property: propName list: options,
}); property: propName,
propTarget.model = component; },
view = new PropertyRadioView({ { em }
model, );
propTarget view = new PropertyRadioView({ model });
});
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
view.render(); view.render();
@ -79,18 +74,12 @@ describe('PropertyRadioView', () => {
test('Options rendered correctly', () => { test('Options rendered correctly', () => {
var children = view.el.querySelector('.field').firstChild.children; var children = view.el.querySelector('.field').firstChild.children;
expect(children[0].querySelector('label').textContent).toEqual( expect(children[0].querySelector('label').textContent).toEqual('test1value');
'test1value'
);
expect(children[1].querySelector('label').textContent).toEqual('test2'); expect(children[1].querySelector('label').textContent).toEqual('test2');
expect(children[0].querySelector('input').value).toEqual(options[0].value); expect(children[0].querySelector('input').value).toEqual(options[0].value);
expect(children[1].querySelector('input').value).toEqual(options[1].value); expect(children[1].querySelector('input').value).toEqual(options[1].value);
expect(children[0].querySelector('label').getAttribute('title')).toEqual( expect(children[0].querySelector('label').getAttribute('title')).toEqual(options[0].title);
options[0].title expect(children[1].querySelector('label').getAttribute('title')).toEqual(null);
);
expect(children[1].querySelector('label').getAttribute('title')).toEqual(
null
);
}); });
test('Input should exist', () => { test('Input should exist', () => {
@ -103,55 +92,16 @@ describe('PropertyRadioView', () => {
test('Update model on input change', () => { test('Update model on input change', () => {
view.setValue(propValue); 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); view.model.set('value', propValue);
expect(getCheckedEl(view).value).toEqual(propValue); setTimeout(() => {
});
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);
expect(getCheckedEl(view).value).toEqual(propValue); expect(getCheckedEl(view).value).toEqual(propValue);
}); done();
}, 11);
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');
});
}); });
describe('Init property', () => { describe('Init property', () => {
@ -161,10 +111,10 @@ describe('PropertyRadioView', () => {
type: 'select', type: 'select',
list: options, list: options,
defaults: defValue, defaults: defValue,
property: propName property: propName,
}); });
view = new PropertyRadioView({ view = new PropertyRadioView({
model model,
}); });
fixtures.innerHTML = ''; fixtures.innerHTML = '';
view.render(); view.render();
@ -172,7 +122,7 @@ describe('PropertyRadioView', () => {
}); });
test('Value as default', () => { test('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.getValue()).toEqual(defValue);
}); });
test('Input value is as default', () => { test('Input value is as default', () => {

90
test/specs/style_manager/view/PropertySelectView.js
View File

@ -1,4 +1,3 @@
import Backbone from 'backbone';
import PropertySelectView from 'style_manager/view/PropertySelectView'; import PropertySelectView from 'style_manager/view/PropertySelectView';
import Property from 'style_manager/model/PropertyRadio'; import Property from 'style_manager/model/PropertyRadio';
import Editor from 'editor/model/Editor'; import Editor from 'editor/model/Editor';
@ -14,33 +13,30 @@ describe('PropertySelectView', () => {
var target; var target;
var model; var model;
var view; var view;
var propTarget;
var options; var options;
var propName = 'testprop'; var propName = 'testprop';
var propValue = 'test1value'; var propValue = 'test1value';
var defValue = 'test2value'; var defValue = 'test2value';
var options = [ var options = [
{ value: 'test1value', style: 'test:style' }, { value: 'test1value', style: 'test:style' },
{ name: 'test2', value: 'test2value' } { name: 'test2', value: 'test2value' },
]; ];
beforeEach(() => { beforeEach(() => {
em = new Editor({}); em = new Editor({});
dcomp = new DomComponents(); dcomp = new DomComponents();
compOpts = { em, componentTypes: dcomp.componentTypes }; compOpts = { em, componentTypes: dcomp.componentTypes };
propTarget = { ...Backbone.Events };
target = new Component({}, compOpts); target = new Component({}, compOpts);
component = new Component({}, compOpts); component = new Component({}, compOpts);
model = new Property({ model = new Property(
type: 'select', {
list: options, type: 'select',
property: propName list: options,
}); property: propName,
propTarget.model = component; },
view = new PropertySelectView({ { em }
model, );
propTarget view = new PropertySelectView({ model });
});
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
view.render(); view.render();
@ -93,56 +89,16 @@ describe('PropertySelectView', () => {
test('Update model on input change', () => { test('Update model on input change', () => {
view.getInputEl().value = propValue; view.getInputEl().value = propValue;
view.inputValueChanged(); view.inputValueChanged({ target: { value: propValue }, stopPropagation() {} });
expect(view.model.get('value')).toEqual(propValue); 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); view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style'); setTimeout(() => {
var assertStyle = {}; expect(view.getInputEl().value).toEqual(propValue);
assertStyle[propName] = propValue; done();
expect(compStyle).toEqual(assertStyle); }, 11);
});
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');
});
}); });
describe('Init property', () => { describe('Init property', () => {
@ -152,10 +108,10 @@ describe('PropertySelectView', () => {
type: 'select', type: 'select',
list: options, list: options,
defaults: defValue, defaults: defValue,
property: propName property: propName,
}); });
view = new PropertySelectView({ view = new PropertySelectView({
model model,
}); });
fixtures.innerHTML = ''; fixtures.innerHTML = '';
view.render(); view.render();
@ -163,7 +119,7 @@ describe('PropertySelectView', () => {
}); });
test('Value as default', () => { test('Value as default', () => {
expect(view.model.get('value')).toEqual(defValue); expect(view.model.getValue()).toEqual(defValue);
}); });
test('Empty value as default', () => { test('Empty value as default', () => {
@ -171,22 +127,22 @@ describe('PropertySelectView', () => {
{ value: '', name: 'test' }, { value: '', name: 'test' },
{ value: 'test1value', name: 'test1' }, { value: 'test1value', name: 'test1' },
{ value: 'test2value', name: 'test2' }, { value: 'test2value', name: 'test2' },
{ value: '', name: 'TestDef' } { value: '', name: 'TestDef' },
]; ];
component = new Component(); component = new Component();
model = new Property({ model = new Property({
type: 'select', type: 'select',
list: options, list: options,
defaults: '', defaults: '',
property: 'emptyDefault' property: 'emptyDefault',
}); });
view = new PropertySelectView({ view = new PropertySelectView({
model model,
}); });
view.render(); view.render();
fixtures.innerHTML = ''; fixtures.innerHTML = '';
fixtures.appendChild(view.el); fixtures.appendChild(view.el);
expect(view.getInputValue()).toEqual(''); expect(view.getInputEl().value).toEqual('');
}); });
test('Input value is as default', () => { test('Input value is as default', () => {

48
test/specs/style_manager/view/PropertyStackView.js
View File

@ -14,27 +14,20 @@ describe('PropertyStackView', () => {
var model; var model;
var view; var view;
var propName = 'testprop'; var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var layers = [
{ value: 'lval1' },
{ value: 'lval2 lval22' },
{ value: 'lval3 lval32 lval33' }
];
var properties = [ var properties = [
{ property: 'subprop1' }, { property: 'subprop1' },
{ {
type: 'integer', type: 'integer',
property: 'subprop2', property: 'subprop2',
defaults: 0, defaults: 0,
units: ['%', 'px'] units: ['%', 'px'],
}, },
{ {
type: 'select', type: 'select',
property: 'subprop3', property: 'subprop3',
defaults: 'val2', defaults: 'val2',
list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }] list: [{ value: 'val1' }, { value: 'val2' }, { value: 'val3' }],
} },
]; ];
beforeEach(() => { beforeEach(() => {
@ -47,10 +40,10 @@ describe('PropertyStackView', () => {
model = new Property({ model = new Property({
type: 'stack', type: 'stack',
property: propName, property: propName,
properties properties,
}); });
view = new PropertyStackView({ view = new PropertyStackView({
model model,
}); });
document.body.innerHTML = '<div id="fixtures"></div>'; document.body.innerHTML = '<div id="fixtures"></div>';
fixtures = document.body.firstChild; fixtures = document.body.firstChild;
@ -85,39 +78,8 @@ describe('PropertyStackView', () => {
expect(children.length).toEqual(1); expect(children.length).toEqual(1);
}); });
test('Input value is on default', () => {
expect(view.model.get('value')).toEqual('0 val2');
});
test('Layers container is empty', () => { test('Layers container is empty', () => {
var layers = view.el.querySelector('.layers'); var layers = view.el.querySelector('.layers');
expect(layers.innerHTML).toBeFalsy(); 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);
});
});
}); });

Write Preview
Loading…
Cancel
Save