Merge pull request #1506 from ckeditor/t/ckeditor5-media-embed/1

Other: Made the view's `stringify()` dev util output the content of the `UIElement` (see ckeditor/ckeditor5-media-embed#1).

Author: Reinmar

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', {