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

Add code_manager to test

pull/202/head
Artur Arseniev 9 years ago
parent
feaaf34b0e
commit
dd439a7bea
4 changed files with 262 additions and 268 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      test/main.js
  2. 43
      test/specs/code_manager/index.js
  3. 47
      test/specs/code_manager/main.js
  4. 439
      test/specs/code_manager/model/CodeModels.js

1
test/main.js
View File

@ -13,5 +13,6 @@ describe('Main', () => {
const path = './specs/'; const path = './specs/';
require(`${path}asset_manager`); require(`${path}asset_manager`);
require(`${path}block_manager`); require(`${path}block_manager`);
require(`${path}code_manager`);
}); });

43
test/specs/code_manager/index.js
View File

@ -0,0 +1,43 @@
var CodeManager = require('code_manager');
var Models = require('./model/CodeModels');
describe('Code Manager', () => {
describe('Main', () => {
let obj;
beforeEach(() => {
obj = new CodeManager();
});
afterEach(() => {
obj = null;
});
it('Object exists', () => {
expect(CodeManager).toExist();
});
it('No code generators inside', () => {
expect(obj.getGenerators()).toEqual({});
});
it('No code viewers inside', () => {
expect(obj.getViewers()).toEqual({});
});
it('Add and get code generator', () => {
obj.addGenerator('test', 'gen');
expect(obj.getGenerator('test')).toEqual('gen');
});
it('Add and get code viewer', () => {
obj.addViewer('test', 'view');
expect(obj.getViewer('test')).toEqual('view');
});
});
Models.run();
});

47
test/specs/code_manager/main.js
View File

@ -1,47 +0,0 @@
define(function(require, exports, module){
'use strict';
var CodeManager = require('CodeManager');
var Models = require('undefined');
describe('Code Manager', function() {
describe('Main', function() {
var obj;
beforeEach(function () {
obj = new CodeManager();
});
afterEach(function () {
delete obj;
});
it('Object exists', function() {
CodeManager.should.be.exist;
});
it('No code generators inside', function() {
obj.getGenerators().should.be.empty;
});
it('No code viewers inside', function() {
obj.getViewers().should.be.empty;
});
it('Add and get code generator', function() {
obj.addGenerator('test', 'gen');
obj.getGenerator('test').should.equal('gen');
});
it('Add and get code viewer', function() {
obj.addViewer('test', 'view');
obj.getViewer('test').should.equal('view');
});
});
Models.run();
});
});

439
test/specs/code_manager/model/CodeModels.js
View File

