Explorar o código

Internal: The ClassicTestEditor should create the editable DOM just like the ClassicEditor. Closes #74.

Piotrek Koszuliński %!s(int64=8) %!d(string=hai) anos
pai
achega
d19d98b425

+ 46 - 4
packages/ckeditor5-core/tests/_utils-tests/classictesteditor.js

@@ -13,6 +13,7 @@ import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/html
 
 import ClassicTestEditorUI from '../../tests/_utils/classictesteditorui';
 import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
+import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import testUtils from '../../tests/_utils/utils';
@@ -39,15 +40,24 @@ describe( 'ClassicTestEditor', () => {
 		} );
 
 		it( 'creates model and view roots', () => {
-			const editor = new ClassicTestEditor( { foo: 1 } );
+			const editor = new ClassicTestEditor( editorElement );
 
 			expect( editor.document.getRoot() ).to.have.property( 'name', '$root' );
 			expect( editor.editing.view.getRoot() ).to.have.property( 'name', 'div' );
 			expect( editor.data.processor ).to.be.instanceof( HtmlDataProcessor );
 		} );
+
+		it( 'creates editable DOM', () => {
+			const editor = new ClassicTestEditor( editorElement );
+
+			expect( editor.ui.view.editable ).to.be.instanceOf( InlineEditableUIView );
+
+			expect( editor.ui.view.editableElement.tagName ).to.equal( 'DIV' );
+			expect( editor.ui.view.editableElement ).to.equal( editor.ui.view.editable.element );
+		} );
 	} );
 
-	describe( 'create', () => {
+	describe( 'create()', () => {
 		it( 'creates an instance of editor', () => {
 			return ClassicTestEditor.create( editorElement, { foo: 1 } )
 				.then( editor => {
@@ -100,13 +110,33 @@ describe( 'ClassicTestEditor', () => {
 			return ClassicTestEditor.create( editorElement, {
 					plugins: [ EventWatcher ]
 				} )
-				.then( () => {
+				.then( editor => {
 					expect( fired ).to.deep.equal( [ 'pluginsReady', 'uiReady', 'dataReady', 'ready' ] );
+
+					return editor.destroy();
+				} );
+		} );
+
+		it( 'inserts editor UI next to editor element', () => {
+			return ClassicTestEditor.create( editorElement )
+				.then( editor => {
+					expect( editor.ui.view.element.previousSibling ).to.equal( editorElement );
+
+					return editor.destroy();
+				} );
+		} );
+
+		it( 'attaches editable UI as view\'s DOM root', () => {
+			return ClassicTestEditor.create( editorElement )
+				.then( editor => {
+					expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element );
+
+					return editor.destroy();
 				} );
 		} );
 	} );
 
-	describe( 'destroy', () => {
+	describe( 'destroy()', () => {
 		it( 'destroys UI and calls super.destroy()', () => {
 			return ClassicTestEditor.create( editorElement, { foo: 1 } )
 				.then( editor => {
@@ -120,5 +150,17 @@ describe( 'ClassicTestEditor', () => {
 						} );
 				} );
 		} );
+
+		it( 'restores the editor element', () => {
+			return ClassicTestEditor.create( editorElement, { foo: 1 } )
+				.then( editor => {
+					expect( editor.element.style.display ).to.equal( 'none' );
+
+					return editor.destroy()
+						.then( () => {
+							expect( editor.element.style.display ).to.equal( '' );
+						} );
+				} );
+		} );
 	} );
 } );

+ 13 - 0
packages/ckeditor5-core/tests/_utils/classictesteditor.js

@@ -7,6 +7,8 @@ import StandardEditor from '../../src/editor/standardeditor';
 import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
 import ClassicTestEditorUI from './classictesteditorui';
 import BoxedEditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview';
+import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer';
+import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 
 /**
  * A simplified classic editor. Useful for testing features.
@@ -26,12 +28,21 @@ export default class ClassicTestEditor extends StandardEditor {
 		this.data.processor = new HtmlDataProcessor();
 
 		this.ui = new ClassicTestEditorUI( this, new BoxedEditorUIView( this.locale ) );
+
+		// Expose properties normally exposed by the ClassicEditorUI.
+		this.ui.view.editable = new InlineEditableUIView( this.ui.view.locale );
+		this.ui.view.main.add( this.ui.view.editable );
+		this.ui.view.editableElement = this.ui.view.editable.element;
+
+		this._elementReplacer = new ElementReplacer();
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	destroy() {
+		this._elementReplacer.restore();
+
 		return this.ui.destroy()
 			.then( () => super.destroy() );
 	}
@@ -45,8 +56,10 @@ export default class ClassicTestEditor extends StandardEditor {
 
 			resolve(
 				editor.initPlugins()
+					.then( () => editor._elementReplacer.replace( element, editor.ui.view.element ) )
 					.then( () => editor.ui.init() )
 					.then( () => editor.fire( 'uiReady' ) )
+					.then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) )
 					.then( () => editor.loadDataFromEditorElement() )
 					.then( () => {
 						editor.fire( 'dataReady' );