From df52995840ed702b10f3ab2a87cf2353d12d503c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 4 Sep 2024 15:23:19 +0400 Subject: [PATCH] Create reproducible test case for #6116 --- packages/core/src/dom_components/index.ts | 6 +- packages/core/src/editor/index.ts | 4 +- packages/core/src/editor/model/Editor.ts | 4 +- packages/core/test/common.ts | 4 ++ .../core/test/specs/dom_components/index.ts | 62 +++++++++++++------ 5 files changed, 54 insertions(+), 26 deletions(-) diff --git a/packages/core/src/dom_components/index.ts b/packages/core/src/dom_components/index.ts index 930166876..2620b5109 100644 --- a/packages/core/src/dom_components/index.ts +++ b/packages/core/src/dom_components/index.ts @@ -80,7 +80,7 @@ import ComponentTextNode from './model/ComponentTextNode'; import ComponentVideo from './model/ComponentVideo'; import ComponentWrapper from './model/ComponentWrapper'; import Components from './model/Components'; -import { ComponentAdd, ComponentDefinition, ComponentDefinitionDefined, ComponentStackItem } from './model/types'; +import { AddComponentsOption, ComponentAdd, ComponentDefinition, ComponentDefinitionDefined, ComponentStackItem } from './model/types'; import ComponentCommentView from './view/ComponentCommentView'; import ComponentFrameView from './view/ComponentFrameView'; import ComponentImageView from './view/ComponentImageView'; @@ -480,7 +480,7 @@ export default class ComponentManager extends ItemManagerModule { * content: 'New component' * }); */ - setComponents(components: ComponentAdd, opt: AddOptions = {}) { + setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) { this.em.setComponents(components, opt); return this; } diff --git a/packages/core/src/editor/model/Editor.ts b/packages/core/src/editor/model/Editor.ts index aec546bbf..9627b5873 100644 --- a/packages/core/src/editor/model/Editor.ts +++ b/packages/core/src/editor/model/Editor.ts @@ -39,7 +39,7 @@ import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator' import ComponentView from '../../dom_components/view/ComponentView'; import { ProjectData, StorageOptions } from '../../storage_manager/model/IStorage'; import CssRules from '../../css_composer/model/CssRules'; -import { ComponentAdd, DragMode } from '../../dom_components/model/types'; +import { AddComponentsOption, ComponentAdd, DragMode } from '../../dom_components/model/types'; import ComponentWrapper from '../../dom_components/model/ComponentWrapper'; import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot'; import DataSourceManager from '../../data_sources'; @@ -699,7 +699,7 @@ export default class EditorModel extends Model { * @return {this} * @public */ - setComponents(components: ComponentAdd, opt: AddOptions = {}) { + setComponents(components: ComponentAdd, opt: AddComponentsOption = {}) { return this.Components.setComponents(components, opt); } diff --git a/packages/core/test/common.ts b/packages/core/test/common.ts index 538bce3b7..89f54e68b 100644 --- a/packages/core/test/common.ts +++ b/packages/core/test/common.ts @@ -24,3 +24,7 @@ export function setupTestEditor() { fixtures.appendChild(wrapperEl.el); return { editor, em, dsm, cmpRoot, fixtures: fixtures as HTMLElement }; } + +export function flattenHTML(html: string) { + return html.replace(/>\s+|\s+ m.trim()); +} diff --git a/packages/core/test/specs/dom_components/index.ts b/packages/core/test/specs/dom_components/index.ts index 8685ab966..fe069382d 100644 --- a/packages/core/test/specs/dom_components/index.ts +++ b/packages/core/test/specs/dom_components/index.ts @@ -4,6 +4,8 @@ import Editor from '../../../src/editor'; import utils from '../../test_utils.js'; import { Component } from '../../../src'; import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper'; +import { flattenHTML, setupTestEditor } from '../../common'; +import { ProjectData } from '../../../src/storage_manager'; describe('DOM Components', () => { describe('Main', () => { @@ -320,21 +322,12 @@ describe('DOM Components', () => { let fxt: HTMLElement; let root: ComponentWrapper; - beforeEach((done) => { - fxt = document.createElement('div'); - document.body.appendChild(fxt); - editor = new Editor({ - el: fxt, - avoidInlineStyle: true, - storageManager: false, - }); - em = editor.getModel(); - fxt.appendChild(em.Canvas.render()); - em.loadOnStart(); - editor.on('change:ready', () => { - root = editor.Components.getWrapper()!; - done(); - }); + beforeEach(() => { + const testEditor = setupTestEditor(); + editor = testEditor.editor; + em = testEditor.em; + fxt = testEditor.fixtures; + root = testEditor.cmpRoot; }); afterEach(() => { @@ -376,8 +369,7 @@ describe('DOM Components', () => { expect(docEl.get('htmlp')).toBe(true); expect(root.get('bodyp')).toBe(true); expect(root.doctype).toBe(''); - - const outputHtml = ` + expect(root.toHTML()).toBe(flattenHTML(` @@ -390,8 +382,40 @@ describe('DOM Components', () => {

H1

- `.replace(/>\s+|\s+ m.trim()); - expect(root.toHTML()).toBe(outputHtml); + `)) + }); + }); + + describe('load document components', () => { + let projectData: ProjectData; + const docHtml = ` + + + + ABC + + + Test + + + `; + + test('editor loads properly document data from projectData', () => { + editor.setComponents(docHtml, { asDocument: true }); + projectData = editor.getProjectData(); + expect(root.toHTML()).toBe(flattenHTML(docHtml)); + }); + + // https://github.com/GrapesJS/grapesjs/issues/6116 + test('editor loads properly document data from projectData', () => { + editor.loadProjectData(projectData); + const newRoot = editor.getWrapper()!; + + const { head, doctype } = newRoot; + // expect(head.components().length).toBe(1); + // expect(doctype).toBe(''); + + expect(newRoot.toHTML()).toBe(flattenHTML(docHtml)); }); }); });