8
0
Просмотр исходного кода

Tests: Added tests to check the placeholder feature of the UI. Code refactoring.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
fcaf6e3c7a

+ 2 - 1
packages/ckeditor5-editor-classic/src/classiceditorui.js

@@ -164,7 +164,8 @@ export default class ClassicEditorUI extends EditorUI {
 		const editingView = editor.editing.view;
 		const editingView = editor.editing.view;
 		const editingRoot = editingView.document.getRoot();
 		const editingRoot = editingView.document.getRoot();
 
 
-		const placeholderText = editor.config.get( 'placeholder' ) || editor.sourceElement.getAttribute( 'placeholder' );
+		const placeholderText = editor.config.get( 'placeholder' ) ||
+			editor.sourceElement && editor.sourceElement.getAttribute( 'placeholder' );
 
 
 		if ( placeholderText ) {
 		if ( placeholderText ) {
 			enablePlaceholder( {
 			enablePlaceholder( {

+ 1 - 0
packages/ckeditor5-editor-classic/src/classiceditoruiview.js

@@ -25,6 +25,7 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 	 * Creates an instance of the classic editor UI view.
 	 * Creates an instance of the classic editor UI view.
 	 *
 	 *
 	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
 	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
 	 */
 	 */
 	constructor( locale, editingView ) {
 	constructor( locale, editingView ) {
 		super( locale );
 		super( locale );

+ 69 - 28
packages/ckeditor5-editor-classic/tests/classiceditorui.js

@@ -10,11 +10,12 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import ClassicEditorUI from '../src/classiceditorui';
 import ClassicEditorUI from '../src/classiceditorui';
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ClassicEditorUIView from '../src/classiceditoruiview';
 import ClassicEditorUIView from '../src/classiceditoruiview';
 
 
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
+import { isElement } from 'lodash-es';
 
 
 describe( 'ClassicEditorUI', () => {
 describe( 'ClassicEditorUI', () => {
 	let editor, view, ui, viewElement;
 	let editor, view, ui, viewElement;
@@ -23,7 +24,7 @@ describe( 'ClassicEditorUI', () => {
 
 
 	beforeEach( () => {
 	beforeEach( () => {
 		return VirtualClassicTestEditor
 		return VirtualClassicTestEditor
-			.create( {
+			.create( '', {
 				toolbar: [ 'foo', 'bar' ],
 				toolbar: [ 'foo', 'bar' ],
 			} )
 			} )
 			.then( newEditor => {
 			.then( newEditor => {
@@ -69,7 +70,7 @@ describe( 'ClassicEditorUI', () => {
 
 
 			it( 'sets view.stickyPanel#viewportTopOffset, when specified in the config', () => {
 			it( 'sets view.stickyPanel#viewportTopOffset, when specified in the config', () => {
 				return VirtualClassicTestEditor
 				return VirtualClassicTestEditor
-					.create( {
+					.create( '', {
 						toolbar: {
 						toolbar: {
 							viewportTopOffset: 100
 							viewportTopOffset: 100
 						}
 						}
@@ -95,36 +96,72 @@ describe( 'ClassicEditorUI', () => {
 
 
 				expect( view.editable.name ).to.equal( editable.rootName );
 				expect( view.editable.name ).to.equal( editable.rootName );
 			} );
 			} );
+		} );
+
+		describe( 'placeholder', () => {
+			it( 'sets placeholder from editor.config.placeholder', () => {
+				return VirtualClassicTestEditor
+					.create( 'foo', {
+						extraPlugins: [ Paragraph ],
+						placeholder: 'placeholder-text',
+					} )
+					.then( newEditor => {
+						editor = newEditor;
 
 
-			it( 'binds view.editable#isFocused', () => {
-				utils.assertBinding(
-					view.editable,
-					{ isFocused: false },
-					[
-						[ editor.editing.view.document, { isFocused: true } ]
-					],
-					{ isFocused: true }
-				);
+						const firstChild = editor.editing.view.document.getRoot().getChild( 0 );
+
+						expect( firstChild.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder-text' );
+
+						return editor.destroy();
+					} );
 			} );
 			} );
 
 
-			it( 'binds view.editable#isReadOnly', () => {
-				const editable = editor.editing.view.document.getRoot();
+			it( 'sets placeholder from "placeholder" attribute of a passed element', () => {
+				const element = document.createElement( 'div' );
+
+				element.setAttribute( 'placeholder', 'placeholder-text' );
+
+				return VirtualClassicTestEditor
+					.create( element, {
+						extraPlugins: [ Paragraph ]
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+
+						const firstChild = editor.editing.view.document.getRoot().getChild( 0 );
+
+						expect( firstChild.getAttribute( 'data-placeholder' ) ).to.equal( 'placeholder-text' );
 
 
-				utils.assertBinding(
-					view.editable,
-					{ isReadOnly: false },
-					[
-						[ editable, { isReadOnly: true } ]
-					],
-					{ isReadOnly: true }
-				);
+						return editor.destroy();
+					} );
+			} );
+
+			it( 'uses editor.config.placeholder rather than "placeholder" attribute of a passed element', () => {
+				const element = document.createElement( 'div' );
+
+				element.setAttribute( 'placeholder', 'placeholder-text' );
+
+				return VirtualClassicTestEditor
+					.create( element, {
+						placeholder: 'config takes precedence',
+						extraPlugins: [ Paragraph ]
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+
+						const firstChild = editor.editing.view.document.getRoot().getChild( 0 );
+
+						expect( firstChild.getAttribute( 'data-placeholder' ) ).to.equal( 'config takes precedence' );
+
+						return editor.destroy();
+					} );
 			} );
 			} );
 		} );
 		} );
 
 
 		describe( 'view.toolbar#items', () => {
 		describe( 'view.toolbar#items', () => {
 			it( 'are filled with the config.toolbar (specified as an Array)', () => {
 			it( 'are filled with the config.toolbar (specified as an Array)', () => {
 				return VirtualClassicTestEditor
 				return VirtualClassicTestEditor
-					.create( {
+					.create( '', {
 						toolbar: [ 'foo', 'bar' ]
 						toolbar: [ 'foo', 'bar' ]
 					} )
 					} )
 					.then( editor => {
 					.then( editor => {
@@ -139,7 +176,7 @@ describe( 'ClassicEditorUI', () => {
 
 
 			it( 'are filled with the config.toolbar (specified as an Object)', () => {
 			it( 'are filled with the config.toolbar (specified as an Object)', () => {
 				return VirtualClassicTestEditor
 				return VirtualClassicTestEditor
-					.create( {
+					.create( '', {
 						toolbar: {
 						toolbar: {
 							items: [ 'foo', 'bar' ],
 							items: [ 'foo', 'bar' ],
 							viewportTopOffset: 100
 							viewportTopOffset: 100
@@ -219,10 +256,14 @@ function viewCreator( name ) {
 }
 }
 
 
 class VirtualClassicTestEditor extends VirtualTestEditor {
 class VirtualClassicTestEditor extends VirtualTestEditor {
-	constructor( config ) {
+	constructor( sourceElementOrData, config ) {
 		super( config );
 		super( config );
 
 
-		const view = new ClassicEditorUIView( this.locale );
+		if ( isElement( sourceElementOrData ) ) {
+			this.sourceElement = sourceElementOrData;
+		}
+
+		const view = new ClassicEditorUIView( this.locale, this.editing.view );
 		this.ui = new ClassicEditorUI( this, view );
 		this.ui = new ClassicEditorUI( this, view );
 
 
 		this.ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
 		this.ui.componentFactory.add( 'foo', viewCreator( 'foo' ) );
@@ -235,9 +276,9 @@ class VirtualClassicTestEditor extends VirtualTestEditor {
 		return super.destroy();
 		return super.destroy();
 	}
 	}
 
 
-	static create( config ) {
+	static create( sourceElementOrData, config ) {
 		return new Promise( resolve => {
 		return new Promise( resolve => {
-			const editor = new this( config );
+			const editor = new this( sourceElementOrData, config );
 
 
 			resolve(
 			resolve(
 				editor.initPlugins()
 				editor.initPlugins()

+ 13 - 2
packages/ckeditor5-editor-classic/tests/classiceditoruiview.js

@@ -4,6 +4,8 @@
  */
  */
 
 
 import ClassicEditorUIView from '../src/classiceditoruiview';
 import ClassicEditorUIView from '../src/classiceditoruiview';
+import EditingView from '@ckeditor/ckeditor5-engine/src/view/view';
+import ViewRootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
 import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
 import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
@@ -12,13 +14,15 @@ import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 
 describe( 'ClassicEditorUIView', () => {
 describe( 'ClassicEditorUIView', () => {
-	let locale, view;
+	let locale, view, editingView, editingViewRoot;
 
 
 	testUtils.createSinonSandbox();
 	testUtils.createSinonSandbox();
 
 
 	beforeEach( () => {
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		locale = new Locale( 'en' );
-		view = new ClassicEditorUIView( locale );
+		setUpEditingView();
+		view = new ClassicEditorUIView( locale, editingView );
+		view.editable.name = editingViewRoot.rootName;
 		view.render();
 		view.render();
 	} );
 	} );
 
 
@@ -69,4 +73,11 @@ describe( 'ClassicEditorUIView', () => {
 			} );
 			} );
 		} );
 		} );
 	} );
 	} );
+
+	function setUpEditingView() {
+		editingView = new EditingView();
+		editingViewRoot = new ViewRootEditableElement( 'div' );
+		editingViewRoot._document = editingView.document;
+		editingView.document.roots.add( editingViewRoot );
+	}
 } );
 } );