Aligner BalloonEditor package to the View#render API.

src/ballooneditorui.js

@@ -43,6 +43,17 @@ export default class BalloonEditorUI {
 		 * @inheritDoc
 		 */
 		this.focusTracker = new FocusTracker();
+	}
+
+	/**
+	 * Initializes the UI.
+	 */
+	init() {
+		const editor = this.editor;
+		const view = this.view;
+		const contextualToolbar = editor.plugins.get( 'ContextualToolbar' );
+
+		view.render();
 
 		// Setup the editable.
 		const editingRoot = editor.editing.createRoot( view.editableElement );
@@ -54,16 +65,6 @@ export default class BalloonEditorUI {
 		view.editable.name = editingRoot.rootName;
 
 		this.focusTracker.add( view.editableElement );
-	}
-
-	/**
-	 * Initializes the UI.
-	 */
-	init() {
-		const editor = this.editor;
-		const contextualToolbar = editor.plugins.get( 'ContextualToolbar' );
-
-		this.view.init();
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,

src/ballooneditoruiview.js

@@ -32,7 +32,7 @@ export default class BalloonEditorUIView extends EditorUIView {
 		 */
 		this.editable = new InlineEditableUIView( locale, editableElement );
 
-		this.addChildren( this.editable );
+		this.registerChildren( this.editable );
 	}
 
 	/**

tests/ballooneditor.js

@@ -40,7 +40,7 @@ describe( 'BalloonEditor', () => {
 	describe( 'constructor()', () => {
 		beforeEach( () => {
 			editor = new BalloonEditor( editorElement, {
-				plugins: [ Bold ],
+				plugins: [ ContextualToolbar, Bold ],
 				toolbar: [ 'Bold' ]
 			} );
 		} );
@@ -53,10 +53,6 @@ describe( 'BalloonEditor', () => {
 			expect( editor.config.get( 'contextualToolbar' ) ).to.have.members( [ 'Bold' ] );
 		} );
 
-		it( 'creates a single div editable root in the view', () => {
-			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
-		} );
-
 		it( 'creates a single document root', () => {
 			expect( count( editor.document.getRootNames() ) ).to.equal( 1 );
 			expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
@@ -65,11 +61,6 @@ describe( 'BalloonEditor', () => {
 		it( 'uses HTMLDataProcessor', () => {
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 		} );
-
-		it( 'creates the UI using BalloonEditorUI classes', () => {
-			expect( editor.ui ).to.be.instanceof( BalloonEditorUI );
-			expect( editor.ui.view ).to.be.instanceof( BalloonEditorUIView );
-		} );
 	} );
 
 	describe( 'create()', () => {
@@ -99,6 +90,15 @@ describe( 'BalloonEditor', () => {
 			expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
 		} );
 
+		it( 'creates a single div editable root in the view', () => {
+			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
+		} );
+
+		it( 'creates the UI using BalloonEditorUI classes', () => {
+			expect( editor.ui ).to.be.instanceof( BalloonEditorUI );
+			expect( editor.ui.view ).to.be.instanceof( BalloonEditorUIView );
+		} );
+
 		it( 'loads data from the editor element', () => {
 			expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
 		} );
@@ -186,12 +186,12 @@ describe( 'BalloonEditor', () => {
 		} );
 
 		it( 'fires uiReady once UI is ready', () => {
-			let isReady;
+			let isRendered;
 
 			class EventWatcher extends Plugin {
 				init() {
 					this.editor.on( 'uiReady', () => {
-						isReady = this.editor.ui.view.ready;
+						isRendered = this.editor.ui.view.isRendered;
 					} );
 				}
 			}
@@ -201,7 +201,7 @@ describe( 'BalloonEditor', () => {
 					plugins: [ EventWatcher ]
 				} )
 				.then( newEditor => {
-					expect( isReady ).to.be.true;
+					expect( isRendered ).to.be.true;
 
 					editor = newEditor;
 				} );

tests/ballooneditorui.js

@@ -3,37 +3,36 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals document, Event */
+/* globals Event */
 
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
-
 import BalloonEditorUI from '../src/ballooneditorui';
 import BalloonEditorUIView from '../src/ballooneditoruiview';
-import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
+import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import ContextualToolbar from '@ckeditor/ckeditor5-ui/src/toolbar/contextual/contextualtoolbar';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 
 describe( 'BalloonEditorUI', () => {
-	let editorElement, editor, editable, view, ui;
+	let editor, view, ui;
 
 	beforeEach( () => {
-		editorElement = document.createElement( 'div' );
-		document.body.appendChild( editorElement );
-
-		editor = new ClassicTestEditor( editorElement, {
-			plugins: [ ContextualToolbar ]
-		} );
-
-		return editor.initPlugins()
-			.then( () => {
-				view = new BalloonEditorUIView( editor.locale );
-				ui = new BalloonEditorUI( editor, view );
-				editable = editor.editing.view.getRoot();
+		return VirtualBalloonTestEditor
+			.create( {
+				plugins: [ ContextualToolbar ]
+			} )
+			.then( newEditor => {
+				editor = newEditor;
+				ui = editor.ui;
+				view = ui.view;
 			} );
 	} );
 
+	afterEach( () => {
+		editor.destroy();
+	} );
+
 	describe( 'constructor()', () => {
 		it( 'sets #editor', () => {
 			expect( ui.editor ).to.equal( editor );
@@ -52,6 +51,12 @@ describe( 'BalloonEditorUI', () => {
 		} );
 
 		describe( 'editable', () => {
+			let editable;
+
+			beforeEach( () => {
+				editable = editor.editing.view.getRoot();
+			} );
+
 			it( 'registers view.editable#element in editor focus tracker', () => {
 				ui.focusTracker.isFocused = false;
 
@@ -88,15 +93,8 @@ describe( 'BalloonEditorUI', () => {
 	} );
 
 	describe( 'init()', () => {
-		afterEach( () => {
-			ui.destroy();
-		} );
-
 		it( 'initializes the #view', () => {
-			const spy = sinon.spy( view, 'init' );
-
-			ui.init();
-			sinon.assert.calledOnce( spy );
+			expect( view.isRendered ).to.be.true;
 		} );
 
 		it( 'initializes keyboard navigation between view#toolbar and view#editable', () => {
@@ -106,7 +104,6 @@ describe( 'BalloonEditorUI', () => {
 			const toolbarHideSpy = sinon.stub( toolbar, 'hide' ).returns( {} );
 			const editingFocusSpy = sinon.stub( editor.editing.view, 'focus' ).returns( {} );
 
-			ui.init();
 			ui.focusTracker.isFocused = true;
 
 			// #show and #hide are mocked so mocking the focus as well.
@@ -140,10 +137,42 @@ describe( 'BalloonEditorUI', () => {
 		it( 'destroys the #view', () => {
 			const spy = sinon.spy( view, 'destroy' );
 
-			ui.init();
-			ui.destroy();
-
-			sinon.assert.calledOnce( spy );
+			return editor.destroy()
+				.then( () => {
+					sinon.assert.calledOnce( spy );
+				} );
 		} );
 	} );
 } );
+
+class VirtualBalloonTestEditor extends VirtualTestEditor {
+	constructor( config ) {
+		super( config );
+
+		const view = new BalloonEditorUIView( this.locale );
+		this.ui = new BalloonEditorUI( this, view );
+	}
+
+	destroy() {
+		this.ui.destroy();
+
+		return super.destroy();
+	}
+
+	static create( config ) {
+		return new Promise( resolve => {
+			const editor = new this( config );
+
+			resolve(
+				editor.initPlugins()
+					.then( () => {
+						editor.ui.init();
+						editor.fire( 'uiReady' );
+						editor.fire( 'dataReady' );
+						editor.fire( 'ready' );
+					} )
+					.then( () => editor )
+			);
+		} );
+	}
+}

tests/ballooneditoruiview.js

@@ -28,7 +28,7 @@ describe( 'BalloonEditorUIView', () => {
 			it( 'is registered as a child', () => {
 				const spy = sinon.spy( view.editable, 'destroy' );
 
-				view.init();
+				view.render();
 				view.destroy();
 				sinon.assert.calledOnce( spy );
 			} );
@@ -37,7 +37,7 @@ describe( 'BalloonEditorUIView', () => {
 
 	describe( 'editableElement', () => {
 		it( 'returns editable\'s view element', () => {
-			view.init();
+			view.render();
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
 			view.destroy();
 		} );