diff --git a/src/inlineeditoruiview.js b/src/inlineeditoruiview.js index ce998c5..1dfab84 100644 --- a/src/inlineeditoruiview.js +++ b/src/inlineeditoruiview.js @@ -130,9 +130,6 @@ export default class InlineEditorUIView extends EditorUIView { * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView} */ this.editable = new InlineEditableUIView( locale, editableElement ); - - this.body.add( this.panel ); - this.registerChild( this.editable ); } /** @@ -141,6 +138,8 @@ export default class InlineEditorUIView extends EditorUIView { render() { super.render(); + this.body.add( this.panel ); + this.registerChild( this.editable ); this.panel.content.add( this.toolbar ); } diff --git a/tests/inlineeditoruiview.js b/tests/inlineeditoruiview.js index cbbca5b..fdf4b4f 100644 --- a/tests/inlineeditoruiview.js +++ b/tests/inlineeditoruiview.js @@ -15,11 +15,6 @@ describe( 'InlineEditorUIView', () => { beforeEach( () => { locale = new Locale( 'en' ); view = new InlineEditorUIView( locale ); - view.render(); - } ); - - afterEach( () => { - view.destroy(); } ); describe( 'constructor()', () => { @@ -32,12 +27,8 @@ describe( 'InlineEditorUIView', () => { expect( view.toolbar.locale ).to.equal( locale ); } ); - it( 'is given the right CSS classes', () => { - expect( view.toolbar.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true; - } ); - - it( 'sets the default value of the #viewportTopOffset attribute', () => { - expect( view.viewportTopOffset ).to.equal( 0 ); + it( 'is not rendered', () => { + expect( view.toolbar.isRendered ).to.be.false; } ); } ); @@ -50,17 +41,13 @@ describe( 'InlineEditorUIView', () => { expect( view.panel.locale ).to.equal( locale ); } ); - it( 'is given the right CSS class', () => { - expect( view.panel.element.classList.contains( 'ck-toolbar-container' ) ).to.be.true; - } ); - - it( 'is put into the #body collection', () => { - expect( view.body.get( 0 ) ).to.equal( view.panel ); - } ); - it( 'gets view.panel#withArrow set', () => { expect( view.panel.withArrow ).to.be.false; } ); + + it( 'is not rendered', () => { + expect( view.panel.isRendered ).to.be.false; + } ); } ); describe( '#editable', () => { @@ -68,10 +55,46 @@ describe( 'InlineEditorUIView', () => { expect( view.editable ).to.be.instanceof( InlineEditableUIView ); } ); - it( 'is given a locate object', () => { + it( 'is given a locale object', () => { expect( view.editable.locale ).to.equal( locale ); } ); + it( 'is not rendered', () => { + expect( view.editable.isRendered ).to.be.false; + } ); + } ); + } ); + + describe( 'render()', () => { + beforeEach( () => { + view.render(); + } ); + + afterEach( () => { + view.destroy(); + } ); + + describe( '#toolbar', () => { + it( 'is given the right CSS classes', () => { + expect( view.toolbar.element.classList.contains( 'ck-toolbar_floating' ) ).to.be.true; + } ); + + it( 'sets the default value of the #viewportTopOffset attribute', () => { + expect( view.viewportTopOffset ).to.equal( 0 ); + } ); + } ); + + describe( '#panel', () => { + it( 'is given the right CSS class', () => { + expect( view.panel.element.classList.contains( 'ck-toolbar-container' ) ).to.be.true; + } ); + + it( 'is put into the #body collection', () => { + expect( view.body.get( 0 ) ).to.equal( view.panel ); + } ); + } ); + + describe( '#editable', () => { it( 'is registered as a child', () => { const spy = sinon.spy( view.editable, 'destroy' ); @@ -96,6 +119,7 @@ describe( 'InlineEditorUIView', () => { describe( 'editableElement', () => { it( 'returns editable\'s view element', () => { + view.render(); expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' ); view.destroy(); } );