diff --git a/src/dev-utils/view.js b/src/dev-utils/view.js index 514da3acd..ad7e0f528 100644 --- a/src/dev-utils/view.js +++ b/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 = { * (``, ``). * @param {Boolean} [options.showAttributeElementId=false] When set to `true`, attribute element's id will be printed * (``). + * @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 ) { diff --git a/tests/dev-utils/view.js b/tests/dev-utils/view.js index cdd56930f..40f4e47e8 100644 --- a/tests/dev-utils/view.js +++ b/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( '' ); } ); + 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 = 'foo'; + + return domElement; + }; + + const p = new ContainerElement( 'p', null, span ); + expect( stringify( p, null, { showType: true } ) ) + .to.equal( '' ); + } ); + + it( 'should stringify UIElement, (renderUIElements=true)', () => { + const span = new UIElement( 'span' ); + + span.render = function( domDocument ) { + const domElement = this.toDomElement( domDocument ); + + domElement.innerHTML = 'foo'; + + return domElement; + }; + + const p = new ContainerElement( 'p', null, span ); + expect( stringify( p, null, { showType: true, renderUIElements: true } ) ) + .to.equal( 'foo' ); + } ); + it( 'should sort classes in specified element', () => { const text = new Text( 'foobar' ); const b = new Element( 'b', {