Fix regressions in AssetManager

src/asset_manager/view/AssetsView.js

@@ -153,7 +153,8 @@ module.exports = Backbone.View.extend({
     if (hide) {
       assetsEl.empty();
     } else {
-      assetsEl.append(this.config.noAssets);
+      const noAssets = this.config.noAssets;
+      noAssets && assetsEl.append(noAssets);
     }
   },
 

test/specs/asset_manager/index.js

@@ -21,6 +21,7 @@ describe('Asset Manager', () => {
     };
 
     beforeEach(() => {
+      document.body.innerHTML = '<div id="asset-c"></div>';
       imgObj = {
         type: 'image',
         src: 'path/to/image',
@@ -29,6 +30,7 @@ describe('Asset Manager', () => {
       };
       obj = new AssetManager();
       obj.init();
+      document.body.querySelector('#asset-c').appendChild(obj.render());
     });
 
     afterEach(() => {
@@ -88,6 +90,7 @@ describe('Asset Manager', () => {
       var storageManager;
 
       beforeEach(() => {
+        document.body.innerHTML = '<div id="asset-c"></div>';
         storageManager = new StorageManager().init({
           autoload: 0,
           type: storageId
@@ -96,6 +99,7 @@ describe('Asset Manager', () => {
           stm: storageManager,
         });
         storageManager.add(storageId, storageMock);
+        document.body.querySelector('#asset-c').appendChild(obj.render());
       });
 
       afterEach(() => {

test/specs/asset_manager/view/AssetImageView.js

@@ -4,32 +4,25 @@ var Assets = require('asset_manager/model/Assets');
 
 module.exports = {
   run() {
+    let obj;
 
     describe('AssetImageView', () => {
 
-      before(function () {
-        this.$fixtures = $("#fixtures");
-        this.$fixture = $('<div class="asset-fixture"></div>');
-      });
-
       beforeEach(function () {
         var coll   = new Assets();
         var model = coll.add({ type:'image', src: '/test' });
-        this.view = new AssetImageView({
+        obj = new AssetImageView({
           collection: new Assets(),
           config : {},
           model
         });
-        this.$fixture.empty().appendTo(this.$fixtures);
-        this.$fixture.html(this.view.render().el);
+        document.body.innerHTML = '<div id="fixtures"></div>';
+        document.body.querySelector('#fixtures').appendChild(obj.render().el);
       });
 
       afterEach(function () {
-        this.view = null;
-      });
-
-      after(function () {
-        this.$fixture.empty();
+        obj = null;
+        document.body.innerHTML = '';
       });
 
       it('Object exists', () => {
@@ -39,41 +32,41 @@ module.exports = {
       describe('Asset should be rendered correctly', () => {
 
           it('Has preview box', function() {
-            var $asset = this.view.$el;
+            var $asset = obj.$el;
             expect($asset.find('.preview').length).toEqual(1);
           });
 
           it('Has meta box', function() {
-            var $asset = this.view.$el;
+            var $asset = obj.$el;
             expect($asset.find('.meta').length).toEqual(1);
           });
 
           it('Has close button', function() {
-            var $asset = this.view.$el;
+            var $asset = obj.$el;
             expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1);
           });
 
       });
 
       it('Could be selected', function() {
-        var spy = expect.spyOn(this.view, 'updateTarget');
-        this.view.$el.trigger('click');
-        expect(this.view.$el.attr('class')).toInclude('highlight');
+        var spy = expect.spyOn(obj, 'updateTarget');
+        obj.onClick();
+        expect(obj.$el.attr('class')).toInclude('highlight');
         expect(spy).toHaveBeenCalled();
       });
 
       it('Could be chosen', function() {
-        sinon.stub(this.view, 'updateTarget');
-        var spy = expect.spyOn(this.view, 'updateTarget');
-        this.view.$el.trigger('dblclick');
+        sinon.stub(obj, 'updateTarget');
+        var spy = expect.spyOn(obj, 'updateTarget');
+        obj.onDblClick();
         expect(spy).toHaveBeenCalled();
-        //this.view.updateTarget.calledOnce.should.equal(true);
+        //obj.updateTarget.calledOnce.should.equal(true);
       });
 
       it('Could be removed', function() {
         var spy = sinon.spy();
-        this.view.model.on("remove", spy);
-        this.view.$el.find('[data-toggle=asset-remove]').trigger('click');
+        obj.model.on("remove", spy);
+        obj.onRemove({stopPropagation() {}});
         expect(spy.called).toEqual(true);
       });
 

test/specs/asset_manager/view/AssetView.js

@@ -7,11 +7,6 @@ module.exports = {
 
     describe('AssetView', () => {
 
-      before(function () {
-        this.$fixtures   = $("#fixtures");
-        this.$fixture   = $('<div class="asset-fixture"></div>');
-      });
-
       beforeEach(function () {
         var coll   = new Assets();
         var model = coll.add({src: 'test'});
@@ -19,18 +14,14 @@ module.exports = {
           config : {},
           model
         });
-        this.$fixture.empty().appendTo(this.$fixtures);
-        this.$fixture.html(this.view.render().el);
+        document.body.innerHTML = '<div id="fixtures"></div>';
+        document.body.querySelector('#fixtures').appendChild(this.view.render().el);
       });
 
       afterEach(function () {
         this.view.remove();
       });
 
-      after(function () {
-        this.$fixture.remove();
-      });
-
       it('Object exists', () => {
         expect(AssetView).toExist();
       });

test/specs/asset_manager/view/AssetsView.js

@@ -8,31 +8,24 @@ module.exports = {
     describe('AssetsView', () => {
 
       var obj;
-
-      before(function () {
-        this.$fixtures   = $("#fixtures");
-        this.$fixture   = $('<div class="assets-fixture"></div>');
-      });
+      var coll;
 
       beforeEach(function () {
-        this.coll = new Assets([]);
-        this.view = new AssetsView({
+        coll = new Assets([]);
+        obj = new AssetsView({
           config: {},
-          collection: this.coll,
+          collection: coll,
           globalCollection: new Assets([]),
           fu: new FileUploader({})
         });
-        obj = this.view;
-        this.$fixture.empty().appendTo(this.$fixtures);
-        this.$fixture.html(this.view.render().el);
+        obj = obj;
+        document.body.innerHTML = '<div id="fixtures"></div>';
+        obj.render();
+        document.body.querySelector('#fixtures').appendChild(obj.el);
       });
 
       afterEach(function () {
-        this.view.collection.reset();
-      });
-
-      after(function () {
-        this.$fixture.remove();
+        obj.collection.reset();
       });
 
       it('Object exists', () => {
@@ -40,38 +33,38 @@ module.exports = {
       });
 
       it("Collection is empty", function (){
-        expect(this.view.getAssetsEl().innerHTML).toNotExist();
+        expect(obj.getAssetsEl().innerHTML).toNotExist();
       });
 
       it("Add new asset", function (){
-        sinon.stub(this.view, "addAsset");
-        this.coll.add({src: 'test'});
-        expect(this.view.addAsset.calledOnce).toEqual(true);
+        sinon.stub(obj, "addAsset");
+        coll.add({src: 'test'});
+        expect(obj.addAsset.calledOnce).toEqual(true);
       });
 
       it("Render new asset", function (){
-        this.coll.add({src: 'test'});
-        expect(this.view.getAssetsEl().innerHTML).toExist();
+        coll.add({src: 'test'});
+        expect(obj.getAssetsEl().innerHTML).toExist();
       });
 
       it("Render correctly new image asset", function (){
-        this.coll.add({ type: 'image', src: 'test'});
-        var asset = this.view.getAssetsEl().firstChild;
+        coll.add({ type: 'image', src: 'test'});
+        var asset = obj.getAssetsEl().firstChild;
         expect(asset.tagName).toEqual('DIV');
         expect(asset.innerHTML).toExist();
       });
 
       it("Clean collection from asset", function (){
-        var model = this.coll.add({src: 'test'});
-        this.coll.remove(model);
-        expect(this.view.getAssetsEl().innerHTML).toNotExist();
+        var model = coll.add({src: 'test'});
+        coll.remove(model);
+        expect(obj.getAssetsEl().innerHTML).toNotExist();
       });
 
       it("Deselect works", function (){
-        this.coll.add([{},{}]);
-        var $asset = this.view.$el.children().first();
-        $asset.attr('class', this.view.pfx + 'highlight');
-        this.coll.trigger('deselectAll');
+        coll.add([{},{}]);
+        var $asset = obj.$el.children().first();
+        $asset.attr('class', obj.pfx + 'highlight');
+        coll.trigger('deselectAll');
         expect($asset.attr('class')).toNotExist();
       });
 

test/specs/asset_manager/view/FileUploader.js

@@ -6,23 +6,16 @@ module.exports = {
 
     describe('File Uploader', () => {
 
-      before(function () {
-        this.$fixtures   = $("#fixtures");
-        this.$fixture   = $('<div class="fileupload-fixture"></div>');
-      });
+      let obj;
 
       beforeEach(function () {
-        this.view = new FileUploader({ config : {} });
-        this.$fixture.empty().appendTo(this.$fixtures);
-        this.$fixture.html(this.view.render().el);
+        obj = new FileUploader({ config : {} });
+        document.body.innerHTML = '<div id="fixtures"></div>';
+        document.body.querySelector('#fixtures').appendChild(obj.render().el);
       });
 
       afterEach(function () {
-        this.view.remove();
-      });
-
-      after(function () {
-        this.$fixture.remove();
+        obj.remove();
       });
 
       it('Object exists', () => {
@@ -30,25 +23,25 @@ module.exports = {
       });
 
       it('Has correct prefix', function() {
-        expect(this.view.pfx).toNotExist();
+        expect(obj.pfx).toNotExist();
       });
 
       describe('Should be rendered correctly', () => {
 
           it('Has title', function() {
-            expect(this.view.$el.find('#title').length).toEqual(1);
+            expect(obj.$el.find('#title').length).toEqual(1);
           });
 
           it('Title is empty', function() {
-            expect(this.view.$el.find('#title').html()).toEqual('');
+            expect(obj.$el.find('#title').html()).toEqual('');
           });
 
           it('Has file input', function() {
-            expect(this.view.$el.find('input[type=file]').length).toEqual(1);
+            expect(obj.$el.find('input[type=file]').length).toEqual(1);
           });
 
           it('File input is enabled', function() {
-            expect(this.view.$el.find('input[type=file]').prop('disabled')).toEqual(true);
+            expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual(true);
           });
 
       });
@@ -71,7 +64,7 @@ module.exports = {
             view.render();
             expect(view.$el.find('input[type=file]').prop('disabled')).toEqual(true);
           });
-          
+
           it('Handles embedAsBase64 parameter', () => {
             var view = new FileUploader({ config : {
               embedAsBase64: true