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

Prepare style manager tests for the new style

pull/187/head
Artur Arseniev 9 years ago
parent
4f24d0ff9b
commit
04c91662bd
14 changed files with 2596 additions and 2632 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. 1
      test/main.js
  2. 192
      test/specs/style_manager/index.js
  3. 185
      test/specs/style_manager/main.js
  4. 1570
      test/specs/style_manager/model/Models.js
  5. 130
      test/specs/style_manager/view/LayerView.js
  6. 294
      test/specs/style_manager/view/PropertyColorView.js
  7. 452
      test/specs/style_manager/view/PropertyCompositeView.js
  8. 382
      test/specs/style_manager/view/PropertyIntegerView.js
  9. 314
      test/specs/style_manager/view/PropertyRadioView.js
  10. 352
      test/specs/style_manager/view/PropertySelectView.js
  11. 654
      test/specs/style_manager/view/PropertyStackView.js
  12. 428
      test/specs/style_manager/view/PropertyView.js
  13. 182
      test/specs/style_manager/view/SectorView.js
  14. 92
      test/specs/style_manager/view/SectorsView.js

1
test/main.js
View File

@ -23,4 +23,5 @@ describe('Main', () => {
require(`${path}plugin_manager`);
require(`${path}selector_manager`);
require(`${path}storage_manager`);
require(`${path}style_manager`);
});

192
test/specs/style_manager/index.js
View File

@ -0,0 +1,192 @@
const StyleManager = require('style_manager');
const Models = require('./model/Models');
const SectorView = require('./view/SectorView');
const SectorsView = require('./view/SectorsView');
const PropertyView = require('./view/PropertyView');
const PropertySelectView = require('./view/PropertySelectView');
const PropertyRadioView = require('./view/PropertyRadioView');
const PropertyIntegerView = require('./view/PropertyIntegerView');
const PropertyColorView = require('./view/PropertyColorView');
const PropertyCompositeView = require('./view/PropertyCompositeView');
const PropertyStackView = require('./view/PropertyStackView');
const LayerView = require('./view/LayerView');
describe.only('StyleManager', function() {
describe('Main', function() {
var obj;
beforeEach(function () {
obj = new StyleManager().init({
sectors: []
});
});
afterEach(function () {
obj = null;
});
it('Object exists', function() {
obj.should.be.ok;
});
it('No sectors', function() {
obj.getSectors().length.should.equal(0);
});
it('Add sector', function() {
obj.addSector('test', {
name: 'Test name'
});
obj.getSectors().length.should.equal(1);
var sector = obj.getSectors().at(0);
sector.get('id').should.equal('test');
sector.get('name').should.equal('Test name');
});
it('Add sectors', function() {
obj.addSector('test', {});
obj.addSector('test2', {});
obj.getSectors().length.should.equal(2);
});
it("Can't create more than one sector with the same id", function() {
var sect1 = obj.addSector('test', {});
var sect2 = obj.addSector('test', {});
obj.getSectors().length.should.equal(1);
sect1.should.deep.equal(sect2);
});
it('Get inexistent sector', function() {
(obj.getSector('test') == null).should.equal(true);
});
it('Get sector', function() {
var sect1 = obj.addSector('test', { name: 'Test' });
var sect2 = obj.getSector('test');
sect1.should.deep.equal(sect2);
});
it('Add property to inexistent sector', function() {
(obj.addProperty('test', {}) == null).should.equal(true);
});
it('Add property', function() {
obj.addSector('test', {});
(obj.addProperty('test', {}) == null).should.equal(false);
obj.getProperties('test').length.should.equal(1);
});
it('Check added property', function() {
obj.addSector('test', {});
var prop = obj.addProperty('test', {
'name': 'test',
});
prop.get('name').should.equal('test');
});
it('Add properties', function() {
obj.addSector('test', {});
obj.addProperty('test', [{}, {}]);
obj.getProperties('test').length.should.equal(2);
});
it('Get property from inexistent sector', function() {
(obj.getProperty('test', 'test-prop') == null).should.equal(true);
});
it("Can't get properties without proper name", function() {
obj.addSector('test', {});
obj.addProperty('test', [{}, {}]);
obj.getProperty('test', 'test-prop').should.be.empty;
});
it("Get property with proper name", function() {
obj.addSector('test', {});
var prop1 = obj.addProperty('test', {property: 'test-prop'});
var prop2 = obj.getProperty('test', 'test-prop');
prop1.should.deep.equal(prop2);
});
it("Get properties with proper name", function() {
obj.addSector('test', {});
var prop1 = obj.addProperty('test',[
{property: 'test-prop'},
{property: 'test-prop'}
]);
obj.getProperty('test', 'test-prop').length.should.equal(2);
});
it('Get inexistent properties', function() {
(obj.getProperties('test') == null).should.equal(true);
(obj.getProperties() == null).should.equal(true);
});
it('Renders correctly', function() {
obj.render().should.be.ok;
});
describe('Init with configuration', function() {
beforeEach(function () {
obj = new StyleManager().init({
sectors: [{
id: 'dim',
name: 'Dimension',
properties: [{
name: 'Width',
property: 'width',
},{
name: 'Height',
property: 'height',
}],
},{
id: 'pos',
name: 'position',
properties: [{
name: 'Width',
property: 'width',
}],
}],
});
});
afterEach(function () {
obj = null;
});
it('Sectors added', function() {
obj.getSectors().length.should.equal(2);
var sect1 = obj.getSector('dim');
sect1.get('name').should.equal('Dimension');
});
it('Properties added', function() {
var sect1 = obj.getSector('dim');
var sect2 = obj.getSector('pos');
sect1.get('properties').length.should.equal(2);
sect2.get('properties').length.should.equal(1);
});
it('Property is correct', function() {
var prop1 = obj.getProperty('dim', 'width');
prop1.get('name').should.equal('Width');
});
});
Models.run();
SectorView.run();
SectorsView.run();
PropertyView.run();
PropertySelectView.run();
PropertyRadioView.run();
PropertyIntegerView.run();
PropertyColorView.run();
PropertyCompositeView.run();
PropertyStackView.run();
LayerView.run();
});
});

185
test/specs/style_manager/main.js
View File

