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 4 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
Split 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() {
if (this.get('detached')) {
return '';
}
return this.get('properties').getFullValue();
return this.__getFullValue();
}
__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 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 = '<div id="fixtures"></div>';
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);
});
});
});

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

@ -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 = '<div id="fixtures"></div>';
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);
});
});
});

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 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 = '<div id="fixtures"></div>';
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 + '');
});
});
});

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 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 = '<div id="fixtures"></div>';
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', () => {

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 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 = '<div id="fixtures"></div>';
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', () => {

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

@ -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 = '<div id="fixtures"></div>';
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);
});
});
});

Write Preview
Loading…
Cancel
Save