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

Refactor class manager tests

pull/36/head
Artur Arseniev 10 years ago
parent
e6bca464ad
commit
a516c9395b
9 changed files with 5 additions and 599 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. 2
      .gitignore
  2. 3
      src/editor/model/Editor.js
  3. 6
      test/runner/main.js
  4. 127
      test/specs/class_manager/e2e/ClassManager.js
  5. 93
      test/specs/class_manager/main.js
  6. 53
      test/specs/class_manager/model/ClassModels.js
  7. 126
      test/specs/class_manager/view/ClassTagView.js
  8. 188
      test/specs/class_manager/view/ClassTagsView.js
  9. 6
      test/specs/css_composer/model/CssModels.js

2
.gitignore
View File

@ -4,8 +4,6 @@
.project .project
npm-debug.log npm-debug.log
style/.sass-cache/ style/.sass-cache/
grapes.sublime-project
grapes.sublime-workspace
img/ img/
private/ private/

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

@ -65,7 +65,7 @@ define([
this.initStorage(); this.initStorage();
this.loadModule('SelectorManager'); this.loadModule('SelectorManager');
this.initModal(); this.initModal();
this.loadModule('AssetManager'); this.loadModule('AssetManager'); // requires SelectorManager
this.initUtils(); this.initUtils();
this.initCodeManager(); this.initCodeManager();
this.initCommands(); this.initCommands();
@ -102,7 +102,6 @@ define([
this.set('storables', storables); this.set('storables', storables);
} }
cfg.em = this; cfg.em = this;
//cfg.target = this; // refactor
M.init(cfg); M.init(cfg);
// Bind the module to the editor model if public // Bind the module to the editor model if public

6
test/runner/main.js
View File

@ -4,12 +4,8 @@ require(['../src/config/require-config.js', 'config/config.js'], function() {
'sinon', 'sinon',
'specs/main.js', 'specs/main.js',
'specs/asset_manager/main.js', 'specs/asset_manager/main.js',
'specs/asset_manager/view/AssetsView.js',
'specs/asset_manager/view/AssetView.js',
'specs/asset_manager/view/AssetImageView.js',
'specs/asset_manager/view/FileUploader.js',
'specs/dom_components/main.js', 'specs/dom_components/main.js',
'specs/class_manager/main.js', 'specs/selector_manager/main.js',
'specs/css_composer/main.js', 'specs/css_composer/main.js',
'specs/code_manager/main.js', 'specs/code_manager/main.js',
'specs/device_manager/main.js', 'specs/device_manager/main.js',

127
test/specs/class_manager/e2e/ClassManager.js
View File

@ -1,127 +0,0 @@
define(['GrapesJS'],
function(GrapesJS) {
return {
run : function(){
describe('E2E tests', function() {
/**
* Create tags viewer
* @param {Object} ctx
*/
var instClassTagViewer = function(ctx){
var $clm;
var clm = ctx.gjs.editor.get('ClassManager');
clm.config.target = ctx.gjs.editor;
if(clm){
$clm = new clm.ClassTagsView({
collection: new clm.ClassTags([]),
config: clm.config,
}).render();
ctx.$fixture.append($clm.el);
}
return $clm;
};
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div id="ClassManager-fixture"></div>');
});
beforeEach(function () {
var Grapes = GrapesJS;
this.gjs = Grapes.init({
stylePrefix: '',
storage: { autoload: 0, type:'none' },
assetManager: {
storageType: 'none',
},
container: '#ClassManager-fixture',
});
this.$fixture.empty().appendTo(this.$fixtures);
this.gjs.render();
});
afterEach(function () {
delete this.gjs;
});
after(function () {
this.$fixture.remove();
});
describe('Interaction with Components', function() {
beforeEach(function () {
this.wrapper = this.gjs.editor.get('Components').getWrapper().get('components');
this.$clm = instClassTagViewer(this);
});
afterEach(function () {
delete this.wrapper;
delete this.$clm;
});
it('Assign correctly new class to component', function() {
var model = this.wrapper.add({});
model.get('classes').length.should.equal(0);
this.gjs.editor.set('selectedComponent', model);
this.$clm.addNewTag('test');
model.get('classes').length.should.equal(1);
model.get('classes').at(0).get('name').should.equal('test');
});
it('Classes from components are correctly imported inside main container', function() {
var model = this.wrapper.add([
{ classes: ['test11', 'test12', 'test13'] },
{ classes: ['test11', 'test22', 'test22'] },
]);
this.gjs.editor.get('ClassManager').getClasses().length.should.equal(4);
});
it('Class imported into component is the same model from main container', function() {
var model = this.wrapper.add({ classes: ['test1'] });
var clModel = model.get('classes').at(0);
var clModel2 = this.gjs.editor.get('ClassManager').getClasses().at(0);
clModel.should.deep.equal(clModel2);
});
it('Can assign only one time the same class on selected component and the class viewer', function() {
var model = this.wrapper.add({});
this.gjs.editor.set('selectedComponent', model);
this.$clm.addNewTag('test');
this.$clm.addNewTag('test');
model.get('classes').length.should.equal(1);
model.get('classes').at(0).get('name').should.equal('test');
this.$clm.collection.length.should.equal(1);
this.$clm.collection.at(0).get('name').should.equal('test');
});
it('Removing from container removes also from selected component', function() {
var model = this.wrapper.add({});
this.gjs.editor.set('selectedComponent', model);
this.$clm.addNewTag('test');
this.$clm.collection.at(0).destroy();
model.get('classes').length.should.equal(0);
});
it("Trigger correctly event on target with new class add", function() {
var spy = sinon.spy();
var model = this.wrapper.add({});
this.gjs.editor.set('selectedComponent', model);
this.$clm.addNewTag('test');
this.gjs.editor.on("targetClassAdded", spy);
this.$clm.addNewTag('test');
spy.called.should.equal(false);
this.$clm.addNewTag('test2');
spy.called.should.equal(true);
});
});
});
}
};
});

93
test/specs/class_manager/main.js
View File

@ -1,93 +0,0 @@
var modulePath = './../../../test/specs/class_manager';
define([
'ClassManager',
modulePath + '/model/ClassModels',
modulePath + '/view/ClassTagView',
modulePath + '/view/ClassTagsView',
modulePath + '/e2e/ClassManager'
],
function(
ClassManager,
Models,
ClassTagView,
ClassTagsView,
e2e
) {
describe('Class Manager', function() {
describe('Main', function() {
beforeEach(function () {
this.obj = new ClassManager();
});
afterEach(function () {
delete this.obj;
});
it('Object exists', function() {
ClassManager.should.be.exist;
});
it('No classes inside', function() {
this.obj.getClasses().length.should.equal(0);
});
it('Able to add default classes', function() {
var cm = new ClassManager({
defaults: ['test1', 'test2', 'test3'],
});
cm.getClasses().length.should.equal(3);
});
it('Add new class', function() {
this.obj.addClass('test');
this.obj.getClasses().length.should.equal(1);
});
it('Check name property', function() {
var className = 'test';
var obj = this.obj.addClass(className);
obj.get('name').should.equal(className);
});
it('Add 2 classes', function() {
this.obj.addClass('test');
this.obj.addClass('test2');
this.obj.getClasses().length.should.equal(2);
});
it('Add 2 same classes', function() {
this.obj.addClass('test');
this.obj.addClass('test');
this.obj.getClasses().length.should.equal(1);
});
it('Get class', function() {
var className = 'test';
var obj = this.obj.addClass(className);
(this.obj.getClass(className) === null).should.equal(false);
});
it('Get empty class', function() {
(this.obj.getClass('test') === null).should.equal(true);
});
it('Get same class', function() {
var className = 'test';
var obj = this.obj.addClass(className);
var obj2 = this.obj.getClass(className);
obj2.should.deep.equal(obj);
});
});
Models.run();
ClassTagView.run();
ClassTagsView.run();
e2e.run();
});
});

53
test/specs/class_manager/model/ClassModels.js
View File

@ -1,53 +0,0 @@
var path = 'ClassManager/model/';
define([path + 'ClassTag',
path + 'ClassTags'],
function(ClassTag, ClassTags) {
return {
run : function(){
describe('ClassTag', function() {
beforeEach(function () {
this.obj = new ClassTag();
});
afterEach(function () {
delete this.obj;
});
it('Has name property', function() {
this.obj.has('name').should.equal(true);
});
it('Has label property', function() {
this.obj.has('label').should.equal(true);
});
it('Has active property', function() {
this.obj.has('active').should.equal(true);
});
it('escapeName test', function() {
this.obj.escapeName('@Te sT*').should.equal('-te-st-');
});
it('Name is corrected at instantiation', function() {
this.obj = new ClassTag({ name: '@Te sT*'});
this.obj.get('name').should.equal('-te-st-');
});
});
describe('ClassTags', function() {
it('Creates collection item correctly', function() {
var c = new ClassTags();
var m = c.add({});
m.should.be.an.instanceOf(ClassTag);
});
});
}
};
});

126
test/specs/class_manager/view/ClassTagView.js
View File

@ -1,126 +0,0 @@
var path = 'ClassManager/view/';
define([path + 'ClassTagView', 'ClassManager/model/ClassTags'],
function(ClassTagView, ClassTags) {
return {
run : function(){
describe('ClassTagView', function() {
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div class="classtag-fixture"></div>');
});
beforeEach(function () {
this.coll = new ClassTags();
this.testLabel = 'TestLabel';
var model = this.coll.add({
name: 'test',
label: this.testLabel,
});
this.view = new ClassTagView({
config : {},
model: model,
coll: this.coll
});
this.view.target = { get:function(){} };
_.extend(this.view.target, Backbone.Events);
this.$fixture.empty().appendTo(this.$fixtures);
this.$fixture.html(this.view.render().el);
});
afterEach(function () {
this.view.model.destroy();
});
after(function () {
this.$fixture.remove();
});
it('Object exists', function() {
ClassTagView.should.be.exist;
});
it('Not empty', function() {
var $el = this.view.$el;
$el.html().should.not.be.empty;
});
it('Not empty', function() {
var $el = this.view.$el;
$el.html().should.contain(this.testLabel);
});
describe('Should be rendered correctly', function() {
it('Has close button', function() {
var $el = this.view.$el;
$el.find('#close').should.have.property(0);
});
it('Has checkbox', function() {
var $el = this.view.$el;
$el.find('#checkbox').should.have.property(0);
});
it('Has label', function() {
var $el = this.view.$el;
$el.find('#tag-label').should.have.property(0);
});
});
it('Could be removed', function() {
var spy = sinon.spy();
this.view.config.target = { get:function(){} };
sinon.stub(this.view.config.target, 'get').returns(0);
this.view.$el.find('#close').trigger('click');
this.$fixture.html().should.be.empty;
});
it('On remove triggers event', function() {
var spy = sinon.spy();
sinon.stub(this.view.target, 'get').returns(0);
this.view.target.on("targetClassRemoved", spy);
this.view.$el.find('#close').trigger('click');
spy.called.should.equal(true);
});
it('Checkbox toggles status', function() {
var spy = sinon.spy();
this.view.model.on("change:active", spy);
this.view.model.set('active', true);
this.view.$el.find('#checkbox').trigger('click');
this.view.model.get('active').should.equal(false);
spy.called.should.equal(true);
});
it('On toggle triggers event', function() {
var spy = sinon.spy();
sinon.stub(this.view.target, 'get').returns(0);
this.view.target.on("targetClassUpdated", spy);
this.view.$el.find('#checkbox').trigger('click');
spy.called.should.equal(true);
});
it('Label input is disabled', function() {
var inputProp = this.view.inputProp;
this.view.$labelInput.prop(inputProp).should.equal(true);
});
it('On double click label input is enable', function() {
var inputProp = this.view.inputProp;
this.view.$el.find('#tag-label').trigger('dblclick');
this.view.$labelInput.prop(inputProp).should.equal(false);
});
it('On blur label input turns back disabled', function() {
var inputProp = this.view.inputProp;
this.view.$el.find('#tag-label').trigger('dblclick');
this.view.endEditTag();
this.view.$labelInput.prop(inputProp).should.equal(true);
});
});
}
};
});

