From a516c9395b5e10b636792099e958ac8096118fe1 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 16 Aug 2016 22:34:08 +0200 Subject: [PATCH] Refactor class manager tests --- .gitignore | 2 - src/editor/model/Editor.js | 3 +- test/runner/main.js | 6 +- test/specs/class_manager/e2e/ClassManager.js | 127 ------------ test/specs/class_manager/main.js | 93 --------- test/specs/class_manager/model/ClassModels.js | 53 ----- test/specs/class_manager/view/ClassTagView.js | 126 ------------ .../specs/class_manager/view/ClassTagsView.js | 188 ------------------ test/specs/css_composer/model/CssModels.js | 6 +- 9 files changed, 5 insertions(+), 599 deletions(-) delete mode 100644 test/specs/class_manager/e2e/ClassManager.js delete mode 100644 test/specs/class_manager/main.js delete mode 100644 test/specs/class_manager/model/ClassModels.js delete mode 100644 test/specs/class_manager/view/ClassTagView.js delete mode 100644 test/specs/class_manager/view/ClassTagsView.js diff --git a/.gitignore b/.gitignore index e9ebfeac1..50312a441 100644 --- a/.gitignore +++ b/.gitignore @@ -4,8 +4,6 @@ .project npm-debug.log style/.sass-cache/ -grapes.sublime-project -grapes.sublime-workspace img/ private/ diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index d16ba65a6..5f73cb973 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -65,7 +65,7 @@ define([ this.initStorage(); this.loadModule('SelectorManager'); this.initModal(); - this.loadModule('AssetManager'); + this.loadModule('AssetManager'); // requires SelectorManager this.initUtils(); this.initCodeManager(); this.initCommands(); @@ -102,7 +102,6 @@ define([ this.set('storables', storables); } cfg.em = this; - //cfg.target = this; // refactor M.init(cfg); // Bind the module to the editor model if public diff --git a/test/runner/main.js b/test/runner/main.js index 59e6732c1..cacd720e6 100644 --- a/test/runner/main.js +++ b/test/runner/main.js @@ -4,12 +4,8 @@ require(['../src/config/require-config.js', 'config/config.js'], function() { 'sinon', 'specs/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/class_manager/main.js', + 'specs/selector_manager/main.js', 'specs/css_composer/main.js', 'specs/code_manager/main.js', 'specs/device_manager/main.js', diff --git a/test/specs/class_manager/e2e/ClassManager.js b/test/specs/class_manager/e2e/ClassManager.js deleted file mode 100644 index d40faf9c6..000000000 --- a/test/specs/class_manager/e2e/ClassManager.js +++ /dev/null @@ -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 = $('
'); - }); - - 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); - }); - - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/class_manager/main.js b/test/specs/class_manager/main.js deleted file mode 100644 index cce452545..000000000 --- a/test/specs/class_manager/main.js +++ /dev/null @@ -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(); - - }); -}); \ No newline at end of file diff --git a/test/specs/class_manager/model/ClassModels.js b/test/specs/class_manager/model/ClassModels.js deleted file mode 100644 index 4f93c67d0..000000000 --- a/test/specs/class_manager/model/ClassModels.js +++ /dev/null @@ -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); - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/class_manager/view/ClassTagView.js b/test/specs/class_manager/view/ClassTagView.js deleted file mode 100644 index 4af571ce5..000000000 --- a/test/specs/class_manager/view/ClassTagView.js +++ /dev/null @@ -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 = $('
'); - }); - - 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); - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/class_manager/view/ClassTagsView.js b/test/specs/class_manager/view/ClassTagsView.js deleted file mode 100644 index 961e063c0..000000000 --- a/test/specs/class_manager/view/ClassTagsView.js +++ /dev/null @@ -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 = $('
'); - }); - - 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(''); - }); - - 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); - }); - }); - - }); - } - }; - -}); \ No newline at end of file diff --git a/test/specs/css_composer/model/CssModels.js b/test/specs/css_composer/model/CssModels.js index da0cd5c80..94c0564e0 100644 --- a/test/specs/css_composer/model/CssModels.js +++ b/test/specs/css_composer/model/CssModels.js @@ -2,8 +2,8 @@ var path = 'CssComposer/model/'; define([path + 'CssRule', path + 'CssRules', path + 'Selectors', - 'ClassManager/model/ClassTag'], - function(CssRule, CssRules, Selectors, ClassTag) { + 'SelectorManager/model/Selector'], + function(CssRule, CssRules, Selectors, Selector) { return { run : function(){ @@ -74,7 +74,7 @@ define([path + 'CssRule', it('Creates collection item correctly', function() { var c = new Selectors(); var m = c.add({}); - m.should.be.an.instanceOf(ClassTag); + m.should.be.an.instanceOf(Selector); }); });