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

Up grapesjs test file

pull/5649/head
Artur Arseniev 3 years ago
parent
b003f36281
commit
d29dff1f66
1 changed files with 77 additions and 78 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. 155
      test/specs/grapesjs/index.ts

155
test/specs/grapesjs/index.js → test/specs/grapesjs/index.ts
View File

@ -1,18 +1,19 @@
import grapesjs from '../../../src';
describe('GrapesJS', () => { describe('GrapesJS', () => {
describe('Main', () => { describe('Main', () => {
var obj; let fixtures;
var fixtures; let fixture;
var fixture; let editorName;
var editorName; let htmlString;
var htmlString; let config;
var config; let cssString;
var cssString; let documentEl;
var documentEl;
let storage;
var storage; let storageId = 'testStorage';
var storageId = 'testStorage'; let storageMock = {
var storageMock = { async store(data) {
store(data) {
storage = data; storage = data;
}, },
load() { load() {
@ -38,14 +39,13 @@ describe('GrapesJS', () => {
type: 0, type: 0,
}, },
}; };
obj = 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(() => {
var plugins = obj.plugins.getAll(); var plugins = grapesjs.plugins.getAll();
for (let id in plugins) { for (let id in plugins) {
if (plugins.hasOwnProperty(id)) { if (plugins.hasOwnProperty(id)) {
delete plugins[id]; delete plugins[id];
@ -54,28 +54,27 @@ describe('GrapesJS', () => {
}); });
test('Main object should be loaded', () => { test('Main object should be loaded', () => {
expect(obj).toBeTruthy(); expect(grapesjs).toBeTruthy();
}); });
test('Init new editor', () => { test('Init new editor', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor).toBeTruthy(); expect(editor).toBeTruthy();
}); });
test('Init new editor with node for container', () => { test('Init new editor with node for container', () => {
var configAlt = { const editor = grapesjs.init({
container: document.createElement('div'), container: document.createElement('div'),
storageManager: { storageManager: {
autoload: 0, autoload: false,
type: 'none', type: 'none',
}, },
}; });
var editor = obj.init(configAlt);
expect(editor).toBeTruthy(); expect(editor).toBeTruthy();
}); });
test('New editor is empty', () => { test('New editor is empty', () => {
const editor = obj.init(config); const editor = grapesjs.init(config);
const html = editor.getHtml(); const html = editor.getHtml();
//const css = editor.getCss(); //const css = editor.getCss();
const protCss = editor.getConfig().protectedCss; const protCss = editor.getConfig().protectedCss;
@ -89,7 +88,7 @@ describe('GrapesJS', () => {
config.components = htmlString; config.components = htmlString;
config.baseCss = '#wrapper { background-color: #eee; }'; config.baseCss = '#wrapper { background-color: #eee; }';
config.protectedCss = ''; config.protectedCss = '';
const editor = obj.init(config); const editor = grapesjs.init(config);
const body = editor.Canvas.getBody(); const body = editor.Canvas.getBody();
expect(body.outerHTML).toContain(config.baseCss); expect(body.outerHTML).toContain(config.baseCss);
@ -99,7 +98,7 @@ describe('GrapesJS', () => {
test('Editor canvas baseCSS defaults to sensible values if not defined', () => { test('Editor canvas baseCSS defaults to sensible values if not defined', () => {
config.components = htmlString; config.components = htmlString;
config.protectedCss = ''; config.protectedCss = '';
obj.init(config); grapesjs.init(config);
expect(window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ' ')).toContain( expect(window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ' ')).toContain(
'body { background-color: #fff' 'body { background-color: #fff'
); );
@ -107,25 +106,25 @@ describe('GrapesJS', () => {
test('Init editor with html', () => { test('Init editor with html', () => {
config.components = htmlString; config.components = htmlString;
var editor = obj.init(config); var editor = grapesjs.init(config);
var comps = editor.DomComponents.getComponents(); var comps = editor.DomComponents.getComponents();
expect(comps.length).toEqual(2); expect(comps.length).toEqual(2);
expect(comps.at(0).get('classes').at(0).get('name')).toEqual('test1'); expect(comps.at(0).get('classes')?.at(0).get('name')).toEqual('test1');
}); });
test('Init editor with css', () => { test('Init editor with css', () => {
config.style = cssString; config.style = cssString;
var editor = obj.init(config); var editor = grapesjs.init(config);
var rules = editor.CssComposer.getAll(); var rules = editor.CssComposer.getAll();
expect(rules.length).toEqual(2); expect(rules.length).toEqual(2);
expect(rules.at(0).get('selectors').at(0).get('name')).toEqual('test2'); expect(rules.at(0).get('selectors')?.at(0)?.get('name')).toEqual('test2');
}); });
test('Init editor from element', () => { test('Init editor from element', () => {
config.fromElement = 1; config.fromElement = 1;
config.storageManager = { type: 0 }; config.storageManager = { type: 0 };
fixture.innerHTML = documentEl; fixture.innerHTML = documentEl;
const editor = obj.init(config); const editor = grapesjs.init(config);
const html = editor.getHtml(); const html = editor.getHtml();
const css = editor.getCss(); const css = editor.getCss();
const protCss = editor.getConfig().protectedCss; const protCss = editor.getConfig().protectedCss;
@ -152,48 +151,48 @@ describe('GrapesJS', () => {
src: url('http://b.link') format('woff2'); src: url('http://b.link') format('woff2');
} }
</style>` + htmlString; </style>` + htmlString;
const editor = obj.init(config); const editor = grapesjs.init(config);
const css = editor.getCss(); const css = editor.getCss()!;
const styles = editor.getStyle(); const styles = editor.getStyle();
expect(styles.length).toEqual(2); expect(styles.length).toEqual(2);
expect((css.match(/@font-face/g) || []).length).toEqual(2); expect((css.match(/@font-face/g) || []).length).toEqual(2);
}); });
test('Set components as HTML', () => { test('Set components as HTML', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.setComponents(htmlString); editor.setComponents(htmlString);
expect(editor.getComponents().length).toEqual(2); expect(editor.getComponents().length).toEqual(2);
}); });
test('Set components as array of objects', () => { test('Set components as array of objects', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.setComponents([{}, {}, {}]); editor.setComponents([{}, {}, {}]);
expect(editor.getComponents().length).toEqual(3); expect(editor.getComponents().length).toEqual(3);
}); });
test('Set style as CSS', () => { test('Set style as CSS', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.setStyle(cssString); editor.setStyle(cssString);
editor.setStyle(cssString); editor.setStyle(cssString);
var styles = editor.getStyle(); var styles = editor.getStyle();
expect(styles.length).toEqual(2); expect(styles.length).toEqual(2);
expect(styles.at(1).get('selectors').at(0).get('name')).toEqual('test3'); expect(styles.at(1).get('selectors')?.at(0)?.get('name')).toEqual('test3');
}); });
test('Set style as as array of objects', () => { test('Set style as as array of objects', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.setStyle([{ selectors: ['test4'] }, { selectors: ['test5'] }]); editor.setStyle([{ selectors: ['test4'] }, { selectors: ['test5'] }]);
var styles = editor.getStyle(); var styles = editor.getStyle();
expect(styles.length).toEqual(2); expect(styles.length).toEqual(2);
expect(styles.at(1).get('selectors').at(0).get('name')).toEqual('test5'); expect(styles.at(1).get('selectors')?.at(0)?.get('name')).toEqual('test5');
}); });
test.skip('Adds new storage as plugin and store data there', done => { test.skip('Adds new storage as plugin and store data there', done => {
const pluginName = storageId + '-p2'; const pluginName = storageId + '-p2';
obj.plugins.add(pluginName, e => e.StorageManager.add(storageId, storageMock)); grapesjs.plugins.add(pluginName, e => e.StorageManager.add(storageId, storageMock));
config.storageManager.type = storageId; config.storageManager.type = storageId;
config.plugins = [pluginName]; config.plugins = [pluginName];
const editor = obj.init(config); const editor = grapesjs.init(config);
editor.setComponents(htmlString); editor.setComponents(htmlString);
editor.store(() => { editor.store(() => {
editor.load(data => { editor.load(data => {
@ -226,12 +225,12 @@ describe('GrapesJS', () => {
}; };
const pluginName = storageId + '-p'; const pluginName = storageId + '-p';
obj.plugins.add(pluginName, e => e.StorageManager.add(storageId, storageMock)); grapesjs.plugins.add(pluginName, e => e.StorageManager.add(storageId, storageMock));
config.fromElement = 1; config.fromElement = 1;
config.storageManager.type = storageId; config.storageManager.type = storageId;
config.plugins = [pluginName]; config.plugins = [pluginName];
config.storageManager.autoload = 1; config.storageManager.autoload = 1;
const editor = obj.init(config); const editor = grapesjs.init(config);
editor.on('load', () => { editor.on('load', () => {
const cc = editor.CssComposer; const cc = editor.CssComposer;
expect(cc.getAll().length).toEqual(style.length); expect(cc.getAll().length).toEqual(style.length);
@ -241,82 +240,82 @@ describe('GrapesJS', () => {
}); });
test('Execute plugins with custom options', () => { test('Execute plugins with custom options', () => {
var pluginName = storageId + '-plugin-opts'; const pluginName = storageId + '-plugin-opts';
obj.plugins.add(pluginName, (edt, opts) => { grapesjs.plugins.add(pluginName, (edt, opts) => {
var opts = opts || {}; var opts = opts || {};
edt.customValue = opts.cVal || ''; edt.getModel().set('customValue', opts.cVal || '');
}); });
config.plugins = [pluginName]; config.plugins = [pluginName];
config.pluginsOpts = {}; config.pluginsOpts = {};
config.pluginsOpts[pluginName] = { cVal: 'TEST' }; config.pluginsOpts[pluginName] = { cVal: 'TEST' };
var editor = obj.init(config); const editor = grapesjs.init(config);
expect(editor.customValue).toEqual('TEST'); expect(editor.getModel().get('customValue')).toEqual('TEST');
}); });
test('Execute inline plugins with custom options', () => { test('Execute inline plugins with custom options', () => {
const inlinePlugin = (edt, opts) => { const inlinePlugin = (edt, opts) => {
var opts = opts || {}; var opts = opts || {};
edt.customValue = opts.cVal || ''; edt.getModel().set('customValue', opts.cVal || '');
}; };
config.plugins = [inlinePlugin]; config.plugins = [inlinePlugin];
config.pluginsOpts = {}; config.pluginsOpts = {};
config.pluginsOpts[inlinePlugin] = { cVal: 'TEST' }; config.pluginsOpts[inlinePlugin.toString()] = { cVal: 'TEST' };
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor.customValue).toEqual('TEST'); expect(editor.getModel().get('customValue')).toEqual('TEST');
}); });
test('Execute inline plugins without any options', () => { test('Execute inline plugins without any options', () => {
const inlinePlugin = edt => { const inlinePlugin = edt => {
edt.customValue = 'TEST'; edt.getModel().set('customValue', 'TEST');
}; };
config.plugins = [inlinePlugin]; config.plugins = [inlinePlugin];
config.pluginsOpts = {}; config.pluginsOpts = {};
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor.customValue).toEqual('TEST'); expect(editor.getModel().get('customValue')).toEqual('TEST');
}); });
test('Use plugins defined on window, with custom options', () => { test('Use plugins defined on window, with custom options', () => {
window.globalPlugin = (edt, opts) => { (window as any).globalPlugin = (edt, opts) => {
var opts = opts || {}; var opts = opts || {};
edt.customValue = opts.cVal || ''; edt.getModel().set('customValue', opts.cVal || '');
}; };
config.plugins = ['globalPlugin']; config.plugins = ['globalPlugin'];
config.pluginsOpts = {}; config.pluginsOpts = {};
config.pluginsOpts['globalPlugin'] = { cVal: 'TEST' }; config.pluginsOpts['globalPlugin'] = { cVal: 'TEST' };
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor.customValue).toEqual('TEST'); expect(editor.getModel().get('customValue')).toEqual('TEST');
}); });
test('Execute custom command', () => { test('Execute custom command', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.testVal = ''; let testValue = '';
editor.setComponents(htmlString); editor.setComponents(htmlString);
editor.Commands.add('test-command', { editor.Commands.add('test-command', {
run(ed, caller, opts) { run(ed, caller, opts) {
ed.testVal = ed.getHtml() + opts.val; testValue = ed.getHtml() + opts.val;
}, },
}); });
editor.runCommand('test-command', { val: 5 }); editor.runCommand('test-command', { val: 5 });
expect(editor.testVal).toEqual(htmlString + '5'); expect(testValue).toEqual(htmlString + '5');
}); });
test('Stop custom command', () => { test('Stop custom command', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.testVal = ''; let testValue = '';
editor.setComponents(htmlString); editor.setComponents(htmlString);
editor.Commands.add('test-command', { editor.Commands.add('test-command', {
stop(ed, caller, opts) { stop(ed, caller, opts) {
ed.testVal = ed.getHtml() + opts.val; testValue = ed.getHtml() + opts.val;
}, },
}); });
editor.stopCommand('test-command', { val: 5, force: 1 }); editor.stopCommand('test-command', { val: 5, force: 1 });
expect(editor.testVal).toEqual(htmlString + '5'); expect(testValue).toEqual(htmlString + '5');
}); });
test('Trigger custom command events', () => { test('Trigger custom command events', () => {
const id = 'test-command'; const id = 'test-command';
const editor = obj.init(config); const editor = grapesjs.init(config);
const result = {}; const result: Record<string, any> = {};
editor.on(`run:${id}`, () => (result.run = 1)); editor.on(`run:${id}`, () => (result.run = 1));
editor.on(`run:${id}:before`, () => (result.runBefore = 1)); editor.on(`run:${id}:before`, () => (result.runBefore = 1));
editor.on(`stop:${id}`, () => (result.stop = 1)); editor.on(`stop:${id}`, () => (result.stop = 1));
@ -345,17 +344,17 @@ describe('GrapesJS', () => {
{ name: '1', width: '2' }, { name: '1', width: '2' },
{ name: '3', width: '4' }, { name: '3', width: '4' },
]; ];
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor.DeviceManager.getAll().length).toEqual(2); expect(editor.DeviceManager.getAll().length).toEqual(2);
}); });
test('There is no active device', () => { test('There is no active device', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
expect(editor.getDevice()).toBe('desktop'); expect(editor.getDevice()).toBe('desktop');
}); });
test('Active another device', () => { test('Active another device', () => {
var editor = obj.init(config); var editor = grapesjs.init(config);
editor.setDevice('Tablet'); editor.setDevice('Tablet');
expect(editor.getDevice()).toEqual('Tablet'); expect(editor.getDevice()).toEqual('Tablet');
}); });
@ -365,14 +364,14 @@ describe('GrapesJS', () => {
var editor, var editor,
pluginName = 'test-plugin-opts'; pluginName = 'test-plugin-opts';
obj.plugins.add(pluginName, (edt, opts) => { grapesjs.plugins.add(pluginName, (edt, opts) => {
let cmdm = edt.Commands; let cmdm = edt.Commands;
// Overwrite export template // Overwrite export template
cmdm.add('export-template', { test: 1 }); cmdm.add('export-template', { test: 1 });
}); });
config.plugins = [pluginName]; config.plugins = [pluginName];
editor = obj.init(config); editor = grapesjs.init(config);
expect(editor.Commands.get('export-template').test).toEqual(1); expect(editor.Commands.get('export-template').test).toEqual(1);
}); });
@ -380,8 +379,8 @@ describe('GrapesJS', () => {
config.fromElement = 1; config.fromElement = 1;
config.storageManager = { type: 0 }; config.storageManager = { type: 0 };
fixture.innerHTML = documentEl; fixture.innerHTML = documentEl;
const editor = obj.init(config); const editor = grapesjs.init(config);
const css = editor.getCss({ keepUnusedStyles: 1 }); const css = editor.getCss({ keepUnusedStyles: true });
const protCss = editor.getConfig().protectedCss; const protCss = editor.getConfig().protectedCss;
expect(editor.getStyle().length).toEqual(2); expect(editor.getStyle().length).toEqual(2);
expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`); expect(css).toEqual(`${protCss}.test2{color:red;}.test3{color:blue;}`);
@ -394,8 +393,8 @@ describe('GrapesJS', () => {
config.fromElement = 1; config.fromElement = 1;
config.storageManager = { type: 0 }; config.storageManager = { type: 0 };
fixture.innerHTML = documentEl; fixture.innerHTML = documentEl;
const editor = obj.init(config); const editor = grapesjs.init(config);
const css = editor.getCss({ keepUnusedStyles: 1 }); const css = editor.getCss({ keepUnusedStyles: true });
const protCss = editor.getConfig().protectedCss; const protCss = editor.getConfig().protectedCss;
expect(editor.getStyle().length).toEqual(3); expect(editor.getStyle().length).toEqual(3);
expect(css).toEqual( expect(css).toEqual(
@ -407,7 +406,7 @@ describe('GrapesJS', () => {
config.fromElement = 1; config.fromElement = 1;
config.storageManager = { type: 0 }; config.storageManager = { type: 0 };
fixture.innerHTML = documentEl; fixture.innerHTML = documentEl;
const editor = obj.init({ ...config, keepUnusedStyles: 1 }); const editor = grapesjs.init({ ...config, keepUnusedStyles: 1 });
const css = editor.getCss(); const css = editor.getCss();
const protCss = editor.getConfig().protectedCss; const protCss = editor.getConfig().protectedCss;
expect(editor.getStyle().length).toEqual(2); expect(editor.getStyle().length).toEqual(2);
@ -424,7 +423,7 @@ describe('GrapesJS', () => {
<div id="el2"></div> <div id="el2"></div>
<div id="el3"></div> <div id="el3"></div>
</div>`; </div>`;
editor = obj.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];
Write Preview
Loading…
Cancel
Save