@ -1,185 +0,0 @@
define(function(require, exports, module){
'use strict';
var StyleManager = require('StyleManager');
var LayerView = require('undefined');
describe('StyleManager', function() {
describe('Main', function() {
var obj;
beforeEach(function () {
obj = new StyleManager().init({
sectors: []
});
});
afterEach(function () {
delete obj;
});
it('Object exists', function() {
obj.should.be.ok;
});
it('No sectors', function() {
obj.getSectors().length.should.equal(0);
});
it('Add sector', function() {
obj.addSector('test', {
name: 'Test name'
});
obj.getSectors().length.should.equal(1);
var sector = obj.getSectors().at(0);
sector.get('id').should.equal('test');
sector.get('name').should.equal('Test name');
});
it('Add sectors', function() {
obj.addSector('test', {});
obj.addSector('test2', {});
obj.getSectors().length.should.equal(2);
});
it("Can't create more than one sector with the same id", function() {
var sect1 = obj.addSector('test', {});
var sect2 = obj.addSector('test', {});
obj.getSectors().length.should.equal(1);
sect1.should.deep.equal(sect2);
});
it('Get inexistent sector', function() {
(obj.getSector('test') == null).should.equal(true);
});
it('Get sector', function() {
var sect1 = obj.addSector('test', { name: 'Test' });
var sect2 = obj.getSector('test');
sect1.should.deep.equal(sect2);
});
it('Add property to inexistent sector', function() {
(obj.addProperty('test', {}) == null).should.equal(true);
});
it('Add property', function() {
obj.addSector('test', {});
(obj.addProperty('test', {}) == null).should.equal(false);
obj.getProperties('test').length.should.equal(1);
});
it('Check added property', function() {
obj.addSector('test', {});
var prop = obj.addProperty('test', {
'name': 'test',
});
prop.get('name').should.equal('test');
});
it('Add properties', function() {
obj.addSector('test', {});
obj.addProperty('test', [{}, {}]);
obj.getProperties('test').length.should.equal(2);
});
it('Get property from inexistent sector', function() {
(obj.getProperty('test', 'test-prop') == null).should.equal(true);
});
it("Can't get properties without proper name", function() {
obj.addSector('test', {});
obj.addProperty('test', [{}, {}]);
obj.getProperty('test', 'test-prop').should.be.empty;
});
it("Get property with proper name", function() {
obj.addSector('test', {});
var prop1 = obj.addProperty('test', {property: 'test-prop'});
var prop2 = obj.getProperty('test', 'test-prop');
prop1.should.deep.equal(prop2);
});
it("Get properties with proper name", function() {
obj.addSector('test', {});
var prop1 = obj.addProperty('test',[
{property: 'test-prop'},
{property: 'test-prop'}
]);
obj.getProperty('test', 'test-prop').length.should.equal(2);
});
it('Get inexistent properties', function() {
(obj.getProperties('test') == null).should.equal(true);
(obj.getProperties() == null).should.equal(true);
});
it('Renders correctly', function() {
obj.render().should.be.ok;
});
describe('Init with configuration', function() {
beforeEach(function () {
obj = new StyleManager().init({
sectors: [{
id: 'dim',
name: 'Dimension',
properties: [{
name: 'Width',
property: 'width',
},{
name: 'Height',
property: 'height',
}],
},{
id: 'pos',
name: 'position',
properties: [{
name: 'Width',
property: 'width',
}],
}],
});
});
afterEach(function () {
delete obj;
});
it('Sectors added', function() {
obj.getSectors().length.should.equal(2);
var sect1 = obj.getSector('dim');
sect1.get('name').should.equal('Dimension');
});
it('Properties added', function() {
var sect1 = obj.getSector('dim');
var sect2 = obj.getSector('pos');
sect1.get('properties').length.should.equal(2);
sect2.get('properties').length.should.equal(1);
});
it('Property is correct', function() {
var prop1 = obj.getProperty('dim', 'width');
prop1.get('name').should.equal('Width');
});
});
Models.run();
SectorView.run();
SectorsView.run();
PropertyView.run();
PropertySelectView.run();
PropertyRadioView.run();
PropertyIntegerView.run();
PropertyColorView.run();
PropertyCompositeView.run();
PropertyStackView.run();
LayerView.run();
});
});
});

1570
test/specs/style_manager/model/Models.js
View File

File diff suppressed because it is too large

130
test/specs/style_manager/view/LayerView.js
View File

@ -1,81 +1,77 @@
define(function(require, exports, module){
'use strict';
var LayerView = require('undefined');
var Layers = require('StyleManager/model/Layers');
const LayerView = require('style_manager/view/LayerView');
const Layers = require('style_manager/model/Layers');
module.exports = {
run : function(){
module.exports = {
run : function(){
describe('LayerView', function() {
describe('LayerView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="layer-fixture"></div>');
});
beforeEach(function () {
var coll = new Layers();
model = coll.add({});
view = new LayerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="layer-fixture"></div>');
});
afterEach(function () {
view.remove();
});
beforeEach(function () {
var coll = new Layers();
model = coll.add({});
view = new LayerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
afterEach(function () {
view.remove();
});
it('Rendered correctly', function() {
var layer = view.el;
$fixture.get(0).querySelector('.layer').should.be.ok;
layer.querySelector('#label').should.be.ok;
layer.querySelector('#close-layer').should.be.ok;
layer.querySelector('#inputs').should.be.ok;
layer.querySelector('#inputs').innerHTML.should.be.empty;
layer.querySelector('#preview').should.be.ok;
});
after(function () {
$fixture.remove();
component = null;
view = null;
model = null;
});
it('getIndex returns default value', function() {
view.getIndex().should.equal(0);
});
it('Rendered correctly', function() {
var layer = view.el;
$fixture.get(0).querySelector('.layer').should.be.ok;
layer.querySelector('#label').should.be.ok;
layer.querySelector('#close-layer').should.be.ok;
layer.querySelector('#inputs').should.be.ok;
layer.querySelector('#inputs').innerHTML.should.be.empty;
layer.querySelector('#preview').should.be.ok;
});
it('No preview', function() {
var style = view.el.querySelector('#preview').style;
style.cssText.should.be.empty;
});
it('getIndex returns default value', function() {
view.getIndex().should.equal(0);
});
it('Changes on value trigger onPreview', function() {
var called = 0;
view.onPreview = function(){called = 1};
view.model.set('preview', true);
view.model.set('value', 'test');
called.should.equal(1);
});
it('No preview', function() {
var style = view.el.querySelector('#preview').style;
style.cssText.should.be.empty;
});
it('Update props', function() {
view.model.set('props', $('<div>'));
view.el.querySelector('#inputs').innerHTML.should.not.be.empty;
(view.model.get('props') === null).should.equal(true);
});
it('Changes on value trigger onPreview', function() {
var called = 0;
view.onPreview = function(){called = 1};
view.model.set('preview', true);
view.model.set('value', 'test');
called.should.equal(1);
});
it('Update props', function() {
view.model.set('props', $('<div>'));
view.el.querySelector('#inputs').innerHTML.should.not.be.empty;
(view.model.get('props') === null).should.equal(true);
});
}
};
});
});
}
};

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

