t/ckeditor5-media-embed/1: Made the view stringify util output the content of the UI element

src/dev-utils/view.js

@@ -7,6 +7,8 @@
  * @module engine/dev-utils/view
  */
 
+/* globals document */
+
 /**
  * Collection of methods for manipulating the {@link module:engine/view/view view} for testing purposes.
  */
@@ -49,6 +51,8 @@ const allowedTypes = {
  * (`<span view-priority="12">`, `<b view-priority="10">`).
  * @param {Boolean} [options.showAttributeElementId=false] When set to `true`, attribute element's id will be printed
  * (`<span id="marker:foo">`).
+ * @param {Boolean} [options.renderUIElements=false] When set to `true`, the inner content of each
+ * {@link module:engine/view/uielement~UIElement} will be printed.
  * @returns {String} The stringified data.
  */
 export function getData( view, options = {} ) {
@@ -63,6 +67,7 @@ export function getData( view, options = {} ) {
  const stringifyOptions = {
  showType: options.showType,
  showPriority: options.showPriority,
+ renderUIElements: options.renderUIElements,
  ignoreRoot: true
  };
 
@@ -222,6 +227,8 @@ setData._parse = parse;
  * Mainly used by the `getData` function to ignore the {@link module:engine/view/document~Document document's} root element.
  * @param {Boolean} [options.sameSelectionCharacters=false] When set to `true`, the selection inside the text will be marked as
  * `{` and `}` and the selection outside the text as `[` and `]`. When set to `false`, both will be marked as `[` and `]` only.
+ * @param {Boolean} [options.renderUIElements=false] When set to `true`, the inner content of each
+ * {@link module:engine/view/uielement~UIElement} will be printed.
  * @returns {String} An HTML-like string representing the view.
  */
 export function stringify( node, selectionOrPositionOrRange = null, options = {} ) {
@@ -605,6 +612,8 @@ class ViewStringify {
  * be outputted.
  * @param {Boolean} [options.sameSelectionCharacters=false] When set to `true`, the selection inside the text is marked as
  * `{` and `}` and the selection outside the text as `[` and `]`. When set to `false`, both are marked as `[` and `]`.
+ * @param {Boolean} [options.renderUIElements=false] When set to `true`, the inner content of each
+ * {@link module:engine/view/uielement~UIElement} will be printed.
  */
  constructor( root, selection, options ) {
  this.root = root;
@@ -620,6 +629,7 @@ class ViewStringify {
  this.showAttributeElementId = !!options.showAttributeElementId;
  this.ignoreRoot = !!options.ignoreRoot;
  this.sameSelectionCharacters = !!options.sameSelectionCharacters;
+ this.renderUIElements = !!options.renderUIElements;
  }
 
  /**
@@ -652,13 +662,17 @@ class ViewStringify {
  callback( this._stringifyElementOpen( root ) );
  }
 
- let offset = 0;
- callback( this._stringifyElementRanges( root, offset ) );
-
- for ( const child of root.getChildren() ) {
- this._walkView( child, callback );
- offset++;
+ if ( this.renderUIElements && root.is( 'uiElement' ) ) {
+ callback( root.render( document ).innerHTML );
+ } else {
+ let offset = 0;
  callback( this._stringifyElementRanges( root, offset ) );
+
+ for ( const child of root.getChildren() ) {
+ this._walkView( child, callback );
+ offset++;
+ callback( this._stringifyElementRanges( root, offset ) );
+ }
  }
 
  if ( root.is( 'element' ) && !ignore ) {

tests/dev-utils/view.js

@@ -38,7 +38,12 @@ describe( 'view test utils', () => {
  const stringifySpy = sandbox.spy( getData, '_stringify' );
  const view = new View();
  const viewDocument = view.document;
- const options = { showType: false, showPriority: false, withoutSelection: true };
+ const options = {
+ showType: false,
+ showPriority: false,
+ withoutSelection: true,
+ renderUIElements: false
+ };
  const root = createAttachedRoot( viewDocument, element );
  root._appendChild( new Element( 'p' ) );
 
@@ -50,6 +55,7 @@ describe( 'view test utils', () => {
  expect( stringifyOptions ).to.have.property( 'showType' ).that.equals( false );
  expect( stringifyOptions ).to.have.property( 'showPriority' ).that.equals( false );
  expect( stringifyOptions ).to.have.property( 'ignoreRoot' ).that.equals( true );
+ expect( stringifyOptions ).to.have.property( 'renderUIElements' ).that.equals( false );
 
  view.destroy();
  } );
@@ -364,6 +370,38 @@ describe( 'view test utils', () => {
  .to.equal( '<container:p><ui:span></ui:span></container:p>' );
  } );
 
+ it( 'should not stringify inner UIElement content (renderUIElements=false)', () => {
+ const span = new UIElement( 'span' );
+
+ span.render = function( domDocument ) {
+ const domElement = this.toDomElement( domDocument );
+
+ domElement.innerHTML = '<b>foo</b>';
+
+ return domElement;
+ };
+
+ const p = new ContainerElement( 'p', null, span );
+ expect( stringify( p, null, { showType: true } ) )
+ .to.equal( '<container:p><ui:span></ui:span></container:p>' );
+ } );
+
+ it( 'should stringify UIElement, (renderUIElements=true)', () => {
+ const span = new UIElement( 'span' );
+
+ span.render = function( domDocument ) {
+ const domElement = this.toDomElement( domDocument );
+
+ domElement.innerHTML = '<b>foo</b>';
+
+ return domElement;
+ };
+
+ const p = new ContainerElement( 'p', null, span );
+ expect( stringify( p, null, { showType: true, renderUIElements: true } ) )
+ .to.equal( '<container:p><ui:span><b>foo</b></ui:span></container:p>' );
+ } );
+
  it( 'should sort classes in specified element', () => {
  const text = new Text( 'foobar' );
  const b = new Element( 'b', {