Merge branch 'update-deps' into dev

.gitignore

@@ -7,6 +7,7 @@ npm-debug.log*
 yarn-error.log
 yarn.lock
 style/.sass-cache/
+stats.json
 
 img/
 images/

package.json

@@ -14,37 +14,32 @@
     "backbone": "^1.3.3",
     "backbone-undo": "^0.2.5",
     "cash-dom": "^1.3.7",
-    "codemirror": "^5.34.0",
+    "codemirror": "^5.38.0",
     "codemirror-formatting": "^1.0.0",
     "font-awesome": "^4.7.0",
     "keymaster": "^1.6.2",
     "spectrum-colorpicker": "^1.8.0",
-    "underscore": "^1.8.3"
+    "underscore": "^1.9.0"
   },
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "chai": "^4.1.2",
-    "cross-env": "^5.1.3",
-    "documentation": "^5.3.5",
-    "eslint": "^4.17.0",
-    "expect": "^1.20.2",
-    "html-webpack-plugin": "^2.30.1",
+    "babel-preset-env": "^1.7.0",
+    "documentation": "^7.1.0",
+    "eslint": "^4.19.1",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
-    "istanbul": "^0.4.2",
-    "jsdom": "^11.6.2",
-    "lint-staged": "^6.1.0",
-    "mocha": "^3.1.2",
-    "node-sass": "^4.7.2",
-    "prettier": "1.10.2",
-    "promise-polyfill": "^6.1.0",
-    "sinon": "^3.2.1",
-    "string-replace-loader": "^1.3.0",
+    "jest": "^23.0.1",
+    "lint-staged": "^7.1.2",
+    "node-sass": "^4.9.0",
+    "prettier": "^1.13.0",
+    "promise-polyfill": "^7.1.2",
+    "sinon": "^5.0.10",
+    "string-replace-loader": "^2.1.1",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.11.1",
-    "whatwg-fetch": "^2.0.3"
+    "whatwg-fetch": "^2.0.4"
   },
   "keywords": [
     "grapes",
@@ -81,6 +76,17 @@
       "git add"
     ]
   },
+  "jest": {
+    "modulePaths": [
+      "./src"
+    ],
+    "setupFiles": [
+      "<rootDir>/test/setup.js"
+    ],
+    "moduleNameMapper": {
+      "^jquery$": "cash-dom"
+    }
+  },
   "scripts": {
     "lint": "eslint src",
     "check": "npm run lint && npm run test",
@@ -92,7 +98,7 @@
     "v:patch": "npm version --no-git-tag-version patch",
     "start": "npm run build:css -- -w & webpack-dev-server --open --progress --colors",
     "format": "prettier --single-quote --write './{src,test}/**/*.js'",
-    "test": "cross-env NODE_PATH=./src mocha --compilers js:babel-core/register --require test/helper.js --timeout 10000 --recursive test/main.js",
-    "test:dev": "npm test -- -R min -w"
+    "test": "jest",
+    "test:dev": "jest --watch"
   }
 }

src/asset_manager/view/AssetView.js