@ -1,166 +1,162 @@
define(function(require, exports, module){
'use strict';
var PropertyColorView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyColorView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = '#fff';
var defValue = 'test2value';
before(function () {
$.fn.spectrum = function(){};
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
const PropertyColorView = require('style_manager/view/PropertyColorView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyColorView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = '#fff';
var defValue = 'test2value';
before(function () {
$.fn.spectrum = function(){};
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'color',
property: propName
});
view = new PropertyColorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'color',
property: propName
});
view = new PropertyColorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
//view.remove(); // strange errors ???
});
afterEach(function () {
//view.remove(); // strange errors ???
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
after(function () {
$fixture.remove();
component = null;
view = null;
model = null;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Inputs rendered', function() {
var prop = view.el;
prop.querySelector('input[type=text]').should.be.ok;
prop.querySelector('.field-color-picker').should.be.ok;
});
it('Inputs rendered', function() {
var prop = view.el;
prop.querySelector('input[type=text]').should.be.ok;
prop.querySelector('.field-color-picker').should.be.ok;
});
it('Inputs should exist', function() {
view.$input.should.be.ok;
view.$color.should.be.ok;
});
it('Inputs should exist', function() {
view.$input.should.be.ok;
view.$color.should.be.ok;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.$input.val().should.be.empty;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.$input.val().should.be.empty;
});
it('Update model on setValue', function() {
view.setValue(propValue);
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update model on setValue', function() {
view.setValue(propValue);
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.getInputValue().should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.getInputValue().should.equal(propValue);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyColorView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = '#123123';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('#123123');
view.$input.val().should.equal('#123123');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'color',
property: propName,
defaults: propValue,
});
view = new PropertyColorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(propValue);
});
it('Input value is as default', function() {
view.$input.val().should.equal(propValue);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyColorView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = '#123123';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('#123123');
view.$input.val().should.equal('#123123');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'color',
property: propName,
defaults: propValue,
});
view = new PropertyColorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(propValue);
});
it('Input value is as default', function() {
view.$input.val().should.equal(propValue);
});
});
}
};
});
});
}
};

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

@ -1,242 +1,238 @@
define(function(require, exports, module){
'use strict';
var PropertyCompositeView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyCompositeView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var properties = [
{property: 'subprop1'},
{
type: 'integer',
property: 'subprop2',
defaults: 0,
units: ['%', 'px']
},
{
type: 'select',
property: 'subprop3',
defaults: 'val2',
list: [
{value:'val1'},
{value:'val2'},
{value:'val3'},
]
},
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
target.model = component;
model = new Property({
type: 'composite',
property: propName,
properties: properties
});
view = new PropertyCompositeView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
const PropertyCompositeView = require('style_manager/view/PropertyCompositeView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyCompositeView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var properties = [
{property: 'subprop1'},
{
type: 'integer',
property: 'subprop2',
defaults: 0,
units: ['%', 'px']
},
{
type: 'select',
property: 'subprop3',
defaults: 'val2',
list: [
{value:'val1'},
{value:'val2'},
{value:'val3'},
]
},
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
afterEach(function () {
//view.remove(); // strange errors ???
});
beforeEach(function () {
target = new Component();
component = new Component();
target.model = component;
model = new Property({
type: 'composite',
property: propName,
properties: properties
});
view = new PropertyCompositeView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
afterEach(function () {
//view.remove(); // strange errors ???
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
after(function () {
$fixture.remove();
component = null;
view = null;
model = null;
});
it('Properties rendered', function() {
var prop = view.el;
prop.querySelector('.properties').should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Properties rendered correctly', function() {
var children = view.el.querySelector('.properties').children;
children.length.should.equal(properties.length + 1);
children[0].id.should.equal(properties[0].property);
children[1].id.should.equal(properties[1].property);
children[2].id.should.equal(properties[2].property);
});
it('Properties rendered', function() {
var prop = view.el;
prop.querySelector('.properties').should.be.ok;
});
it('Props should exist', function() {
view.$props.should.be.ok;
});
it('Properties rendered correctly', function() {
var children = view.el.querySelector('.properties').children;
children.length.should.equal(properties.length + 1);
children[0].id.should.equal(properties[0].property);
children[1].id.should.equal(properties[1].property);
children[2].id.should.equal(properties[2].property);
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Props should exist', function() {
view.$props.should.be.ok;
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
describe('With target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
beforeEach(function () {
model = new Property({
type: 'composite',
property: propName,
properties: properties
});
view = new PropertyCompositeView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + 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');
});
it('Update model on input change', function() {
$prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change');
view.model.get('value').should.equal(finalResult);
});
it('Update value on models change', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.model.get('value').should.equal(finalResult);
});
it('Update target on value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[propName] = propValue + ' 0% val2';
compStyle.should.deep.equal(assertStyle);
});
it('Update target on detached value change', function() {
model = new Property({
type: 'composite',
property: propName,
properties: properties,
detached: true,
});
view = new PropertyCompositeView({
model: model,
propTarget: target
});
$fixture.html(view.render().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();
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = finalResult;
component.set('style', style);
view.propTarget.trigger('update');
$prop1.val().should.equal(propValue);
$prop3.val().should.equal(prop3Val);
});
it('Update value after multiple swaps', function() {
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');
$prop1.val().should.equal(propValue + '2');
$prop2.val().should.equal('2');
$prop3.val().should.equal('val1');
});
it('The value is correctly extracted from the composite string', function() {
var style = {};
style[propName] = 'value1 value2 value3 value4';
component.set('style', style);
view.valueOnIndex(2).should.equal('value3');
view.valueOnIndex(0).should.equal('value1');
(view.valueOnIndex(4) === null).should.equal(true);
});
it('Build value from properties', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.build().should.equal(finalResult);
});
})
describe('Init property', function() {
beforeEach(function () {
model = new Property({
type: 'composite',
property: propName,
properties: properties,
defaults: defValue,
});
view = new PropertyCompositeView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
describe('With target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
beforeEach(function () {
model = new Property({
type: 'composite',
property: propName,
properties: properties
});
view = new PropertyCompositeView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + 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');
});
it('Update model on input change', function() {
$prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change');
view.model.get('value').should.equal(finalResult);
});
it('Update value on models change', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.model.get('value').should.equal(finalResult);
});
it('Update target on value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[propName] = propValue + ' 0% val2';
compStyle.should.deep.equal(assertStyle);
});
it('Update target on detached value change', function() {
model = new Property({
type: 'composite',
property: propName,
properties: properties,
detached: true,
});
view = new PropertyCompositeView({
model: model,
propTarget: target
});
$fixture.html(view.render().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();
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = finalResult;
component.set('style', style);
view.propTarget.trigger('update');
$prop1.val().should.equal(propValue);
$prop3.val().should.equal(prop3Val);
});
it('Update value after multiple swaps', function() {
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');
$prop1.val().should.equal(propValue + '2');
$prop2.val().should.equal('2');
$prop3.val().should.equal('val1');
});
it('The value is correctly extracted from the composite string', function() {
var style = {};
style[propName] = 'value1 value2 value3 value4';
component.set('style', style);
view.valueOnIndex(2).should.equal('value3');
view.valueOnIndex(0).should.equal('value1');
(view.valueOnIndex(4) === null).should.equal(true);
});
it('Build value from properties', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.build().should.equal(finalResult);
});
})
describe('Init property', function() {
beforeEach(function () {
model = new Property({
type: 'composite',
property: propName,
properties: properties,
defaults: defValue,
});
view = new PropertyCompositeView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
});
}
};
});
});
}
};

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

@ -1,211 +1,207 @@
define(function(require, exports, module){
'use strict';
var PropertyIntegerView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyIntegerView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
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;
var unitsElSel = '.field-units select';
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'integer',
units: units,
property: propName
});
view = new PropertyIntegerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
const PropertyIntegerView = require('style_manager/view/PropertyIntegerView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyIntegerView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
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;
var unitsElSel = '.field-units select';
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
afterEach(function () {
//view.remove(); // strange errors ???
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'integer',
units: units,
property: propName
});
view = new PropertyIntegerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
afterEach(function () {
//view.remove(); // strange errors ???
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
after(function () {
$fixture.remove();
component = null;
view = null;
model = null;
});
it('Inputs rendered', function() {
var prop = view.el;
prop.querySelector('input[type=text]').should.be.ok;
prop.querySelector(unitsElSel).should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Units rendered', function() {
var select = view.el.querySelector(unitsElSel);
select.children.length.should.equal(units.length);
});
it('Inputs rendered', function() {
var prop = view.el;
prop.querySelector('input[type=text]').should.be.ok;
prop.querySelector(unitsElSel).should.be.ok;
});
it('Units rendered correctly', function() {
var children = view.el.querySelector(unitsElSel).children;
children[0].textContent.should.equal(units[0]);
children[1].textContent.should.equal(units[1]);
children[2].textContent.should.equal(units[2]);
});
it('Units rendered', function() {
var select = view.el.querySelector(unitsElSel);
select.children.length.should.equal(units.length);
});
it('Inputs should exist', function() {
view.$input.should.be.ok;
view.$unit.should.be.ok;
});
it('Units rendered correctly', function() {
var children = view.el.querySelector(unitsElSel).children;
children[0].textContent.should.equal(units[0]);
children[1].textContent.should.equal(units[1]);
children[2].textContent.should.equal(units[2]);
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.model.get('unit').should.equal('px');
});
it('Inputs should exist', function() {
view.$input.should.be.ok;
view.$unit.should.be.ok;
});
it('Update model on setValue', function() {
view.setValue(intValue + unitValue);
view.model.get('value').should.equal(parseFloat(intValue));
view.model.get('unit').should.equal(unitValue);
view.$input.val().should.equal(intValue);
view.$unit.val().should.equal(unitValue);
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.model.get('unit').should.equal('px');
});
it('Update model on input change', function() {
view.$input.val(123).trigger('change');
view.model.get('value').should.equal(123);
});
it('Update model on setValue', function() {
view.setValue(intValue + unitValue);
view.model.get('value').should.equal(parseFloat(intValue));
view.model.get('unit').should.equal(unitValue);
view.$input.val().should.equal(intValue);
view.$unit.val().should.equal(unitValue);
});
it('Update model on unit change', function() {
view.$unit.val(units[1]).trigger('change');
view.model.get('unit').should.equal(units[1]);
});
it('Update model on input change', function() {
view.$input.val(123).trigger('change');
view.model.get('value').should.equal(123);
});
it('Update input on value change', function() {
view.model.set('value', intValue);
view.getInputValue().should.equal(intValue);
});
it('Update model on unit change', function() {
view.$unit.val(units[1]).trigger('change');
view.model.get('unit').should.equal(units[1]);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', intValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
it('Update input on value change', function() {
view.model.set('value', intValue);
view.getInputValue().should.equal(intValue);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyIntegerView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(parseFloat(intValue));
view.getInputValue().should.equal(intValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = '20em';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(20);
view.model.get('unit').should.equal('em');
view.$input.val().should.equal('20');
view.$unit.val().should.equal('em');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'integer',
units: units,
property: propName,
defaults: intValue,
min: minValue,
max: maxValue,
unit: units[1],
});
view = new PropertyIntegerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(parseInt(intValue));
view.model.get('unit').should.equal(units[1]);
});
it('Input value is as default', function() {
view.$input.val().should.equal(intValue);
view.$unit.val().should.equal(units[1]);
});
it('Input follows min', function() {
view.$input.val(minValue - 50).trigger('change');
view.model.get('value').should.equal(minValue);
view.$input.val().should.equal(minValue + "");
});
it('Input follows max', function() {
view.$input.val(maxValue + 50).trigger('change');
view.model.get('value').should.equal(maxValue);
view.$input.val().should.equal(maxValue + "");
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', intValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyIntegerView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(parseFloat(intValue));
view.getInputValue().should.equal(intValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = '20em';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(20);
view.model.get('unit').should.equal('em');
view.$input.val().should.equal('20');
view.$unit.val().should.equal('em');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'integer',
units: units,
property: propName,
defaults: intValue,
min: minValue,
max: maxValue,
unit: units[1],
});
view = new PropertyIntegerView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(parseInt(intValue));
view.model.get('unit').should.equal(units[1]);
});
it('Input value is as default', function() {
view.$input.val().should.equal(intValue);
view.$unit.val().should.equal(units[1]);
});
it('Input follows min', function() {
view.$input.val(minValue - 50).trigger('change');
view.model.get('value').should.equal(minValue);
view.$input.val().should.equal(minValue + "");
});
it('Input follows max', function() {
view.$input.val(maxValue + 50).trigger('change');
view.model.get('value').should.equal(maxValue);
view.$input.val().should.equal(maxValue + "");
});
});
}
};
});
});
}
};

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

