Test asDocument on wrapper

2 years ago · 9b9464e378
4 changed files with 93 additions and 5 deletions
--- a/src/dom_components/model/Component.ts
+++ b/src/dom_components/model/Component.ts
@ -20,6 +20,7 @@ import Selectors from '../../selector_manager/model/Selectors';
 import Traits from '../../trait_manager/model/Traits';
 import EditorModel from '../../editor/model/Editor';
 import {
+  AddComponentsOption,
  ComponentAdd,
  ComponentDefinition,
  ComponentDefinitionDefined,
@ -1149,7 +1150,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   */
  components<T extends ComponentAdd | undefined>(
    components?: T,
-    opts: any = {}
+    opts: AddComponentsOption = {}
  ): undefined extends T ? Components : Component[] {
    const coll = this.get('components')!;

--- a/src/dom_components/model/Components.ts
+++ b/src/dom_components/model/Components.ts
@ -5,7 +5,7 @@ import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
 import ComponentManager from '..';
 import CssRule from '../../css_composer/model/CssRule';
-import { ComponentAdd, ComponentProperties } from './types';
+import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types';
 import ComponentText from './ComponentText';
 import ComponentWrapper from './ComponentWrapper';

@ -238,10 +238,12 @@ Component> {

    if (asDocument) {
      const root = parent as ComponentWrapper;
-      components = (parsed.html as any).components;
+      const { components: bodyCmps, ...restBody } = (parsed.html as ComponentDefinitionDefined) || {};
      const { components: headCmps, ...restHead } = parsed.head || {};
+      components = bodyCmps!;
+      root.set(restBody as any, opt);
      root.head.set(restHead as any, opt);
-      root.head.components(headCmps);
+      root.head.components(headCmps, opt);
      root.docEl.set(parsed.root as any, opt);
      root.set({ doctype: parsed.doctype });
    }
--- a/src/dom_components/model/types.ts
+++ b/src/dom_components/model/types.ts
@ -1,5 +1,5 @@
 import Frame from '../../canvas/model/Frame';
-import { Nullable, OptionAsDocument } from '../../common';
+import { AddOptions, Nullable, OptionAsDocument } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import Selectors from '../../selector_manager/model/Selectors';
 import { TraitProperties } from '../../trait_manager/types';
@ -15,6 +15,8 @@ export type DragMode = 'translate' | 'absolute' | '';

 export type DraggableDroppableFn = (source: Component, target: Component, index?: number) => boolean | void;

+export interface AddComponentsOption extends AddOptions, OptionAsDocument {}
+
 export interface ComponentStackItem {
  id: string;
  model: typeof Component;
--- a/test/specs/dom_components/index.ts
+++ b/test/specs/dom_components/index.ts
@ -3,6 +3,7 @@ import EditorModel from '../../../src/editor/model/Editor';
 import Editor from '../../../src/editor';
 import utils from './../../test_utils.js';
 import { Component } from '../../../src';
+import ComponentWrapper from '../../../src/dom_components/model/ComponentWrapper';

 describe('DOM Components', () => {
  describe('Main', () => {
@ -312,4 +313,86 @@ describe('DOM Components', () => {
      });
    });
  });
+
+  describe('Rendered components', () => {
+    let editor: Editor;
+    let em: EditorModel;
+    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();
+      });
+    });
+
+    afterEach(() => {
+      editor.destroy();
+    });
+
+    describe('render components with asDocument', () => {
+      const docHtml = `
+        <!DOCTYPE html>
+        <html lang="en" class="cls-html" data-gjs-htmlp="true">
+          <head class="cls-head" data-gjs-headp="true">
+            <meta charset="utf-8">
+            <title>Test</title>
+            <link rel="stylesheet" href="/noop.css">
+            <!-- comment -->
+          </head>
+          <body class="cls-body" data-gjs-bodyp="true">
+            <h1>H1</h1>
+          </body>
+        </html>
+      `;
+
+      test('initial setup', () => {
+        expect(root.head.components().length).toBe(0);
+        expect(root.get('doctype')).toBe('');
+      });
+
+      test('import HTML document without option', () => {
+        root.components(docHtml);
+        expect(root.head.components().length).toBe(0);
+        expect(root.get('doctype')).toBe('');
+      });
+
+      test('import HTML document with asDocument', () => {
+        root.components(docHtml, { asDocument: true });
+        const { head, docEl } = root;
+        expect(head.components().length).toBe(4);
+        expect(head.get('headp')).toBe(true);
+        expect(docEl.get('htmlp')).toBe(true);
+        expect(root.get('bodyp')).toBe(true);
+        expect(root.get('doctype')).toBe('<!DOCTYPE html>');
+
+        const outputHtml = `
+          <!DOCTYPE html>
+          <html lang="en" class="cls-html">
+            <head class="cls-head">
+              <meta charset="utf-8"/>
+              <title>Test</title>
+              <link rel="stylesheet" href="/noop.css"/>
+              <!-- comment -->
+            </head>
+            <body class="cls-body">
+              <h1>H1</h1>
+            </body>
+          </html>
+          `.replace(/>\s+|\s+</g, m => m.trim());
+        expect(root.toHTML()).toBe(outputHtml);
+      });
+    });
+  });
 });