How to use the @ckeditor/ckeditor5-engine/src/dev-utils/view.getData function in @ckeditor/ckeditor5-engine

function testMediaUpcast( urls, expected ) {
		for ( const url of urls ) {
			editor.setData( `<figure class="media"><div data-oembed-url="${ url }"></div></figure>` );

			const viewData = getViewData( view, { withoutSelection: true, renderUIElements: true } );
			let expectedRegExp;

			const expectedUrl = url.match( /^https?:\/\// ) ? url : 'https://' + url;

			if ( expected ) {
				expectedRegExp = new RegExp(
					']+&gt;' +
						']+&gt;' +
							normalizeHtml( expected ) +
						'' +
					'' );
			} else {
				expectedRegExp = new RegExp(
					']+&gt;' +
						']+&gt;' +
							'<div class="ck ck-media__placeholder ck-reset_all">' +</div>

it( 'should not remove figcaption when selection is inside it even when it is empty', () => {
			setModelData( model, '<img src="">[foo bar]' );

			model.change( writer =&gt; {
				writer.remove( doc.selection.getFirstRange() );
			} );

			expect( getViewData( view ) ).to.equal(
				'<figure class="ck-widget image">' +
					'<img src="">' +
					'<figcaption data-placeholder="Enter image caption" class="ck-editor__editable ck-editor__nested-editable ck-placeholder">' +
						'[]' +
					'</figcaption>' +
				'</figure>'
			);
		} );

it( 'the view "span" element should outer wrap the text', () => {
			setModelData( model, 'Foo [Bar] Baz.' );

			editor.execute( 'highlight', { value: 'yellowMarker' } );

			expect( getViewData( editor.editing.view ) ).to.equal(
				'<p>Foo {<mark class="marker-yellow">Bar</mark>} Baz.</p>'
			);

			editor.execute( 'fontSize', { value: 'huge' } );

			expect( getViewData( editor.editing.view ) ).to.equal(
				'<p>Foo {<span class="text-huge"><mark class="marker-yellow">Bar</mark></span>} Baz.</p>'
			);
		} );
	} );

it( 'should not convert from model to view if style is not present: remove attribute', () => {
			setModelData( model, '<img src="/assets/sample.png">' );
			const image = document.getRoot().getChild( 0 );

			model.change( writer =&gt; {
				writer.setAttribute( 'imageStyle', null, image );
			} );

			expect( editor.getData() ).to.equal( '<figure class="image"><img src="/assets/sample.png"></figure>' );
			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
				'<figure class="ck-widget image"><img src="/assets/sample.png"></figure>'
			);
		} );
	} );

it( 'should create fake selection', () => {
			setModelData( model, '[<img src="/assets/sample.png" alt="alt text">]' );

			expect( getViewData( view ) ).to.equal(
				'[<figure class="ck-widget ck-widget_selected image">' +
					'<img src="/assets/sample.png" alt="alt text">' +
				'</figure>]'
			);

			expect( viewDocument.selection.isFake ).to.be.true;
			expect( viewDocument.selection.fakeSelectionLabel ).to.equal( 'alt text image widget' );
		} );

it( 'should convert the url attribute change', () => {
						setModelData( model, '' );
						const media = doc.getRoot().getChild( 0 );

						model.change( writer => {
							writer.setAttribute( 'url', 'https://cksource.com', media );
						} );

						expect( getViewData( view, { withoutSelection: true, renderUIElements: true } ) ).to.equal(
							'<figure class="ck-widget media">' +
								'<div data-oembed-url="https://cksource.com" class="ck-media__wrapper">' +
									'allow-everything, id=https://cksource.com' +
								'</div>' +
							'</figure>'
						);
					} );

it( 'should convert adding attribute to image', () => {
			setModelData( model, '<img src="">' );
			const image = document.getRoot().getChild( 0 );

			model.change( writer =&gt; {
				writer.setAttribute( 'alt', 'foo bar', image );
			} );

			expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
				'<figure class="ck-widget image"><img src="" alt="foo bar"></figure>'
			);
		} );

it( 'should toggle selected class', () => {
		setModelData( document, '[foo]' );

		expect( getViewData( viewDocument ) ).to.equal(
			'[<div class="ck-widget ck-widget_selected">foo</div>]'
		);

		document.enqueueChanges( () =&gt; {
			document.selection.collapseToStart();
		} );

		expect( getViewData( viewDocument ) ).to.equal(
			'[]<div class="ck-widget">foo</div>'
		);
	} );

editor.conversion.attributeToAttribute(
				{
					model: { key: 'alignment', values: [ 'right', 'center', 'justify' ] },
					view: {
						right: { key: 'style', value: { 'text-align': 'right' } },
						center: { key: 'style', value: { 'text-align': 'center' } },
						justify: { key: 'style', value: { 'text-align': 'justify' } }
					}
				}
			);

			setModelData( model, modelTable( [
				[ '00' ]
			] ) );

			expect( formatTable( getViewData( viewDocument, { withoutSelection: true } ) ) ).to.equal( formatTable(
				'<figure class="table">' +
					'' +
						'' +
							'' +
								'' +
							'' +
						'' +
					'<table><tbody><tr><td><p style="text-align:right">00</p></td></tr></tbody></table>' +
				'</figure>'
			) );
		} );

tryExpect( done, () => {
					expect( getViewData( view ) ).to.equal(
						'[<figure class="ck-widget image">' +
						'<img width="800" srcset="image-500.png 500w, image-800.png 800w" src="image.png" sizes="100vw">' +
						'</figure>]<p>foo bar</p>'
					);
					expect( loader.status ).to.equal( 'idle' );
				} );
			}, { priority: 'lowest' } );