@ -1,177 +1,173 @@
define(function(require, exports, module){
'use strict';
var PropertyRadioView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyRadioView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var options = [
{ value: 'test1value', 'title': 'testtitle'},
{ name: 'test2', value: 'test2value'}
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
const PropertyRadioView = require('style_manager/view/PropertyRadioView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyRadioView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var options = [
{ value: 'test1value', 'title': 'testtitle'},
{ name: 'test2', value: 'test2value'}
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'radio',
list: options,
property: propName
});
view = new PropertyRadioView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'radio',
list: options,
property: propName
});
view = new PropertyRadioView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
//view.remove(); // strange errors ???
});
afterEach(function () {
//view.remove(); // strange errors ???
});
after(function () {
$fixture.remove();
delete component;
});
after(function () {
$fixture.remove();
component = null;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Radio rendered', function() {
var prop = view.el;
prop.querySelector('input[type=radio]').should.be.ok;
});
it('Radio rendered', function() {
var prop = view.el;
prop.querySelector('input[type=radio]').should.be.ok;
});
it('Options rendered', function() {
var input = view.el.querySelector('#input-holder');
input.children.length.should.equal(options.length);
});
it('Options rendered', function() {
var input = view.el.querySelector('#input-holder');
input.children.length.should.equal(options.length);
});
it('Options rendered correctly', function() {
var children = view.el.querySelector('#input-holder').children;
children[0].querySelector('label').textContent.should.equal('test1value');
children[1].querySelector('label').textContent.should.equal('test2');
children[0].querySelector('input').value.should.equal(options[0].value);
children[1].querySelector('input').value.should.equal(options[1].value);
children[0].querySelector('label').getAttribute('title').should.equal(options[0].title);
(children[1].querySelector('label').getAttribute('title') == null)
.should.equal(true);
});
it('Options rendered correctly', function() {
var children = view.el.querySelector('#input-holder').children;
children[0].querySelector('label').textContent.should.equal('test1value');
children[1].querySelector('label').textContent.should.equal('test2');
children[0].querySelector('input').value.should.equal(options[0].value);
children[1].querySelector('input').value.should.equal(options[1].value);
children[0].querySelector('label').getAttribute('title').should.equal(options[0].title);
(children[1].querySelector('label').getAttribute('title') == null)
.should.equal(true);
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Update model on input change', function() {
view.setValue(propValue);
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update model on input change', function() {
view.setValue(propValue);
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.getInputValue().should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.getInputValue().should.equal(propValue);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyRadioView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = 'test2value';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('test2value');
view.getInputValue().should.equal('test2value');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: defValue,
property: propName
});
view = new PropertyRadioView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Input value is as default', function() {
view.getInputValue().should.equal(defValue);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyRadioView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.getInputValue().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = 'test2value';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('test2value');
view.getInputValue().should.equal('test2value');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: defValue,
property: propName
});
view = new PropertyRadioView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Input value is as default', function() {
view.getInputValue().should.equal(defValue);
});
});
}
};
});
});
}
};

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