188
test/specs/class_manager/view/ClassTagsView.js
View File

@ -1,188 +0,0 @@
var path = 'ClassManager/view/';
define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'],
function(ClassTagsView, ClassTags) {
return {
run : function(){
describe('ClassTagsView', function() {
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('<div class="classtag-fixture"></div>');
});
beforeEach(function () {
this.target = { get: function(){} };
this.coll = new ClassTags();
_.extend(this.target, Backbone.Events);
this.view = new ClassTagsView({
config : { target: this.target },
collection: this.coll
});
this.targetStub = {
addClass: function(v){ return {name: v}; }
};
this.compTargetStub = {
get: function(){ return { add: function(){} }}
};
this.$fixture.empty().appendTo(this.$fixtures);
this.$fixture.html(this.view.render().el);
this.btnAdd = this.view.$el.find('#' + this.view.addBtnId);
this.input = this.view.$el.find('input#' + this.view.newInputId);
this.$tags = this.$fixture.find('#tags-c');
this.$states = this.$fixture.find('#states');
this.$statesC = this.$fixture.find('#input-c');
});
afterEach(function () {
delete this.view.collection;
});
after(function () {
this.$fixture.remove();
});
it('Object exists', function() {
ClassTagsView.should.be.exist;
});
it('Not tags inside', function() {
this.$tags.html().should.equal('');
});
it('Add new tag triggers correct method', function() {
sinon.stub(this.view, "addToClasses");
this.coll.add({ name: 'test' });
this.view.addToClasses.calledOnce.should.equal(true);
});
it('Start new tag creation', function() {
this.btnAdd.click();
(this.btnAdd.css('display') == 'none').should.equal(true);
(this.input.css('display') !== 'none').should.equal(true);
});
it('Stop tag creation', function() {
this.btnAdd.click();
this.input.val('test')
this.input.blur();
(this.btnAdd.css('display') !== 'none').should.equal(true);
(this.input.css('display') == 'none').should.equal(true);
this.input.val().should.equal('');
});
it('Check keyup of ESC on input', function() {
this.btnAdd.click();
sinon.stub(this.view, "addNewTag");
this.input.trigger({
type: 'keyup',
keyCode: 13
});
this.view.addNewTag.calledOnce.should.equal(true);
});
it('Check keyup on ENTER on input', function() {
this.btnAdd.click();
sinon.stub(this.view, "endNewTag");
this.input.trigger({
type: 'keyup',
keyCode: 27
});
this.view.endNewTag.calledOnce.should.equal(true);
});
it('Collection changes on update of target', function() {
this.coll.add({ name: 'test' });
this.target.trigger('change:selectedComponent');
this.coll.length.should.equal(0);
});
it('Collection reacts on reset', function() {
this.coll.add([{ name: 'test1' }, { name: 'test2' }]);
sinon.stub(this.view, "addToClasses");
this.coll.trigger('reset');
this.view.addToClasses.calledTwice.should.equal(true);
});
it("Don't accept empty tags", function() {
this.view.addNewTag('');
this.$tags.html().should.equal('');
});
it("Accept new tags", function() {
sinon.stub(this.target, "get").returns(this.targetStub);
this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test');
this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test2');
this.$tags.children().length.should.equal(2);
});
it("New tag correctly added", function() {
this.coll.add({ label: 'test' });
this.$tags.children().first().find('#tag-label input').val().should.equal('test');
});
it("States are hidden in case no tags", function() {
this.view.updateStateVis();
this.$statesC.css('display').should.equal('none');
});
it("States are visible in case of more tags inside", function() {
this.coll.add({ label: 'test' });
this.view.updateStateVis();
this.$statesC.css('display').should.equal('block');
});
it("Update state visibility on new tag", function() {
sinon.stub(this.view, "updateStateVis");
sinon.stub(this.target, "get").returns(this.targetStub);
this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test');
this.view.updateStateVis.called.should.equal(true);
});
it("Update state visibility on removing of the tag", function() {
sinon.stub(this.target, "get").returns(this.targetStub);
this.view.compTarget = this.compTargetStub;
this.view.addNewTag('test');
sinon.stub(this.view, "updateStateVis");
this.coll.remove(this.coll.at(0));
this.view.updateStateVis.calledOnce.should.equal(true);
});
it("Output correctly state options", function() {
var view = new ClassTagsView({
config : {
target: this.target,
states: [ { name: 'testName', label: 'testLabel' } ],
},
collection: this.coll
});
view.getStateOptions().should.equal('<option value="testName">testLabel</option>');
});
describe('Should be rendered correctly', function() {
it('Has label', function() {
this.view.$el.find('#label').should.have.property(0);
});
it('Has tags container', function() {
this.view.$el.find('#tags-c').should.have.property(0);
});
it('Has add button', function() {
this.view.$el.find('#add-tag').should.have.property(0);
});
it('Has states input', function() {
this.view.$el.find('#states').should.have.property(0);
});
});
});
}
};
});

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

@ -2,8 +2,8 @@ var path = 'CssComposer/model/';
define([path + 'CssRule', define([path + 'CssRule',
path + 'CssRules', path + 'CssRules',
path + 'Selectors', path + 'Selectors',
'ClassManager/model/ClassTag'], 'SelectorManager/model/Selector'],
function(CssRule, CssRules, Selectors, ClassTag) { function(CssRule, CssRules, Selectors, Selector) {
return { return {
run : function(){ run : function(){
@ -74,7 +74,7 @@ define([path + 'CssRule',
it('Creates collection item correctly', function() { it('Creates collection item correctly', function() {
var c = new Selectors(); var c = new Selectors();
var m = c.add({}); var m = c.add({});
m.should.be.an.instanceOf(ClassTag); m.should.be.an.instanceOf(Selector);
}); });
}); });

Write Preview
Loading…
Cancel
Save