Update selector manager tests

test/main.js

@@ -21,4 +21,5 @@ describe('Main', () => {
   require(`${path}panels`);
   require(`${path}parser`);
   require(`${path}plugin_manager`);
+  require(`${path}selector_manager`);
 });

test/specs/selector_manager/e2e/ClassManager.js

@@ -1,129 +1,120 @@
-define((require, exports, module) => {
-  'use strict';
-  var GrapesJS = require('GrapesJS');
-  var Selectors = require('SelectorManager/model/Selectors');
-  var ClassTagsView = require('SelectorManager/view/ClassTagsView');
-
-    module.exports = {
-      run() {
-          describe('E2E tests', () => {
-
-            /**
-             * Create tags viewer
-             * @param  {Object} ctx
-             */
-            var instClassTagViewer = ctx => {
-              var $clm;
-              var clm = ctx.gjs.editor.get('SelectorManager');
-              if(clm){
-                $clm = new ClassTagsView({
-                  collection: new Selectors([]),
-                  config: {
-                    em: ctx.gjs.editor
-                  },
-                }).render();
-                ctx.$fixture.append($clm.el);
-              }
-              return $clm;
-            };
-
-            before(function () {
-              this.$fixtures  = $("#fixtures");
-              this.$fixture   = $('<div id="SelectorManager-fixture"></div>');
-            });
-
-            beforeEach(function () {
-              this.gjs = GrapesJS.init({
-                stylePrefix: '',
-                storageManager: { autoload: 0, type:'none' },
-                assetManager: {
-                  storageType: 'none',
-                },
-                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;
-              });
-
-              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('SelectorManager').getAll().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('SelectorManager').getAll().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.getClasses().find('.tag #close').trigger('click')
-                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);
-              });
-
-            });
+const Selectors = require('selector_manager/model/Selectors');
+const ClassTagsView = require('selector_manager/view/ClassTagsView');
+
+module.exports = {
+  run() {
+      describe('E2E tests', () => {
+
+        var instClassTagViewer = ctx => {
+          var $clm;
+          var clm = ctx.gjs.editor.get('SelectorManager');
+          if(clm){
+            $clm = new ClassTagsView({
+              collection: new Selectors([]),
+              config: {
+                em: ctx.gjs.editor
+              },
+            }).render();
+            ctx.$fixture.append($clm.el);
+          }
+          return $clm;
+        };
+
+        before(function () {
+          this.$fixtures  = $("#fixtures");
+          this.$fixture   = $('<div id="SelectorManager-fixture"></div>');
+        });
+
+        beforeEach(function () {
+          this.gjs = grapesjs.init({
+            stylePrefix: '',
+            storageManager: { autoload: 0, type:'none' },
+            assetManager: {
+              storageType: 'none',
+            },
+            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;
+          });
+
+          it('Assign correctly new class to component', function() {
+            var model = this.wrapper.add({});
+            expect(model.get('classes').length).toEqual(0);
+            this.gjs.editor.set('selectedComponent', model);
+            this.$clm.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([
+              { classes: ['test11', 'test12', 'test13'] },
+              { classes: ['test11', 'test22', 'test22'] },
+            ]);
+            expect(this.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 clModel = model.get('classes').at(0);
+            var clModel2 = this.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');
+            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');
+          });
+
+          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')
+            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');
+            expect(spy.called).toEqual(false);
+            this.$clm.addNewTag('test2');
+            expect(spy.called).toEqual(true);
+          });
 
         });
-      }
-    };
 
-});
+    });
+  }
+};

test/specs/selector_manager/index.js

@@ -0,0 +1,82 @@
+var SelectorManager = require('selector_manager');
+var Models = require('./model/SelectorModels');
+var ClassTagView = require('./view/ClassTagView');
+var ClassTagsView = require('./view/ClassTagsView');
+var e2e = require('./e2e/ClassManager');
+
+describe('SelectorManager', () => {
+
+  describe('Main', () => {
+
+    var obj;
+
+    beforeEach(() => {
+      obj = new SelectorManager().init();
+    });
+
+    afterEach(() => {
+      obj = null;
+    });
+
+    it('Object exists', () => {
+      expect(obj).toExist();
+    });
+
+    it('No selectors inside', () => {
+      expect(obj.getAll().length).toEqual(0);
+    });
+
+    it('Able to add default selectors', () => {
+      var cm = new SelectorManager().init({
+        selectors: ['test1', 'test2', 'test3'],
+      });
+      expect(cm.getAll().length).toEqual(3);
+    });
+
+    it('Add new selector', () => {
+      obj.add('test');
+      expect(obj.getAll().length).toEqual(1);
+    });
+
+    it('Default new selector is a class type', () => {
+      obj.add('test');
+      expect(obj.get('test').get('type')).toEqual('class');
+    });
+
+    it('Check name property', () => {
+      var name = 'test';
+      var sel = obj.add(name);
+      expect(sel.get('name')).toEqual(name);
+      expect(sel.get('label')).toEqual(name);
+    });
+
+    it('Add 2 selectors', () => {
+      obj.add('test');
+      obj.add('test2');
+      expect(obj.getAll().length).toEqual(2);
+    });
+
+    it('Adding 2 selectors with the same name is not possible', () => {
+      obj.add('test');
+      obj.add('test');
+      expect(obj.getAll().length).toEqual(1);
+    });
+
+    it('Get selector', () => {
+      var name = 'test';
+      var sel = obj.add(name);
+      expect(obj.get(name)).toEqual(sel);
+    });
+
+    it('Get empty class', () => {
+      expect(obj.get('test')).toEqual(undefined);
+    });
+
+  });
+
+  Models.run();
+  ClassTagView.run();
+  ClassTagsView.run();
+  e2e.run();
+
+});