@ -1,196 +1,192 @@
define(function(require, exports, module){
'use strict';
var PropertySelectView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertySelectView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var options = [
{value: 'test1value', style: 'test:style'},
{name: 'test2', value: 'test2value'}
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
const PropertySelectView = require('style_manager/view/PropertySelectView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertySelectView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'test1value';
var defValue = 'test2value';
var options = [
{value: 'test1value', style: 'test:style'},
{name: 'test2', value: 'test2value'}
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'select',
list: options,
property: propName
});
view = new PropertySelectView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({
type: 'select',
list: options,
property: propName
});
view = new PropertySelectView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
//view.remove(); // strange errors ???
});
afterEach(function () {
//view.remove(); // strange errors ???
});
after(function () {
$fixture.remove();
delete component;
});
after(function () {
$fixture.remove();
component = null;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Select rendered', function() {
var prop = view.el;
prop.querySelector('select').should.be.ok;
});
it('Select rendered', function() {
var prop = view.el;
prop.querySelector('select').should.be.ok;
});
it('Options rendered', function() {
var select = view.el.querySelector('select');
select.children.length.should.equal(options.length);
});
it('Options rendered', function() {
var select = view.el.querySelector('select');
select.children.length.should.equal(options.length);
});
it('Options rendered correctly', function() {
var select = view.el.querySelector('select');
var children = select.children;
children[0].value.should.equal(options[0].value);
children[1].value.should.equal(options[1].value);
children[0].textContent.should.equal(options[0].value);
children[1].textContent.should.equal(options[1].name);
children[0].getAttribute('style').should.equal(options[0].style);
(children[1].getAttribute('style') == null).should.equal(true);
});
it('Options rendered correctly', function() {
var select = view.el.querySelector('select');
var children = select.children;
children[0].value.should.equal(options[0].value);
children[1].value.should.equal(options[1].value);
children[0].textContent.should.equal(options[0].value);
children[1].textContent.should.equal(options[1].name);
children[0].getAttribute('style').should.equal(options[0].style);
(children[1].getAttribute('style') == null).should.equal(true);
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertySelectView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = 'test2value';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('test2value');
view.$input.val().should.equal('test2value');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: defValue,
property: propName
});
view = new PropertySelectView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Empty value as default', function() {
options = [
{value: 'test1value', name: 'test1'},
{value: 'test2value', name: 'test2'},
{value: '', name: 'TestDef'}
];
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: '',
property: 'emptyDefault'
});
view = new PropertySelectView({
model: model
});
$fixture.html(view.render().el);
view.$input.val().should.equal('');
});
it('Input value is as default', function() {
view.$input.val().should.equal(defValue);
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertySelectView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = 'test2value';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal('test2value');
view.$input.val().should.equal('test2value');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: defValue,
property: propName
});
view = new PropertySelectView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Empty value as default', function() {
options = [
{value: 'test1value', name: 'test1'},
{value: 'test2value', name: 'test2'},
{value: '', name: 'TestDef'}
];
component = new Component();
model = new Property({
type: 'select',
list: options,
defaults: '',
property: 'emptyDefault'
});
view = new PropertySelectView({
model: model
});
$fixture.html(view.render().el);
view.$input.val().should.equal('');
});
it('Input value is as default', function() {
view.$input.val().should.equal(defValue);
});
});
}
};
});
});
}
};

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

