How to use the @ckeditor/ckeditor5-ui/src/view function in @ckeditor/ckeditor5-ui

.then( editor => {
					newEditor = editor;
					balloon = newEditor.plugins.get( 'ContextualBalloon' );
					balloonToolbar = newEditor.plugins.get( 'BalloonToolbar' );
					const button = new View();

					button.element = global.document.createElement( 'div' );

					// There must be at least one toolbar items which is not disabled to show it.
					// https://github.com/ckeditor/ckeditor5-ui/issues/269
					balloonToolbar.toolbarView.items.add( button );

					newEditor.editing.view.isFocused = true;
					newEditor.editing.view.getDomRoot().focus();
				} );
		} );

.then( editor => {
					newEditor = editor;
					balloon = newEditor.plugins.get( 'ContextualBalloon' );
					balloonToolbar = newEditor.plugins.get( 'BalloonToolbar' );
					const button = new View();

					button.element = global.document.createElement( 'div' );

					// There must be at least one toolbar items which is not disabled to show it.
					// https://github.com/ckeditor/ckeditor5-ui/issues/269
					balloonToolbar.toolbarView.items.add( button );

					newEditor.editing.view.isFocused = true;
					newEditor.editing.view.getDomRoot().focus();
				} );
		} );

.then( newEditor => {
			editor = newEditor;
			doc = editor.document;
			editingView = editor.editing.view;
			plugin = editor.plugins.get( ImageBalloon );

			view = new View();
			view.template = new Template( { tag: 'div' } );
			view.init();
		} );
	} );

it( 'should not engage when the form is in the balloon yet invisible', () => {
			setData( model, '[<img src="">]' );
			button.fire( 'execute' );
			expect( balloon.visibleView ).to.equal( form );

			const lastView = new View();
			lastView.element = document.createElement( 'div' );

			balloon.add( {
				view: lastView,
				position: {
					target: document.body
				}
			} );

			expect( balloon.visibleView ).to.equal( lastView );

			button.fire( 'execute' );
			expect( balloon.visibleView ).to.equal( lastView );
		} );

it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
			setData( model, '<table></table>' );

			expect( balloon.visibleView ).to.equal( toolbar );

			const lastView = new View();
			lastView.element = document.createElement( 'div' );

			balloon.add( {
				view: lastView,
				position: {
					target: document.body
				}
			} );

			expect( balloon.visibleView ).to.equal( lastView );

			editor.ui.fire( 'update' );

			expect( balloon.visibleView ).to.equal( lastView );
		} );

it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
			setData( model, '[<img src="">]' );

			expect( balloon.visibleView ).to.equal( toolbar );

			const lastView = new View();
			lastView.element = document.createElement( 'div' );

			balloon.add( {
				view: lastView,
				position: {
					target: document.body
				}
			} );

			expect( balloon.visibleView ).to.equal( lastView );

			editor.ui.fire( 'update' );

			expect( balloon.visibleView ).to.equal( lastView );
		} );

it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
			setData( editor.model, '' );

			expect( balloon.visibleView ).to.equal( toolbar );

			const lastView = new View();
			lastView.element = document.createElement( 'div' );

			balloon.add( {
				view: lastView,
				position: {
					target: document.body
				}
			} );

			expect( balloon.visibleView ).to.equal( lastView );

			editor.ui.fire( 'update' );

			expect( balloon.visibleView ).to.equal( lastView );
		} );

it( 'should be removed from balloon when is in not visible stack', () => {
			setData( model, 'foo[<img alt="foo bar" src="">]' );

			editor.ui.componentFactory.create( 'imageTextAlternative' ).fire( 'execute' );

			const customView = new View();

			balloon.add( {
				view: customView,
				position: { target: {} },
				stackId: 'custom'
			} );

			balloon.showStack( 'custom' );

			model.change( writer =&gt; {
				const root = model.document.getRoot();

				writer.setSelection( root.getChild( 0 ), 0 );
			} );

			expect( balloon.hasView( form ) ).to.equal( false );

it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
				setData( model, '<table></table>' );

				expect( balloon.visibleView ).to.equal( toolbar );

				const lastView = new View();
				lastView.element = document.createElement( 'div' );

				balloon.add( {
					view: lastView,
					position: {
						target: document.body
					}
				} );

				expect( balloon.visibleView ).to.equal( lastView );

				editor.ui.fire( 'update' );

				expect( balloon.visibleView ).to.equal( lastView );
			} );

beforeEach( () => {
		editor = {};
		view = new View();
		ui = new ClassicTestEditorUI( editor, view );
	} );