tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up test TS

pull/5270/head
Artur Arseniev 3 years ago
parent
ca2eaeefdc
commit
e114380894
14 changed files with 144 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/dom_components/index.ts
  2. 7
      test/specs/commands/index.ts
  3. 4
      test/specs/css_composer/index.ts
  4. 17
      test/specs/dom_components/index.ts
  5. 104
      test/specs/dom_components/model/Component.ts
  6. 23
      test/specs/dom_components/view/ComponentTextView.ts
  7. 14
      test/specs/editor/index.ts
  8. 59
      test/specs/grapesjs/index.ts
  9. 4
      test/specs/selector_manager/index.ts
  10. 2
      test/specs/selector_manager/model/SelectorModels.ts
  11. 4
      test/specs/style_manager/index.ts
  12. 30
      test/specs/style_manager/model/Models.ts
  13. 13
      test/specs/utils/Mixins.ts
  14. 3
      tsconfig.json

4
src/dom_components/index.ts
View File

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

7
test/specs/commands/index.ts
View File

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

4
test/specs/css_composer/index.ts
View File

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

17
test/specs/dom_components/index.ts
View File

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

104
test/specs/dom_components/model/Component.ts
View File

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

23
test/specs/dom_components/view/ComponentTextView.ts
View File

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

14
test/specs/editor/index.js → test/specs/editor/index.ts
View File

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

59
test/specs/grapesjs/index.ts
View File

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

4
test/specs/selector_manager/index.ts
View File

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

2
test/specs/selector_manager/model/SelectorModels.ts
View File

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

4
test/specs/style_manager/index.ts
View File

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

30
test/specs/style_manager/model/Models.ts
View File

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

13
test/specs/utils/Mixins.ts
View File

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

3
tsconfig.json
View File

@ -21,6 +21,7 @@
"noEmit": false "noEmit": false
}, },
"include": [ "include": [
"src" "src",
"test"
] ]
} }
Write Preview
Loading…
Cancel
Save