@ -1,221 +1,218 @@
define(function(require, exports, module){ const CssGenerator = require('code_manager/model/CssGenerator');
'use strict'; const HtmlGenerator = require('code_manager/model/HtmlGenerator');
var CssGenerator = require('undefined'); const DomComponents = require('dom_components');
var DomComponents = require('DomComponents'); const Component = require('dom_components/model/Component');
var Component = require('DomComponents/model/Component'); const CssComposer = require('css_composer');
var CssComposer = require('CssComposer');
module.exports = {
module.exports = { run() {
run : function(){ let comp;
var comp; let obj;
describe('HtmlGenerator', function() { describe('HtmlGenerator', () => {
beforeEach(function () { beforeEach(() => {
this.obj = new HtmlGenerator(); obj = new HtmlGenerator();
var dcomp = new DomComponents(); var dcomp = new DomComponents();
comp = new Component({}, { comp = new Component({}, {
defaultTypes: dcomp.componentTypes, defaultTypes: dcomp.componentTypes,
}); });
}); });
afterEach(function () { afterEach(() => {
delete this.obj; obj = null;
}); });
it('Build correctly one component', function() { it('Build correctly one component', () => {
this.obj.build(comp).should.equal(''); expect(obj.build(comp)).toEqual('');
});
});
it('Build correctly empty component inside', function() {
var m1 = comp.get('components').add({}); it('Build correctly empty component inside', () => {
this.obj.build(comp).should.equal('<div></div>'); var m1 = comp.get('components').add({});
}); expect(obj.build(comp)).toEqual('<div></div>');
});
it('Build correctly not empty component inside', function() {
var m1 = comp.get('components').add({ it('Build correctly not empty component inside', () => {
tagName: 'article', var m1 = comp.get('components').add({
attributes: { tagName: 'article',
'data-test1': 'value1', attributes: {
'data-test2': 'value2' 'data-test1': 'value1',
} 'data-test2': 'value2'
}); }
this.obj.build(comp).should.equal('<article data-test1="value1" data-test2="value2"></article>'); });
}); expect(obj.build(comp)).toEqual('<article data-test1="value1" data-test2="value2"></article>');
});
it('Build correctly component with classes', function() {
var m1 = comp.get('components').add({ it('Build correctly component with classes', () => {
tagName: 'article', var m1 = comp.get('components').add({
attributes: { tagName: 'article',
'data-test1': 'value1', attributes: {
'data-test2': 'value2' 'data-test1': 'value1',
} 'data-test2': 'value2'
}); }
['class1', 'class2'].forEach(function(item){ });
m1.get('classes').add({name: item}); ['class1', 'class2'].forEach(item => {
}); m1.get('classes').add({name: item});
this.obj.build(comp).should.equal('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>'); });
}); expect(obj.build(comp)).toEqual('<article class="class1 class2" data-test1="value1" data-test2="value2"></article>');
}); });
});
describe('CssGenerator', function() {
var newCssComp = function(){ describe('CssGenerator', () => {
return new CssComposer().init(); var newCssComp = () => new CssComposer().init();
}; beforeEach(() => {
beforeEach(function () { obj = new CssGenerator();
this.obj = new CssGenerator(); var dcomp = new DomComponents();
var dcomp = new DomComponents(); comp = new Component({}, {
comp = new Component({}, { defaultTypes: dcomp.componentTypes,
defaultTypes: dcomp.componentTypes, });
}); });
});
afterEach(() => {
afterEach(function () { obj = null;
delete this.obj; });
});
it('Build correctly one component', () => {
it('Build correctly one component', function() { expect(obj.build(comp)).toEqual('');
this.obj.build(comp).should.equal(''); });
});
it('Build correctly empty component inside', () => {
it('Build correctly empty component inside', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); expect(obj.build(comp)).toEqual('');
this.obj.build(comp).should.equal(''); });
});
it('Build correctly component with style inside', () => {
it('Build correctly component with style inside', function() { var m1 = comp.get('components').add({
var m1 = comp.get('components').add({ tagName: 'article',
tagName: 'article', style: {
style: { 'prop1': 'value1',
'prop1': 'value1', 'prop2': 'value2'
'prop2': 'value2' }
} });
}); expect(obj.build(comp)).toEqual('#' + m1.cid +'{prop1:value1;prop2:value2;}');
this.obj.build(comp).should.equal('#' + m1.cid +'{prop1:value1;prop2:value2;}'); });
});
it('Build correctly component with class styled', () => {
it('Build correctly component with class styled', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add(cls1);
var rule = cssc.add(cls1); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
expect(obj.build(comp, cssc)).toEqual('.class1{prop1:value1;prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1{prop1:value1;prop2:value2;}'); });
});
it('Build correctly component styled with class and state', () => {
it('Build correctly component styled with class and state', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add(cls1);
var rule = cssc.add(cls1); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); rule.set('state', 'hover');
rule.set('state', 'hover');
expect(obj.build(comp, cssc)).toEqual('.class1:hover{prop1:value1;prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1:hover{prop1:value1;prop2:value2;}'); });
});
it('Build correctly with more classes', () => {
it('Build correctly with more classes', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'}); var cls2 = m1.get('classes').add({name: 'class2'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add([cls1, cls2]);
var rule = cssc.add([cls1, cls2]); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}'); });
});
it('Build rules with mixed classes', () => {
it('Build rules with mixed classes', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'}); var cls2 = m1.get('classes').add({name: 'class2'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add([cls1, cls2]);
var rule = cssc.add([cls1, cls2]); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); rule.set('selectorsAdd', '.class1 .class2, div > .class4');
rule.set('selectorsAdd', '.class1 .class2, div > .class4');
expect(obj.build(comp, cssc)).toEqual('.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1.class2, .class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); });
});
it('Build rules with only not class based selectors', () => {
it('Build rules with only not class based selectors', function() { var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add([]);
var rule = cssc.add([]); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'}); rule.set('selectorsAdd', '.class1 .class2, div > .class4');
rule.set('selectorsAdd', '.class1 .class2, div > .class4');
expect(obj.build(comp, cssc)).toEqual('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1 .class2, div > .class4{prop1:value1;prop2:value2;}'); });
});
it('Build correctly with class styled out', () => {
it('Build correctly with class styled out', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'}); var cls2 = m1.get('classes').add({name: 'class2'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add([cls1, cls2]);
var rule = cssc.add([cls1, cls2]); rule.set('style',{'prop1':'value1'});
rule.set('style',{'prop1':'value1'}); var rule2 = cssc.add(cls2);
var rule2 = cssc.add(cls2); rule2.set('style',{'prop2':'value2'});
rule2.set('style',{'prop2':'value2'});
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}');
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'); });
});
it('Rule with media query', () => {
it('Rule with media query', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'}); var cls2 = m1.get('classes').add({name: 'class2'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add([cls1, cls2]);
var rule = cssc.add([cls1, cls2]); rule.set('style',{'prop1':'value1'});
rule.set('style',{'prop1':'value1'}); rule.set('mediaText', '(max-width: 999px)');
rule.set('mediaText', '(max-width: 999px)');
expect(obj.build(comp, cssc)).toEqual('@media (max-width: 999px){.class1.class2{prop1:value1;}}');
this.obj.build(comp, cssc).should.equal('@media (max-width: 999px){.class1.class2{prop1:value1;}}'); });
});
it('Rules mixed with media queries', () => {
it('Rules mixed with media queries', function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'}); var cls2 = m1.get('classes').add({name: 'class2'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = newCssComp();
var cssc = newCssComp();
var rule = cssc.add([cls1, cls2]);
var rule = cssc.add([cls1, cls2]); rule.set('style',{'prop1':'value1'});
rule.set('style',{'prop1':'value1'}); var rule2 = cssc.add(cls2);
var rule2 = cssc.add(cls2); rule2.set('style',{'prop2':'value2'});
rule2.set('style',{'prop2':'value2'});
var rule3 = cssc.add(cls1, '', '(max-width: 999px)');
var rule3 = cssc.add(cls1, '', '(max-width: 999px)'); rule3.set('style',{'prop3':'value3'});
rule3.set('style',{'prop3':'value3'}); var rule4 = cssc.add(cls2, '', '(max-width: 999px)');
var rule4 = cssc.add(cls2, '', '(max-width: 999px)'); rule4.set('style',{'prop4':'value4'});
rule4.set('style',{'prop4':'value4'});
var rule5 = cssc.add(cls1, '', '(max-width: 100px)');
var rule5 = cssc.add(cls1, '', '(max-width: 100px)'); rule5.set('style',{'prop5':'value5'});
rule5.set('style',{'prop5':'value5'});
expect(obj.build(comp, cssc)).toEqual('.class1.class2{prop1:value1;}.class2{prop2:value2;}'+
this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}'+ '@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}'+
'@media (max-width: 999px){.class1{prop3:value3;}.class2{prop4:value4;}}'+ '@media (max-width: 100px){.class1{prop5:value5;}}');
'@media (max-width: 100px){.class1{prop5:value5;}}'); });
});
it('Avoid useless code', () => {
it("Avoid useless code", function() { var m1 = comp.get('components').add({tagName: 'article'});
var m1 = comp.get('components').add({tagName: 'article'}); var cls1 = m1.get('classes').add({name: 'class1'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = newCssComp();
var cssc = newCssComp(); var rule = cssc.add(cls1);
var rule = cssc.add(cls1); rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
comp.get('components').remove(m1);
comp.get('components').remove(m1); expect(obj.build(comp, cssc)).toEqual('');
this.obj.build(comp, cssc).should.equal(''); });
}); })
}) }
} };
};
});

Write Preview
Loading…
Cancel
Save