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

Fix tests

pull/36/head
Artur Arseniev 10 years ago
parent
42d8a705ee
commit
df73fc33f1
15 changed files with 199 additions and 100 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. 17
      dist/grapes.min.js
  2. 4
      src/commands/view/CommandAbstract.js
  3. 2
      src/css_composer/main.js
  4. 4
      src/dom_components/config/config.js
  5. 134
      src/dom_components/main.js
  6. 1
      src/editor/main.js
  7. 22
      src/editor/model/Editor.js
  8. 17
      test/specs/code_manager/model/CodeModels.js
  9. 2
      test/specs/commands/main.js
  10. 2
      test/specs/css_composer/e2e/CssComposer.js
  11. 2
      test/specs/css_composer/main.js
  12. 68
      test/specs/dom_components/main.js
  13. 1
      test/specs/grapesjs/main.js
  14. 2
      test/specs/selector_manager/e2e/ClassManager.js
  15. 21
      test/specs/test_utils.js

17
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

4
src/commands/view/CommandAbstract.js
View File

@ -21,9 +21,9 @@ define(['backbone'],
this.plhClass = this.pfx + 'placeholder';
this.freezClass = this.ppfx + 'freezed';
this.canvas = this.editorModel.get('Canvas');
this.canvas = this.em.get && this.em.get('Canvas');
if(this.editorModel.get)
if(this.em.get)
this.setElement(this.getCanvas());
if(this.canvas){

2
src/css_composer/main.js
View File

@ -55,7 +55,7 @@ define(function(require) {
if(ppfx)
c.stylePrefix = ppfx + c.stylePrefix;
var elStyle = c.em.config.style || '';
var elStyle = (c.em && c.em.config.style) || '';
c.defaults = elStyle || c.defaults;
c.sm = c.em; // TODO Refactor

4
src/dom_components/config/config.js
View File

@ -17,9 +17,7 @@ define(function () {
// Could be used for default components
components: [],
rte : {},
em : {},
rte: {},
// Class for new image component
imageCompClass : 'fa fa-picture-o',

134
src/dom_components/main.js
View File

@ -6,31 +6,27 @@
* - [clear](#clear)
* - [render](#render)
*
* With this module is possible to manage all the HTML structure inside the canvas
* You can init the editor with initial components via configuration
*
* ```js
* var editor = grapesjs.init({
* ...
* domComponents: {...} // Check below for the possible properties
* ...
* });
* ```
*
*
* With this module is possible to manage components inside the canvas.
* Before using methods you should get first the module from the editor instance, in this way:
*
* ```js
* var ComponentsService = editor.DomComponents;
* var domComponents = editor.DomComponents;
* ```
*
* @module Components
* @module DomComponents
* @param {Object} config Configurations
* @param {string|Array<Object>} [config.defaults=[]] HTML string or an array of possible components
* @param {string|Array<Object>} [config.components=[]] HTML string or an array of possible components
* @example
* ...
* domComponents: {
* defaults: '<div>Hello world!</div>',
* components: '<div>Hello world!</div>',
* }
* // Or
* domComponents: {
* components: [
* { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
* { style: {width: '100px', content: 'world!'}}
* ],
* }
* ...
*/
@ -46,7 +42,6 @@ define(function(require) {
ComponentImageView = require('./view/ComponentImageView'),
ComponentTextView = require('./view/ComponentTextView');
var component, componentView;
this.c = c;
return {
@ -64,7 +59,7 @@ define(function(require) {
*/
storageKey: function(){
var keys = [];
var smc = c.stm.getConfig() || {};
var smc = (c.stm && c.stm.getConfig()) || {};
if(smc.storeHtml)
keys.push('html');
if(smc.storeComponents)
@ -73,12 +68,15 @@ define(function(require) {
},
/**
* Initialize module. Automatically called with a new instance of the editor
* Initialize module. Called on a new instance of the editor with configurations passed
* inside 'domComponents' field
* @param {Object} config Configurations
* @private
*/
init: function(config) {
c = config || {};
c.components = c.em.config.components || c.components;
if(c.em)
c.components = c.em.config.components || c.components;
for (var name in defaults) {
if (!(name in c))
@ -90,9 +88,11 @@ define(function(require) {
c.stylePrefix = ppfx + c.stylePrefix;
// Load dependencies
c.rte = c.em.get('rte') || '';
c.modal = c.em.get('Modal') || '';
c.am = c.em.get('AssetManager') || '';
if(c.em){
c.rte = c.em.get('rte') || '';
c.modal = c.em.get('Modal') || '';
c.am = c.em.get('AssetManager') || '';
}
component = new Component(c.wrapper, { sm: c.em, config: c });
component.set({ attributes: {id: 'wrapper'}});
@ -119,48 +119,48 @@ define(function(require) {
},
/**
* Load data from the passed object, if the object is empty will try to fetch them
* autonomously from the storage manager.
* The fetched data will be added to the collection
* @param {Object} data Object of data to load
* @return {Object} Loaded data
*/
load: function(data){
var d = data || '';
if(!d && c.stm)
d = c.em.getCacheLoad();
var obj = '';
if(d.components){
try{
obj = JSON.parse(d.components);
}catch(err){}
}else if(d.html)
obj = d.html;
* Load data from the passed object, if the object is empty will try to fetch them
* autonomously from the storage manager.
* The fetched data will be added to the collection
* @param {Object} data Object of data to load
* @return {Object} Loaded data
*/
load: function(data){
var d = data || '';
if(!d && c.stm)
d = c.em.getCacheLoad();
var obj = '';
if(d.components){
try{
obj = JSON.parse(d.components);
}catch(err){}
}else if(d.html)
obj = d.html;
this.getComponents().reset(obj);
return obj;
},
this.getComponents().reset(obj);
return obj;
},
/**
* Store data to the selected storage
* @param {Boolean} noStore If true, won't store
* @return {Object} Data to store
* @example
* var rules = cssComposer.store();
*/
store: function(noStore){
if(!c.stm)
return;
var obj = {};
var keys = this.storageKey();
if(keys.indexOf('html') >= 0)
obj.html = c.em.getHtml();
if(keys.indexOf('components') >= 0)
obj.components = JSON.stringify(c.em.getComponents());
if(!noStore)
c.stm.store(obj);
return obj;
},
/**
* Store data to the selected storage
* @param {Boolean} noStore If true, won't store
* @return {Object} Data to store
* @example
* var components = domComponents.store();
*/
store: function(noStore){
if(!c.stm)
return;
var obj = {};
var keys = this.storageKey();
if(keys.indexOf('html') >= 0)
obj.html = c.em.getHtml();
if(keys.indexOf('components') >= 0)
obj.components = JSON.stringify(c.em.getComponents());
if(!noStore)
c.stm.store(obj);
return obj;
},
/**
* Returns privately the main wrapper
@ -177,7 +177,7 @@ define(function(require) {
* @return {Component} Root Component
* @example
* // Change background of the wrapper and set some attribute
* var wrapper = ComponentsService.getWrapper();
* var wrapper = domComponents.getWrapper();
* wrapper.set('style', {'background-color': 'red'});
* wrapper.set('attributes', {'title': 'Hello!'});
*/
@ -192,7 +192,7 @@ define(function(require) {
* @return {Components} Collection of components
* @example
* // Let's add some component
* var wrapperChildren = ComponentsService.getComponents();
* var wrapperChildren = domComponents.getComponents();
* var comp1 = wrapperChildren.add({
* style: { 'background-color': 'red'}
* });
@ -218,7 +218,7 @@ define(function(require) {
/**
* Add new components to the wrapper's children. It's the same
* as 'ComponentsService.getComponents().add(...)'
* as 'domComponents.getComponents().add(...)'
* @param {Object|Component|Array<Object>} component Component/s to add
* @param {string} [component.tagName='div'] Tag name
* @param {string} [component.type=''] Type of the component. Available: ''(default), 'text', 'image'
@ -234,7 +234,7 @@ define(function(require) {
* @return {Component|Array<Component>} Component/s added
* @example
* // Example of a new component with some extra property
* var comp1 = ComponentsService.addComponent({
* var comp1 = domComponents.addComponent({
* tagName: 'div',
* removable: true, // Can't remove it
* draggable: true, // Can't move it

1
src/editor/main.js
View File

@ -66,6 +66,7 @@ define(function (require){
if (!(name in c))
c[name] = defaults[name];
}
c.pStylePrefix = c.stylePrefix;
var em = new EditorModel(c);

22
src/editor/model/Editor.js
View File

@ -1,7 +1,11 @@
var dep = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer',
'DomComponents', 'Canvas', 'Commands', 'BlockManager'];
define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
var deps = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager', 'ModalDialog', 'CodeManager', 'Panels',
'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager'];
// r.js do not see deps if I pass them as a variable
// http://stackoverflow.com/questions/27545412/optimization-fails-when-passing-a-variable-with-a-list-of-dependencies-to-define
define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents',
'Canvas', 'Commands', 'BlockManager'], function(){
return Backbone.Model.extend({
defaults: {
@ -21,9 +25,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
this.config.components = c.el.innerHTML;
// Load modules
dep.forEach(function(name){
if(['backbone','backboneUndo','keymaster'].indexOf(name) >= 0)
return;
deps.forEach(function(name){
this.loadModule(name);
}, this);
@ -42,7 +44,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
var M = new require(moduleName)();
var name = M.name.charAt(0).toLowerCase() + M.name.slice(1);
var cfg = c[name] || c[M.name] || {};
cfg.pStylePrefix = c.stylePrefix || '';
cfg.pStylePrefix = c.pStylePrefix || '';
// Check if module is storable
var sm = this.get('StorageManager');
@ -53,7 +55,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
this.set('storables', storables);
}
cfg.em = this;
M.init(cfg);
M.init(Object.create(cfg));
// Bind the module to the editor model if public
if(!M.private)
@ -285,7 +287,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
* @private
*/
setComponents: function(components){
return this.Components.setComponents(components);
return this.get('DomComponents').setComponents(components);
},
/**

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

@ -56,6 +56,9 @@ define([path + 'HtmlGenerator',
});
describe('CssGenerator', function() {
var newCssComp = function(){
return new CssComposer().init();
};
beforeEach(function () {
this.obj = new CssGenerator();
});
@ -92,7 +95,7 @@ define([path + 'HtmlGenerator',
var m1 = comp.get('components').add({tagName: 'article'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule(cls1);
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
cssc.addRule(rule);
@ -105,7 +108,7 @@ define([path + 'HtmlGenerator',
var m1 = comp.get('components').add({tagName: 'article'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule(cls1);
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
rule.set('state', 'hover');
@ -121,7 +124,7 @@ define([path + 'HtmlGenerator',
var cls1 = m1.get('classes').add({name: 'class1'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule([cls1, cls2]);
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
cssc.addRule(rule);
@ -136,7 +139,7 @@ define([path + 'HtmlGenerator',
var cls1 = m1.get('classes').add({name: 'class1'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule([cls1, cls2]);
rule.set('style',{'prop1':'value1'});
cssc.addRule(rule);
@ -153,7 +156,7 @@ define([path + 'HtmlGenerator',
var cls1 = m1.get('classes').add({name: 'class1'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule([cls1, cls2]);
rule.set('style',{'prop1':'value1'});
rule.set('maxWidth', '999px');
@ -168,7 +171,7 @@ define([path + 'HtmlGenerator',
var cls1 = m1.get('classes').add({name: 'class1'});
var cls2 = m1.get('classes').add({name: 'class2'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule([cls1, cls2]);
rule.set('style',{'prop1':'value1'});
@ -198,7 +201,7 @@ define([path + 'HtmlGenerator',
var m1 = comp.get('components').add({tagName: 'article'});
var cls1 = m1.get('classes').add({name: 'class1'});
var cssc = new CssComposer();
var cssc = newCssComp();
var rule = cssc.newRule(cls1);
rule.set('style',{'prop1':'value1', 'prop2':'value2'});
cssc.addRule(rule);

2
test/specs/commands/main.js
View File

@ -16,7 +16,7 @@ define([
var obj;
beforeEach(function () {
obj = new Commands();
obj = new Commands().init();
});
afterEach(function () {

2
test/specs/css_composer/e2e/CssComposer.js
View File

@ -20,7 +20,7 @@ define(['GrapesJS'],function(Grapes) {
});
this.cssc = this.gjs.editor.get('CssComposer');
this.clsm = this.gjs.editor.get('SelectorManager');
this.domc = this.gjs.editor.Components;
this.domc = this.gjs.editor.get('DomComponents');
this.$fixture.empty().appendTo(this.$fixtures);
this.gjs.render();
this.rulesSet = [

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

@ -20,7 +20,7 @@ define([
describe('Main', function() {
beforeEach(function () {
this.obj = new CssComposer();
this.obj = new CssComposer().init();
});
afterEach(function () {

68
test/specs/dom_components/main.js
View File

@ -6,14 +6,16 @@ define([
modulePath + '/view/ComponentV',
modulePath + '/view/ComponentsView',
modulePath + '/view/ComponentTextView',
modulePath + '/view/ComponentImageView'
modulePath + '/view/ComponentImageView',
'./../test_utils.js'
],
function(DomComponents,
ComponentModels,
ComponentView,
ComponentsView,
ComponentTextView,
ComponentImageView
ComponentImageView,
utils
) {
describe('DOM Components', function() {
@ -21,9 +23,33 @@ define([
describe('Main', function() {
var obj;
var config;
var storagMock = utils.storageMock();
var editorModel = {
getHtml: function(){return 'testHtml';},
getComponents: function(){return {test: 1};},
getCacheLoad: function(){
return storagMock.load();
}
};
// Methods
var setSmConfig = function(){
config.stm = storagMock;
config.stm.getConfig = function(){
return {
storeHtml: 1,
storeComponents: 1,
}
};
};
var setEm = function(){
config.em = editorModel;
}
beforeEach(function () {
obj = new DomComponents();
config = {};
obj = new DomComponents().init(config);
});
afterEach(function () {
@ -34,6 +60,40 @@ define([
DomComponents.should.be.exist;
});
it('storageKey returns array', function() {
obj.storageKey().should.be.instanceOf(Array);
});
it('storageKey returns correct composition', function() {
config.stm = {
getConfig: function(){
return {
storeHtml: 1,
storeComponents: 1,
}
}
};
obj.storageKey().should.eql(['html', 'components']);
});
it('Store data', function() {
setSmConfig();
setEm();
var expected = {
html: 'testHtml',
components: '{"test":1}',
};
obj.store(1).should.deep.equal(expected);
});
it('Store and load data', function() {
setSmConfig();
setEm();
obj.store();
// Load object between html and components
obj.load().should.deep.equal({test: 1});
});
it('Wrapper exists', function() {
obj.getWrapper().should.not.be.empty;
});
@ -57,7 +117,7 @@ define([
});
it('Add components at init', function() {
obj = new DomComponents({
obj = new DomComponents().init({
components : [{}, {}, {}]
});
obj.getComponents().length.should.equal(3);

1
test/specs/grapesjs/main.js
View File

@ -45,6 +45,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
});
afterEach(function () {
config = {};
delete obj;
delete config;
fixture.remove();

2
test/specs/selector_manager/e2e/ClassManager.js
View File

@ -54,7 +54,7 @@ define(['GrapesJS', 'SelectorManager/model/Selectors', 'SelectorManager/view/Cla
describe('Interaction with Components', function() {
beforeEach(function () {
this.wrapper = this.gjs.editor.get('Components').getWrapper().get('components');
this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components');
this.$clm = instClassTagViewer(this);
});

21
test/specs/test_utils.js
View File

@ -0,0 +1,21 @@
define(function () {
return {
storageMock: function() {
var db = {};
return {
id: 'testStorage',
store: function(data){
db = data;
},
load: function(keys){
return db;
},
getDb: function(){
return db;
},
};
},
};
});
Write Preview
Loading…
Cancel
Save