Up test TS

src/dom_components/index.ts

@@ -121,7 +121,7 @@ export type ComponentEvent =
   | 'component:resize';
 
 export interface ComponentModelDefinition extends IComponent {
-  defaults?: ComponentDefinition;
+  defaults?: ComponentDefinition | (() => ComponentDefinition);
   [key: string]: any;
 }
 
@@ -410,7 +410,7 @@ export default class ComponentManager extends ItemManagerModule<DomComponentsCon
    *   attributes: { title: 'here' }
    * });
    */
-  addComponent(component: ComponentAdd, opt: AddOptions = {}) {
+  addComponent(component: ComponentAdd, opt: AddOptions = {}): Component | Component[] {
     return this.getComponents().add(component, opt);
   }
 

test/specs/commands/index.ts

@@ -1,14 +1,15 @@
 import Backbone from 'backbone';
 import Commands from '../../../src/commands';
 import EditorModel from '../../../src/editor/model/Editor';
+import { Command, CommandFunction } from '../../../src/commands/view/CommandAbstract';
 
 describe('Commands', () => {
   describe('Main', () => {
     let em: EditorModel;
     let obj: Commands;
-    let commSimple;
-    let commRunOnly;
-    let commFunc;
+    let commSimple: Command;
+    let commRunOnly: Command;
+    let commFunc: CommandFunction;
     let commName = 'commandTest';
     let commResultRun = 'Run executed';
     let commResultStop = 'Stop executed';

test/specs/css_composer/index.ts

@@ -6,7 +6,7 @@ describe('Css Composer', () => {
   describe('Main', () => {
     let obj: CssComposer;
     let em: Editor;
-    let config;
+    let config: any;
     let storagMock = utils.storageMock();
     let editorModel = {
       getCss() {
@@ -28,7 +28,7 @@ describe('Css Composer', () => {
       config.em = editorModel;
     };
 
-    const getCSS = obj =>
+    const getCSS = (obj: CssComposer) =>
       obj
         .getAll()
         .map(r => r.toCSS())

test/specs/dom_components/index.ts

@@ -3,12 +3,13 @@ import Components from '../../../src/dom_components/model/Components';
 import EditorModel from '../../../src/editor/model/Editor';
 import Editor from '../../../src/editor';
 import utils from './../../test_utils.js';
+import { Component } from '../../../src';
 
 describe('DOM Components', () => {
   describe('Main', () => {
     var em: EditorModel;
     var obj: DomComponents;
-    var config;
+    var config: any;
     var storagMock = utils.storageMock();
     var editorModel = {
       config: {
@@ -122,21 +123,21 @@ describe('DOM Components', () => {
     });
 
     test('Import propertly components and styles with the same ids', () => {
-      obj = em.get('DomComponents');
-      const cc = em.get('CssComposer');
+      obj = em.Components;
+      const cc = em.Css;
       const id = 'idtest';
       const component = obj.addComponent(`
       <div id="${id}" style="color:red; padding: 50px 100px">Text</div>
       <style>
         #${id} { background-color: red }
-      </style>`);
+      </style>`) as Component;
       expect(em.getHtml({ component })).toEqual(`<div id="${id}">Text</div>`);
       expect(obj.getComponents().length).toEqual(1);
       const firstComp = obj.getComponents().first();
       firstComp.addStyle({ margin: '10px' });
       firstComp.addStyle('width', '100px');
       expect(cc.getAll().length).toEqual(1);
-      expect(cc.getIdRule(id).getStyle()).toEqual({
+      expect(cc.getIdRule(id)!.getStyle()).toEqual({
         color: 'red',
         'background-color': 'red',
         padding: '50px 100px',
@@ -249,7 +250,7 @@ describe('DOM Components', () => {
       <div id="${id}" style="color:red; padding: 50px 100px">Text</div>
       <style>
         #${id} { background-color: red }
-      </style>`);
+      </style>`) as Component;
       obj.getComponents().first().addStyle({ margin: '10px' });
       const rule = cc.getAll().at(0);
       const css = `#${id}{background-color:red;margin:10px;color:red;padding:50px 100px;}`;
@@ -293,14 +294,14 @@ describe('DOM Components', () => {
       });
 
       test('Custom style properly added', () => {
-        const cmp = obj.addComponent({ type: cmpId });
+        const cmp = obj.addComponent({ type: cmpId }) as Component;
         expect(cmp.is(cmpId)).toBe(true);
         const rule = em.Css.getRule(`.${cmpId}`);
         expect(rule?.getStyle()).toEqual({ color: 'red' });
       });
 
       test('Clean custom style when the related component is removed', () => {
-        const cmp = obj.addComponent({ type: cmpId });
+        const cmp = obj.addComponent({ type: cmpId }) as Component;
         expect(obj.getComponents().length).toBe(1);
         expect(em.Css.getAll().length).toBe(1);
         cmp.remove();

test/specs/dom_components/model/Component.ts

@@ -11,15 +11,15 @@ import Selector from '../../../../src/selector_manager/model/Selector';
 import Editor from '../../../../src/editor/model/Editor';
 const $ = Backbone.$;
 
-let obj;
-let dcomp;
-let compOpts;
-let em;
+let obj: Component;
+let dcomp: Editor['Components'];
+let compOpts: any;
+let em: Editor;
 
 describe('Component', () => {
   beforeEach(() => {
     em = new Editor({ avoidDefaults: true });
-    dcomp = em.get('DomComponents');
+    dcomp = em.Components;
     em.get('PageManager').onLoad();
     compOpts = {
       em,
@@ -29,12 +29,8 @@ describe('Component', () => {
     obj = new Component({}, compOpts);
   });
 
-  afterEach(() => {
-    obj = null;
-  });
-
   test('Has no children', () => {
-    expect(obj.get('components').length).toEqual(0);
+    expect(obj.components().length).toEqual(0);
   });
 
   test('Clones correctly', () => {
@@ -42,18 +38,18 @@ describe('Component', () => {
     var cloned = obj.clone();
     var eAttr = cloned.attributes;
     eAttr.components = {};
-    sAttr.components = {};
+    sAttr.components = {} as any;
     eAttr.traits = {};
-    sAttr.traits = {};
+    sAttr.traits = {} as any;
     expect(sAttr.length).toEqual(eAttr.length);
   });
 
   test('Clones correctly with traits', () => {
-    obj.get('traits').at(0).set('value', 'testTitle');
+    obj.traits.at(0).set('value', 'testTitle');
     var cloned = obj.clone();
     cloned.set('stylable', 0);
-    cloned.get('traits').at(0).set('value', 'testTitle2');
-    expect(obj.get('traits').at(0).get('value')).toEqual('testTitle');
+    cloned.traits.at(0).set('value', 'testTitle2');
+    expect(obj.traits.at(0).get('value')).toEqual('testTitle');
     expect(obj.get('stylable')).toEqual(true);
   });
 
@@ -68,7 +64,7 @@ describe('Component', () => {
         label: 'Context',
         value: 'primary',
       },
-    ]);
+    ] as any);
     expect(obj.get('attributes')).toEqual({ title: 'The title' });
   });
 
@@ -121,20 +117,20 @@ describe('Component', () => {
       compOpts
     );
     ['class1', 'class2'].forEach(item => {
-      obj.get('classes').add({ name: item });
+      obj.classes.add({ name: item });
     });
     expect(obj.toHTML()).toEqual('<article class="class1 class2"></article>');
   });
 
   test('Component toHTML with children', () => {
     obj = new Component({ tagName: 'article' }, compOpts);
-    obj.get('components').add({ tagName: 'span' });
+    obj.components().add({ tagName: 'span' });
     expect(obj.toHTML()).toEqual('<article><span></span></article>');
   });
 
   test('Component toHTML with more children', () => {
     obj = new Component({ tagName: 'article' }, compOpts);
-    obj.get('components').add([{ tagName: 'span' }, { tagName: 'div' }]);
+    obj.components().add([{ tagName: 'span' }, { tagName: 'div' }]);
     expect(obj.toHTML()).toEqual('<article><span></span><div></div></article>');
   });
 
@@ -145,7 +141,7 @@ describe('Component', () => {
 
   test('Component toHTML with quotes in attribute', () => {
     obj = new Component({}, compOpts);
-    let attrs = obj.get('attributes');
+    let attrs = obj.get('attributes')!;
     attrs['data-test'] = '"value"';
     obj.set('attributes', attrs);
     expect(obj.toHTML()).toEqual('<div data-test="&quot;value&quot;"></div>');
@@ -189,20 +185,20 @@ describe('Component', () => {
   });
 
   test('Component parse empty div', () => {
-    var el = document.createElement('div');
-    obj = Component.isComponent(el);
-    expect(obj).toEqual({ tagName: 'div' });
+    const el = document.createElement('div');
+    const res = Component.isComponent(el);
+    expect(res).toEqual({ tagName: 'div' });
   });
 
   test('Component parse span', () => {
-    var el = document.createElement('span');
-    obj = Component.isComponent(el);
-    expect(obj).toEqual({ tagName: 'span' });
+    const el = document.createElement('span');
+    const res = Component.isComponent(el);
+    expect(res).toEqual({ tagName: 'span' });
   });
 
   test('setClass single class string', () => {
     obj.setClass('class1');
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(1);
     expect(result[0] instanceof Selector).toEqual(true);
     expect(result[0].get('name')).toEqual('class1');
@@ -210,60 +206,60 @@ describe('Component', () => {
 
   test('setClass multiple class string', () => {
     obj.setClass('class1 class2');
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(2);
   });
 
   test('setClass single class array', () => {
     obj.setClass(['class1']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(1);
   });
 
   test('setClass multiple class array', () => {
     obj.setClass(['class1', 'class2']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(2);
   });
 
   test('addClass multiple array', () => {
     obj.addClass(['class1', 'class2']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(2);
   });
 
   test('addClass avoid same name classes', () => {
     obj.addClass(['class1', 'class2']);
     obj.addClass(['class1', 'class3']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(3);
   });
 
   test('removeClass by string', () => {
     obj.addClass(['class1', 'class2']);
     obj.removeClass('class2');
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(1);
   });
 
   test('removeClass by string with multiple classes', () => {
     obj.addClass(['class1', 'class2']);
     obj.removeClass('class2 class1');
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(0);
   });
 
   test('removeClass by array', () => {
     obj.addClass(['class1', 'class2']);
     obj.removeClass(['class1', 'class2']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(0);
   });
 
   test('removeClass do nothing with undefined classes', () => {
     obj.addClass(['class1', 'class2']);
     obj.removeClass(['class3']);
-    const result = obj.get('classes').models;
+    const result = obj.classes.models;
     expect(result.length).toEqual(2);
   });
 
@@ -287,7 +283,7 @@ describe('Component', () => {
       style: 'color:white;background:#fff;',
       'data-test': 'value',
     });
-    expect(obj.get('classes').length).toEqual(2);
+    expect(obj.classes.length).toEqual(2);
     expect(obj.getStyle()).toEqual({
       color: 'white',
       background: '#fff',
@@ -351,7 +347,7 @@ describe('Component', () => {
         <div>Comp 2</div>
         <div>Comp 3</div>
       </div>
-    `);
+    `) as Component;
     const comp1 = added.components().at(0);
     comp1.remove();
     added.append(comp1);
@@ -369,11 +365,11 @@ describe('Component', () => {
           color: red;
         }
       </style>
-    `);
+    `) as Component[];
     const comp1 = added[0];
     const comp2 = added[1];
     const comp1Id = comp1.getId();
-    const comp2Sel = comp2._getStyleSelector();
+    const comp2Sel = comp2._getStyleSelector()!;
     expect(comp2Sel.get('name')).toEqual(idName);
     const idNameNew = `${idName}2`;
     comp2.setId(idNameNew);
@@ -405,14 +401,14 @@ describe('Component', () => {
         </div>
       </div>
       <div id="comp02">TEST</div>`);
-    const notInhereted = model => {
+    const notInhereted = (model: Component) => {
       expect(model.get('stop')).toEqual('1');
       expect(model.get('removable')).toEqual(true);
       expect(model.get('draggable')).toEqual(true);
       expect(model.get('propagate')).toEqual(['stop']);
       model.components().each(model => inhereted(model));
     };
-    const inhereted = model => {
+    const inhereted = (model: Component) => {
       if (model.get('stop')) {
         notInhereted(model);
       } else {
@@ -454,10 +450,6 @@ describe('Image Component', () => {
     obj = new ComponentImage();
   });
 
-  afterEach(() => {
-    obj = null;
-  });
-
   test('Has src property', () => {
     expect(obj.has('src')).toEqual(true);
   });
@@ -504,10 +496,6 @@ describe('Text Component', () => {
     obj = new ComponentText({}, compOpts);
   });
 
-  afterEach(() => {
-    obj = null;
-  });
-
   test('Has content property', () => {
     expect(obj.has('content')).toEqual(true);
   });
@@ -533,10 +521,6 @@ describe('Text Node Component', () => {
     obj = new ComponentTextNode({}, compOpts);
   });
 
-  afterEach(() => {
-    obj = null;
-  });
-
   test('Has content property', () => {
     expect(obj.has('content')).toEqual(true);
   });
@@ -600,14 +584,14 @@ describe('Map Component', () => {
   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>');
-    obj = ComponentMap.isComponent(el.get(0) as HTMLIFrameElement);
-    expect(obj).toEqual({ type: 'map', src });
+    const res = ComponentMap.isComponent(el.get(0) as HTMLIFrameElement);
+    expect(res).toEqual({ type: 'map', src });
   });
 
   test('Component parse not map iframe', () => {
     var el = $('<iframe src="https://www.youtube.com/watch?v=jNQXAC9IVRw"></iframe>');
-    obj = ComponentMap.isComponent(el.get(0) as HTMLIFrameElement);
-    expect(obj).toEqual(undefined);
+    const res = ComponentMap.isComponent(el.get(0) as HTMLIFrameElement);
+    expect(res).toEqual(undefined);
   });
 });
 
@@ -685,7 +669,7 @@ describe('Components', () => {
         }
       </style>
     `;
-    const added = dcomp.addComponent(block);
+    const added = dcomp.addComponent(block) as Component;
     const addComps = added.components();
     // Let's check if everthing is working as expected
     expect(Object.keys(dcomp.componentsById).length).toBe(3); // + 1 wrapper
@@ -698,7 +682,7 @@ describe('Components', () => {
     expect(rules.at(1).selectorsToString()).toBe(`#${id}:hover`);
     expect(rules.at(2).selectorsToString()).toBe(`#${idB}`);
     // Now let's add the same block
-    const added2 = dcomp.addComponent(block);
+    const added2 = dcomp.addComponent(block) as Component;
     const addComps2 = added2.components();
     const id2 = added2.getId();
     const newId = `${id}-2`;

test/specs/dom_components/view/ComponentTextView.ts

@@ -1,14 +1,15 @@
 import ComponentTextView from '../../../../src/dom_components/view/ComponentTextView';
 import Component from '../../../../src/dom_components/model/Component';
 import Editor from '../../../../src/editor/model/Editor';
+import { CustomRTE } from '../../../../src/rich_text_editor/config/config';
 
 describe('ComponentTextView', () => {
-  let fixtures;
+  let fixtures: HTMLElement;
   let model;
-  let view;
-  let el;
+  let view: ComponentTextView;
+  let el: HTMLElement;
   let dcomp;
-  let compOpts;
+  let compOpts: any;
   let em: Editor;
 
   beforeEach(() => {
@@ -26,7 +27,7 @@ describe('ComponentTextView', () => {
       config: { ...em.config, em },
     });
     document.body.innerHTML = '<div id="fixtures"></div>';
-    fixtures = document.body.querySelector('#fixtures');
+    fixtures = document.body.querySelector('#fixtures')!;
     el = view.render().el;
     fixtures.appendChild(el);
   });
@@ -56,12 +57,16 @@ describe('ComponentTextView', () => {
   });
 
   describe('.getContent', () => {
-    let fakeRte, fakeRteContent, fakeChildContainer;
+    let fakeRte: CustomRTE<any>;
+    let fakeRteContent = '';
+    let fakeChildContainer: InnerHTML;
 
     beforeEach(() => {
       fakeRteContent = 'fakeRteContent';
 
       fakeRte = {
+        enable() {},
+        disable() {},
         getContent: jest.fn(() => fakeRteContent),
       };
 
@@ -74,7 +79,7 @@ describe('ComponentTextView', () => {
     });
 
     it('should get content from active RTE if available', async () => {
-      view.activeRte = {};
+      view.activeRte = {} as any;
       expect(await view.getContent()).toEqual(fakeRteContent);
       expect(fakeRte.getContent).toHaveBeenCalled();
     });
@@ -82,8 +87,8 @@ describe('ComponentTextView', () => {
     it("should get child container's `innerHTML` if active RTE is not available or if it has no `getContent` function", async () => {
       expect(await view.getContent()).toEqual(fakeChildContainer.innerHTML);
 
-      fakeRte.getContent = null;
-      view.activeRte = {};
+      delete fakeRte.getContent;
+      view.activeRte = {} as any;
       expect(await view.getContent()).toEqual(fakeChildContainer.innerHTML);
 
       expect(view.getChildrenContainer).toHaveBeenCalledTimes(2);

test/specs/editor/index.js → test/specs/editor/index.ts

@@ -1,10 +1,10 @@
-import Editor from 'editor';
+import Editor from '../../../src/editor';
 
 const { keys } = Object;
 const initComps = 1;
 
 describe('Editor', () => {
-  let editor;
+  let editor: Editor;
 
   beforeEach(() => {
     editor = new Editor();
@@ -47,14 +47,14 @@ describe('Editor', () => {
 
   test('Components are correctly tracked on add', () => {
     const all = editor.Components.allById();
-    const wrapper = editor.getWrapper();
+    const wrapper = editor.getWrapper()!;
     wrapper.append('<div>Component</div>'); // Div component + textnode
     expect(keys(all).length).toBe(2 + initComps);
   });
 
   test('Components are correctly tracked on add and remove', () => {
     const all = editor.Components.allById();
-    const wrapper = editor.getWrapper();
+    const wrapper = editor.getWrapper()!;
     const added = wrapper.append(`
         <div>Component 1</div>
         <div></div>
@@ -75,9 +75,9 @@ describe('Editor', () => {
     const all = editor.Components.allById();
     const um = editor.UndoManager;
     const umStack = um.getStack();
-    const wrapper = editor.getWrapper();
+    const wrapper = editor.getWrapper()!;
     expect(umStack.length).toBe(0);
-    const comp = wrapper.append('<div>Component 1</div>')[0];
+    wrapper.append('<div>Component 1</div>')[0];
     expect(umStack.length).toBe(1);
     wrapper.empty();
     expect(umStack.length).toBe(2);
@@ -90,7 +90,7 @@ describe('Editor', () => {
     const all = editor.Components.allById();
     const um = editor.UndoManager;
     const umStack = um.getStack();
-    const wrapper = editor.getWrapper();
+    const wrapper = editor.getWrapper()!;
     expect(umStack.length).toBe(0);
     wrapper.append(`<div>
         <div>Component 1</div>

test/specs/grapesjs/index.ts

@@ -1,22 +1,23 @@
-import grapesjs, { usePlugin } from '../../../src';
+import grapesjs, { Component, Editor, usePlugin } from '../../../src';
+import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';
 import type { Plugin } from '../../../src/plugin_manager';
 
 type TestPlugin = Plugin<{ cVal: string }>;
 
 describe('GrapesJS', () => {
   describe('Main', () => {
-    let fixtures;
-    let fixture;
-    let editorName;
-    let htmlString;
-    let config;
-    let cssString;
-    let documentEl;
-
-    let storage;
+    let fixtures: HTMLElement;
+    let fixture: HTMLElement;
+    let editorName = '';
+    let htmlString = '';
+    let config: any;
+    let cssString = '';
+    let documentEl = '';
+
+    let storage: any;
     let storageId = 'testStorage';
     let storageMock = {
-      async store(data) {
+      async store(data: any) {
         storage = data;
       },
       load() {
@@ -43,8 +44,8 @@ describe('GrapesJS', () => {
         },
       };
       document.body.innerHTML = `<div id="fixtures"><div id="${editorName}"></div></div>`;
-      fixtures = document.body.querySelector('#fixtures');
-      fixture = document.body.querySelector(`#${editorName}`);
+      fixtures = document.body.querySelector('#fixtures')!;
+      fixture = document.body.querySelector(`#${editorName}`)!;
     });
 
     afterEach(() => {
@@ -310,7 +311,7 @@ describe('GrapesJS', () => {
         const editor = grapesjs.init(config);
         editor.setComponents(htmlString);
         editor.store(() => {
-          editor.load(data => {
+          editor.load((data: any) => {
             expect(data.html).toEqual(htmlString);
             done();
           });
@@ -368,7 +369,7 @@ describe('GrapesJS', () => {
       });
 
       test('Execute inline plugins with custom options', () => {
-        const inlinePlugin = (edt, opts) => {
+        const inlinePlugin: Plugin<any> = (edt, opts) => {
           var opts = opts || {};
           edt.getModel().set('customValue', opts.cVal || '');
         };
@@ -380,7 +381,7 @@ describe('GrapesJS', () => {
       });
 
       test('Execute inline plugins without any options', () => {
-        const inlinePlugin = edt => {
+        const inlinePlugin: Plugin = edt => {
           edt.getModel().set('customValue', 'TEST');
         };
         config.plugins = [inlinePlugin];
@@ -390,10 +391,11 @@ describe('GrapesJS', () => {
       });
 
       test('Use plugins defined on window, with custom options', () => {
-        (window as any).globalPlugin = (edt, opts) => {
+        const plg: Plugin<any> = (edt, opts) => {
           var opts = opts || {};
           edt.getModel().set('customValue', opts.cVal || '');
         };
+        (window as any).globalPlugin = plg;
         config.plugins = ['globalPlugin'];
         config.pluginsOpts = {};
         config.pluginsOpts['globalPlugin'] = { cVal: 'TEST' };
@@ -414,7 +416,7 @@ describe('GrapesJS', () => {
         config.plugins = [pluginName];
 
         editor = grapesjs.init(config);
-        expect(editor.Commands.get('export-template').test).toEqual(1);
+        expect(editor.Commands.get('export-template')!.test).toEqual(1);
       });
 
       describe('usePlugin', () => {
@@ -449,9 +451,10 @@ describe('GrapesJS', () => {
           let varToTest = '';
           const optionValue = 'TEST-global';
           const pluginName = 'globalPlugin';
-          (window as any)[pluginName] = (edt, opts) => {
+          const plg: Plugin<any> = (edt, opts) => {
             varToTest = opts.cVal;
           };
+          (window as any)[pluginName] = plg;
           grapesjs.init({
             ...config,
             plugins: [usePlugin(pluginName, { cVal: optionValue })],
@@ -462,7 +465,11 @@ describe('GrapesJS', () => {
     });
 
     describe('Component selection', () => {
-      let editor, wrapper, el1, el2, el3;
+      let editor: Editor;
+      let wrapper: ComponentWrapper;
+      let el1: Component;
+      let el2: Component;
+      let el3: Component;
 
       beforeEach(() => {
         config.storageManager = { type: 0 };
@@ -472,7 +479,7 @@ describe('GrapesJS', () => {
           <div id="el3"></div>
         </div>`;
         editor = grapesjs.init(config);
-        wrapper = editor.DomComponents.getWrapper();
+        wrapper = editor.DomComponents.getWrapper()!;
         el1 = wrapper.find('#el1')[0];
         el2 = wrapper.find('#el2')[0];
         el3 = wrapper.find('#el3')[0];
@@ -487,7 +494,7 @@ describe('GrapesJS', () => {
         expect(editor.getSelected()).toBe(el1);
         expect(editor.getSelectedAll().length).toBe(1);
         // Select via element
-        editor.select(el2.getEl());
+        editor.select(el2.getEl() as any);
         expect(editor.getSelected()).toBe(el2);
         expect(editor.getSelectedAll().length).toBe(1);
         // Deselect via empty array
@@ -498,7 +505,7 @@ describe('GrapesJS', () => {
 
       test('Select multiple components', () => {
         // Select at first el1 and el3
-        editor.select([el1, el3.getEl()]);
+        editor.select([el1, el3.getEl() as any]);
         expect(editor.getSelected()).toBe(el3);
         expect(editor.getSelectedAll().length).toBe(2);
         // Add el2
@@ -536,9 +543,9 @@ describe('GrapesJS', () => {
         const selected = jest.spyOn(toSpy, 'selected');
         const deselected = jest.spyOn(toSpy, 'deselected');
         const toggled = jest.spyOn(toSpy, 'toggled');
-        editor.on('component:selected', selected);
-        editor.on('component:deselected', deselected);
-        editor.on('component:toggled', toggled);
+        editor.on('component:selected', selected as any);
+        editor.on('component:deselected', deselected as any);
+        editor.on('component:toggled', toggled as any);
 
         editor.select(el1); // selected=1
         editor.selectAdd(el1); // selected=1

test/specs/selector_manager/index.ts

@@ -37,7 +37,7 @@ describe('SelectorManager', () => {
 
     test('Default new selector is a class type', () => {
       const added = obj.add('test') as Selector;
-      expect(obj.get('test').get('type')).toEqual(obj.Selector.TYPE_CLASS);
+      expect(obj.get('test')!.get('type')).toEqual(obj.Selector.TYPE_CLASS);
       expect(added.getFullName()).toBe('.test');
     });
 
@@ -46,7 +46,7 @@ describe('SelectorManager', () => {
       var sel = obj.add(`#${name}`) as Selector;
       expect(sel.get('name')).toEqual(name);
       expect(sel.get('label')).toEqual(name);
-      expect(obj.get(`#${name}`).get('type')).toEqual(obj.Selector.TYPE_ID);
+      expect(obj.get(`#${name}`)!.get('type')).toEqual(obj.Selector.TYPE_ID);
       expect(sel.getFullName()).toBe('#test');
     });
 

test/specs/selector_manager/model/SelectorModels.ts

@@ -33,7 +33,7 @@ describe('Selector', () => {
 });
 
 describe('Selectors', () => {
-  var obj;
+  let obj: Selectors;
 
   beforeEach(() => {
     obj = new Selectors();

test/specs/style_manager/index.ts

@@ -79,7 +79,7 @@ describe('StyleManager', () => {
     test('Add property', () => {
       obj.addSector('test', { name: 'test' });
       expect(obj.addProperty('test', { property: 'test' })).toBeTruthy();
-      expect(obj.getProperties('test').length).toEqual(1);
+      expect(obj.getProperties('test')!.length).toEqual(1);
     });
 
     test('Check added property', () => {
@@ -95,7 +95,7 @@ describe('StyleManager', () => {
       obj.addSector('test', { name: 'test' });
       // @ts-ignore
       obj.addProperty('test', [{}, {}]);
-      expect(obj.getProperties('test').length).toEqual(2);
+      expect(obj.getProperties('test')!.length).toEqual(2);
     });
 
     test('Get property from inexistent sector', () => {

test/specs/style_manager/model/Models.ts

@@ -4,10 +4,10 @@ import PropertyNumber from '../../../../src/style_manager/model/PropertyNumber';
 import Editor from '../../../../src/editor/model/Editor';
 
 describe('Sector', () => {
-  let em;
-  let sm;
-  let obj;
-  let confToExt;
+  let em: Editor;
+  let sm: Editor['Styles'];
+  let obj: Sector;
+  let confToExt: any;
 
   beforeEach(() => {
     confToExt = {
@@ -28,13 +28,12 @@ describe('Sector', () => {
         sectors: [{ id: 'sector-1', name: 's' }],
       },
     });
-    sm = em.get('StyleManager');
+    sm = em.Styles;
     sm.onLoad();
     obj = sm.getSector('sector-1');
   });
 
   afterEach(() => {
-    obj = null;
     em.destroy();
   });
 
@@ -43,7 +42,7 @@ describe('Sector', () => {
   });
 
   test('Has no properties', () => {
-    expect(obj.get('properties').length).toEqual(0);
+    expect(obj.get('properties')!.length).toEqual(0);
   });
 
   test('Init with properties', () => {
@@ -51,7 +50,7 @@ describe('Sector', () => {
       name: 'test',
       properties: [{ property: '1' }, { property: '2' }],
     });
-    expect(obj.get('properties').length).toEqual(2);
+    expect(obj.getProperties().length).toEqual(2);
   });
 
   test('Build properties', () => {
@@ -67,8 +66,8 @@ describe('Sector', () => {
 
   test('Extend properties', () => {
     obj = sm.addSector('test', confToExt);
-    expect(obj.get('properties').length).toEqual(3);
-    var prop0 = obj.get('properties').at(0);
+    expect(obj.getProperties().length).toEqual(3);
+    var prop0 = obj.getProperties()[0];
     expect(prop0.get('type')).toEqual('radio');
     expect(prop0.get('default')).toEqual('block');
   });
@@ -76,8 +75,8 @@ describe('Sector', () => {
   test('Do not extend properties', () => {
     confToExt.extendBuilded = 0;
     obj = sm.addSector('test', confToExt);
-    expect(obj.get('properties').length).toEqual(3);
-    var prop0 = obj.get('properties').at(0);
+    expect(obj.getProperties().length).toEqual(3);
+    var prop0 = obj.getProperties()[0];
     expect(prop0.get('type')).toEqual('radio');
     expect(prop0.get('defaults')).toEqual('');
   });
@@ -88,6 +87,7 @@ describe('Sector', () => {
       properties: [
         {
           property: 'margin',
+          // @ts-ignore
           properties: [
             {
               name: 'Top',
@@ -100,10 +100,10 @@ describe('Sector', () => {
         },
       ],
     });
-    var sectProps = obj.get('properties');
+    var sectProps = obj.getProperties();
     expect(sectProps.length).toEqual(2);
-    var prop0 = obj.get('properties').at(0);
-    var propProps = prop0.get('properties');
+    var prop0 = obj.getProperties()[0];
+    var propProps = prop0.get('properties' as any);
 
     expect(propProps.length).toEqual(2);
     var propTop = propProps.at(0);

test/specs/utils/Mixins.ts

@@ -1,10 +1,10 @@
-import { buildBase64UrlFromSvg } from 'utils/mixins';
+import { buildBase64UrlFromSvg } from '../../../src/utils/mixins';
 
 describe('.buildBase64UrlFromSvg', () => {
   it('returns original when a none svg is provided', () => {
     const input = 'something else';
-    expect(buildBase64UrlFromSvg(input)).toEqual(input)
-  })
+    expect(buildBase64UrlFromSvg(input)).toEqual(input);
+  });
 
   it('returns base64 image when an svg is provided', () => {
     const input = `<svg
@@ -23,7 +23,8 @@ describe('.buildBase64UrlFromSvg', () => {
       <line x1="16" y1="6" x2="16" y2="22" />
     </svg>`;
 
-    const output = 'data:image/svg+xml;base64,PHN2ZwogICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgIHdpZHRoPSIyNCIKICAgICAgaGVpZ2h0PSIyNCIKICAgICAgdmlld0JveD0iMCAwIDI0IDI0IgogICAgICBmaWxsPSJub25lIgogICAgICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICAgICAgc3Ryb2tlLXdpZHRoPSIyIgogICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICA+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMSA2IDEgMjIgOCAxOCAxNiAyMiAyMyAxOCAyMyAyIDE2IDYgOCAyIDEgNiIgLz4KICAgICAgPGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjE4IiAvPgogICAgICA8bGluZSB4MT0iMTYiIHkxPSI2IiB4Mj0iMTYiIHkyPSIyMiIgLz4KICAgIDwvc3ZnPg=='
-    expect(buildBase64UrlFromSvg(input)).toEqual(output)
-  })
+    const output =
+      'data:image/svg+xml;base64,PHN2ZwogICAgICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgIHdpZHRoPSIyNCIKICAgICAgaGVpZ2h0PSIyNCIKICAgICAgdmlld0JveD0iMCAwIDI0IDI0IgogICAgICBmaWxsPSJub25lIgogICAgICBzdHJva2U9ImN1cnJlbnRDb2xvciIKICAgICAgc3Ryb2tlLXdpZHRoPSIyIgogICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgIHN0cm9rZS1saW5lam9pbj0icm91bmQiCiAgICA+CiAgICAgIDxwb2x5Z29uIHBvaW50cz0iMSA2IDEgMjIgOCAxOCAxNiAyMiAyMyAxOCAyMyAyIDE2IDYgOCAyIDEgNiIgLz4KICAgICAgPGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjE4IiAvPgogICAgICA8bGluZSB4MT0iMTYiIHkxPSI2IiB4Mj0iMTYiIHkyPSIyMiIgLz4KICAgIDwvc3ZnPg==';
+    expect(buildBase64UrlFromSvg(input)).toEqual(output);
+  });
 });

tsconfig.json

@@ -21,6 +21,7 @@
     "noEmit": false
   },
   "include": [
-    "src"
+    "src",
+    "test"
   ]
 }