Up ClassManager test

test/specs/selector_manager/e2e/ClassManager.js → test/specs/selector_manager/e2e/ClassManager.ts

@@ -1,26 +1,27 @@
-import Selector from 'selector_manager/model/Selector';
+import grapesjs, { Component, Components, Editor } from '../../../../src';
+import Selector from '../../../../src/selector_manager/model/Selector';
+import ClassTagsView from '../../../../src/selector_manager/view/ClassTagsView';
 
-describe('E2E tests', () => {
+describe('ClassManager E2E tests', () => {
-  let fixtures;
+  let fixtures: HTMLElement;
-  let components;
+  let components: Components;
-  let tagEl;
+  let tagEl: ClassTagsView;
-  let gjs;
+  let gjs: Editor;
-  let module;
+  let module: Editor['Selectors'];
 
   describe('Interaction with Components', () => {
     beforeEach(() => {
       document.body.innerHTML = '<div id="fixtures"><div id="SelectorManager-fixture"></div></div>';
-      fixtures = document.body.firstChild;
+      fixtures = document.body.firstElementChild as HTMLElement;
       gjs = grapesjs.init({
         stylePrefix: '',
-        storageManager: { autoload: 0, type: 0 },
+        storageManager: false,
-        assetManager: { storageType: 'none' },
         container: '#SelectorManager-fixture',
       });
       components = gjs.getComponents();
       module = gjs.Selectors;
-      fixtures.appendChild(module.render());
+      fixtures.appendChild(module.render([]));
-      tagEl = module.selectorTags;
+      tagEl = module.selectorTags!;
     });
 
     afterEach(() => {
@@ -28,31 +29,28 @@ describe('E2E tests', () => {
     });
 
     test('Assign correctly new class to component', () => {
-      var model = components.add({});
+      const model = components.add({}) as unknown as Component;
-      expect(model.get('classes').length).toEqual(0);
+      expect(model.classes.length).toEqual(0);
       gjs.select(model);
       tagEl.addNewTag('test');
-      expect(model.get('classes').length).toEqual(1);
+      expect(model.classes.length).toEqual(1);
-      expect(model.get('classes').at(0).get('name')).toEqual('test');
+      expect(model.classes.at(0).get('name')).toEqual('test');
     });
 
     test('Classes from components are correctly imported inside main container', () => {
-      var model = components.add([
+      components.add([{ classes: ['test11', 'test12', 'test13'] }, { classes: ['test11', 'test22', 'test22'] }]);
-        { classes: ['test11', 'test12', 'test13'] },
-        { classes: ['test11', 'test22', 'test22'] },
-      ]);
       expect(gjs.editor.get('SelectorManager').getAll().length).toEqual(4);
     });
 
     test('Class imported into component is the same model from main container', () => {
-      var model = components.add({ classes: ['test1'] });
+      const model = components.add({ classes: ['test1'] }) as unknown as Component;
-      var clModel = model.get('classes').at(0);
+      const clModel = model.classes.at(0);
-      var clModel2 = gjs.editor.get('SelectorManager').getAll().at(0);
+      const clModel2 = gjs.editor.get('SelectorManager').getAll().at(0);
       expect(clModel).toEqual(clModel2);
     });
 
     test('Can assign only one time the same class on selected component and the class viewer', () => {
-      var model = components.add({});
+      const model = components.add({}) as unknown as Component;
       gjs.select(model);
       tagEl.addNewTag('test');
       tagEl.addNewTag('test');
@@ -66,23 +64,23 @@ describe('E2E tests', () => {
     });
 
     test('Removing from container removes also from selected component', () => {
-      var model = components.add({});
+      const model = components.add({}) as unknown as Component;
       gjs.editor.setSelected(model);
       tagEl.addNewTag('test');
       tagEl.getClasses().find('.tag #close').trigger('click');
-      setTimeout(() => expect(model.get('classes').length).toEqual(0));
+      setTimeout(() => expect(model.classes.length).toEqual(0));
     });
 
     test('Trigger correctly event on target with new class add', () => {
-      var spy = sinon.spy();
+      const spy = jest.fn();
-      var model = components.add({});
+      const model = components.add({});
       gjs.select(model);
       tagEl.addNewTag('test');
       gjs.editor.on('component:update:classes', spy);
       tagEl.addNewTag('test');
-      expect(spy.called).toEqual(false);
+      expect(spy).toBeCalledTimes(0);
       tagEl.addNewTag('test2');
-      expect(spy.called).toEqual(true);
+      expect(spy).toBeCalledTimes(1);
     });
 
     test('Selectors are properly transformed to JSON', () => {