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

Write Preview
Loading…
Cancel
Save