diff --git a/test/specs/selector_manager/e2e/ClassManager.js b/test/specs/selector_manager/e2e/ClassManager.ts similarity index 67% rename from test/specs/selector_manager/e2e/ClassManager.js rename to test/specs/selector_manager/e2e/ClassManager.ts index 2c568e9ae..a24c13960 100644 --- a/test/specs/selector_manager/e2e/ClassManager.js +++ b/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', () => { - let fixtures; - let components; - let tagEl; - let gjs; - let module; +describe('ClassManager E2E tests', () => { + let fixtures: HTMLElement; + let components: Components; + let tagEl: ClassTagsView; + let gjs: Editor; + let module: Editor['Selectors']; describe('Interaction with Components', () => { beforeEach(() => { document.body.innerHTML = '
'; - fixtures = document.body.firstChild; + fixtures = document.body.firstElementChild as HTMLElement; gjs = grapesjs.init({ stylePrefix: '', - storageManager: { autoload: 0, type: 0 }, - assetManager: { storageType: 'none' }, + storageManager: false, container: '#SelectorManager-fixture', }); components = gjs.getComponents(); module = gjs.Selectors; - fixtures.appendChild(module.render()); - tagEl = module.selectorTags; + fixtures.appendChild(module.render([])); + tagEl = module.selectorTags!; }); afterEach(() => { @@ -28,31 +29,28 @@ describe('E2E tests', () => { }); test('Assign correctly new class to component', () => { - var model = components.add({}); - expect(model.get('classes').length).toEqual(0); + const model = components.add({}) as unknown as Component; + expect(model.classes.length).toEqual(0); gjs.select(model); tagEl.addNewTag('test'); - expect(model.get('classes').length).toEqual(1); - expect(model.get('classes').at(0).get('name')).toEqual('test'); + expect(model.classes.length).toEqual(1); + expect(model.classes.at(0).get('name')).toEqual('test'); }); test('Classes from components are correctly imported inside main container', () => { - var model = components.add([ - { classes: ['test11', 'test12', 'test13'] }, - { classes: ['test11', 'test22', 'test22'] }, - ]); + components.add([{ 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'] }); - var clModel = model.get('classes').at(0); - var clModel2 = gjs.editor.get('SelectorManager').getAll().at(0); + const model = components.add({ classes: ['test1'] }) as unknown as Component; + const clModel = model.classes.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(); - var model = components.add({}); + const spy = jest.fn(); + 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', () => {