diff --git a/src/selector_manager/view/ClassTagView.js b/src/selector_manager/view/ClassTagView.js
index a7928a6f0..47bddbd23 100644
--- a/src/selector_manager/view/ClassTagView.js
+++ b/src/selector_manager/view/ClassTagView.js
@@ -9,8 +9,6 @@ module.exports = Backbone.View.extend({
⨯`),
- events: {},
-
initialize(o) {
this.config = o.config || {};
this.coll = o.coll || null;
@@ -22,6 +20,7 @@ module.exports = Backbone.View.extend({
this.closeId = this.pfx + 'close';
this.chkId = this.pfx + 'checkbox';
this.labelId = this.pfx + 'tag-label';
+ this.events = {};
this.events['click #' + this.closeId ] = 'removeTag';
this.events['click #' + this.chkId ] = 'changeStatus';
this.events['dblclick #' + this.labelId ] = 'startEditTag';
@@ -77,17 +76,15 @@ module.exports = Backbone.View.extend({
* @private
*/
removeTag(e) {
- var comp = this.target.get('selectedComponent');
-
- if(comp)
- comp.get('classes').remove(this.model);
-
- if(this.coll){
- this.coll.remove(this.model);
- this.target.trigger('targetClassRemoved');
- }
-
- this.remove();
+ const em = this.target;
+ const model = this.model;
+ const coll = this.coll;
+ const el = this.el;
+ const sel = em && em.get('selectedComponent');
+ sel && sel.get & sel.get('classes').remove(model);
+ coll && coll.remove(model);
+ setTimeout(() => this.remove(), 0);
+ em && em.trigger('targetClassRemoved');
},
/**
diff --git a/test/specs/selector_manager/e2e/ClassManager.js b/test/specs/selector_manager/e2e/ClassManager.js
index cb5dfb4b3..8a88325b3 100644
--- a/test/specs/selector_manager/e2e/ClassManager.js
+++ b/test/specs/selector_manager/e2e/ClassManager.js
@@ -5,28 +5,35 @@ module.exports = {
run() {
describe('E2E tests', () => {
- var instClassTagViewer = ctx => {
- var $clm;
- var clm = ctx.gjs.editor.get('SelectorManager');
- if(clm){
- $clm = new ClassTagsView({
+ var fixtures;
+ var components;
+ var tagEl;
+ var gjs;
+
+ var instClassTagViewer = (gjs, fixtures) => {
+ var tagEl;
+ var clm = gjs.editor.get('SelectorManager');
+
+ if (clm) {
+ tagEl = new ClassTagsView({
collection: new Selectors([]),
- config: {
- em: ctx.gjs.editor
- },
+ config: {em: gjs.editor}
}).render();
- ctx.$fixture.append($clm.el);
+ fixtures.appendChild(tagEl.el);
}
- return $clm;
- };
+ return tagEl;
+ };
+ /*
before(function () {
this.$fixtures = $("#fixtures");
this.$fixture = $('');
});
-
+*/
beforeEach(function () {
- this.gjs = grapesjs.init({
+ document.body.innerHTML = '';
+ fixtures = document.body.firstChild;
+ gjs = grapesjs.init({
stylePrefix: '',
storageManager: { autoload: 0, type:'none' },
assetManager: {
@@ -34,82 +41,67 @@ module.exports = {
},
container: '#SelectorManager-fixture',
});
- this.$fixture.empty().appendTo(this.$fixtures);
- this.gjs.render();
- });
-
- afterEach(function () {
- delete this.gjs;
- });
-
- after(function () {
- this.$fixture.remove();
});
describe('Interaction with Components', () => {
beforeEach(function () {
- this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components');
- this.$clm = instClassTagViewer(this);
- });
-
- afterEach(function () {
- delete this.wrapper;
- delete this.$clm;
+ components = gjs.editor.get('DomComponents').getWrapper().get('components');
+ tagEl = instClassTagViewer(gjs, fixtures);
});
it('Assign correctly new class to component', function() {
- var model = this.wrapper.add({});
+ var model = components.add({});
expect(model.get('classes').length).toEqual(0);
- this.gjs.editor.set('selectedComponent', model);
- this.$clm.addNewTag('test');
+ gjs.editor.set('selectedComponent', model);
+ tagEl.addNewTag('test');
expect(model.get('classes').length).toEqual(1);
expect(model.get('classes').at(0).get('name')).toEqual('test');
});
it('Classes from components are correctly imported inside main container', function() {
- var model = this.wrapper.add([
+ var model = components.add([
{ classes: ['test11', 'test12', 'test13'] },
{ classes: ['test11', 'test22', 'test22'] },
]);
- expect(this.gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
+ expect(gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
});
it('Class imported into component is the same model from main container', function() {
- var model = this.wrapper.add({ classes: ['test1'] });
+ var model = components.add({ classes: ['test1'] });
var clModel = model.get('classes').at(0);
- var clModel2 = this.gjs.editor.get('SelectorManager').getAll().at(0);
+ var clModel2 = gjs.editor.get('SelectorManager').getAll().at(0);
expect(clModel).toEqual(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');
+ var model = components.add({});
+ gjs.editor.set('selectedComponent', model);
+ tagEl.addNewTag('test');
+ tagEl.addNewTag('test');
expect(model.get('classes').length).toEqual(1);
expect(model.get('classes').at(0).get('name')).toEqual('test');
- expect(this.$clm.collection.length).toEqual(1);
- expect(this.$clm.collection.at(0).get('name')).toEqual('test');
+ expect(tagEl.collection.length).toEqual(1);
+ expect(tagEl.collection.at(0).get('name')).toEqual('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.getClasses().find('.tag #close').trigger('click')
+ var model = components.add({});
+ gjs.editor.set('selectedComponent', model);
+ tagEl.addNewTag('test');
+ tagEl.getClasses().find('.tag #close').trigger('click')
expect(model.get('classes').length).toEqual(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');
+ var model = components.add({});
+ gjs.editor.set('selectedComponent', model);
+ tagEl.addNewTag('test');
+ gjs.editor.on("targetClassAdded", spy);
+ tagEl.addNewTag('test');
expect(spy.called).toEqual(false);
- this.$clm.addNewTag('test2');
+ tagEl.addNewTag('test2');
expect(spy.called).toEqual(true);
});
diff --git a/test/specs/selector_manager/index.js b/test/specs/selector_manager/index.js
index 04120e7de..f3897620a 100644
--- a/test/specs/selector_manager/index.js
+++ b/test/specs/selector_manager/index.js
@@ -82,9 +82,6 @@ describe('SelectorManager', () => {
describe('Views', () => {
ClassTagView.run();
ClassTagsView.run();
- });
-
- describe.skip('E2E', () => {
e2e.run();
});
diff --git a/test/specs/selector_manager/view/ClassTagView.js b/test/specs/selector_manager/view/ClassTagView.js
index 1286321cb..c840770fe 100644
--- a/test/specs/selector_manager/view/ClassTagView.js
+++ b/test/specs/selector_manager/view/ClassTagView.js
@@ -65,11 +65,8 @@ module.exports = {
});
it('Could be removed', () => {
- var spy = sinon.spy();
- obj.config.target = { get() {} };
- sinon.stub(obj.config.target, 'get').returns(0);
obj.$el.find('#close').trigger('click');
- expect(fixtures.innerHTML).toNotExist();
+ setTimeout(() => expect(fixtures.innerHTML).toNotExist(), 0)
});
it('On remove triggers event', () => {