@ -1,350 +1,346 @@
define(function(require, exports, module){
'use strict';
var PropertyStackView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyStackView', function() {
var component;
var $fixtures;
var $fixture;
var target;
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']
},
{
type: 'select',
property: 'subprop3',
defaults: 'val2',
list: [
{value:'val1'},
{value:'val2'},
{value:'val3'},
]
},
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
const PropertyStackView = require('style_manager/view/PropertyStackView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyStackView', function() {
var component;
var $fixtures;
var $fixture;
var target;
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']
},
{
type: 'select',
property: 'subprop3',
defaults: 'val2',
list: [
{value:'val1'},
{value:'val2'},
{value:'val3'},
]
},
];
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
target.model = component;
model = new Property({
type: 'stack',
property: propName,
properties: properties
});
view = new PropertyStackView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
beforeEach(function () {
target = new Component();
component = new Component();
target.model = component;
model = new Property({
type: 'stack',
property: propName,
properties: properties
});
view = new PropertyStackView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
//view.remove(); // strange errors ???
});
afterEach(function () {
//view.remove(); // strange errors ???
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
after(function () {
$fixture.remove();
component = null;
view = null;
model = null;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
prop.querySelector('#add').should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
prop.querySelector('#add').should.be.ok;
});
it('Layers rendered', function() {
view.el.querySelector('.layers').should.be.ok;
});
it('Layers rendered', function() {
view.el.querySelector('.layers').should.be.ok;
});
it('Layers should exist', function() {
view.$props.should.be.ok;
});
it('Layers should exist', function() {
view.$props.should.be.ok;
});
it('Layers rendered correctly', function() {
var children = view.$props.get(0).children;
children.length.should.equal(properties.length + 1);
children[0].id.should.equal(properties[0].property);
children[1].id.should.equal(properties[1].property);
children[2].id.should.equal(properties[2].property);
});
it('Layers rendered correctly', function() {
var children = view.$props.get(0).children;
children.length.should.equal(properties.length + 1);
children[0].id.should.equal(properties[0].property);
children[1].id.should.equal(properties[1].property);
children[2].id.should.equal(properties[2].property);
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
});
it('Layers container is empty', function() {
var layers = view.el.querySelector('.layers');
layers.innerHTML.should.be.empty;
});
it('Layers container is empty', function() {
var layers = view.el.querySelector('.layers');
layers.innerHTML.should.be.empty;
});
describe('With layers', function() {
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties,
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
model.get('layers').add(layers);
});
it('Layers inserted', function() {
view.getLayers().length.should.equal(layers.length);
});
it('Get value on index', function() {
view.model.set('stackIndex', 1);
view.valueOnIndex(1).should.equal('lval22');
});
it('createValue merges layers', function() {
view.createValue().should.equal('lval1, lval2 lval22, lval3 lval32 lval33');
});
it('Add layer', function() {
view.addLayer();
view.getLayers().length.should.equal(layers.length+1);
});
describe('With layers', function() {
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties,
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
model.get('layers').add(layers);
});
it('Layers inserted', function() {
view.getLayers().length.should.equal(layers.length);
});
it('Get value on index', function() {
view.model.set('stackIndex', 1);
view.valueOnIndex(1).should.equal('lval22');
});
it('createValue merges layers', function() {
view.createValue().should.equal('lval1, lval2 lval22, lval3 lval32 lval33');
});
describe('With target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
view.addLayer();
$prop1 = view.$props.find('#' + properties[0].property + ' input');
$prop2 = view.$props.find('#' + properties[1].property + ' input');
$prop3 = view.$props.find('#' + properties[2].property + ' select');
});
it('Update model on input change', function() {
$prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change');
view.model.get('value').should.equal(finalResult);
});
it('Update value on models change', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.model.get('value').should.equal(finalResult);
});
it('Update target on value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[propName] = propValue + ' 0% val2';
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
var finalResult2 = 'A B C';
style[propName] = finalResult + ', ' + finalResult2;
component.set('style', style);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.at(0).get('value').should.equal(finalResult);
layers.at(1).get('value').should.equal(finalResult2);
});
it('Update value after multiple swaps', function() {
var style = {};
var finalResult2 = 'A2 B2 C2';
style[propName] = finalResult;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = finalResult + ', ' + finalResult2;
component.set('style', style);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.at(0).get('value').should.equal(finalResult);
layers.at(1).get('value').should.equal(finalResult2);
});
it('The value is correctly extracted from the composite string', function() {
var style = {};
style[propName] = 'value1 value2, value3 value4';
component.set('style', style);
view.propTarget.trigger('update');
view.model.set('stackIndex', 1);
view.valueOnIndex(0).should.equal('value3');
view.valueOnIndex(1).should.equal('value4');
(view.valueOnIndex(2) === null).should.equal(true);
});
it('The value is correctly extracted from the string with functions', function() {
var style = {};
style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3';
component.set('style', style);
view.propTarget.trigger('update');
view.model.set('stackIndex', 1);
view.valueOnIndex(0).should.equal('func(4ddb,aAS5b,sS.6b)');
view.valueOnIndex(1).should.equal('value3');
(view.valueOnIndex(2) === null).should.equal(true);
});
it('Build value from properties', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.build().should.equal(finalResult);
});
it('Add layer', function() {
view.addLayer();
view.getLayers().length.should.equal(layers.length+1);
});
});
describe('With target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
view.addLayer();
$prop1 = view.$props.find('#' + properties[0].property + ' input');
$prop2 = view.$props.find('#' + properties[1].property + ' input');
$prop3 = view.$props.find('#' + properties[2].property + ' select');
});
it('Update model on input change', function() {
$prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change');
view.model.get('value').should.equal(finalResult);
});
it('Update value on models change', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.model.get('value').should.equal(finalResult);
});
it('Update target on value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[propName] = propValue + ' 0% val2';
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
var finalResult2 = 'A B C';
style[propName] = finalResult + ', ' + finalResult2;
component.set('style', style);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.at(0).get('value').should.equal(finalResult);
layers.at(1).get('value').should.equal(finalResult2);
});
it('Update value after multiple swaps', function() {
var style = {};
var finalResult2 = 'A2 B2 C2';
style[propName] = finalResult;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = finalResult + ', ' + finalResult2;
component.set('style', style);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.at(0).get('value').should.equal(finalResult);
layers.at(1).get('value').should.equal(finalResult2);
});
it('The value is correctly extracted from the composite string', function() {
var style = {};
style[propName] = 'value1 value2, value3 value4';
component.set('style', style);
view.propTarget.trigger('update');
view.model.set('stackIndex', 1);
view.valueOnIndex(0).should.equal('value3');
view.valueOnIndex(1).should.equal('value4');
(view.valueOnIndex(2) === null).should.equal(true);
});
it('The value is correctly extracted from the string with functions', function() {
var style = {};
style[propName] = 'func(a1a, s2a,d3a) value1 value2, func(4ddb, aAS5b, sS.6b) value3';
component.set('style', style);
view.propTarget.trigger('update');
view.model.set('stackIndex', 1);
view.valueOnIndex(0).should.equal('func(4ddb,aAS5b,sS.6b)');
view.valueOnIndex(1).should.equal('value3');
(view.valueOnIndex(2) === null).should.equal(true);
});
it('Build value from properties', function() {
view.model.get('properties').at(0).set('value', propValue);
view.model.get('properties').at(2).set('value', prop3Val);
view.build().should.equal(finalResult);
});
describe('Detached with target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
var compStyle = {
subprop1: '1px, 20px, 30px',
subprop2: 'A, B, C',
subprop3: 'W, X, Y',
subprop555: 'T, T, T',
};
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties,
detached: true,
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
view.addLayer();
$prop1 = view.$props.find('#' + properties[0].property + ' input');
$prop2 = view.$props.find('#' + properties[1].property + ' input');
$prop3 = view.$props.find('#' + properties[2].property + ' select');
});
it('Returns correctly layers array from target', function() {
component.set('style', compStyle);
var result = [{
subprop1: '1px',
subprop2: 'A',
subprop3: 'W',
},{
subprop1: '20px',
subprop2: 'B',
subprop3: 'X',
},{
subprop1: '30px',
subprop2: 'C',
subprop3: 'Y',
}];
view.getLayersFromTarget().should.deep.equal(result);
});
it('Update target on detached value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[properties[0].property] = $prop1.val();
assertStyle[properties[1].property] = '0%';
assertStyle[properties[2].property] = properties[2].defaults;
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
component.set('style', compStyle);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.length.should.equal(3);
layers.at(0).get('values').should.deep.equal({
subprop1: '1px',
subprop2: 'A',
subprop3: 'W',
});
layers.at(1).get('values').should.deep.equal({
subprop1: '20px',
subprop2: 'B',
subprop3: 'X',
});
layers.at(2).get('values').should.deep.equal({
subprop1: '30px',
subprop2: 'C',
subprop3: 'Y',
});
});
});
describe('Detached with target setted', function() {
var prop2Val;
var prop3Val;
var prop2Unit;
var finalResult;
var $prop1;
var $prop2;
var $prop3;
var compStyle = {
subprop1: '1px, 20px, 30px',
subprop2: 'A, B, C',
subprop3: 'W, X, Y',
subprop555: 'T, T, T',
};
beforeEach(function () {
model = new Property({
type: 'stack',
property: propName,
properties: properties,
detached: true,
});
view = new PropertyStackView({
model: model,
propTarget: target
});
$fixture.html(view.render().el);
prop3Val = properties[2].list[2].value;
prop2Val = properties[1].defaults;
prop2Unit = properties[1].units[0];
finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
view.addLayer();
$prop1 = view.$props.find('#' + properties[0].property + ' input');
$prop2 = view.$props.find('#' + properties[1].property + ' input');
$prop3 = view.$props.find('#' + properties[2].property + ' select');
});
it('Returns correctly layers array from target', function() {
component.set('style', compStyle);
var result = [{
subprop1: '1px',
subprop2: 'A',
subprop3: 'W',
},{
subprop1: '20px',
subprop2: 'B',
subprop3: 'X',
},{
subprop1: '30px',
subprop2: 'C',
subprop3: 'Y',
}];
view.getLayersFromTarget().should.deep.equal(result);
});
it('Update target on detached value change', function() {
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
assertStyle[properties[0].property] = $prop1.val();
assertStyle[properties[1].property] = '0%';
assertStyle[properties[2].property] = properties[2].defaults;
compStyle.should.deep.equal(assertStyle);
});
it('Update value and input on target swap', function() {
var style = {};
component.set('style', compStyle);
view.propTarget.trigger('update');
var layers = view.getLayers();
layers.length.should.equal(3);
layers.at(0).get('values').should.deep.equal({
subprop1: '1px',
subprop2: 'A',
subprop3: 'W',
});
layers.at(1).get('values').should.deep.equal({
subprop1: '20px',
subprop2: 'B',
subprop3: 'X',
});
layers.at(2).get('values').should.deep.equal({
subprop1: '30px',
subprop2: 'C',
subprop3: 'Y',
});
});
});
}
};
});
});
}
};

