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

Add LayerView tests

pull/36/head
Artur Arseniev 10 years ago
parent
3626082227
commit
61956c5b5d
5 changed files with 157 additions and 52 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. 8
      src/style_manager/model/Layer.js
  2. 97
      src/style_manager/view/LayerView.js
  3. 6
      test/specs/style_manager/main.js
  4. 88
      test/specs/style_manager/view/LayerView.js
  5. 10
      test/specs/style_manager/view/PropertyCompositeView.js

8
src/style_manager/model/Layer.js
View File

@ -4,10 +4,10 @@ define(['backbone'],
return Backbone.Model.extend({
defaults: {
name : '',
active : true,
value : '',
preview : false,
name: '',
active: true,
value: '',
preview: false,
}
});

97
src/style_manager/view/LayerView.js
View File

@ -6,20 +6,20 @@ define(['backbone', 'text!./../templates/layer.html'],
return Backbone.View.extend({
events:{
'click' : 'updateIndex',
'click': 'updateIndex',
},
template: _.template(layerTemplate),
initialize: function(o) {
this.stackModel = o.stackModel || {};
this.config = o.config;
this.pfx = this.config.stylePrefix;
this.className = this.pfx + 'layer';
this.listenTo( this.model, 'destroy remove', this.remove );
this.listenTo( this.model, 'change:valuePreview', this.previewChanged );
this.listenTo( this.model, 'change:props', this.showProps );
this.events['click #' + this.pfx + 'close-layer'] = 'remove';
this.stackModel = o.stackModel || {};
this.config = o.config || {};
this.pfx = this.config.stylePrefix || '';
this.className = this.pfx + 'layer';
this.listenTo(this.model, 'destroy remove', this.remove);
this.listenTo(this.model, 'change:valuePreview', this.previewChanged);
this.listenTo(this.model, 'change:props', this.showProps);
this.events['click #' + this.pfx + 'close-layer'] = 'remove';
if( !this.model.get('preview') ){
this.$el.addClass(this.pfx + 'no-preview');
@ -28,8 +28,8 @@ define(['backbone', 'text!./../templates/layer.html'],
// Parse preview value if requested
var pPattern = this.model.get('patternPreview');
if(this.model.get('valuePreview') && pPattern){
this.model.set('preview',true);
var nV = this.formatPreviewValue(pPattern);
this.model.set('preview', true);
var nV = this.formatPreviewValue(pPattern);
this.model.set({valuePreview: nV}, {silent: true});
}
@ -38,11 +38,12 @@ define(['backbone', 'text!./../templates/layer.html'],
/**
* Format preview value by pattern of property models
* Need only for initial render, DRY
* @param Objects Property models
*
* @return string
* @return {string}
* */
formatPreviewValue: function(props){
/*
var aV = this.model.get('valuePreview').split(' '),
lim = 3,
nV = '';
@ -51,41 +52,39 @@ define(['backbone', 'text!./../templates/layer.html'],
if(v){
if(p.get('type') == 'integer'){
var vI = parseInt(v, 10),
u = v.replace(vI,'');
u = v.replace(vI,'');
vI = !isNaN(vI) ? vI : 0;
if(vI > lim) vI = lim;
if(vI < -lim) vI = -lim;
if(vI > lim)
vI = lim;
if(vI < -lim)
vI = -lim;
v = vI + u;
}
}
nV += v + ' ';
});
return nV;
return nV;*/
},
/**
* Show inputs on this layer
*
* @return void
* */
showProps:function(){
this.$props = this.model.get('props');
this.$el.find('#' + this.pfx + 'inputs').html(this.$props.show());
this.model.set({ props: null },{ silent: true });
this.model.set({props: null }, {silent: true });
},
/**
* Triggered when the value for the preview is changed
*
* @return void
* */
previewChanged:function(){
previewChanged: function(){
if( this.model.get('preview') ){
if(!this.$preview)
this.$preview = this.$el.find('#'+ this.pfx + 'preview');
var property = this.model.get('propertyPreview');
if(property)
this.$preview.css(property,this.model.get('valuePreview'));
this.$preview.css(property, this.model.get('valuePreview'));
}
},
@ -94,11 +93,19 @@ define(['backbone', 'text!./../templates/layer.html'],
// Prevent from revoming all events on props
if(this.$props)
this.$props.detach();
e.stopPropagation();
if(e && e.stopPropagation)
e.stopPropagation();
Backbone.View.prototype.remove.apply(this, arguments);
this.model.collection.remove(this.model);
this.stackModel.trigger('refreshValue');
this.stackModel.set({stackIndex: null},{silent: true});
if(this.model.collection)
this.model.collection.remove(this.model);
if(this.stackModel && this.stackModel.set){
this.stackModel.trigger('refreshValue');
this.stackModel.set({stackIndex: null},{silent: true});
}
},
/**
@ -108,20 +115,36 @@ define(['backbone', 'text!./../templates/layer.html'],
* @return void
* */
updateIndex: function(e){
var index = this.model.collection.indexOf(this.model);
this.stackModel.set('stackIndex', index);
this.model.collection.trigger('deselectAll');
var i = this.getIndex();
this.stackModel.set('stackIndex', i);
if(this.model.collection)
this.model.collection.trigger('deselectAll');
this.$el.addClass(this.pfx + 'active');
},
/**
* Fetch model index
* @return {number} Index
*/
getIndex: function(){
var index = 0;
if(this.model.collection)
index = this.model.collection.indexOf(this.model);
return index;
},
render : function(){
var index = this.model.collection.indexOf(this.model);
var i = this.getIndex();
this.$el.html( this.template({
label : 'Layer '+index,
name : this.model.get('name'),
vPreview : this.model.get('valuePreview'),
pPreview : this.model.get('propertyPreview'),
pfx : this.pfx,
label: 'Layer ' + i,
name: this.model.get('name'),
vPreview: this.model.get('valuePreview'),
pPreview: this.model.get('propertyPreview'),
pfx: this.pfx,
}));
this.$el.attr('class', this.className);
return this;

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

@ -11,6 +11,7 @@ define([
modulePath + '/view/PropertyIntegerView',
modulePath + '/view/PropertyColorView',
modulePath + '/view/PropertyCompositeView',
modulePath + '/view/LayerView',
],
function(
StyleManager,
@ -22,7 +23,8 @@ define([
PropertyRadioView,
PropertyIntegerView,
PropertyColorView,
PropertyCompositeView
PropertyCompositeView,
LayerView
) {
describe('StyleManager', function() {
@ -197,7 +199,7 @@ define([
PropertyIntegerView.run();
PropertyColorView.run();
PropertyCompositeView.run();
LayerView.run();
});
});

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

@ -0,0 +1,88 @@
var path = 'StyleManager/view/';
define([path + 'LayerView', 'StyleManager/model/Layers'],
function(LayerView, Layers) {
return {
run : function(){
describe('LayerView', function() {
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);
});
afterEach(function () {
view.remove();
});
after(function () {
$fixture.remove();
delete component;
delete view;
delete model;
});
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('getIndex returns default value', function() {
view.getIndex().should.equal(0);
});
it('Destroy element', function() {
view.model.destroy();
});
it('No preview', function() {
var style = view.el.querySelector('#preview').style;
style.cssText.should.be.empty;
});
it('Changes on valuePreview update preview box', function() {
var layerProp = 'color';
var layerPrevValue = 'red';
view.model.set('preview', true);
view.model.set('propertyPreview', layerProp);
view.model.set('valuePreview', layerPrevValue);
var preview = view.el.querySelector('#preview');
var style = preview.style;
style[layerProp].should.equal(layerPrevValue);
});
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);
});
});
}
};
});

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

@ -133,13 +133,6 @@ define([path + 'PropertyCompositeView', 'StyleManager/model/Property', 'DomCompo
});
it('Update model on input change', function() {
var $prop1 = view.$props.find('#' + properties[0].property + ' input');
var $prop2 = view.$props.find('#' + properties[1].property + ' input');
var $prop3 = view.$props.find('#' + properties[2].property + ' select');
var prop3Val = properties[2].list[2].value;
var prop2Val = properties[1].defaults;
var prop2Unit = properties[1].units[0];
var finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
$prop1.val(propValue).trigger('change');
$prop3.val(prop3Val).trigger('change');
view.model.get('value').should.equal(finalResult);
@ -152,7 +145,6 @@ define([path + 'PropertyCompositeView', 'StyleManager/model/Property', 'DomCompo
});
it('Update target on value change', function() {
var $prop1 = view.$props.find('#' + properties[0].property + ' input');
$prop1.val(propValue).trigger('change');
var compStyle = view.getTarget().get('style');
var assertStyle = {};
@ -174,7 +166,7 @@ define([path + 'PropertyCompositeView', 'StyleManager/model/Property', 'DomCompo
style[propName] = finalResult;
component.set('style', style);
view.propTarget.trigger('update');
style[propName] = propValue + '2 ' + prop2Val + '2' + prop2Unit +' ' + 'val1';
style[propName] = propValue + '2 ' + prop2Val + '2' + prop2Unit + ' ' + 'val1';
component.set('style', style);
view.propTarget.trigger('update');
$prop1.val().should.equal(propValue + '2');

Write Preview
Loading…
Cancel
Save