From 4278f5d8e108b63c6d21a257fd5872c17da2ec71 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 29 Sep 2017 03:58:42 +0200 Subject: [PATCH] Fix selector view removing --- src/selector_manager/view/ClassTagView.js | 23 ++--- .../selector_manager/e2e/ClassManager.js | 98 +++++++++---------- test/specs/selector_manager/index.js | 3 - .../selector_manager/view/ClassTagView.js | 5 +- 4 files changed, 56 insertions(+), 73 deletions(-) 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', () => {