428
test/specs/style_manager/view/PropertyView.js
View File

@ -1,238 +1,234 @@
define(function(require, exports, module){
'use strict';
var PropertyView = require('undefined');
var Property = require('StyleManager/model/Property');
var Component = require('DomComponents/model/Component');
module.exports = {
run : function(){
describe('PropertyView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'testvalue';
var defValue = 'testDefault';
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({property: propName});
view = new PropertyView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
const PropertyView = require('style_manager/view/PropertyView');
const Property = require('style_manager/model/Property');
const Component = require('dom_components/model/Component');
module.exports = {
run : function(){
describe('PropertyView', function() {
var component;
var $fixtures;
var $fixture;
var target;
var model;
var view;
var propName = 'testprop';
var propValue = 'testvalue';
var defValue = 'testDefault';
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sm-fixture"></div>');
});
afterEach(function () {
//view.remove(); // strange errors ???
});
beforeEach(function () {
target = new Component();
component = new Component();
model = new Property({property: propName});
view = new PropertyView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () {
$fixture.remove();
delete component;
});
afterEach(function () {
//view.remove(); // strange errors ???
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
after(function () {
$fixture.remove();
component = null;
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Rendered correctly', function() {
var prop = view.el;
$fixture.get(0).querySelector('.property').should.be.ok;
prop.querySelector('.label').should.be.ok;
prop.querySelector('.field').should.be.ok;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.$input.val().should.be.empty;
});
it('Input should exist', function() {
view.$input.should.be.ok;
});
it('Model not change without update trigger', function() {
view.$input.val(propValue);
view.model.get('value').should.be.empty;
});
it('Input value is empty', function() {
view.model.get('value').should.be.empty;
view.$input.val().should.be.empty;
});
// Tests valueUpdated()
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
it('Model not change without update trigger', function() {
view.$input.val(propValue);
view.model.get('value').should.be.empty;
});
// Tests getValueForTarget()
it('Get value for target', function() {
view.model.set('value', propValue);
view.getValueForTarget().should.equal(propValue);
});
// Tests valueUpdated()
it('Update model on input change', function() {
view.$input.val(propValue).trigger('change');
view.model.get('value').should.equal(propValue);
});
// Tests valueChanged() -> ...
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
// Tests getValueForTarget()
it('Get value for target', function() {
view.model.set('value', propValue);
view.getValueForTarget().should.equal(propValue);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
// Tests valueChanged() -> ...
it('Update input on value change', function() {
view.model.set('value', propValue);
view.$input.val().should.equal(propValue);
});
it('Update target on value change with functionName', function() {
view.selectedComponent = component;
view.model.set('functionName', 'testfunc');
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = 'testfunc(' + propValue + ')';
compStyle.should.deep.equal(assertStyle);
});
it('Update target on value change', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = propValue;
compStyle.should.deep.equal(assertStyle);
});
it('Clean target from the property if its value is empty', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
view.model.set('value', '');
var compStyle = view.selectedComponent.get('style');
compStyle.should.deep.equal({});
});
it('Update target on value change with functionName', function() {
view.selectedComponent = component;
view.model.set('functionName', 'testfunc');
view.model.set('value', propValue);
var compStyle = view.selectedComponent.get('style');
var assertStyle = {};
assertStyle[propName] = 'testfunc(' + propValue + ')';
compStyle.should.deep.equal(assertStyle);
});
it('Check stylable element', function() {
view.selectedComponent = component;
view.isTargetStylable().should.equal(true);
component.set('stylable', false);
view.isTargetStylable().should.equal(false);
component.set('stylable', [propName]);
view.isTargetStylable().should.equal(true);
component.set('stylable', ['test1', propName]);
view.isTargetStylable().should.equal(true);
component.set('stylable', ['test1', 'test2']);
view.isTargetStylable().should.equal(false);
});
it('Clean target from the property if its value is empty', function() {
view.selectedComponent = component;
view.model.set('value', propValue);
view.model.set('value', '');
var compStyle = view.selectedComponent.get('style');
compStyle.should.deep.equal({});
});
it('Target style is empty without values', function() {
view.selectedComponent = component;
view.getComponentValue().should.be.empty;
});
it('Check stylable element', function() {
view.selectedComponent = component;
view.isTargetStylable().should.equal(true);
component.set('stylable', false);
view.isTargetStylable().should.equal(false);
component.set('stylable', [propName]);
view.isTargetStylable().should.equal(true);
component.set('stylable', ['test1', propName]);
view.isTargetStylable().should.equal(true);
component.set('stylable', ['test1', 'test2']);
view.isTargetStylable().should.equal(false);
});
it('Target style is correct', function() {
view.selectedComponent = component;
var style = {};
style[propName] = propValue;
component.set('style', style);
view.getComponentValue().should.equal(propValue);
});
it('Target style is empty without values', function() {
view.selectedComponent = component;
view.getComponentValue().should.be.empty;
});
it('Target style is empty with an other style', function() {
view.selectedComponent = component;
var style = {};
style[propName + '2'] = propValue;
component.set('style', style);
view.getComponentValue().should.be.empty;
});
it('Target style is correct', function() {
view.selectedComponent = component;
var style = {};
style[propName] = propValue;
component.set('style', style);
view.getComponentValue().should.equal(propValue);
});
it('Fetch value from function', function() {
view.selectedComponent = component;
var style = {};
style[propName] = 'testfun(' + propValue + ')';
component.set('style', style);
view.model.set('functionName', 'testfun');
view.getComponentValue().should.equal(propValue);
});
it('Target style is empty with an other style', function() {
view.selectedComponent = component;
var style = {};
style[propName + '2'] = propValue;
component.set('style', style);
view.getComponentValue().should.be.empty;
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('updateTargetStyle', function() {
view.updateTargetStyle(propValue);
var style = {};
style[propName] = propValue;
component.get('style').should.deep.equal(style);
});
it('updateTargetStyle with custom property', function() {
view.updateTargetStyle(propValue, propName + '2');
var style = {};
style[propName + '2'] = propValue;
component.get('style').should.deep.equal(style);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = propValue + '2';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue + '2');
view.$input.val().should.equal(propValue + '2');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
property: propName,
defaults: defValue
});
view = new PropertyView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Placeholder as default', function() {
view.$input.attr('placeholder').should.equal(defValue);
});
it('Input value is empty', function() {
view.$input.val().should.equal(defValue);
});
it('Fetch value from function', function() {
view.selectedComponent = component;
var style = {};
style[propName] = 'testfun(' + propValue + ')';
component.set('style', style);
view.model.set('functionName', 'testfun');
view.getComponentValue().should.equal(propValue);
});
});
describe('With target setted', function() {
beforeEach(function () {
target.model = component;
view = new PropertyView({
model: model,
propTarget: target
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('updateTargetStyle', function() {
view.updateTargetStyle(propValue);
var style = {};
style[propName] = propValue;
component.get('style').should.deep.equal(style);
});
it('updateTargetStyle with custom property', function() {
view.updateTargetStyle(propValue, propName + '2');
var style = {};
style[propName + '2'] = propValue;
component.get('style').should.deep.equal(style);
});
it('Update value and input on target swap', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue);
view.$input.val().should.equal(propValue);
});
it('Update value after multiple swaps', function() {
var style = {};
style[propName] = propValue;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = propValue + '2';
component.set('style', style);
view.propTarget.trigger('update');
view.model.get('value').should.equal(propValue + '2');
view.$input.val().should.equal(propValue + '2');
});
})
describe('Init property', function() {
beforeEach(function () {
component = new Component();
model = new Property({
property: propName,
defaults: defValue
});
view = new PropertyView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
it('Value as default', function() {
view.model.get('value').should.equal(defValue);
});
it('Placeholder as default', function() {
view.$input.attr('placeholder').should.equal(defValue);
});
it('Input value is empty', function() {
view.$input.val().should.equal(defValue);
});
});
}
};
});
});
}
};

182
test/specs/style_manager/view/SectorView.js
View File

@ -1,109 +1,105 @@
define(function(require, exports, module){
'use strict';
var SectorView = require('undefined');
var Sector = require('StyleManager/model/Sector');
const SectorView = require('style_manager/view/SectorView');
const Sector = require('style_manager/model/Sector');
module.exports = {
run : function(){
module.exports = {
run : function(){
describe('SectorView', function() {
describe('SectorView', function() {
var $fixtures;
var $fixture;
var model;
var view;
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sector-fixture"></div>');
});
beforeEach(function () {
model = new Sector();
view = new SectorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sector-fixture"></div>');
});
afterEach(function () {
view.remove();
});
beforeEach(function () {
model = new Sector();
view = new SectorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
after(function () {
$fixture.remove();
});
afterEach(function () {
view.remove();
});
it('Rendered correctly', function() {
var sector = view.el;
sector.should.be.ok;
sector.querySelector('.title').should.be.ok;
var props = sector.querySelector('.properties');
props.should.be.ok;
sector.classList.contains('open').should.equal(true);
});
after(function () {
$fixture.remove();
});
it('No properties', function() {
var props = view.el.querySelector('.properties');
props.innerHTML.should.equal('<div class="clear"></div>');
});
it('Rendered correctly', function() {
var sector = view.el;
sector.should.be.ok;
sector.querySelector('.title').should.be.ok;
var props = sector.querySelector('.properties');
props.should.be.ok;
sector.classList.contains('open').should.equal(true);
});
it('Update on open', function() {
var sector = view.el;
var props = sector.querySelector('.properties');
model.set('open', false);
sector.classList.contains('open').should.equal(false);
props.style.display.should.equal('none');
});
it('No properties', function() {
var props = view.el.querySelector('.properties');
props.innerHTML.should.equal('<div class="clear"></div>');
});
it('Toggle on click', function() {
var sector = view.el;
view.$el.find('.title').click();
sector.classList.contains('open').should.equal(false);
});
it('Update on open', function() {
var sector = view.el;
var props = sector.querySelector('.properties');
model.set('open', false);
sector.classList.contains('open').should.equal(false);
props.style.display.should.equal('none');
});
describe('Init with options', function() {
beforeEach(function () {
model = new Sector({
open: false,
name: 'TestName',
properties: [
{type:'integer'},
{type:'integer'},
{type:'integer'},
]
});
view = new SectorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
it('Rendered correctly2', function() {
var sector = view.el;
var props = sector.querySelector('.properties');
sector.querySelector('.title').innerHTML.should.contain('TestName');
props.should.be.ok;
sector.classList.contains('open').should.equal(false);
props.style.display.should.equal('none');
});
it('Has properties', function() {
var props = view.el.querySelector('.properties');
props.children.length.should.equal(4); // Last one is 'clear' element
});
it('Toggle on click', function() {
var sector = view.el;
view.$el.find('.title').click();
sector.classList.contains('open').should.equal(false);
});
describe('Init with options', function() {
beforeEach(function () {
model = new Sector({
open: false,
name: 'TestName',
properties: [
{type:'integer'},
{type:'integer'},
{type:'integer'},
]
});
view = new SectorView({
model: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.remove();
});
it('Rendered correctly2', function() {
var sector = view.el;
var props = sector.querySelector('.properties');
sector.querySelector('.title').innerHTML.should.contain('TestName');
props.should.be.ok;
sector.classList.contains('open').should.equal(false);
props.style.display.should.equal('none');
});
it('Has properties', function() {
var props = view.el.querySelector('.properties');
props.children.length.should.equal(4); // Last one is 'clear' element
});
});
}
};
});
});
}
};

92
test/specs/style_manager/view/SectorsView.js
View File

@ -1,51 +1,47 @@
define(function(require, exports, module){
'use strict';
var SectorsView = require('undefined');
var Sectors = require('StyleManager/model/Sectors');
module.exports = {
run : function(){
describe('SectorsView', function() {
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sectors-fixture"></div>');
});
beforeEach(function () {
model = new Sectors([]);
view = new SectorsView({
collection: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.collection.reset();
});
after(function () {
$fixture.remove();
});
it("Collection is empty", function (){
view.el.innerHTML.should.be.empty;
});
it("Add new sectors", function (){
view.collection.add([{}, {}]);
view.el.children.length.should.equal(2);
});
const SectorsView = require('style_manager/view/SectorsView');
const Sectors = require('style_manager/model/Sectors');
module.exports = {
run : function(){
describe('SectorsView', function() {
var $fixtures;
var $fixture;
var model;
var view;
before(function () {
$fixtures = $("#fixtures");
$fixture = $('<div class="sectors-fixture"></div>');
});
beforeEach(function () {
model = new Sectors([]);
view = new SectorsView({
collection: model
});
$fixture.empty().appendTo($fixtures);
$fixture.html(view.render().el);
});
afterEach(function () {
view.collection.reset();
});
after(function () {
$fixture.remove();
});
it("Collection is empty", function (){
view.el.innerHTML.should.be.empty;
});
it("Add new sectors", function (){
view.collection.add([{}, {}]);
view.el.children.length.should.equal(2);
});
}
};
});
});
}
};

Write Preview
Loading…
Cancel
Save