Update asset view tests

9 years ago · d3b257a745
8 changed files with 80 additions and 70 deletions
--- a/test/helper.js
+++ b/test/helper.js
@ -1,10 +1,18 @@
 import _ from 'underscore';
+import expect from 'expect';
+import sinon from 'sinon';
+import jquery from 'jquery';
+import Backbone from 'backbone';
 import { JSDOM } from 'jsdom';

 const dom = new JSDOM('<!doctype html><html><body></body></html>');
 global.window = dom.window;
 global.document = dom.window.document;
 global._ = _;
+global.expect = expect;
+global.sinon = sinon;
+dom.window.$ = jquery(dom.window);
+Backbone.$ = dom.window.$;

 Object.keys(window).forEach((key) => {
  if (!(key in global)) {
--- a/test/main.js
+++ b/test/main.js
@ -1,5 +1,3 @@
-import expect from 'expect';
-import sinon from 'sinon';
 import grapesjs from './../src';
 //import AssetManager from './specs/asset_manager';

--- a/test/specs/asset_manager/main.js
+++ b/test/specs/asset_manager/main.js
@ -22,6 +22,7 @@ describe('Asset Manager', function() {

    beforeEach(function () {
      imgObj = {
+        type: 'image',
        src: 'path/to/image',
        width: 101,
        height: 102,
@ -35,57 +36,57 @@ describe('Asset Manager', function() {
    });

    it('Object exists', function() {
-      obj.should.be.exist;
+      expect(obj).toExist();
    });

    it('No assets inside', function() {
-      obj.getAll().length.should.be.empty;
+      expect(obj.getAll().length).toEqual(0);
    });

    it('Add new asset', function() {
      obj.add(imgObj);
-      obj.getAll().length.should.equal(1);
+      expect(obj.getAll().length).toEqual(1);
    });

    it('Added asset has correct data', function() {
      obj.add(imgObj);
      var asset = obj.get(imgObj.src);
-      asset.get('width').should.equal(imgObj.width);
-      asset.get('height').should.equal(imgObj.height);
-      asset.get('type').should.equal('image');
+      expect(asset.get('width')).toEqual(imgObj.width);
+      expect(asset.get('height')).toEqual(imgObj.height);
+      expect(asset.get('type')).toEqual(imgObj.type);
    });

    it('Add asset with src', function() {
      obj.add(imgObj.src);
      var asset = obj.get(imgObj.src);
-      asset.get('type').should.equal('image');
-      asset.get('src').should.equal(imgObj.src);
+      expect(asset.get('type')).toEqual('image');
+      expect(asset.get('src')).toEqual(imgObj.src);
    });

    it('Add asset with more src', function() {
      obj.add([imgObj.src, imgObj.src + '2']);
-      obj.getAll().length.should.equal(2);
+      expect(obj.getAll().length).toEqual(2);
      var asset1 = obj.getAll().at(0);
      var asset2 = obj.getAll().at(1);
-      asset1.get('src').should.equal(imgObj.src);
-      asset2.get('src').should.equal(imgObj.src + '2');
+      expect(asset1.get('src')).toEqual(imgObj.src);
+      expect(asset2.get('src')).toEqual(imgObj.src + '2');
    });

    it('Src is unique', function() {
      obj.add(imgObj);
      obj.add(imgObj);
-      obj.getAll().length.should.equal(1);
+      expect(obj.getAll().length).toEqual(1);
    });

    it('Remove asset', function() {
      obj.add(imgObj);
      obj.remove(imgObj.src);
-      obj.getAll().length.should.equal(0);
+      expect(obj.getAll().length).toEqual(0);
    });

    it('Render assets', function() {
      obj.add(imgObj);
-      obj.render().should.not.be.empty;
+      expect(obj.render()).toExist();
    });

    describe('With storage', function() {
@ -113,9 +114,9 @@ describe('Asset Manager', function() {
        obj.remove(imgObj.src);
        obj.load();
        var asset = obj.get(imgObj.src);
-        asset.get('width').should.equal(imgObj.width);
-        asset.get('height').should.equal(imgObj.height);
-        asset.get('type').should.equal('image');
+        expect(asset.get('width')).toEqual(imgObj.width);
+        expect(asset.get('height')).toEqual(imgObj.height);
+        expect(asset.get('type')).toEqual('image');
      });

    });
--- a/test/specs/asset_manager/model/Asset.js
+++ b/test/specs/asset_manager/model/Asset.js
@ -5,29 +5,29 @@ module.exports = {

    describe('Asset', function() {
      it('Object exists', function() {
-        Asset.should.be.exist;
+        expect(Asset).toExist();
      });

      it('Has default values', function() {
        var obj   = new Asset({});
-        obj.get('type').should.equal("");
-        obj.get('src').should.equal("");
-        obj.getExtension().should.be.empty;
-        obj.getFilename().should.be.empty;
+        expect(obj.get('type')).toNotExist();
+        expect(obj.get('src')).toNotExist();
+        expect(obj.getExtension()).toNotExist();
+        expect(obj.getFilename()).toNotExist();
      });

      it('Test getFilename', function() {
-        var obj   = new Asset({ type:'image', src: 'ch/eck/t.e.s.t'});
-        obj.getFilename().should.equal('t.e.s.t');
-        var obj   = new Asset({ type:'image', src: 'ch/eck/1234abc'});
-        obj.getFilename().should.equal('1234abc');
+        var obj = new Asset({ type:'image', src: 'ch/eck/t.e.s.t'});
+        expect(obj.getFilename()).toEqual('t.e.s.t');
+        var obj = new Asset({ type:'image', src: 'ch/eck/1234abc'});
+        expect(obj.getFilename()).toEqual('1234abc');
      });

      it('Test getExtension', function() {
        var obj   = new Asset({ type:'image', src: 'ch/eck/t.e.s.t'});
-        obj.getExtension().should.equal('t');
+        expect(obj.getExtension()).toEqual('t');
        var obj   = new Asset({ type:'image', src: 'ch/eck/1234abc.'});
-        obj.getExtension().should.equal('');
+        expect(obj.getExtension()).toEqual('');
      });
    });
  }
--- a/test/specs/asset_manager/model/AssetImage.js
+++ b/test/specs/asset_manager/model/AssetImage.js
@ -5,18 +5,18 @@ module.exports = {

    describe('AssetImage', function() {
      it('Object exists', function() {
-        AssetImage.should.be.exist;
+        expect(AssetImage).toExist();
      });

      it('Has default values', function() {
        var obj = new AssetImage({});
-        obj.get('type').should.equal("image");
-        obj.get('src').should.equal("");
-        obj.get('unitDim').should.equal("px");
-        obj.get('height').should.equal(0);
-        obj.get('width').should.equal(0);
-        obj.getExtension().should.be.empty;
-        obj.getFilename().should.be.empty;
+        expect(obj.get('type')).toEqual('image');
+        expect(obj.get('src')).toNotExist();
+        expect(obj.get('unitDim')).toEqual('px');
+        expect(obj.get('height')).toEqual(0);
+        expect(obj.get('width')).toEqual(0);
+        expect(obj.getExtension()).toNotExist();
+        expect(obj.getFilename()).toNotExist();
      });

    });
--- a/test/specs/asset_manager/model/Assets.js
+++ b/test/specs/asset_manager/model/Assets.js
@ -15,35 +15,35 @@ module.exports = {
      });

      it('Object exists', function() {
-        obj.should.be.exist;
+        expect(obj).toExist();
      });

      it('Collection is empty', function() {
-        obj.length.should.equal(0);
+        expect(obj.length).toEqual(0);
      });

      it("Can't insert assets without src", function() {
        obj.add({});
-        obj.length.should.equal(0);
+        expect(obj.length).toEqual(0);
        obj.add([{},{},{}]);
-        obj.length.should.equal(0);
+        expect(obj.length).toEqual(0);
      });

      it("Insert assets only with src", function() {
        obj.add([{},{src:'test'},{}]);
-        obj.length.should.equal(1);
+        expect(obj.length).toEqual(1);
      });

      it('addImg creates new asset', function() {
        obj.addImg('/img/path');
-        obj.length.should.equal(1);
+        expect(obj.length).toEqual(1);
      });

      it('addImg asset is correct', function() {
        obj.addImg('/img/path');
        var asset = obj.at(0);
-        asset.get('type').should.equal('image');
-        asset.get('src').should.equal('/img/path');
+        expect(asset.get('type')).toEqual('image');
+        expect(asset.get('src')).toEqual('/img/path');
      });

    });
--- a/test/specs/asset_manager/view/AssetImageView.js
+++ b/test/specs/asset_manager/view/AssetImageView.js
@ -8,8 +8,8 @@ module.exports = {
    describe('AssetImageView', function() {

      before(function () {
-        this.$fixtures   = $("#fixtures");
-        this.$fixture   = $('<div class="asset-fixture"></div>');
+        this.$fixtures = $("#fixtures");
+        this.$fixture = $('<div class="asset-fixture"></div>');
      });

      beforeEach(function () {
@ -24,54 +24,56 @@ module.exports = {
      });

      afterEach(function () {
-        delete this.view;
+        this.view = null;
      });

      after(function () {
-        this.$fixture.remove();
+        this.$fixture.empty();
      });

      it('Object exists', function() {
-        AssetImageView.should.be.exist;
+        expect(AssetImageView).toExist();
      });

      describe('Asset should be rendered correctly', function() {

          it('Has preview box', function() {
            var $asset = this.view.$el;
-            $asset.find('#preview').should.have.property(0);
+            expect($asset.find('#preview').get(0).length).toEqual(1);
          });

          it('Has meta box', function() {
            var $asset = this.view.$el;
-            $asset.find('#meta').should.have.property(0);
+            expect($asset.find('#meta').get(0).length).toEqual(1);
          });

          it('Has close button', function() {
            var $asset = this.view.$el;
-            $asset.find('#close').should.have.property(0);
+            expect($asset.find('#close').get(0).length).toEqual(1);
          });

      });

      it('Could be selected', function() {
-        sinon.stub(this.view, 'updateTarget');
+        var spy = expect.spyOn(this.view, 'updateTarget');
        this.view.$el.trigger('click');
-        this.view.$el.attr('class').should.contain('highlight');
-        this.view.updateTarget.calledOnce.should.equal(true);
+        expect(this.view.$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');
-        this.view.updateTarget.calledOnce.should.equal(true);
+        expect(spy).toHaveBeenCalled();
+        //this.view.updateTarget.calledOnce.should.equal(true);
      });

      it('Could be removed', function() {
-        var spy     = sinon.spy();
+        var spy = sinon.spy();
        this.view.model.on("remove", spy);
        this.view.$el.find('#close').trigger('click');
-        spy.called.should.equal(true);
+        expect(spy.called).toEqual(true);
      });

    });
--- a/test/specs/asset_manager/view/AssetsView.js
+++ b/test/specs/asset_manager/view/AssetsView.js
@ -33,35 +33,36 @@ module.exports = {
      });

      it('Object exists', function() {
-        AssetsView.should.be.exist;
+        expect(AssetsView).toExist();
      });

      it("Collection is empty", function (){
-        this.view.getAssetsEl().innerHTML.should.be.empty;
+        expect(this.view.getAssetsEl().innerHTML).toNotExist();
      });

      it("Add new asset", function (){
        sinon.stub(this.view, "addAsset");
        this.coll.add({src: 'test'});
-        this.view.addAsset.calledOnce.should.equal(true);
+        expect(this.view.addAsset.calledOnce).toEqual(true);
      });

      it("Render new asset", function (){
        this.coll.add({src: 'test'});
-        this.view.getAssetsEl().innerHTML.should.not.be.empty;
+        expect(this.view.getAssetsEl().innerHTML).toExist();
      });

      it("Render correctly new image asset", function (){
        this.coll.add({ type: 'image', src: 'test'});
        var asset = this.view.getAssetsEl().firstChild;
        asset.tagName.should.equal('DIV');
-        asset.innerHTML.should.not.be.empty;
+        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);
-        this.view.getAssetsEl().innerHTML.should.be.empty;
+        expect(this.view.getAssetsEl().innerHTML).toNotExist();
      });

      it("Deselect works", function (){
@ -69,15 +70,15 @@ module.exports = {
        var $asset = this.view.$el.children().first();
        $asset.attr('class', this.view.pfx + 'highlight');
        this.coll.trigger('deselectAll');
-        $asset.attr('class').should.be.empty;
+        expect($asset.attr('class')).toNotExist();
      });

      it("Returns not empty assets element", function (){
-        obj.getAssetsEl().should.be.ok;
+        expect(obj.getAssetsEl()).toExist();
      });

      it("Returns not empty url input", function (){
-        obj.getInputUrl().should.be.ok;
+        expect(obj.getInputUrl()).toExist();
      });

      it("Add image asset from input string", function (){
@ -86,7 +87,7 @@ module.exports = {
          preventDefault: function(){}
        });
        var asset = obj.collection.at(0);
-        asset.get('src').should.equal('test');
+        expect(asset.get('src')).toEqual('test');
      });

    });