@@ -1,3 +1,5 @@
+import Backbone from 'backbone';
+
 module.exports = Backbone.View.extend({
   initialize(o = {}) {
     this.options = o;

src/asset_manager/view/AssetsView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 var AssetView = require('./AssetView');
 var AssetImageView = require('./AssetImageView');
 var FileUploader = require('./FileUploader');

src/asset_manager/view/FileUploader.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
 import fetch from 'utils/fetch';
 
 module.exports = Backbone.View.extend(

src/block_manager/model/Block.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var Category = require('./Category');
 
 module.exports = Backbone.Model.extend({

src/block_manager/model/Blocks.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var Block = require('./Block');
 
 module.exports = Backbone.Collection.extend({

src/block_manager/model/Categories.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Collection.extend({
   model: require('./Category')

src/block_manager/model/Category.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   defaults: {

src/block_manager/view/BlockView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { isObject } from 'underscore';
 import { on, off, hasDnd } from 'utils/mixins';
 

src/block_manager/view/BlocksView.js

@@ -1,11 +1,11 @@
-import { isString, isObject } from 'underscore';
+import { isString, isObject, bindAll } from 'underscore';
 
 const BlockView = require('./BlockView');
 const CategoryView = require('./CategoryView');
 
 module.exports = require('backbone').View.extend({
   initialize(opts, config) {
-    _.bindAll(this, 'getSorter', 'onDrag', 'onDrop');
+    bindAll(this, 'getSorter', 'onDrag', 'onDrop');
     this.config = config || {};
     this.categories = opts.categories || '';
     this.renderedCategories = [];

src/block_manager/view/CategoryView.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 
 module.exports = Backbone.View.extend({
   template: _.template(`

src/canvas/model/Canvas.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var Frame = require('./Frame');
 
 module.exports = Backbone.Model.extend({

src/canvas/model/Frame.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   defaults: {

src/canvas/view/CanvasView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { on, off, getElement } from 'utils/mixins';
 const FrameView = require('./FrameView');
 const $ = Backbone.$;

src/code_manager/model/CodeMirrorEditor.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var CodeMirror = require('codemirror/lib/codemirror');
 var htmlMode = require('codemirror/mode/htmlmixed/htmlmixed');
 var cssMode = require('codemirror/mode/css/css');

src/code_manager/model/HtmlGenerator.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   build(model, opts = {}) {

src/code_manager/model/JsGenerator.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import { extend } from 'underscore';
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   mapModel(model) {
@@ -11,7 +12,7 @@ module.exports = Backbone.Model.extend({
     if (script) {
       // If the component has scripts we need to expose his ID
       var attr = model.get('attributes');
-      attr = _.extend({}, attr, { id });
+      attr = extend({}, attr, { id });
       model.set('attributes', attr);
       var scrStr = model.getScriptString();
 

src/code_manager/model/JsonGenerator.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import { each } from 'underscore';
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   /** @inheritdoc */
@@ -6,7 +7,7 @@ module.exports = Backbone.Model.extend({
     var json = model.toJSON();
     this.beforeEach(json);
 
-    _.each(
+    each(
       json,
       function(v, attr) {
         var obj = json[attr];

src/code_manager/view/EditorView.js

@@ -1,7 +1,8 @@
-var Backbone = require('backbone');
+import { template } from 'underscore';
+import Backbone from 'backbone';
 
 module.exports = Backbone.View.extend({
-  template: _.template(`
+  template: template(`
   <div class="<%= pfx %>editor" id="<%= pfx %><%= codeName %>">
   	<div id="<%= pfx %>title"><%= label %></div>
   	<div id="<%= pfx %>code"></div>

src/commands/model/Command.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   defaults: {

src/commands/model/Commands.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var Command = require('./Command');
 
 module.exports = Backbone.Collection.extend({

src/commands/view/CommandAbstract.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({

src/commands/view/CreateComponent.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
 const SelectPosition = require('./SelectPosition');
 const $ = Backbone.$;
 

src/commands/view/DeleteComponent.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
 const SelectComponent = require('./SelectComponent');
 const $ = Backbone.$;
 

src/commands/view/ExportTemplate.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = {

src/commands/view/ImageComponent.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 var InsertCustom = require('./InsertCustom');
 
 module.exports = _.extend({}, InsertCustom, {

src/commands/view/InsertCustom.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 var CreateComponent = require('./CreateComponent');
 
 module.exports = _.extend({}, CreateComponent, {

src/commands/view/MoveComponent.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
 import { on, off } from 'utils/mixins';
 
 const SelectComponent = require('./SelectComponent');

src/commands/view/OpenLayers.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const Layers = require('navigator');
 const $ = Backbone.$;
 

src/commands/view/OpenStyleManager.js

@@ -1,5 +1,5 @@
+import Backbone from 'backbone';
 const StyleManager = require('style_manager');
-const Backbone = require('backbone');
 const $ = Backbone.$;
 
 module.exports = {

src/commands/view/Preview.js

@@ -1,3 +1,5 @@
+import _ from 'underscore';
+
 module.exports = {
   getPanels(editor) {
     if (!this.panels) this.panels = editor.Panels.getPanelsEl();

src/commands/view/SelectPosition.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = {

src/commands/view/ShowOffset.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = {

src/commands/view/TextComponent.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 var CreateComponent = require('./CreateComponent');
 
 module.exports = _.extend({}, CreateComponent, {

src/css_composer/model/CssRule.js

@@ -1,7 +1,8 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
 import Styleable from 'domain_abstract/model/Styleable';
 import { isEmpty, forEach } from 'underscore';
 
-var Backbone = require('backbone');
 var Selectors = require('selector_manager/model/Selectors');
 
 module.exports = Backbone.Model.extend(Styleable).extend({

src/css_composer/model/CssRules.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var CssRule = require('./CssRule');
 
 module.exports = Backbone.Collection.extend({

src/css_composer/view/CssRulesView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const CssRuleView = require('./CssRuleView');
 const CssGroupRuleView = require('./CssGroupRuleView');
 const $ = Backbone.$;
@@ -6,7 +7,7 @@ const $ = Backbone.$;
 const getBlockId = (pfx, widthMedia) =>
   `${pfx}${widthMedia ? `-${widthMedia.replace('%', 'pc')}` : ''}`;
 
-module.exports = require('backbone').View.extend({
+module.exports = Backbone.View.extend({
   initialize(o) {
     const config = o.config || {};
     this.atRules = {};

src/device_manager/model/Device.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 
 module.exports = Backbone.Model.extend({
   idAttribute: 'name',

src/device_manager/model/Devices.js

@@ -1,4 +1,4 @@
-var Backbone = require('backbone');
+import Backbone from 'backbone';
 var Device = require('./Device');
 
 module.exports = Backbone.Collection.extend({

src/device_manager/view/DevicesView.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 
 module.exports = Backbone.View.extend({
   template: _.template(`

src/dom_components/view/ComponentView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { isArray, isEmpty } from 'underscore';
 
 const ComponentsView = require('./ComponentsView');

src/dom_components/view/ComponentsView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
 
 module.exports = Backbone.View.extend({

src/domain_abstract/ui/Input.js

@@ -1,3 +1,4 @@
+const Backbone = require('backbone');
 const $ = Backbone.$;
 
 module.exports = Backbone.View.extend({

src/domain_abstract/ui/InputColor.js

@@ -1,8 +1,10 @@
+import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
+import ColorPicker from 'utils/ColorPicker';
 
-require('utils/ColorPicker');
 const Input = require('./Input');
 const $ = Backbone.$;
+ColorPicker($);
 
 module.exports = Input.extend({
   template() {

src/panels/view/ButtonView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { isString, isObject, isFunction } from 'underscore';
 const $ = Backbone.$;
 

src/selector_manager/view/ClassTagsView.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 var ClassTagView = require('./ClassTagView');
 
 module.exports = Backbone.View.extend({

src/style_manager/model/Layer.js

@@ -1,3 +1,5 @@
+import Backbone from 'backbone';
+
 module.exports = Backbone.Model.extend({
   defaults: {
     index: '',

src/style_manager/model/Layers.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const Layer = require('./Layer');
 
 module.exports = Backbone.Collection.extend({

src/style_manager/view/LayerView.js

@@ -1,3 +1,5 @@
+import Backbone from 'backbone';
+
 module.exports = Backbone.View.extend({
   events: {
     click: 'active',

src/style_manager/view/PropertiesView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const PropertyView = require('./PropertyView');
 const PropertyIntegerView = require('./PropertyIntegerView');
 const PropertyRadioView = require('./PropertyRadioView');

src/style_manager/view/PropertyCompositeView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const PropertyView = require('./PropertyView');
 const $ = Backbone.$;
 

src/style_manager/view/PropertyFileView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const PropertyView = require('./PropertyView');
 const $ = Backbone.$;
 

src/style_manager/view/PropertyIntegerView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const InputNumber = require('domain_abstract/ui/InputNumber');
 const PropertyView = require('./PropertyView');
 const $ = Backbone.$;

src/style_manager/view/PropertySelectView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = require('./PropertyView').extend({

src/style_manager/view/PropertyView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { bindAll, isArray, isUndefined } from 'underscore';
 import { camelCase } from 'utils/mixins';
 

src/style_manager/view/SectorView.js

@@ -1,4 +1,5 @@
-var Backbone = require('backbone');
+import _ from 'underscore';
+import Backbone from 'backbone';
 var PropertiesView = require('./PropertiesView');
 
 module.exports = Backbone.View.extend({

src/style_manager/view/SectorsView.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { extend } from 'underscore';
 
 const SectorView = require('./SectorView');

src/trait_manager/view/TraitSelectView.js

@@ -1,5 +1,5 @@
 const TraitView = require('./TraitView');
-const $ = Backbone.$;
+const $ = require('backbone').$;
 
 module.exports = TraitView.extend({
   initialize(o) {

src/utils/ColorPicker.js

@@ -5,9 +5,7 @@
 // Author: Brian Grinstead
 // License: MIT
 
-(function(factory) {
-  factory(Backbone.$);
-})(function($, undefined) {
+export default function($, undefined) {
   'use strict';
 
   var defaultOpts = {
@@ -2531,4 +2529,4 @@
       $.fn.spectrum.processNativeColorInputs();
     }
   });
-});
+}

src/utils/Dragger.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 var getBoundingRect = (el, win) => {

src/utils/Sorter.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 import { isString, isFunction } from 'underscore';
 import { on, off, matches } from 'utils/mixins';
 const $ = Backbone.$;

test/helper.js

@@ -1,50 +0,0 @@
-import _ from 'underscore';
-import expect from 'expect';
-import sinon from 'sinon';
-import { JSDOM } from 'jsdom';
-
-const dom = new JSDOM('<!doctype html><html><body></body></html>', {
-  resources: 'usable'
-});
-const window = dom.window;
-
-// Fix for the require of jquery
-var Module = require('module');
-var originalRequire = Module.prototype.require;
-Module.prototype.require = function(name) {
-  if (name == 'jquery') {
-    return originalRequire.call(this, 'cash-dom');
-  }
-  return originalRequire.apply(this, arguments);
-};
-
-var localStorage = {
-  getItem(key) {
-    return this[key];
-  },
-  setItem(key, value) {
-    this[key] = value;
-  },
-  removeItem(key, value) {
-    delete this[key];
-  }
-};
-
-global.window = window;
-global.document = window.document;
-global.FormData = window.FormData;
-global._ = _;
-global.expect = expect;
-global.sinon = sinon;
-global.grapesjs = require('./../src');
-global.Backbone = require('backbone');
-global.localStorage = localStorage;
-global.SVGElement = global.Element;
-window.$ = Backbone.$;
-global.navigator = { userAgent: 'node.js' };
-
-Object.keys(window).forEach(key => {
-  if (!(key in global)) {
-    global[key] = window[key];
-  }
-});

test/main.js → test/main.test.js

@@ -1,9 +1,9 @@
-//import grapesjs from './../src';
+import grapesjs from './../src';
 
 describe('Main', () => {
   describe('Startup', () => {
-    it('Main object should be loaded', () => {
-      expect(grapesjs).toExist();
+    test('Main object should be loaded', () => {
+      expect(grapesjs).toBeTruthy();
     });
   });
 

test/setup.js

@@ -0,0 +1,23 @@
+import _ from 'underscore';
+import Backbone from 'backbone';
+import sinon from 'sinon';
+import grapesjs from './../src';
+
+const localStorage = {
+  getItem(key) {
+    return this[key];
+  },
+  setItem(key, value) {
+    this[key] = value;
+  },
+  removeItem(key, value) {
+    delete this[key];
+  }
+};
+
+global.Backbone = Backbone;
+global._ = _;
+global.sinon = sinon;
+global.grapesjs = grapesjs;
+global.$ = Backbone.$;
+global.localStorage = localStorage;

test/specs/asset_manager/index.js

@@ -35,20 +35,20 @@ describe('Asset Manager', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(obj).toExist();
+    test('Object exists', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('No assets inside', () => {
+    test('No assets inside', () => {
       expect(obj.getAll().length).toEqual(0);
     });
 
-    it('Add new asset', () => {
+    test('Add new asset', () => {
       obj.add(imgObj);
       expect(obj.getAll().length).toEqual(1);
     });
 
-    it('Added asset has correct data', () => {
+    test('Added asset has correct data', () => {
       obj.add(imgObj);
       var asset = obj.get(imgObj.src);
       expect(asset.get('width')).toEqual(imgObj.width);
@@ -56,14 +56,14 @@ describe('Asset Manager', () => {
       expect(asset.get('type')).toEqual(imgObj.type);
     });
 
-    it('Add asset with src', () => {
+    test('Add asset with src', () => {
       obj.add(imgObj.src);
       var asset = obj.get(imgObj.src);
       expect(asset.get('type')).toEqual('image');
       expect(asset.get('src')).toEqual(imgObj.src);
     });
 
-    it('Add asset with more src', () => {
+    test('Add asset with more src', () => {
       obj.add([imgObj.src, imgObj.src + '2']);
       expect(obj.getAll().length).toEqual(2);
       var asset1 = obj.getAll().at(0);
@@ -72,15 +72,15 @@ describe('Asset Manager', () => {
       expect(asset2.get('src')).toEqual(imgObj.src + '2');
     });
 
-    it('Remove asset', () => {
+    test('Remove asset', () => {
       obj.add(imgObj);
       obj.remove(imgObj.src);
       expect(obj.getAll().length).toEqual(0);
     });
 
-    it('Render assets', () => {
+    test('Render assets', () => {
       obj.add(imgObj);
-      expect(obj.render()).toExist();
+      expect(obj.render()).toBeTruthy();
     });
 
     describe('With storage', () => {
@@ -103,7 +103,7 @@ describe('Asset Manager', () => {
         storageManager = null;
       });
 
-      it('Store and load data', () => {
+      test('Store and load data', () => {
         obj.add(imgObj);
         obj.store();
         obj.remove(imgObj.src);

test/specs/asset_manager/model/Asset.js

@@ -3,26 +3,26 @@ var Asset = require('asset_manager/model/Asset');
 module.exports = {
   run() {
     describe('Asset', () => {
-      it('Object exists', () => {
-        expect(Asset).toExist();
+      test('Object exists', () => {
+        expect(Asset).toBeTruthy();
       });
 
-      it('Has default values', () => {
+      test('Has default values', () => {
         var obj = new Asset({});
-        expect(obj.get('type')).toNotExist();
-        expect(obj.get('src')).toNotExist();
-        expect(obj.getExtension()).toNotExist();
-        expect(obj.getFilename()).toNotExist();
+        expect(obj.get('type')).toBeFalsy();
+        expect(obj.get('src')).toBeFalsy();
+        expect(obj.getExtension()).toBeFalsy();
+        expect(obj.getFilename()).toBeFalsy();
       });
 
-      it('Test getFilename', () => {
+      test('Test getFilename', () => {
         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', () => {
+      test('Test getExtension', () => {
         var obj = new Asset({ type: 'image', src: 'ch/eck/t.e.s.t' });
         expect(obj.getExtension()).toEqual('t');
         var obj = new Asset({ type: 'image', src: 'ch/eck/1234abc.' });

test/specs/asset_manager/model/AssetImage.js

@@ -3,19 +3,19 @@ var AssetImage = require('asset_manager/model/AssetImage');
 module.exports = {
   run() {
     describe('AssetImage', () => {
-      it('Object exists', () => {
-        expect(AssetImage).toExist();
+      test('Object exists', () => {
+        expect(AssetImage).toBeTruthy();
       });
 
-      it('Has default values', () => {
+      test('Has default values', () => {
         var obj = new AssetImage({});
         expect(obj.get('type')).toEqual('image');
-        expect(obj.get('src')).toNotExist();
+        expect(obj.get('src')).toBeFalsy();
         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();
+        expect(obj.getExtension()).toBeFalsy();
+        expect(obj.getFilename()).toBeFalsy();
       });
     });
   }

test/specs/asset_manager/model/Assets.js

@@ -13,11 +13,11 @@ module.exports = {
         obj = null;
       });
 
-      it('Object exists', () => {
-        expect(obj).toExist();
+      test('Object exists', () => {
+        expect(obj).toBeTruthy();
       });
 
-      it('Collection is empty', () => {
+      test('Collection is empty', () => {
         expect(obj.length).toEqual(0);
       });
     });

test/specs/asset_manager/view/AssetImageView.js

@@ -7,7 +7,7 @@ module.exports = {
     let obj;
 
     describe('AssetImageView', () => {
-      beforeEach(function() {
+      beforeEach(() => {
         var coll = new Assets();
         var model = coll.add({ type: 'image', src: '/test' });
         obj = new AssetImageView({
@@ -19,48 +19,48 @@ module.exports = {
         document.body.querySelector('#fixtures').appendChild(obj.render().el);
       });
 
-      afterEach(function() {
+      afterEach(() => {
         obj = null;
         document.body.innerHTML = '';
       });
 
-      it('Object exists', () => {
-        expect(AssetImageView).toExist();
+      test('Object exists', () => {
+        expect(AssetImageView).toBeTruthy();
       });
 
       describe('Asset should be rendered correctly', () => {
-        it('Has preview box', function() {
+        test('Has preview box', () => {
           var $asset = obj.$el;
           expect($asset.find('.preview').length).toEqual(1);
         });
 
-        it('Has meta box', function() {
+        test('Has meta box', () => {
           var $asset = obj.$el;
           expect($asset.find('.meta').length).toEqual(1);
         });
 
-        it('Has close button', function() {
+        test('Has close button', () => {
           var $asset = obj.$el;
           expect($asset.find('[data-toggle=asset-remove]').length).toEqual(1);
         });
       });
 
-      it('Could be selected', function() {
-        var spy = expect.spyOn(obj, 'updateTarget');
+      test('Could be selected', () => {
+        var spy = jest.spyOn(obj, 'updateTarget');
         obj.$el.trigger('click');
-        expect(obj.$el.attr('class')).toInclude('highlight');
+        expect(obj.$el.attr('class')).toContain('highlight');
         expect(spy).toHaveBeenCalled();
       });
 
-      it('Could be chosen', function() {
+      test('Could be chosen', () => {
         sinon.stub(obj, 'updateTarget');
-        var spy = expect.spyOn(obj, 'updateTarget');
+        var spy = jest.spyOn(obj, 'updateTarget');
         obj.$el.trigger('dblclick');
         expect(spy).toHaveBeenCalled();
         //obj.updateTarget.calledOnce.should.equal(true);
       });
 
-      it('Could be removed', function() {
+      test('Could be removed', () => {
         var spy = sinon.spy();
         obj.model.on('remove', spy);
         obj.onRemove({ stopImmediatePropagation() {} });

test/specs/asset_manager/view/AssetView.js

@@ -5,29 +5,35 @@ var Assets = require('asset_manager/model/Assets');
 module.exports = {
   run() {
     describe('AssetView', () => {
-      beforeEach(function() {
+      let testContext;
+
+      beforeEach(() => {
+        testContext = {};
+      });
+
+      beforeEach(() => {
         var coll = new Assets();
         var model = coll.add({ src: 'test' });
-        this.view = new AssetView({
+        testContext.view = new AssetView({
           config: {},
           model
         });
         document.body.innerHTML = '<div id="fixtures"></div>';
         document.body
           .querySelector('#fixtures')
-          .appendChild(this.view.render().el);
+          .appendChild(testContext.view.render().el);
       });
 
-      afterEach(function() {
-        this.view.remove();
+      afterEach(() => {
+        testContext.view.remove();
       });
 
-      it('Object exists', () => {
-        expect(AssetView).toExist();
+      test('Object exists', () => {
+        expect(AssetView).toBeTruthy();
       });
 
-      it('Has correct prefix', function() {
-        expect(this.view.pfx).toEqual('');
+      test('Has correct prefix', () => {
+        expect(testContext.view.pfx).toEqual('');
       });
     });
   }

test/specs/asset_manager/view/AssetsView.js

@@ -8,7 +8,7 @@ module.exports = {
       var obj;
       var coll;
 
-      beforeEach(function() {
+      beforeEach(() => {
         coll = new Assets([]);
         obj = new AssetsView({
           config: {},
@@ -22,59 +22,59 @@ module.exports = {
         document.body.querySelector('#fixtures').appendChild(obj.el);
       });
 
-      afterEach(function() {
+      afterEach(() => {
         obj.collection.reset();
       });
 
-      it('Object exists', () => {
-        expect(AssetsView).toExist();
+      test('Object exists', () => {
+        expect(AssetsView).toBeTruthy();
       });
 
-      it('Collection is empty', function() {
-        expect(obj.getAssetsEl().innerHTML).toNotExist();
+      test('Collection is empty', () => {
+        expect(obj.getAssetsEl().innerHTML).toBeFalsy();
       });
 
-      it('Add new asset', function() {
+      test('Add new asset', () => {
         sinon.stub(obj, 'addAsset');
         coll.add({ src: 'test' });
         expect(obj.addAsset.calledOnce).toEqual(true);
       });
 
-      it('Render new asset', function() {
+      test('Render new asset', () => {
         coll.add({ src: 'test' });
-        expect(obj.getAssetsEl().innerHTML).toExist();
+        expect(obj.getAssetsEl().innerHTML).toBeTruthy();
       });
 
-      it('Render correctly new image asset', function() {
+      test('Render correctly new image asset', () => {
         coll.add({ type: 'image', src: 'test' });
         var asset = obj.getAssetsEl().firstChild;
         expect(asset.tagName).toEqual('DIV');
-        expect(asset.innerHTML).toExist();
+        expect(asset.innerHTML).toBeTruthy();
       });
 
-      it('Clean collection from asset', function() {
+      test('Clean collection from asset', () => {
         var model = coll.add({ src: 'test' });
         coll.remove(model);
-        expect(obj.getAssetsEl().innerHTML).toNotExist();
+        expect(obj.getAssetsEl().innerHTML).toBeFalsy();
       });
 
-      it('Deselect works', function() {
+      test('Deselect works', () => {
         coll.add([{}, {}]);
         var $asset = obj.$el.children().first();
         $asset.attr('class', obj.pfx + 'highlight');
         coll.trigger('deselectAll');
-        expect($asset.attr('class')).toNotExist();
+        expect($asset.attr('class')).toBeFalsy();
       });
 
-      it('Returns not empty assets element', () => {
-        expect(obj.getAssetsEl()).toExist();
+      test('Returns not empty assets element', () => {
+        expect(obj.getAssetsEl()).toBeTruthy();
       });
 
-      it('Returns not empty url input', () => {
-        expect(obj.getAddInput()).toExist();
+      test('Returns not empty url input', () => {
+        expect(obj.getAddInput()).toBeTruthy();
       });
 
-      it('Add image asset from input string', () => {
+      test('Add image asset from input string', () => {
         obj.getAddInput().value = 'test';
         obj.handleSubmit({
           preventDefault() {}

test/specs/asset_manager/view/FileUploader.js

@@ -5,38 +5,38 @@ module.exports = {
     describe('File Uploader', () => {
       let obj;
 
-      beforeEach(function() {
+      beforeEach(() => {
         obj = new FileUploader({ config: {} });
         document.body.innerHTML = '<div id="fixtures"></div>';
         document.body.querySelector('#fixtures').appendChild(obj.render().el);
       });
 
-      afterEach(function() {
+      afterEach(() => {
         obj.remove();
       });
 
-      it('Object exists', () => {
-        expect(FileUploader).toExist();
+      test('Object exists', () => {
+        expect(FileUploader).toBeTruthy();
       });
 
-      it('Has correct prefix', function() {
-        expect(obj.pfx).toNotExist();
+      test('Has correct prefix', () => {
+        expect(obj.pfx).toBeFalsy();
       });
 
       describe('Should be rendered correctly', () => {
-        it('Has title', function() {
+        test('Has title', () => {
           expect(obj.$el.find('#title').length).toEqual(1);
         });
 
-        it('Title is empty', function() {
+        test('Title is empty', () => {
           expect(obj.$el.find('#title').html()).toEqual('');
         });
 
-        it('Has file input', function() {
+        test('Has file input', () => {
           expect(obj.$el.find('input[type=file]').length).toEqual(1);
         });
 
-        it('File input is enabled', function() {
+        test('File input is enabled', () => {
           expect(obj.$el.find('input[type=file]').prop('disabled')).toEqual(
             true
           );
@@ -44,7 +44,7 @@ module.exports = {
       });
 
       describe('Interprets configurations correctly', () => {
-        it('Has correct title', () => {
+        test('Has correct title', () => {
           var view = new FileUploader({
             config: {
               uploadText: 'Test'
@@ -54,7 +54,7 @@ module.exports = {
           expect(view.$el.find('#title').html()).toEqual('Test');
         });
 
-        it('Could be disabled', () => {
+        test('Could be disabled', () => {
           var view = new FileUploader({
             config: {
               disableUpload: true,
@@ -67,7 +67,7 @@ module.exports = {
           );
         });
 
-        it('Handles embedAsBase64 parameter', () => {
+        test('Handles embedAsBase64 parameter', () => {
           var view = new FileUploader({
             config: {
               embedAsBase64: true

test/specs/block_manager/index.js

@@ -21,50 +21,50 @@ describe('BlockManager', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(obj).toExist();
+    test('Object exists', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('No blocks inside', () => {
+    test('No blocks inside', () => {
       expect(obj.getAll().length).toEqual(0);
     });
 
-    it('No categories inside', () => {
+    test('No categories inside', () => {
       expect(obj.getCategories().length).toEqual(0);
     });
 
-    it('Add new block', () => {
+    test('Add new block', () => {
       var model = obj.add(idTest, optsTest);
       expect(obj.getAll().length).toEqual(1);
     });
 
-    it('Added block has correct data', () => {
+    test('Added block has correct data', () => {
       var model = obj.add(idTest, optsTest);
       expect(model.get('label')).toEqual(optsTest.label);
       expect(model.get('content')).toEqual(optsTest.content);
     });
 
-    it('Add block with attributes', () => {
+    test('Add block with attributes', () => {
       optsTest.attributes = { class: 'test' };
       var model = obj.add(idTest, optsTest);
       expect(model.get('attributes').class).toEqual('test');
     });
 
-    it('The id of the block is unique', () => {
+    test('The id of the block is unique', () => {
       var model = obj.add(idTest, optsTest);
       var model2 = obj.add(idTest, { other: 'test' });
       expect(model).toEqual(model2);
     });
 
-    it('Get block by id', () => {
+    test('Get block by id', () => {
       var model = obj.add(idTest, optsTest);
       var model2 = obj.get(idTest);
       expect(model).toEqual(model2);
     });
 
-    it('Render blocks', () => {
+    test('Render blocks', () => {
       obj.render();
-      expect(obj.getContainer()).toExist();
+      expect(obj.getContainer()).toBeTruthy();
     });
   });
 

test/specs/block_manager/view/BlocksView.js

@@ -23,22 +23,22 @@ module.exports = {
         view.collection.reset();
       });
 
-      it('The container is not empty', () => {
-        expect(view.el.outerHTML).toExist();
+      test('The container is not empty', () => {
+        expect(view.el.outerHTML).toBeTruthy();
       });
 
-      it('No children inside', () => {
+      test('No children inside', () => {
         expect(view.getBlocksEl().children.length).toEqual(0);
       });
 
-      it('Render children on add', () => {
+      test('Render children on add', () => {
         model.add({});
         expect(view.getBlocksEl().children.length).toEqual(1);
         model.add([{}, {}]);
         expect(view.getBlocksEl().children.length).toEqual(3);
       });
 
-      it('Destroy children on remove', () => {
+      test('Destroy children on remove', () => {
         model.add([{}, {}]);
         expect(view.getBlocksEl().children.length).toEqual(2);
         model.at(0).destroy();
@@ -64,11 +64,11 @@ module.exports = {
             .appendChild(view.render().el);
         });
 
-        it('Render children', () => {
+        test('Render children', () => {
           expect(view.getBlocksEl().children.length).toEqual(2);
         });
 
-        it('Render container', () => {
+        test('Render container', () => {
           expect(view.getBlocksEl().getAttribute('class')).toEqual(
             ppfx + 'blocks-c'
           );

test/specs/code_manager/index.js

@@ -13,24 +13,24 @@ describe('Code Manager', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(CodeManager).toExist();
+    test('Object exists', () => {
+      expect(CodeManager).toBeTruthy();
     });
 
-    it('No code generators inside', () => {
+    test('No code generators inside', () => {
       expect(obj.getGenerators()).toEqual({});
     });
 
-    it('No code viewers inside', () => {
+    test('No code viewers inside', () => {
       expect(obj.getViewers()).toEqual({});
     });
 
-    it('Add and get code generator', () => {
+    test('Add and get code generator', () => {
       obj.addGenerator('test', 'gen');
       expect(obj.getGenerator('test')).toEqual('gen');
     });
 
-    it('Add and get code viewer', () => {
+    test('Add and get code viewer', () => {
       obj.addViewer('test', 'view');
       expect(obj.getViewer('test')).toEqual('view');
     });

test/specs/code_manager/model/CodeModels.js

@@ -31,16 +31,16 @@ module.exports = {
         obj = null;
       });
 
-      it('Build correctly one component', () => {
+      test('Build correctly one component', () => {
         expect(obj.build(comp)).toEqual('');
       });
 
-      it('Build correctly empty component inside', () => {
+      test('Build correctly empty component inside', () => {
         var m1 = comp.get('components').add({});
         expect(obj.build(comp)).toEqual('<div></div>');
       });
 
-      it('Build correctly not empty component inside', () => {
+      test('Build correctly not empty component inside', () => {
         var m1 = comp.get('components').add({
           tagName: 'article',
           attributes: {
@@ -53,7 +53,7 @@ module.exports = {
         );
       });
 
-      it('Build correctly component with classes', () => {
+      test('Build correctly component with classes', () => {
         var m1 = comp.get('components').add({
           tagName: 'article',
           attributes: {
@@ -93,16 +93,16 @@ module.exports = {
         obj = null;
       });
 
-      it('Build correctly one component', () => {
+      test('Build correctly one component', () => {
         expect(obj.build(comp)).toEqual('');
       });
 
-      it('Build correctly empty component inside', () => {
+      test('Build correctly empty component inside', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         expect(obj.build(comp)).toEqual('');
       });
 
-      it('Build correctly component with style inside', () => {
+      test('Build correctly component with style inside', () => {
         var m1 = comp.get('components').add({
           tagName: 'article',
           style: {
@@ -115,7 +115,7 @@ module.exports = {
         );
       });
 
-      it('Build correctly component with class styled', () => {
+      test('Build correctly component with class styled', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
 
@@ -128,7 +128,7 @@ module.exports = {
         );
       });
 
-      it('Build correctly component styled with class and state', () => {
+      test('Build correctly component styled with class and state', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
 
@@ -142,7 +142,7 @@ module.exports = {
         );
       });
 
-      it('Build correctly with more classes', () => {
+      test('Build correctly with more classes', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
         var cls2 = m1.get('classes').add({ name: 'class2' });
@@ -156,7 +156,7 @@ module.exports = {
         );
       });
 
-      it('Build rules with mixed classes', () => {
+      test('Build rules with mixed classes', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
         var cls2 = m1.get('classes').add({ name: 'class2' });
@@ -171,7 +171,7 @@ module.exports = {
         );
       });
 
-      it('Build rules with only not class based selectors', () => {
+      test('Build rules with only not class based selectors', () => {
         var cssc = newCssComp();
         var rule = cssc.add([]);
         rule.set('style', { prop1: 'value1', prop2: 'value2' });
@@ -182,7 +182,7 @@ module.exports = {
         );
       });
 
-      it('Build correctly with class styled out', () => {
+      test('Build correctly with class styled out', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
         var cls2 = m1.get('classes').add({ name: 'class2' });
@@ -198,7 +198,7 @@ module.exports = {
         );
       });
 
-      it('Rule with media query', () => {
+      test('Rule with media query', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
         var cls2 = m1.get('classes').add({ name: 'class2' });
@@ -213,7 +213,7 @@ module.exports = {
         );
       });
 
-      it('Rules mixed with media queries', () => {
+      test('Rules mixed with media queries', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
         var cls2 = m1.get('classes').add({ name: 'class2' });
@@ -240,7 +240,7 @@ module.exports = {
         );
       });
 
-      it('Avoid useless code', () => {
+      test('Avoid useless code', () => {
         var m1 = comp.get('components').add({ tagName: 'article' });
         var cls1 = m1.get('classes').add({ name: 'class1' });
 
@@ -252,14 +252,14 @@ module.exports = {
         expect(obj.build(comp, { cssc })).toEqual('');
       });
 
-      it('Render correctly a rule without avoidInlineStyle option', () => {
+      test('Render correctly a rule without avoidInlineStyle option', () => {
         comp.setStyle({ color: 'red' });
         const id = comp.getId();
         const result = `#${id}{color:red;}`;
         expect(obj.build(comp, { cssc: cc })).toEqual(result);
       });
 
-      it('Render correctly a rule with avoidInlineStyle option', () => {
+      test('Render correctly a rule with avoidInlineStyle option', () => {
         em.getConfig().avoidInlineStyle = 1;
         comp = new Component(
           {},
@@ -274,7 +274,7 @@ module.exports = {
         expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
       });
 
-      it('Render correctly a rule with avoidInlineStyle and state', () => {
+      test('Render correctly a rule with avoidInlineStyle and state', () => {
         em.getConfig().avoidInlineStyle = 1;
         const state = 'hover';
         comp.config.avoidInlineStyle = 1;
@@ -285,7 +285,7 @@ module.exports = {
         expect(obj.build(comp, { cssc: cc, em })).toEqual(result);
       });
 
-      it('Render correctly a rule with avoidInlineStyle and w/o state', () => {
+      test('Render correctly a rule with avoidInlineStyle and w/o state', () => {
         em.getConfig().avoidInlineStyle = 1;
         const state = 'hover';
         comp.config.avoidInlineStyle = 1;

test/specs/commands/index.js

@@ -14,49 +14,49 @@ describe('Commands', () => {
       obj = null;
     });
 
-    it('No commands inside', () => {
-      expect(obj.get('test')).toEqual(null);
+    test('No commands inside', () => {
+      expect(obj.get('test')).toBeUndefined();
     });
 
-    it('Push new command', () => {
+    test('Push new command', () => {
       var comm = { test: 'test' };
       obj.add('test', comm);
       expect(obj.get('test').test).toEqual('test');
     });
 
-    it('Load default commands at init', () => {
-      expect(obj.get('select-comp')).toNotEqual(null);
-      expect(obj.get('create-comp')).toNotEqual(null);
-      expect(obj.get('delete-comp')).toNotEqual(null);
-      expect(obj.get('image-comp')).toNotEqual(null);
-      expect(obj.get('move-comp')).toNotEqual(null);
-      expect(obj.get('text-comp')).toNotEqual(null);
-      expect(obj.get('insert-custom')).toNotEqual(null);
-      expect(obj.get('export-template')).toNotEqual(null);
-      expect(obj.get('sw-visibility')).toNotEqual(null);
-      expect(obj.get('open-layers')).toNotEqual(null);
-      expect(obj.get('open-sm')).toNotEqual(null);
-      expect(obj.get('open-tm')).toNotEqual(null);
-      expect(obj.get('open-blocks')).toNotEqual(null);
-      expect(obj.get('open-assets')).toNotEqual(null);
-      expect(obj.get('show-offset')).toNotEqual(null);
-      expect(obj.get('select-parent')).toNotEqual(null);
-      expect(obj.get('tlb-delete')).toNotEqual(null);
-      expect(obj.get('tlb-clone')).toNotEqual(null);
-      expect(obj.get('tlb-move')).toNotEqual(null);
-      expect(obj.get('fullscreen')).toNotEqual(null);
-      expect(obj.get('preview')).toNotEqual(null);
-      expect(obj.get('resize')).toNotEqual(null);
-      expect(obj.get('drag')).toNotEqual(null);
+    test('Load default commands at init', () => {
+      expect(obj.get('select-comp')).not.toBeUndefined();
+      expect(obj.get('create-comp')).not.toBeUndefined();
+      expect(obj.get('delete-comp')).not.toBeUndefined();
+      expect(obj.get('image-comp')).not.toBeUndefined();
+      expect(obj.get('move-comp')).not.toBeUndefined();
+      expect(obj.get('text-comp')).not.toBeUndefined();
+      expect(obj.get('insert-custom')).not.toBeUndefined();
+      expect(obj.get('export-template')).not.toBeUndefined();
+      expect(obj.get('sw-visibility')).not.toBeUndefined();
+      expect(obj.get('open-layers')).not.toBeUndefined();
+      expect(obj.get('open-sm')).not.toBeUndefined();
+      expect(obj.get('open-tm')).not.toBeUndefined();
+      expect(obj.get('open-blocks')).not.toBeUndefined();
+      expect(obj.get('open-assets')).not.toBeUndefined();
+      expect(obj.get('show-offset')).not.toBeUndefined();
+      expect(obj.get('select-parent')).not.toBeUndefined();
+      expect(obj.get('tlb-delete')).not.toBeUndefined();
+      expect(obj.get('tlb-clone')).not.toBeUndefined();
+      expect(obj.get('tlb-move')).not.toBeUndefined();
+      expect(obj.get('fullscreen')).not.toBeUndefined();
+      expect(obj.get('preview')).not.toBeUndefined();
+      expect(obj.get('resize')).not.toBeUndefined();
+      expect(obj.get('drag')).not.toBeUndefined();
     });
 
-    it('Default commands after loadDefaultCommands', () => {
+    test('Default commands after loadDefaultCommands', () => {
       obj.loadDefaultCommands();
-      expect(obj.get('select-comp')).toNotEqual(null);
+      expect(obj.get('select-comp')).not.toBeUndefined();
     });
 
-    it('Commands module should not have toLoad property', () => {
-      expect(obj.toLoad).toEqual(null);
+    test('Commands module should not have toLoad property', () => {
+      expect(obj.toLoad).toBeUndefined();
     });
   });
 });

test/specs/commands/model/CommandModels.js

@@ -14,7 +14,7 @@ module.exports = {
         obj = null;
       });
 
-      it('Has id property', () => {
+      test('Has id property', () => {
         expect(obj.has('id')).toEqual(true);
       });
     });
@@ -30,8 +30,8 @@ module.exports = {
         obj = null;
       });
 
-      it('Object is ok', () => {
-        expect(obj).toExist();
+      test('Object is ok', () => {
+        expect(obj).toBeTruthy();
       });
     });
   }

test/specs/commands/view/CommandAbstract.js

@@ -20,7 +20,7 @@ module.exports = {
         editor = null;
       });
 
-      it('callRun returns result when no "abort" option specified', () => {
+      test('callRun returns result when no "abort" option specified', () => {
         const runStub = sinon.stub(command, 'run').returns('result');
 
         const result = command.callRun(editor);
@@ -40,7 +40,7 @@ module.exports = {
         expect(runStub.calledOnce).toEqual(true);
       });
 
-      it('callRun returns undefined when "abort" option is specified', () => {
+      test('callRun returns undefined when "abort" option is specified', () => {
         const runStub = sinon.stub(command, 'run').returns('result');
 
         const result = command.callRun(editor, { abort: true });
@@ -59,7 +59,7 @@ module.exports = {
         expect(runStub.notCalled).toEqual(true);
       });
 
-      it('callStop returns result', () => {
+      test('callStop returns result', () => {
         const stopStub = sinon.stub(command, 'stop').returns('stopped');
 
         const result = command.callStop(editor);

test/specs/css_composer/e2e/CssComposer.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const $ = Backbone.$;
 
 module.exports = {
@@ -12,7 +13,7 @@ module.exports = {
       var rulesSet;
       var rulesSet2;
 
-      before(() => {
+      beforeAll(() => {
         fixtures = $('#fixtures');
         fixture = $('<div class="csscomposer-fixture"></div>');
       });
@@ -52,11 +53,11 @@ module.exports = {
         clsm = null;
       });
 
-      after(() => {
+      afterAll(() => {
         fixture.remove();
       });
 
-      it('Rules are correctly imported from default property', () => {
+      test('Rules are correctly imported from default property', () => {
         var gj = grapesjs.init({
           stylePrefix: '',
           storageManager: { autoload: 0, type: 'none' },
@@ -69,7 +70,7 @@ module.exports = {
         expect(cls.length).toEqual(3);
       });
 
-      it('New rule adds correctly the class inside selector manager', () => {
+      test('New rule adds correctly the class inside selector manager', () => {
         var rules = cssc.getAll();
         rules.add({ selectors: [{ name: 'test1', private: true }] });
         var rule = clsm.getAll().at(0);
@@ -77,7 +78,7 @@ module.exports = {
         expect(rule.get('private')).toEqual(true);
       });
 
-      it('New rules are correctly imported inside selector manager', () => {
+      test('New rules are correctly imported inside selector manager', () => {
         var rules = cssc.getAll();
         rulesSet.forEach(item => {
           rules.add(item);
@@ -89,7 +90,7 @@ module.exports = {
         expect(cls.at(2).get('name')).toEqual('test3');
       });
 
-      it('Add rules from the new component added as a string with style tag', () => {
+      test('Add rules from the new component added as a string with style tag', () => {
         var comps = domc.getComponents();
         var rules = cssc.getAll();
         comps.add(
@@ -99,13 +100,13 @@ module.exports = {
         expect(rules.length).toEqual(2);
       });
 
-      it('Add raw rule objects with addCollection', () => {
+      test('Add raw rule objects with addCollection', () => {
         cssc.addCollection(rulesSet);
         expect(cssc.getAll().length).toEqual(3);
         expect(clsm.getAll().length).toEqual(3);
       });
 
-      it('Add raw rule objects twice with addCollection do not duplucate rules', () => {
+      test('Add raw rule objects twice with addCollection do not duplucate rules', () => {
         var rulesSet2Copy = JSON.parse(JSON.stringify(rulesSet2));
         var coll1 = cssc.addCollection(rulesSet2);
         var coll2 = cssc.addCollection(rulesSet2Copy);
@@ -114,7 +115,7 @@ module.exports = {
         expect(coll1).toEqual(coll2);
       });
 
-      it('Extend css rule style, if requested', () => {
+      test('Extend css rule style, if requested', () => {
         var style1 = { color: 'red', width: '10px' };
         var style2 = { height: '20px', width: '20px' };
         var rule1 = {
@@ -162,7 +163,7 @@ module.exports = {
         expect(ruleOut).toEqual(ruleResult);
       });
 
-      it('Do not extend with different selectorsAdd', () => {
+      test('Do not extend with different selectorsAdd', () => {
         var style1 = { color: 'red', width: '10px' };
         var style2 = { height: '20px', width: '20px' };
         var rule1 = {
@@ -211,7 +212,7 @@ module.exports = {
         expect(rule2Out).toEqual(rule2Result);
       });
 
-      it('Add raw rule objects with width via addCollection', () => {
+      test('Add raw rule objects with width via addCollection', () => {
         var coll1 = cssc.addCollection(rulesSet2);
         expect(coll1[2].get('mediaText')).toEqual(rulesSet2[2].mediaText);
       });

test/specs/css_composer/index.js

@@ -42,38 +42,38 @@ describe('Css Composer', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(CssComposer).toExist();
+    test('Object exists', () => {
+      expect(CssComposer).toBeTruthy();
     });
 
-    it('storageKey returns array', () => {
+    test('storageKey returns array', () => {
       expect(obj.storageKey() instanceof Array).toEqual(true);
     });
 
-    it('storageKey returns correct composition', () => {
+    test('storageKey returns correct composition', () => {
       setSmConfig();
       expect(obj.storageKey()).toEqual(['css', 'styles']);
     });
 
-    it('Store data', () => {
+    test('Store data', () => {
       setSmConfig();
       setEm();
       var expected = { css: 'testCss', styles: '[]' };
       expect(obj.store(1)).toEqual(expected);
     });
 
-    it('Rules are empty', () => {
+    test('Rules are empty', () => {
       expect(obj.getAll().length).toEqual(0);
     });
 
-    it('Create new rule with correct selectors', () => {
+    test('Create new rule with correct selectors', () => {
       var sel = new obj.Selectors();
       var s1 = sel.add({ name: 'test1' });
       var rule = obj.add(sel.models);
       expect(rule.get('selectors').at(0)).toEqual(s1);
     });
 
-    it('Create new rule correctly', () => {
+    test('Create new rule correctly', () => {
       var sel = new obj.Selectors();
       var s1 = sel.add({ name: 'test1' });
       var rule = obj.add(sel.models, 'state1', 'width1');
@@ -81,7 +81,7 @@ describe('Css Composer', () => {
       expect(rule.get('mediaText')).toEqual('width1');
     });
 
-    it('Add rule to collection', () => {
+    test('Add rule to collection', () => {
       var sel = new obj.Selectors([{ name: 'test1' }]);
       var rule = obj.add(sel.models);
       expect(obj.getAll().length).toEqual(1);
@@ -95,14 +95,14 @@ describe('Css Composer', () => {
       ).toEqual('test1');
     });
 
-    it('Returns correct rule with the same selector', () => {
+    test('Returns correct rule with the same selector', () => {
       var sel = new obj.Selectors([{ name: 'test1' }]);
       var rule1 = obj.add(sel.models);
       var rule2 = obj.get(sel.models);
       expect(rule1).toEqual(rule2);
     });
 
-    it('Returns correct rule with the same selectors', () => {
+    test('Returns correct rule with the same selectors', () => {
       var sel1 = new obj.Selectors([{ name: 'test1' }]);
       var rule1 = obj.add(sel1.models);
 
@@ -113,7 +113,7 @@ describe('Css Composer', () => {
       expect(rule3).toEqual(rule2);
     });
 
-    it('Do not create multiple rules with the same name selectors', () => {
+    test('Do not create multiple rules with the same name selectors', () => {
       var sel1 = new obj.Selectors([{ name: 'test21' }, { name: 'test22' }]);
       var rule1 = obj.add(sel1.models);
 
@@ -122,7 +122,7 @@ describe('Css Composer', () => {
       expect(rule2).toEqual(rule1);
     });
 
-    it("Don't duplicate rules", () => {
+    test("Don't duplicate rules", () => {
       var sel = new obj.Selectors([]);
       var s1 = sel.add({ name: 'test1' });
       var s2 = sel.add({ name: 'test2' });
@@ -134,7 +134,7 @@ describe('Css Composer', () => {
       expect(rule2).toEqual(rule1);
     });
 
-    it('Returns correct rule with the same mixed selectors', () => {
+    test('Returns correct rule with the same mixed selectors', () => {
       var sel = new obj.Selectors([]);
       var s1 = sel.add({ name: 'test1' });
       var s2 = sel.add({ name: 'test2' });
@@ -144,7 +144,7 @@ describe('Css Composer', () => {
       expect(rule2).toEqual(rule1);
     });
 
-    it('Returns correct rule with the same selectors and state', () => {
+    test('Returns correct rule with the same selectors and state', () => {
       var sel = new obj.Selectors([]);
       var s1 = sel.add({ name: 'test1' });
       var s2 = sel.add({ name: 'test2' });
@@ -154,7 +154,7 @@ describe('Css Composer', () => {
       expect(rule2).toEqual(rule1);
     });
 
-    it('Returns correct rule with the same selectors, state and width', () => {
+    test('Returns correct rule with the same selectors, state and width', () => {
       var sel = new obj.Selectors([]);
       var s1 = sel.add({ name: 'test1' });
       var rule1 = obj.add([s1], 'hover', '1');
@@ -162,11 +162,11 @@ describe('Css Composer', () => {
       expect(rule2).toEqual(rule1);
     });
 
-    it('Renders correctly', () => {
-      expect(obj.render()).toExist();
+    test('Renders correctly', () => {
+      expect(obj.render()).toBeTruthy();
     });
 
-    it('Create a rule with id selector by using setIdRule()', () => {
+    test('Create a rule with id selector by using setIdRule()', () => {
       const name = 'test';
       obj.setIdRule(name, { color: 'red' });
       expect(obj.getAll().length).toEqual(1);
@@ -181,7 +181,7 @@ describe('Css Composer', () => {
       );
     });
 
-    it('Create a rule with id selector and state by using setIdRule()', () => {
+    test('Create a rule with id selector and state by using setIdRule()', () => {
       const name = 'test';
       const state = 'hover';
       obj.setIdRule(name, { color: 'red' }, { state });
@@ -190,7 +190,7 @@ describe('Css Composer', () => {
       expect(rule.selectorsToString()).toEqual(`#${name}:${state}`);
     });
 
-    it('Create a rule with class selector by using setClassRule()', () => {
+    test('Create a rule with class selector by using setClassRule()', () => {
       const name = 'test';
       obj.setClassRule(name, { color: 'red' });
       expect(obj.getAll().length).toEqual(1);
@@ -199,7 +199,7 @@ describe('Css Composer', () => {
       expect(rule.styleToString()).toEqual(`color:red;`);
     });
 
-    it('Create a rule with class selector and state by using setClassRule()', () => {
+    test('Create a rule with class selector and state by using setClassRule()', () => {
       const name = 'test';
       const state = 'hover';
       obj.setClassRule(name, { color: 'red' }, { state });

test/specs/css_composer/model/CssModels.js

@@ -16,29 +16,29 @@ module.exports = {
         obj = null;
       });
 
-      it('Has selectors property', () => {
+      test('Has selectors property', () => {
         expect(obj.has('selectors')).toEqual(true);
       });
 
-      it('Has style property', () => {
+      test('Has style property', () => {
         expect(obj.has('style')).toEqual(true);
       });
 
-      it('Has state property', () => {
+      test('Has state property', () => {
         expect(obj.has('state')).toEqual(true);
       });
 
-      it('No default selectors', () => {
+      test('No default selectors', () => {
         expect(obj.get('selectors').length).toEqual(0);
       });
 
-      it('Compare returns true with the same selectors', () => {
+      test('Compare returns true with the same selectors', () => {
         var s1 = obj.get('selectors').add({ name: 'test1' });
         var s2 = obj.get('selectors').add({ name: 'test2' });
         expect(obj.compare([s1, s2])).toEqual(true);
       });
 
-      it('Compare with different state', () => {
+      test('Compare with different state', () => {
         var s1 = obj.get('selectors').add({ name: 'test1' });
         var s2 = obj.get('selectors').add({ name: 'test2' });
         obj.set('state', 'hover');
@@ -46,7 +46,7 @@ module.exports = {
         expect(obj.compare([s1, s2], 'hover')).toEqual(true);
       });
 
-      it('Compare with different mediaText', () => {
+      test('Compare with different mediaText', () => {
         var s1 = obj.get('selectors').add({ name: 'test1' });
         var s2 = obj.get('selectors').add({ name: 'test2' });
         obj.set('state', 'hover');
@@ -56,23 +56,23 @@ module.exports = {
         expect(obj.compare([s2, s1], 'hover', '1000')).toEqual(true);
       });
 
-      it('toCSS returns empty if there is no style', () => {
+      test('toCSS returns empty if there is no style', () => {
         var s1 = obj.get('selectors').add({ name: 'test1' });
         expect(obj.toCSS()).toEqual('');
       });
 
-      it('toCSS returns empty if there is no selectors', () => {
+      test('toCSS returns empty if there is no selectors', () => {
         obj.setStyle({ color: 'red' });
         expect(obj.toCSS()).toEqual('');
       });
 
-      it('toCSS returns simple CSS', () => {
+      test('toCSS returns simple CSS', () => {
         obj.get('selectors').add({ name: 'test1' });
         obj.setStyle({ color: 'red' });
         expect(obj.toCSS()).toEqual(`.test1{color:red;}`);
       });
 
-      it('toCSS wraps correctly inside media rule', () => {
+      test('toCSS wraps correctly inside media rule', () => {
         const media = '(max-width: 768px)';
         obj.set('atRuleType', 'media');
         obj.set('mediaText', media);
@@ -81,7 +81,7 @@ module.exports = {
         expect(obj.toCSS()).toEqual(`@media ${media}{.test1{color:red;}}`);
       });
 
-      it('toCSS with a generic at-rule', () => {
+      test('toCSS with a generic at-rule', () => {
         obj.set('atRuleType', 'supports');
         obj.get('selectors').add({ name: 'test1' });
         obj.setStyle({ 'font-family': 'Open Sans' });
@@ -90,14 +90,14 @@ module.exports = {
         );
       });
 
-      it('toCSS with a generic single at-rule', () => {
+      test('toCSS with a generic single at-rule', () => {
         obj.set('atRuleType', 'font-face');
         obj.set('singleAtRule', 1);
         obj.setStyle({ 'font-family': 'Sans' });
         expect(obj.toCSS()).toEqual(`@font-face{font-family:Sans;}`);
       });
 
-      it('toCSS with a generic at-rule and condition', () => {
+      test('toCSS with a generic at-rule and condition', () => {
         obj.set('atRuleType', 'font-face');
         obj.set('mediaText', 'some-condition');
         obj.get('selectors').add({ name: 'test1' });
@@ -109,7 +109,7 @@ module.exports = {
     });
 
     describe('CssRules', () => {
-      it('Creates collection item correctly', () => {
+      test('Creates collection item correctly', () => {
         var c = new CssRules();
         var m = c.add({});
         expect(m instanceof CssRule).toEqual(true);
@@ -117,7 +117,7 @@ module.exports = {
     });
 
     describe('Selectors', () => {
-      it('Creates collection item correctly', () => {
+      test('Creates collection item correctly', () => {
         var c = new Selectors();
         var m = c.add({});
         expect(m instanceof Selector).toEqual(true);

test/specs/css_composer/view/CssRuleView.js

@@ -7,7 +7,7 @@ module.exports = {
       let obj;
       let fixtures;
 
-      beforeEach(function() {
+      beforeEach(() => {
         var m = new CssRule();
         obj = new CssRuleView({
           model: m
@@ -21,15 +21,15 @@ module.exports = {
         obj.model.destroy();
       });
 
-      it('Object exists', () => {
-        expect(CssRuleView).toExist();
+      test('Object exists', () => {
+        expect(CssRuleView).toBeTruthy();
       });
 
-      it('Empty style inside', function() {
+      test('Empty style inside', () => {
         expect(fixtures.innerHTML).toEqual('<style></style>');
       });
 
-      it('On update of style always empty as there is no selectors', function() {
+      test('On update of style always empty as there is no selectors', () => {
         obj.model.set('style', { prop: 'value' });
         expect(fixtures.innerHTML).toEqual('<style></style>');
       });
@@ -54,29 +54,29 @@ module.exports = {
           objReg.model.destroy();
         });
 
-        it('Empty with no style', () => {
+        test('Empty with no style', () => {
           expect(objReg.$el.html()).toEqual('');
         });
 
-        it('Not empty on update of style', () => {
+        test('Not empty on update of style', () => {
           objReg.model.set('style', { prop: 'value' });
           expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
         });
 
-        it('State correctly rendered', () => {
+        test('State correctly rendered', () => {
           objReg.model.set('style', { prop: 'value' });
           objReg.model.set('state', 'hover');
           expect(objReg.$el.html()).toEqual('.test1.test2:hover{prop:value;}');
         });
 
-        it('State render changes on update', () => {
+        test('State render changes on update', () => {
           objReg.model.set('style', { prop: 'value' });
           objReg.model.set('state', 'hover');
           objReg.model.set('state', '');
           expect(objReg.$el.html()).toEqual('.test1.test2{prop:value;}');
         });
 
-        it('Render media queries', () => {
+        test('Render media queries', () => {
           objReg.model.set('style', { prop: 'value' });
           objReg.model.set('mediaText', '(max-width: 999px)');
           expect(objReg.$el.html()).toEqual(
@@ -84,7 +84,7 @@ module.exports = {
           );
         });
 
-        it('Empty on clear', () => {
+        test('Empty on clear', () => {
           objReg.model.set('style', { prop: 'value' });
           objReg.model.set('style', {});
           expect(objReg.$el.html()).toEqual('');

test/specs/css_composer/view/CssRulesView.js

@@ -25,7 +25,7 @@ module.exports = {
         }
       ];
 
-      beforeEach(function() {
+      beforeEach(() => {
         const col = new CssRules([]);
         obj = new CssRulesView({
           collection: col,
@@ -45,12 +45,12 @@ module.exports = {
         obj.collection.reset();
       });
 
-      it('Object exists', () => {
-        expect(CssRulesView).toExist();
+      test('Object exists', () => {
+        expect(CssRulesView).toBeTruthy();
       });
 
-      it('Collection is empty. Styles structure bootstraped', () => {
-        expect(obj.$el.html()).toExist();
+      test('Collection is empty. Styles structure bootstraped', () => {
+        expect(obj.$el.html()).toBeTruthy();
         const foundStylesContainers = obj.$el.find('div');
         expect(foundStylesContainers.length).toEqual(devices.length);
 
@@ -68,13 +68,13 @@ module.exports = {
         });
       });
 
-      it('Add new rule', () => {
+      test('Add new rule', () => {
         sinon.stub(obj, 'addToCollection');
         obj.collection.add({});
-        expect(obj.addToCollection.calledOnce).toExist(true);
+        expect(obj.addToCollection.calledOnce).toBeTruthy();
       });
 
-      it('Add correctly rules with different media queries', () => {
+      test('Add correctly rules with different media queries', () => {
         const foundStylesContainers = obj.$el.find('div');
         const rules = [
           {
@@ -98,9 +98,9 @@ module.exports = {
         expect(stylesCont.children.length).toEqual(rules.length);
       });
 
-      it('Render new rule', () => {
+      test('Render new rule', () => {
         obj.collection.add({});
-        expect(obj.$el.find(`#${prefix}`).html()).toExist();
+        expect(obj.$el.find(`#${prefix}`).html()).toBeTruthy();
       });
     });
   }

test/specs/device_manager/index.js

@@ -17,45 +17,45 @@ describe('DeviceManager', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(obj).toExist();
+    test('Object exists', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('No device inside', () => {
+    test('No device inside', () => {
       var coll = obj.getAll();
       expect(coll.length).toEqual(0);
     });
 
-    it('Add new device', () => {
+    test('Add new device', () => {
       var model = obj.add(testNameDevice, testWidthDevice);
       expect(obj.getAll().length).toEqual(1);
     });
 
-    it('Added device has correct data', () => {
+    test('Added device has correct data', () => {
       var model = obj.add(testNameDevice, testWidthDevice);
       expect(model.get('name')).toEqual(testNameDevice);
       expect(model.get('width')).toEqual(testWidthDevice);
     });
 
-    it('Add device width options', () => {
+    test('Add device width options', () => {
       var model = obj.add(testNameDevice, testWidthDevice, { opt: 'value' });
       expect(model.get('opt')).toEqual('value');
     });
 
-    it('The name of the device is unique', () => {
+    test('The name of the device is unique', () => {
       var model = obj.add(testNameDevice, testWidthDevice);
       var model2 = obj.add(testNameDevice, '2px');
       expect(model).toEqual(model2);
     });
 
-    it('Get device by name', () => {
+    test('Get device by name', () => {
       var model = obj.add(testNameDevice, testWidthDevice);
       var model2 = obj.get(testNameDevice);
       expect(model).toEqual(model2);
     });
 
-    it('Render devices', () => {
-      expect(obj.render()).toExist();
+    test('Render devices', () => {
+      expect(obj.render()).toBeTruthy();
     });
   });
 

test/specs/device_manager/view/DevicesView.js

@@ -23,17 +23,17 @@ module.exports = {
         view.collection.reset();
       });
 
-      it('The content is not empty', () => {
-        expect(view.el.innerHTML).toExist();
+      test('The content is not empty', () => {
+        expect(view.el.innerHTML).toBeTruthy();
       });
 
-      it('No options without devices', () => {
+      test('No options without devices', () => {
         expect(view.getOptions()).toEqual('');
       });
 
-      it('Render new button', () => {
+      test('Render new button', () => {
         view.collection.add({});
-        expect(view.$el.html()).toExist();
+        expect(view.$el.html()).toBeTruthy();
       });
 
       describe('With configs', () => {
@@ -50,13 +50,13 @@ module.exports = {
             .appendChild(view.render().el);
         });
 
-        it('Update device on select change', () => {
+        test('Update device on select change', () => {
           view.$el.find('select').val('test2');
           view.updateDevice();
           expect(view.config.em.get('device')).toEqual('test2');
         });
 
-        it('Render options', () => {
+        test('Render options', () => {
           expect(view.getOptions()).toEqual(
             '<option value="test1">test1</option><option value="test2">test2</option>'
           );

test/specs/dom_components/index.js

@@ -58,15 +58,15 @@ describe('DOM Components', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(DomComponents).toExist();
+    test('Object exists', () => {
+      expect(DomComponents).toBeTruthy();
     });
 
-    it('storageKey returns array', () => {
+    test('storageKey returns array', () => {
       expect(obj.storageKey() instanceof Array).toEqual(true);
     });
 
-    it('storageKey returns correct composition', () => {
+    test('storageKey returns correct composition', () => {
       config.stm = {
         getConfig() {
           return {
@@ -78,7 +78,7 @@ describe('DOM Components', () => {
       expect(obj.storageKey()).toEqual(['html', 'components']);
     });
 
-    it('Store data', () => {
+    test('Store data', () => {
       setSmConfig();
       setEm();
       //obj.getWrapper().get('components').add({});
@@ -89,7 +89,7 @@ describe('DOM Components', () => {
       expect(obj.store(1)).toEqual(expected);
     });
 
-    it.skip('Store and load data', () => {
+    test.skip('Store and load data', () => {
       setSmConfig();
       setEm();
       const comps = new Components({}, {});
@@ -98,29 +98,29 @@ describe('DOM Components', () => {
       expect(obj.load()).toEqual([{ test: 1 }]);
     });
 
-    it('Wrapper exists', () => {
-      expect(obj.getWrapper()).toExist();
+    test('Wrapper exists', () => {
+      expect(obj.getWrapper()).toBeTruthy();
     });
 
-    it('No components inside', () => {
+    test('No components inside', () => {
       expect(obj.getComponents().length).toEqual(0);
     });
 
-    it('Add new component', () => {
+    test('Add new component', () => {
       var comp = obj.addComponent({});
       expect(obj.getComponents().length).toEqual(1);
     });
 
-    it('Add more components at once', () => {
+    test('Add more components at once', () => {
       var comp = obj.addComponent([{}, {}]);
       expect(obj.getComponents().length).toEqual(2);
     });
 
-    it('Render wrapper', () => {
-      expect(obj.render()).toExist();
+    test('Render wrapper', () => {
+      expect(obj.render()).toBeTruthy();
     });
 
-    it('Import propertly components and styles with the same ids', () => {
+    test('Import propertly components and styles with the same ids', () => {
       obj = em.get('DomComponents');
       const cc = em.get('CssComposer');
       const id = 'idtest';

test/specs/dom_components/model/Component.js

@@ -1,3 +1,4 @@
+import Backbone from 'backbone';
 const DomComponents = require('dom_components');
 const Component = require('dom_components/model/Component');
 const ComponentImage = require('dom_components/model/ComponentImage');
@@ -32,11 +33,11 @@ module.exports = {
         obj = null;
       });
 
-      it('Has no children', () => {
+      test('Has no children', () => {
         expect(obj.get('components').length).toEqual(0);
       });
 
-      it('Clones correctly', () => {
+      test('Clones correctly', () => {
         var sAttr = obj.attributes;
         var cloned = obj.clone();
         var eAttr = cloned.attributes;
@@ -47,7 +48,7 @@ module.exports = {
         expect(sAttr.length).toEqual(eAttr.length);
       });
 
-      it('Clones correctly with traits', () => {
+      test('Clones correctly with traits', () => {
         obj
           .get('traits')
           .at(0)
@@ -67,7 +68,7 @@ module.exports = {
         expect(obj.get('stylable')).toEqual(true);
       });
 
-      it('Sets attributes correctly from traits', () => {
+      test('Sets attributes correctly from traits', () => {
         obj.set('traits', [
           {
             label: 'Title',
@@ -82,21 +83,21 @@ module.exports = {
         expect(obj.get('attributes')).toEqual({ title: 'The title' });
       });
 
-      it('Has expected name', () => {
+      test('Has expected name', () => {
         expect(obj.getName()).toEqual('Box');
       });
 
-      it('Has expected name 2', () => {
+      test('Has expected name 2', () => {
         obj.cid = 'c999';
         obj.set('type', 'testType');
         expect(obj.getName()).toEqual('TestType');
       });
 
-      it('Component toHTML', () => {
+      test('Component toHTML', () => {
         expect(obj.toHTML()).toEqual('<div></div>');
       });
 
-      it('Component toHTML with attributes', () => {
+      test('Component toHTML with attributes', () => {
         obj = new Component({
           tagName: 'article',
           attributes: {
@@ -109,7 +110,7 @@ module.exports = {
         );
       });
 
-      it('Component toHTML with value-less attribute', () => {
+      test('Component toHTML with value-less attribute', () => {
         obj = new Component({
           tagName: 'div',
           attributes: {
@@ -119,7 +120,7 @@ module.exports = {
         expect(obj.toHTML()).toEqual('<div data-is-a-test=""></div>');
       });
 
-      it('Component toHTML with classes', () => {
+      test('Component toHTML with classes', () => {
         obj = new Component({
           tagName: 'article'
         });
@@ -131,13 +132,13 @@ module.exports = {
         );
       });
 
-      it('Component toHTML with children', () => {
+      test('Component toHTML with children', () => {
         obj = new Component({ tagName: 'article' }, compOpts);
         obj.get('components').add({ tagName: 'span' });
         expect(obj.toHTML()).toEqual('<article><span></span></article>');
       });
 
-      it('Component toHTML with more children', () => {
+      test('Component toHTML with more children', () => {
         obj = new Component({ tagName: 'article' }, compOpts);
         obj.get('components').add([{ tagName: 'span' }, { tagName: 'div' }]);
         expect(obj.toHTML()).toEqual(
@@ -145,12 +146,12 @@ module.exports = {
         );
       });
 
-      it('Component toHTML with no closing tag', () => {
+      test('Component toHTML with no closing tag', () => {
         obj = new Component({ void: 1 });
         expect(obj.toHTML()).toEqual('<div/>');
       });
 
-      it('Component toHTML with quotes in attribute', () => {
+      test('Component toHTML with quotes in attribute', () => {
         obj = new Component();
         let attrs = obj.get('attributes');
         attrs['data-test'] = '"value"';
@@ -160,7 +161,7 @@ module.exports = {
         );
       });
 
-      it('Manage correctly boolean attributes', () => {
+      test('Manage correctly boolean attributes', () => {
         obj = new Component();
         obj.set('attributes', {
           'data-test': 'value',
@@ -173,19 +174,19 @@ module.exports = {
         );
       });
 
-      it('Component parse empty div', () => {
+      test('Component parse empty div', () => {
         var el = document.createElement('div');
         obj = Component.isComponent(el);
         expect(obj).toEqual({ tagName: 'div' });
       });
 
-      it('Component parse span', () => {
+      test('Component parse span', () => {
         var el = document.createElement('span');
         obj = Component.isComponent(el);
         expect(obj).toEqual({ tagName: 'span' });
       });
 
-      it('setClass single class string', () => {
+      test('setClass single class string', () => {
         obj.setClass('class1');
         const result = obj.get('classes').models;
         expect(result.length).toEqual(1);
@@ -193,73 +194,73 @@ module.exports = {
         expect(result[0].get('name')).toEqual('class1');
       });
 
-      it('setClass multiple class string', () => {
+      test('setClass multiple class string', () => {
         obj.setClass('class1 class2');
         const result = obj.get('classes').models;
         expect(result.length).toEqual(2);
       });
 
-      it('setClass single class array', () => {
+      test('setClass single class array', () => {
         obj.setClass(['class1']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(1);
       });
 
-      it('setClass multiple class array', () => {
+      test('setClass multiple class array', () => {
         obj.setClass(['class1', 'class2']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(2);
       });
 
-      it('addClass multiple array', () => {
+      test('addClass multiple array', () => {
         obj.addClass(['class1', 'class2']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(2);
       });
 
-      it('addClass avoid same name classes', () => {
+      test('addClass avoid same name classes', () => {
         obj.addClass(['class1', 'class2']);
         obj.addClass(['class1', 'class3']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(3);
       });
 
-      it('removeClass by string', () => {
+      test('removeClass by string', () => {
         obj.addClass(['class1', 'class2']);
         obj.removeClass('class2');
         const result = obj.get('classes').models;
         expect(result.length).toEqual(1);
       });
 
-      it('removeClass by string with multiple classes', () => {
+      test('removeClass by string with multiple classes', () => {
         obj.addClass(['class1', 'class2']);
         obj.removeClass('class2 class1');
         const result = obj.get('classes').models;
         expect(result.length).toEqual(0);
       });
 
-      it('removeClass by array', () => {
+      test('removeClass by array', () => {
         obj.addClass(['class1', 'class2']);
         obj.removeClass(['class1', 'class2']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(0);
       });
 
-      it('removeClass do nothing with undefined classes', () => {
+      test('removeClass do nothing with undefined classes', () => {
         obj.addClass(['class1', 'class2']);
         obj.removeClass(['class3']);
         const result = obj.get('classes').models;
         expect(result.length).toEqual(2);
       });
 
-      it('removeClass actually removes classes from attributes', () => {
+      test('removeClass actually removes classes from attributes', () => {
         obj.addClass('class1');
         obj.removeClass('class1');
         const result = obj.getAttributes();
         expect(result.class).toEqual(undefined);
       });
 
-      it('setAttributes', () => {
+      test('setAttributes', () => {
         obj.setAttributes({
           id: 'test',
           'data-test': 'value',
@@ -278,20 +279,20 @@ module.exports = {
         });
       });
 
-      it('setAttributes overwrites correctly', () => {
+      test('setAttributes overwrites correctly', () => {
         obj.setAttributes({ id: 'test', 'data-test': 'value' });
         obj.setAttributes({ 'data-test': 'value2' });
         expect(obj.getAttributes()).toEqual({ 'data-test': 'value2' });
       });
 
-      it('append() returns always an array', () => {
+      test('append() returns always an array', () => {
         let result = obj.append('<span>text1</span>');
         expect(result.length).toEqual(1);
         result = obj.append('<span>text1</span><div>text2</div>');
         expect(result.length).toEqual(2);
       });
 
-      it('append() new components as string', () => {
+      test('append() new components as string', () => {
         obj.append('<span>text1</span><div>text2</div>');
         const comps = obj.components();
         expect(comps.length).toEqual(2);
@@ -299,7 +300,7 @@ module.exports = {
         expect(comps.models[1].get('tagName')).toEqual('div');
       });
 
-      it('append() new components as Objects', () => {
+      test('append() new components as Objects', () => {
         obj.append([{}, {}]);
         const comps = obj.components();
         expect(comps.length).toEqual(2);
@@ -307,7 +308,7 @@ module.exports = {
         expect(comps.length).toEqual(3);
       });
 
-      it('components() set new collection', () => {
+      test('components() set new collection', () => {
         obj.append([{}, {}]);
         obj.components('<span>test</div>');
         const result = obj.components();
@@ -315,7 +316,7 @@ module.exports = {
         expect(result.models[0].get('tagName')).toEqual('span');
       });
 
-      it('Propagate properties to children', () => {
+      test('Propagate properties to children', () => {
         obj.append({ propagate: 'removable' });
         const result = obj.components();
         const newObj = result.models[0];
@@ -327,7 +328,7 @@ module.exports = {
         expect(child.get('propagate')).toEqual(['removable']);
       });
 
-      it('Ability to stop/change propagation chain', () => {
+      test('Ability to stop/change propagation chain', () => {
         obj.append({
           removable: false,
           draggable: false,
@@ -349,7 +350,7 @@ module.exports = {
           </div>
           <div id="comp02">TEST</div>`);
         const notInhereted = model => {
-          expect(model.get('stop')).toEqual(1);
+          expect(model.get('stop')).toEqual('1');
           expect(model.get('removable')).toEqual(true);
           expect(model.get('draggable')).toEqual(true);
           expect(model.get('propagate')).toEqual(['stop']);
@@ -378,20 +379,20 @@ module.exports = {
         obj = null;
       });
 
-      it('Has src property', () => {
+      test('Has src property', () => {
         expect(obj.has('src')).toEqual(true);
       });
 
-      it('Not droppable', () => {
-        expect(obj.get('droppable')).toEqual(false);
+      test('Not droppable', () => {
+        expect(obj.get('droppable')).toEqual(0);
       });
 
-      it('ComponentImage toHTML', () => {
+      test('ComponentImage toHTML', () => {
         obj = new ComponentImage();
         expect(obj.toHTML()).toEqual('<img/>');
       });
 
-      it('Component toHTML with attributes', () => {
+      test('Component toHTML with attributes', () => {
         obj = new ComponentImage({
           attributes: { alt: 'AltTest' },
           src: 'testPath'
@@ -399,19 +400,19 @@ module.exports = {
         expect(obj.toHTML()).toEqual('<img alt="AltTest" src="testPath"/>');
       });
 
-      it('Refuse not img element', () => {
+      test('Refuse not img element', () => {
         var el = document.createElement('div');
         obj = ComponentImage.isComponent(el);
         expect(obj).toEqual('');
       });
 
-      it('Component parse img element', () => {
+      test('Component parse img element', () => {
         var el = document.createElement('img');
         obj = ComponentImage.isComponent(el);
         expect(obj).toEqual({ type: 'image' });
       });
 
-      it('Component parse img element with src', () => {
+      test('Component parse img element with src', () => {
         var el = document.createElement('img');
         el.src = 'http://localhost/';
         obj = ComponentImage.isComponent(el);
@@ -428,15 +429,15 @@ module.exports = {
         obj = null;
       });
 
-      it('Has content property', () => {
+      test('Has content property', () => {
         expect(obj.has('content')).toEqual(true);
       });
 
-      it('Not droppable', () => {
+      test('Not droppable', () => {
         expect(obj.get('droppable')).toEqual(false);
       });
 
-      it('Component toHTML with attributes', () => {
+      test('Component toHTML with attributes', () => {
         obj = new ComponentText({
           attributes: { 'data-test': 'value' },
           content: 'test content'
@@ -450,24 +451,24 @@ module.exports = {
     describe('Link Component', () => {
       const aEl = document.createElement('a');
 
-      it('Component parse link element', () => {
+      test('Component parse link element', () => {
         obj = ComponentLink.isComponent(aEl);
         expect(obj).toEqual({ type: 'link' });
       });
 
-      it('Component parse link element with text content', () => {
+      test('Component parse link element with text content', () => {
         aEl.innerHTML = 'some text here ';
         obj = ComponentLink.isComponent(aEl);
         expect(obj).toEqual({ type: 'link' });
       });
 
-      it('Component parse link element with not only text content', () => {
+      test('Component parse link element with not only text content', () => {
         aEl.innerHTML = '<div>Some</div> text <div>here </div>';
         obj = ComponentLink.isComponent(aEl);
         expect(obj).toEqual({ type: 'link' });
       });
 
-      it('Component parse link element with only not text content', () => {
+      test('Component parse link element with only not text content', () => {
         aEl.innerHTML = `<div>Some</div>
         <div>text</div>
         <div>here </div>`;
@@ -475,7 +476,7 @@ module.exports = {
         expect(obj).toEqual({ type: 'link', editable: 0 });
       });
 
-      it('Link element with only an image inside is not editable', () => {
+      test('Link element with only an image inside is not editable', () => {
         aEl.innerHTML = '<img src="##"/>';
         obj = ComponentLink.isComponent(aEl);
         expect(obj).toEqual({ type: 'link', editable: 0 });
@@ -483,7 +484,7 @@ module.exports = {
     });
 
     describe('Map Component', () => {
-      it('Component parse map iframe', () => {
+      test('Component parse map iframe', () => {
         var src =
           'https://maps.google.com/maps?&q=London,UK&z=11&t=q&output=embed';
         var el = $('<iframe src="' + src + '"></iframe>');
@@ -491,7 +492,7 @@ module.exports = {
         expect(obj).toEqual({ type: 'map', src });
       });
 
-      it('Component parse not map iframe', () => {
+      test('Component parse not map iframe', () => {
         var el = $(
           '<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>'
         );
@@ -501,21 +502,21 @@ module.exports = {
     });
 
     describe('Video Component', () => {
-      it('Component parse video', () => {
+      test('Component parse video', () => {
         var src = 'http://localhost/';
         var el = $('<video src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
         expect(obj).toEqual({ type: 'video', src });
       });
 
-      it('Component parse youtube video iframe', () => {
+      test('Component parse youtube video iframe', () => {
         var src = 'http://www.youtube.com/embed/jNQXAC9IVRw?';
         var el = $('<iframe src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
         expect(obj).toEqual({ type: 'video', provider: 'yt', src });
       });
 
-      it('Component parse vimeo video iframe', () => {
+      test('Component parse vimeo video iframe', () => {
         var src = 'http://player.vimeo.com/video/2?';
         var el = $('<iframe src="' + src + '"></video>');
         obj = ComponentVideo.isComponent(el.get(0));
@@ -531,19 +532,19 @@ module.exports = {
         };
       });
 
-      it('Creates component correctly', () => {
+      test('Creates component correctly', () => {
         var c = new Components({}, compOpts);
         var m = c.add({});
         expect(m instanceof Component).toEqual(true);
       });
 
-      it('Creates image component correctly', () => {
+      test('Creates image component correctly', () => {
         var c = new Components({}, compOpts);
         var m = c.add({ type: 'image' });
         expect(m instanceof ComponentImage).toEqual(true);
       });
 
-      it('Creates text component correctly', () => {
+      test('Creates text component correctly', () => {
         var c = new Components({}, compOpts);
         var m = c.add({ type: 'text' });
         expect(m instanceof ComponentText).toEqual(true);

test/specs/dom_components/view/ComponentImageView.js

@@ -20,22 +20,22 @@ module.exports = {
         view.remove();
       });
 
-      it('Component empty', () => {
+      test('Component empty', () => {
         expect(view.el.getAttribute('onmousedown')).toEqual('return false');
         expect(view.el.getAttribute('class')).toEqual(view.classEmpty);
       });
 
-      it('TagName is <img>', () => {
+      test('TagName is <img>', () => {
         expect(view.el.tagName).toEqual('IMG');
       });
 
-      it('Update src attribute', () => {
+      test('Update src attribute', () => {
         model.set('src', './');
         expect(view.el.getAttribute('src')).toEqual('./');
       });
 
-      it('Renders correctly', () => {
-        expect(view.render()).toExist();
+      test('Renders correctly', () => {
+        expect(view.render()).toBeTruthy();
       });
     });
   }

test/specs/dom_components/view/ComponentTextView.js

@@ -22,20 +22,20 @@ module.exports = {
         view.remove();
       });
 
-      it('Component empty', () => {
+      test('Component empty', () => {
         expect(fixtures.innerHTML).toEqual(
           '<div data-gjs-type="default" data-highlightable="1"></div>'
         );
       });
 
-      it('Input content is stored in model', () => {
+      test('Input content is stored in model', () => {
         //view.enableEditing();
         view.el.innerHTML = 'test';
         //view.disableEditing();
         //model.get('content').should.equal('test');
       });
 
-      it('Init with content', () => {
+      test('Init with content', () => {
         model = new Component({ content: 'test' });
         view = new ComponentTextView({ model });
         fixtures.appendChild(view.render().el);

test/specs/dom_components/view/ComponentV.js

@@ -34,13 +34,13 @@ module.exports = {
         view.remove();
       });
 
-      it('Component empty', () => {
+      test('Component empty', () => {
         expect(fixtures.innerHTML).toEqual(
           '<div data-gjs-type="default" data-highlightable="1"></div>'
         );
       });
 
-      it('Add helper class on update of state', () => {
+      test('Add helper class on update of state', () => {
         model.set('state', 'test');
         expect(fixtures.innerHTML).toEqual(
           '<div data-gjs-type="default" data-highlightable="1" class="' +
@@ -49,7 +49,7 @@ module.exports = {
         );
       });
 
-      it('Clean form helper state', () => {
+      test('Clean form helper state', () => {
         model.set('state', 'test');
         model.set('state', '');
         expect(fixtures.innerHTML).toEqual(
@@ -57,19 +57,19 @@ module.exports = {
         );
       });
 
-      it('Add helper class on status update', () => {
+      test('Add helper class on status update', () => {
         model.set('status', 'selected');
         expect(fixtures.innerHTML).toEqual(
           '<div data-gjs-type="default" data-highlightable="1" class="selected"></div>'
         );
       });
 
-      it('Get string of classes', () => {
+      test('Get string of classes', () => {
         model.set('attributes', { class: ['test', 'test2'] });
         expect(view.getClasses()).toEqual('test test2');
       });
 
-      it('Update attributes', () => {
+      test('Update attributes', () => {
         model.set('attributes', {
           title: 'value',
           'data-test': 'value2'
@@ -78,7 +78,7 @@ module.exports = {
         expect(view.el.getAttribute('data-test')).toEqual('value2');
       });
 
-      it('Update style', () => {
+      test('Update style', () => {
         model.set('style', {
           color: 'red',
           float: 'left'
@@ -86,30 +86,30 @@ module.exports = {
         expect(view.el.getAttribute('style')).toEqual('color:red;float:left;');
       });
 
-      it('Clean style', () => {
+      test('Clean style', () => {
         model.set('style', { color: 'red' });
         model.set('style', {});
         expect(view.el.getAttribute('style')).toEqual(null);
       });
 
-      it('Add class', () => {
+      test('Add class', () => {
         model.get('classes').add({ name: 'test' });
         expect(view.el.getAttribute('class')).toEqual('test');
       });
 
-      it('Add classes', () => {
+      test('Add classes', () => {
         model.get('classes').add([{ name: 'test' }, { name: 'test2' }]);
         expect(view.el.getAttribute('class')).toEqual('test test2');
       });
 
-      it('Update on remove of some class', () => {
+      test('Update on remove of some class', () => {
         var cls1 = model.get('classes').add({ name: 'test' });
         var cls12 = model.get('classes').add({ name: 'test2' });
         model.get('classes').remove(cls1);
         expect(view.el.getAttribute('class')).toEqual('test2');
       });
 
-      it('Init with different tag', () => {
+      test('Init with different tag', () => {
         model = new Component({ tagName: 'span' });
         view = new ComponentView({ model });
         fixtures.innerHTML = '';
@@ -117,7 +117,7 @@ module.exports = {
         expect(view.render().el.tagName).toEqual('SPAN');
       });
 
-      it('Init with nested components', () => {
+      test('Init with nested components', () => {
         model = new Component(
           {
             components: [{ tagName: 'span' }, { attributes: { title: 'test' } }]
@@ -135,7 +135,7 @@ module.exports = {
         );
       });
 
-      it('removeClass removes classes from attributes', () => {
+      test('removeClass removes classes from attributes', () => {
         model.addClass('class1');
         model.removeClass('class1');
         const result = model.getAttributes();

test/specs/dom_components/view/ComponentsView.js

@@ -30,19 +30,19 @@ module.exports = {
         view.collection.reset();
       });
 
-      it('Collection is empty', () => {
-        expect(view.$el.html()).toNotExist();
+      test('Collection is empty', () => {
+        expect(view.$el.html()).toBeFalsy();
       });
 
-      it('Add new component', () => {
+      test('Add new component', () => {
         sinon.stub(view, 'addToCollection');
         view.collection.add({});
         expect(view.addToCollection.calledOnce).toEqual(true);
       });
 
-      it('Render new component', () => {
+      test('Render new component', () => {
         view.collection.add({});
-        expect(view.$el.html()).toExist();
+        expect(view.$el.html()).toBeTruthy();
       });
     });
   }

test/specs/grapesjs/index.js

@@ -23,7 +23,7 @@ describe('GrapesJS', () => {
       }
     };
 
-    before(() => {
+    beforeAll(() => {
       editorName = 'editor-fixture';
     });
 
@@ -55,16 +55,16 @@ describe('GrapesJS', () => {
       }
     });
 
-    it('Main object should be loaded', () => {
-      expect(obj).toExist();
+    test('Main object should be loaded', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('Init new editor', () => {
+    test('Init new editor', () => {
       var editor = obj.init(config);
-      expect(editor).toExist();
+      expect(editor).toBeTruthy();
     });
 
-    it('Init new editor with node for container', () => {
+    test('Init new editor with node for container', () => {
       var configAlt = {
         container: document.createElement('div'),
         storageManager: {
@@ -73,47 +73,47 @@ describe('GrapesJS', () => {
         }
       };
       var editor = obj.init(configAlt);
-      expect(editor).toExist();
+      expect(editor).toBeTruthy();
     });
 
-    it('New editor is empty', () => {
+    test('New editor is empty', () => {
       var editor = obj.init(config);
       var html = editor.getHtml();
       //var css = editor.getCss();
       var protCss = editor.getConfig().protectedCss;
-      expect(html ? html : '').toNotExist();
+      expect(html ? html : '').toBeFalsy();
       //expect((css ? css : '')).toEqual(protCss);
       expect(editor.getComponents().length).toEqual(0);
       expect(editor.getStyle().length).toEqual(0);
     });
 
-    it('Editor canvas baseCSS can be overwritten', () => {
+    test('Editor canvas baseCSS can be overwritten', () => {
       config.components = htmlString;
       config.baseCss = '#wrapper { background-color: #eee; }';
       config.protectedCss = '';
 
       var editor = obj.init(config);
 
-      expect(window.frames[0].document.documentElement.outerHTML).toInclude(
+      expect(window.frames[0].document.documentElement.outerHTML).toContain(
         config.baseCss
       );
-      expect(window.frames[0].document.documentElement.outerHTML)
-        .toNotInclude(`body {
-      margin: 0;`);
+      expect(
+        window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ` `)
+      ).not.toContain(`body { margin: 0;`);
     });
 
-    it('Editor canvas baseCSS defaults to sensible values if not defined', () => {
+    test('Editor canvas baseCSS defaults to sensible values if not defined', () => {
       config.components = htmlString;
       config.protectedCss = '';
 
       var editor = obj.init(config);
 
-      expect(window.frames[0].document.documentElement.outerHTML)
-        .toInclude(`body {
-      margin: 0;`);
+      expect(
+        window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ` `)
+      ).toContain(`body { margin: 0;`);
     });
 
-    it('Init editor with html', () => {
+    test('Init editor with html', () => {
       config.components = htmlString;
       var editor = obj.init(config);
       var comps = editor.DomComponents.getComponents();
@@ -127,7 +127,7 @@ describe('GrapesJS', () => {
       ).toEqual('test1');
     });
 
-    it('Init editor with css', () => {
+    test('Init editor with css', () => {
       config.style = cssString;
       var editor = obj.init(config);
       var rules = editor.CssComposer.getAll();
@@ -141,7 +141,7 @@ describe('GrapesJS', () => {
       ).toEqual('test2');
     });
 
-    it('Init editor from element', () => {
+    test('Init editor from element', () => {
       config.fromElement = 1;
       config.storageManager = { type: 0 };
       fixture.innerHTML = documentEl;
@@ -157,7 +157,7 @@ describe('GrapesJS', () => {
       expect(editor.getStyle().length).toEqual(2);
     });
 
-    it('Init editor from element with multiple font-face at-rules', () => {
+    test('Init editor from element with multiple font-face at-rules', () => {
       config.fromElement = 1;
       config.storageManager = { type: 0 };
       fixture.innerHTML =
@@ -178,19 +178,19 @@ describe('GrapesJS', () => {
       expect(styles.length).toEqual(2);
     });
 
-    it('Set components as HTML', () => {
+    test('Set components as HTML', () => {
       var editor = obj.init(config);
       editor.setComponents(htmlString);
       expect(editor.getComponents().length).toEqual(2);
     });
 
-    it('Set components as array of objects', () => {
+    test('Set components as array of objects', () => {
       var editor = obj.init(config);
       editor.setComponents([{}, {}, {}]);
       expect(editor.getComponents().length).toEqual(3);
     });
 
-    it('Set style as CSS', () => {
+    test('Set style as CSS', () => {
       var editor = obj.init(config);
       editor.setStyle(cssString);
       editor.setStyle(cssString);
@@ -205,7 +205,7 @@ describe('GrapesJS', () => {
       ).toEqual('test3');
     });
 
-    it('Set style as as array of objects', () => {
+    test('Set style as as array of objects', () => {
       var editor = obj.init(config);
       editor.setStyle([{ selectors: ['test4'] }, { selectors: ['test5'] }]);
       var styles = editor.getStyle();
@@ -219,7 +219,7 @@ describe('GrapesJS', () => {
       ).toEqual('test5');
     });
 
-    it.skip('Adds new storage as plugin and store data there', done => {
+    test.skip('Adds new storage as plugin and store data there', done => {
       const pluginName = storageId + '-p2';
       obj.plugins.add(pluginName, e =>
         e.StorageManager.add(storageId, storageMock)
@@ -236,7 +236,7 @@ describe('GrapesJS', () => {
       });
     });
 
-    it('Adds a new storage and fetch correctly data from it', done => {
+    test('Adds a new storage and fetch correctly data from it', done => {
       fixture.innerHTML = documentEl;
       const styleResult = { color: 'white', display: 'block' };
       const style = [
@@ -275,7 +275,7 @@ describe('GrapesJS', () => {
       });
     });
 
-    it('Execute plugins with custom options', () => {
+    test('Execute plugins with custom options', () => {
       var pluginName = storageId + '-plugin-opts';
       obj.plugins.add(pluginName, (edt, opts) => {
         var opts = opts || {};
@@ -288,7 +288,7 @@ describe('GrapesJS', () => {
       expect(editor.customValue).toEqual('TEST');
     });
 
-    it('Execute custom command', () => {
+    test('Execute custom command', () => {
       var editor = obj.init(config);
       editor.testVal = '';
       editor.setComponents(htmlString);
@@ -301,7 +301,7 @@ describe('GrapesJS', () => {
       expect(editor.testVal).toEqual(htmlString + '5');
     });
 
-    it('Stop custom command', () => {
+    test('Stop custom command', () => {
       var editor = obj.init(config);
       editor.testVal = '';
       editor.setComponents(htmlString);
@@ -314,7 +314,7 @@ describe('GrapesJS', () => {
       expect(editor.testVal).toEqual(htmlString + '5');
     });
 
-    it('Trigger custom command events', () => {
+    test('Trigger custom command events', () => {
       const id = 'test-command';
       const editor = obj.init(config);
       const result = {};
@@ -340,7 +340,7 @@ describe('GrapesJS', () => {
       });
     });
 
-    it('Set default devices', () => {
+    test('Set default devices', () => {
       config.deviceManager = {};
       config.deviceManager.devices = [
         { name: '1', width: '2' },
@@ -350,19 +350,19 @@ describe('GrapesJS', () => {
       expect(editor.DeviceManager.getAll().length).toEqual(2);
     });
 
-    it('There is no active device', () => {
+    test('There is no active device', () => {
       var editor = obj.init(config);
-      expect(editor.getDevice()).toNotExist();
+      expect(editor.getDevice()).toBeFalsy();
     });
 
-    it('Active another device', () => {
+    test('Active another device', () => {
       var editor = obj.init(config);
       editor.setDevice('Tablet');
       expect(editor.getDevice()).toEqual('Tablet');
     });
 
     // Problems with iframe loading
-    it('Init new editor with custom plugin overrides default commands', () => {
+    test('Init new editor with custom plugin overrides default commands', () => {
       var editor,
         pluginName = 'test-plugin-opts';
 
@@ -377,7 +377,7 @@ describe('GrapesJS', () => {
       expect(editor.Commands.get('export-template').test).toEqual(1);
     });
 
-    it('Keep unused css classes/selectors option for getCSS method', () => {
+    test('Keep unused css classes/selectors option for getCSS method', () => {
       config.fromElement = 1;
       config.storageManager = { type: 0 };
       fixture.innerHTML = documentEl;
@@ -388,7 +388,7 @@ describe('GrapesJS', () => {
       expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
     });
 
-    it('Keep unused css classes/selectors option for media rules', () => {
+    test('Keep unused css classes/selectors option for media rules', () => {
       cssString =
         '.test2{color:red}.test3{color:blue} @media only screen and (max-width: 620px) { .notused { color: red; } } ';
       documentEl = '<style>' + cssString + '</style>' + htmlString;
@@ -404,7 +404,7 @@ describe('GrapesJS', () => {
       );
     });
 
-    it('Keep unused css classes/selectors option for init method', () => {
+    test('Keep unused css classes/selectors option for init method', () => {
       config.fromElement = 1;
       config.storageManager = { type: 0 };
       fixture.innerHTML = documentEl;

test/specs/keymaps/index.js

@@ -11,16 +11,16 @@ describe('Keymaps', () => {
       obj = new Keymaps().init({ em });
     });
 
-    it('Object exists', () => {
-      expect(obj).toExist();
+    test('Object exists', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('No keymaps inside', () => {
+    test('No keymaps inside', () => {
       var coll = obj.getAll();
       expect(coll).toEqual({});
     });
 
-    it('Add new keymap', () => {
+    test('Add new keymap', () => {
       const id = 'test';
       const keys = 'ctrl+a';
       const handler = () => {};
@@ -28,14 +28,14 @@ describe('Keymaps', () => {
       expect(obj.get(id)).toEqual({ id, keys, handler });
     });
 
-    it('Add keymap event triggers', () => {
+    test('Add keymap event triggers', () => {
       let called = 0;
       em.on('keymap:add', () => (called = 1));
       const model = obj.add('tes', 'ctrl+a');
       expect(called).toEqual(1);
     });
 
-    it('Remove keymap', () => {
+    test('Remove keymap', () => {
       const id = 'test';
       const keys = 'ctrl+a';
       const handler = () => {};
@@ -46,7 +46,7 @@ describe('Keymaps', () => {
       expect(removed).toEqual({ id, keys, handler });
     });
 
-    it('Remove keymap event triggers', () => {
+    test('Remove keymap event triggers', () => {
       let called = 0;
       em.on('keymap:remove', () => (called = 1));
       const model = obj.add('tes', 'ctrl+a');

test/specs/modal/index.js

@@ -13,43 +13,43 @@ describe('Modal dialog', () => {
       obj = null;
     });
 
-    it('Object exists', () => {
-      expect(obj).toExist();
+    test('Object exists', () => {
+      expect(obj).toBeTruthy();
     });
 
-    it('Is close by default', () => {
+    test('Is close by default', () => {
       expect(obj.isOpen()).toEqual(false);
     });
 
-    it('Title is empty', () => {
+    test('Title is empty', () => {
       expect(obj.getTitle()).toEqual('');
     });
 
-    it('Content is empty', () => {
+    test('Content is empty', () => {
       expect(obj.getContent()).toEqual('');
     });
 
-    it('Set title', () => {
+    test('Set title', () => {
       obj.setTitle('Test');
       expect(obj.getTitle()).toEqual('Test');
     });
 
-    it('Set content', () => {
+    test('Set content', () => {
       obj.setContent('Test');
       expect(obj.getContent()).toEqual('Test');
     });
 
-    it('Set HTML content', () => {
+    test('Set HTML content', () => {
       obj.setContent('<h1>Test</h1>');
       expect(obj.getContent()).toEqual('<h1>Test</h1>');
     });
 
-    it('Open modal', () => {
+    test('Open modal', () => {
       obj.open();
       expect(obj.isOpen()).toEqual(true);
     });
 
-    it('Close modal', () => {
+    test('Close modal', () => {
       obj.open();
       obj.close();
       expect(obj.isOpen()).toEqual(false);