diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index e3d733117..33390b2ab 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/packages/core/src/editor/model/Editor.ts @@ -365,6 +365,7 @@ export default class EditorModel extends Model { storageManager: false, undoManager: false, }); + shallow.set({ isShallow: true }); // We only need to load a few modules shallow.Pages.onLoad(); shallow.Canvas.postLoad(); diff --git a/packages/core/test/common.ts b/packages/core/test/common.ts index f202118ff..58b754ffe 100644 --- a/packages/core/test/common.ts +++ b/packages/core/test/common.ts @@ -47,6 +47,17 @@ export function setupTestEditor(opts?: { withCanvas?: boolean; config?: Partial< return { editor, em, dsm, cmpRoot, fixtures: fixtures as HTMLElement }; } +export function fixJsDom(editor: Editor) { + fixJsDomIframe(editor); +} + +export const fixJsDomIframe = (em: EditorModel | Editor) => { + em.on(CanvasEvents.frameLoad, ({ el, view }) => { + // this seems to fix the issue of the loop + el.onload = null; + }); +}; + export function waitEditorEvent(em: Editor | EditorModel, event: string) { return new Promise((resolve) => em.once(event, resolve)); } diff --git a/packages/core/test/specs/grapesjs/index.ts b/packages/core/test/specs/grapesjs/index.ts index f1905e03d..2d7113260 100644 --- a/packages/core/test/specs/grapesjs/index.ts +++ b/packages/core/test/specs/grapesjs/index.ts @@ -1,6 +1,8 @@ import grapesjs, { Component, Editor, usePlugin } from '../../../src'; import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper'; +import { EditorConfig } from '../../../src/editor/config/config'; import type { Plugin } from '../../../src/plugin_manager'; +import { fixJsDom, fixJsDomIframe } from '../../common'; type TestPlugin = Plugin<{ cVal: string }>; @@ -24,6 +26,16 @@ describe('GrapesJS', () => { }, }; + const initTestEditor = (config: Partial) => { + const editor = grapesjs.init({ + ...config, + plugins: [fixJsDom, ...(config.plugins || [])], + }); + fixJsDomIframe(editor.getModel().shallow); + + return editor; + }; + beforeAll(() => { editorName = 'editor-fixture'; }); @@ -86,23 +98,33 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(0); }); - test.skip('Editor canvas baseCSS can be overwritten', () => { + test('Editor canvas baseCSS can be overwritten', (done) => { config.components = htmlString; config.baseCss = '#wrapper { background-color: #eee; }'; config.protectedCss = ''; - const editor = grapesjs.init(config); - const body = editor.Canvas.getBody(); - expect(body.outerHTML).toContain(config.baseCss); - expect(body.outerHTML.replace(/\s+/g, ' ')).not.toContain('body { margin: 0;'); + const editor = initTestEditor({ + ...config, + components: htmlString, + baseCss: '#wrapper { background-color: #eee; }', + protectedCss: '', + }); + editor.onReady(() => { + const body = editor.Canvas.getBody(); + expect(body.outerHTML).toContain(config.baseCss); + expect(body.outerHTML.replace(/\s+/g, ' ')).not.toContain('body { margin: 0;'); + done(); + }); }); - test.skip('Editor canvas baseCSS defaults to sensible values if not defined', () => { + test('Editor canvas baseCSS defaults to sensible values if not defined', (done) => { config.components = htmlString; config.protectedCss = ''; - grapesjs.init(config); - expect(window.frames[0].document.documentElement.outerHTML.replace(/\s+/g, ' ')).toContain( - 'body { background-color: #fff', - ); + const editor = initTestEditor(config); + editor.onReady(() => { + const htmlEl = editor.Canvas.getDocument().documentElement; + expect(htmlEl.outerHTML.replace(/\s+/g, ' ')).toContain('body { background-color: #fff'); + done(); + }); }); test('Init editor with html', () => { @@ -459,25 +481,32 @@ describe('GrapesJS', () => { }); }); - describe.skip('Component selection', () => { + describe('Component selection', () => { let editor: Editor; let wrapper: ComponentWrapper; let el1: Component; let el2: Component; let el3: Component; - beforeEach(() => { - config.storageManager = { type: 0 }; - config.components = `
-
-
-
-
`; - editor = grapesjs.init(config); + beforeEach((done) => { + editor = grapesjs.init({ + container: `#${editorName}`, + storageManager: false, + plugins: [fixJsDom], + components: `
+
+
+
+
`, + }); + fixJsDomIframe(editor.getModel().shallow); wrapper = editor.DomComponents.getWrapper()!; - el1 = wrapper.find('#el1')[0]; - el2 = wrapper.find('#el2')[0]; - el3 = wrapper.find('#el3')[0]; + editor.onReady(() => { + el1 = wrapper.find('#el1')[0]; + el2 = wrapper.find('#el2')[0]; + el3 = wrapper.find('#el3')[0]; + done(); + }); }); test('Select a single component', () => {