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', () => {