Fix selector view removing

src/selector_manager/view/ClassTagView.js

@@ -9,8 +9,6 @@ module.exports = Backbone.View.extend({
   </span>
   <span id="<%= pfx %>close">&Cross;</span>`),
 
-  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');
   },
 
   /**

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   = $('<div id="SelectorManager-fixture"></div>');
         });
-
+*/
         beforeEach(function () {
-          this.gjs = grapesjs.init({
+          document.body.innerHTML = '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
+          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);
           });
 

test/specs/selector_manager/index.js

@@ -82,9 +82,6 @@ describe('SelectorManager', () => {
   describe('Views', () => {
     ClassTagView.run();
     ClassTagsView.run();
-  });
-
-  describe.skip('E2E', () => {
     e2e.run();
   });
 

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', () => {