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

Add tests Css Composer

pull/14/head
Artur Arseniev 10 years ago
parent
773b4e9fe8
commit
05ed46831a
5 changed files with 136 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. 40
      src/css_composer/main.js
  2. 38
      src/css_composer/model/CssRule.js
  3. 5
      src/css_composer/view/CssRuleView.js
  4. 81
      test/specs/css_composer/main.js
  5. 24
      test/specs/css_composer/model/CssModels.js

40
src/css_composer/main.js
View File

@ -18,7 +18,6 @@ define(function(require) {
c[name] = def[name];
}
//this.qset = { '' : CssRules, '340px': CssRules };
var rules = new CssRules([]),
rulesView = new CssRulesView({
collection: rules,
@ -64,50 +63,23 @@ define(function(require) {
/**
* Get class by its name
* @param {Array} selectors Array of selectors
* @param {String} state Rule status
* @param {String} set Query set
* @param {Array} selectors Array of selectors
* @param {String} state Css rule state
* @param {String} width For which device this style is oriented
*
* @return {Object|null}
* */
getRule : function(selectors, state, set) {
var req = _.pluck(selectors, 'cid');
fRule = null;
getRule : function(selectors, state, width) {
fRule = null;
rules.each(function(rule){
if(fRule)
return;
var sel = _.pluck(rule.get('selectors').models, 'cid');
if(this.same(req, sel))
if(rule.compare(selectors, state, width))
fRule = rule;
}, this);
return fRule;
},
/**
* Compare 2 arrays to check if are the same
* @param {Array} arr1
* @param {Array} arr2
*
* @return {Boolean}
*/
same: function(a1, a2){
if(a1.length !== a2.length)
return;
for (var i = 0; i < a1.length; i++) {
var f = 0;
for (var j = 0; j < a2.length; j++) {
if (a1[i] === a2[j])
f = 1;
}
if(f === 0)
return;
}
return true;
},
/**
* Get collection of css rules
*

38
src/css_composer/model/CssRule.js
View File

@ -24,5 +24,43 @@ define(['backbone', './Selectors'],
this.set('selectors', new Selectors(this.slct));
},
/**
* Compare the actual model with parameters
* @param {Object} selectors Collection of selectors
* @param {String} state Css rule state
* @param {String} width For which device this style is oriented
*
* @return {Boolean}
*/
compare: function(selectors, state, width){
var st = state || '';
var wd = width || '';
var cId = 'cid';
var a1 = _.pluck(selectors.models || selectors, cId);
var a2 = _.pluck(this.get('selectors').models, cId);
var f = false;
if(a1.length !== a2.length)
return f;
for (var i = 0; i < a1.length; i++) {
var re = 0;
for (var j = 0; j < a2.length; j++) {
if (a1[i] === a2[j])
re = 1;
}
if(re === 0)
return f;
}
if(this.get('state') !== st)
return f;
if(this.get('maxWidth') !== wd)
return f;
return true;
},
});
});

5
src/css_composer/view/CssRuleView.js
View File

@ -15,6 +15,7 @@ define(['backbone'],
/**
* Returns string of selectors
*
* @return {String}
*/
renderSelectors: function(){
@ -27,6 +28,7 @@ define(['backbone'],
/**
* Returns string of properties
*
* @return {String}
*/
renderProperties: function(){
@ -38,9 +40,6 @@ define(['backbone'],
return sel.join('');
},
/*
http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
*/
render : function(){
if(!this.selStr)
this.selStr = this.renderSelectors();

81
test/specs/css_composer/main.js
View File

@ -47,34 +47,85 @@ define([
it("Add rule to collection", function() {
var sel = new this.obj.Selectors([{name: 'test1'}]);
var rule = this.obj.newRule(sel.models, 'state1', 'width1');
var rule = this.obj.newRule(sel.models);
this.obj.addRule(rule);
this.obj.getRules().length.should.equal(1);
this.obj.getRules().at(0).get('selectors').at(0).get('name').should.equal('test1');
});
/*
it("Don't duplicate rules", function() {
it("Returns correct rule with the same selector", function() {
var sel = new this.obj.Selectors([{name: 'test1'}]);
var rule1 = this.obj.newRule(sel.models);
this.obj.addRule(rule1);
var rule2 = this.obj.getRule(sel.models);
rule1.should.deep.equal(rule2);
});
it("Returns correct rule with the same selectors", function() {
var sel1 = new this.obj.Selectors([{name: 'test1'}]);
var rule1 = this.obj.newRule(sel1.models, 'state1', 'width1');
var rule1 = this.obj.newRule(sel1.models);
this.obj.addRule(rule1);
var sel2 = new this.obj.Selectors([{name: 'test21'}, {name: 'test22'}]);
var rule2 = this.obj.newRule(sel2.models);
this.obj.addRule(rule2);
var rule3 = this.obj.getRule(sel2.models);
rule3.should.deep.equal(rule2);
});
it("Don't duplicate rules", function() {
var sel = new this.obj.Selectors([]);
var s1 = sel.add({name: 'test1'});
var s2 = sel.add({name: 'test2'});
var s3 = sel.add({name: 'test3'});
var rule1 = this.obj.newRule([s1, s3]);
var aRule1 = this.obj.addRule(rule1);
var sel2 = new this.obj.Selectors([{name: 'test1'}]);
var rule2 = this.obj.newRule(sel2.models, 'state1', 'width1');
var rule2 = this.obj.newRule([s3, s1]);
var aRule2 = this.obj.addRule(rule2);
console.log(sel1);
console.log(rule1);
console.log(aRule1);
console.log(sel2);
console.log(rule2);
console.log(aRule2);
console.log(this.obj.getRules().length);
aRule2.should.deep.equal(aRule1);
});
it("Returns correct rule with the same mixed selectors", function() {
var sel = new this.obj.Selectors([]);
var s1 = sel.add({name: 'test1'});
var s2 = sel.add({name: 'test2'});
var s3 = sel.add({name: 'test3'});
var rule1 = this.obj.newRule([s1, s3]);
this.obj.addRule(rule1);
var rule2 = this.obj.getRule([s3, s1]);
rule2.should.deep.equal(rule1);
});
it("Returns correct rule with the same selectors and state", function() {
var sel = new this.obj.Selectors([]);
var s1 = sel.add({name: 'test1'});
var s2 = sel.add({name: 'test2'});
var s3 = sel.add({name: 'test3'});
var rule1 = this.obj.newRule([s1, s3], 'hover');
this.obj.addRule(rule1);
var rule2 = this.obj.getRule([s3, s1], 'hover');
rule2.should.deep.equal(rule1);
});
aRule1.should.deep.equal(aRule2);
it("Returns correct rule with the same selectors, state and width", function() {
var sel = new this.obj.Selectors([]);
var s1 = sel.add({name: 'test1'});
var rule1 = this.obj.newRule([s1], 'hover','1');
this.obj.addRule(rule1);
var rule2 = this.obj.getRule([s1], 'hover', '1');
rule2.should.deep.equal(rule1);
});
it("Renders correctly", function() {
this.obj.render().should.be.ok;
});
*/
});

24
test/specs/css_composer/model/CssModels.js
View File

@ -33,6 +33,30 @@ define([path + 'CssRule',
this.obj.get('selectors').length.should.equal(0);
});
it('Compare returns true with the same selectors', function() {
var s1 = this.obj.get('selectors').add({ name: 'test1' });
var s2 = this.obj.get('selectors').add({ name: 'test2' });
this.obj.compare([s1, s2]).should.equal(true);
});
it('Compare with different state', function() {
var s1 = this.obj.get('selectors').add({ name: 'test1' });
var s2 = this.obj.get('selectors').add({ name: 'test2' });
this.obj.set('state','hover');
this.obj.compare([s1, s2]).should.equal(false);
this.obj.compare([s1, s2], 'hover').should.equal(true);
});
it('Compare with different maxWidth', function() {
var s1 = this.obj.get('selectors').add({ name: 'test1' });
var s2 = this.obj.get('selectors').add({ name: 'test2' });
this.obj.set('state','hover');
this.obj.set('maxWidth','1000');
this.obj.compare([s1, s2]).should.equal(false);
this.obj.compare([s1, s2], 'hover').should.equal(false);
this.obj.compare([s2, s1], 'hover', '1000').should.equal(true);
});
});
describe('CssRules', function() {

Write Preview
Loading…
Cancel
Save