Преглед на файлове

Tests: Added tests for changes in EditableUIView.

Aleksander Nowodzinski преди 6 години
родител
ревизия
fcb7e72666
променени са 2 файла, в които са добавени 68 реда и са изтрити 53 реда
  1. 41 13
      packages/ckeditor5-ui/src/editableui/editableuiview.js
  2. 27 40
      packages/ckeditor5-ui/tests/editableui/editableuiview.js

+ 41 - 13
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -19,14 +19,13 @@ export default class EditableUIView extends View {
 	 * Creates an instance of EditableUIView class.
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The locale instance.
+	 * @param {module:engine/view/view~View} editingView The editing view instance the editable is related to.
 	 * @param {HTMLElement} [editableElement] The editable element. If not specified, this view
 	 * should create it. Otherwise, the existing element should be used.
 	 */
 	constructor( locale, editingView, editableElement ) {
 		super( locale );
 
-		this.editingView = editingView;
-
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
@@ -40,6 +39,14 @@ export default class EditableUIView extends View {
 		} );
 
 		/**
+		 * The name of the editable UI view.
+		 *
+		 * @observable
+		 * @member {String} #name
+		 */
+		this.set( 'name', null );
+
+		/**
 		 * Controls whether the editable is focused, i.e. the user is typing in it.
 		 *
 		 * @observable
@@ -63,6 +70,19 @@ export default class EditableUIView extends View {
 		 * @member {Boolean} #_hasExternalElement
 		 */
 		this._hasExternalElement = !!this._editableElement;
+
+		/**
+		 * The editing view instance the editable is related to. Editable uses the editing
+		 * view to dynamically modify its certain DOM attributes after {@link #render rendering}.
+		 *
+		 * **Note**: The DOM attributes are performed by the editing view and not UI
+		 * {@link module:ui/view~View#bindTemplate template bindings} because once rendered,
+		 * the editable DOM element must remain under the full control of the engine to work properly.
+		 *
+		 * @protected
+		 * @member {module:engine/view/view~View} #isFocused
+		 */
+		this._editingView = editingView;
 	}
 
 	/**
@@ -78,17 +98,8 @@ export default class EditableUIView extends View {
 			this._editableElement = this.element;
 		}
 
-		const updateFocusClasses = () => {
-			this.editingView.change( writer => {
-				const viewRoot = this.editingView.document.getRoot( this.name );
-
-				writer.addClass( this.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot );
-				writer.removeClass( this.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot );
-			} );
-		};
-
-		this.on( 'change:isFocused', updateFocusClasses );
-		updateFocusClasses();
+		this.on( 'change:isFocused', () => this._updateisFocusedClasses() );
+		this._updateisFocusedClasses();
 	}
 
 	/**
@@ -101,4 +112,21 @@ export default class EditableUIView extends View {
 
 		super.destroy();
 	}
+
+	/**
+	 * Updates the `ck-focused` and `ck-blurred` CSS classes on the {@link #element} according to
+	 * the {@link #isFocused} property value using the {@link #editingView editing view} API.
+	 *
+	 * @private
+	 */
+	_updateisFocusedClasses() {
+		const editingView = this._editingView;
+
+		editingView.change( writer => {
+			const viewRoot = editingView.document.getRoot( this.name );
+
+			writer.addClass( this.isFocused ? 'ck-focused' : 'ck-blurred', viewRoot );
+			writer.removeClass( this.isFocused ? 'ck-blurred' : 'ck-focused', viewRoot );
+		} );
+	}
 }

+ 27 - 40
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -5,13 +5,15 @@
 
 /* globals document */
 
+import EditingView from '@ckeditor/ckeditor5-engine/src/view/view';
+import ViewRootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
 import EditableUIView from '../../src/editableui/editableuiview';
 import View from '../../src/view';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'EditableUIView', () => {
-	let view, editableElement, locale;
+	let view, editableElement, editingView, editingViewRoot, locale;
 
 	testUtils.createSinonSandbox();
 
@@ -19,32 +21,39 @@ describe( 'EditableUIView', () => {
 		locale = new Locale( 'en' );
 		editableElement = document.createElement( 'div' );
 
-		view = new EditableUIView( locale );
+		editingView = new EditingView();
+		editingViewRoot = new ViewRootEditableElement( 'div' );
+		editingViewRoot._document = editingView.document;
+		editingView.document.roots.add( editingViewRoot );
+		view = new EditableUIView( locale, editingView );
+		view.name = editingViewRoot.rootName;
+
 		view.render();
 	} );
 
 	describe( 'constructor()', () => {
 		it( 'sets initial values of attributes', () => {
-			expect( view.isReadOnly ).to.be.false;
+			view = new EditableUIView( locale, editingView );
+
 			expect( view.isFocused ).to.be.false;
+			expect( view.name ).to.be.null;
 			expect( view._externalElement ).to.be.undefined;
+			expect( view._editingView ).to.equal( editingView );
 		} );
 
 		it( 'renders element from template when no editableElement', () => {
-			view = new EditableUIView( locale );
-
-			view.render();
 			expect( view.element ).to.equal( view._editableElement );
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-content' ) ).to.be.true;
+			expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view._externalElement ).to.be.undefined;
 			expect( view.isRendered ).to.be.true;
 		} );
 
 		it( 'accepts editableElement as an argument', () => {
-			view = new EditableUIView( locale, editableElement );
+			view = new EditableUIView( locale, editingView, editableElement );
+			view.name = editingViewRoot.rootName;
 
 			view.render();
 			expect( view.element ).to.equal( editableElement );
@@ -62,24 +71,12 @@ describe( 'EditableUIView', () => {
 			it( 'reacts on view#isFocused', () => {
 				view.isFocused = true;
 
-				expect( view.element.classList.contains( 'ck-focused' ) ).to.be.true;
-				expect( view.element.classList.contains( 'ck-blurred' ) ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-focused' ) ).to.be.true;
+				expect( editingViewRoot.hasClass( 'ck-blurred' ) ).to.be.false;
 
 				view.isFocused = false;
-				expect( view.element.classList.contains( 'ck-focused' ) ).to.be.false;
-				expect( view.element.classList.contains( 'ck-blurred' ) ).to.be.true;
-			} );
-		} );
-
-		describe( 'contenteditable', () => {
-			it( 'reacts on view#isReadOnly', () => {
-				view.isReadOnly = true;
-				expect( view.element.hasAttribute( 'contenteditable' ) ).to.be.false;
-				expect( view.element.classList.contains( 'ck-read-only' ) ).to.be.true;
-
-				view.isReadOnly = false;
-				expect( view.element.hasAttribute( 'contenteditable' ) ).to.be.true;
-				expect( view.element.classList.contains( 'ck-read-only' ) ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-focused' ) ).to.be.false;
+				expect( editingViewRoot.hasClass( 'ck-blurred' ) ).to.be.true;
 			} );
 		} );
 	} );
@@ -100,28 +97,18 @@ describe( 'EditableUIView', () => {
 		} );
 
 		describe( 'when #editableElement as an argument', () => {
-			it( 'reverts contentEditable property of editableElement (was false)', () => {
+			it( 'reverts the template of editableElement', () => {
 				editableElement = document.createElement( 'div' );
+				editableElement.classList.add( 'foo' );
 				editableElement.contentEditable = false;
 
-				view = new EditableUIView( locale, editableElement );
-
-				view.render();
-				expect( editableElement.contentEditable ).to.equal( 'true' );
-				view.destroy();
-				expect( editableElement.contentEditable ).to.equal( 'false' );
-			} );
-
-			it( 'reverts contentEditable property of editableElement (was true)', () => {
-				editableElement = document.createElement( 'div' );
-				editableElement.contentEditable = true;
-
-				view = new EditableUIView( locale, editableElement );
+				view = new EditableUIView( locale, editingView, editableElement );
+				view.name = editingViewRoot.rootName;
 
 				view.render();
-				expect( editableElement.contentEditable ).to.equal( 'true' );
 				view.destroy();
-				expect( editableElement.contentEditable ).to.equal( 'true' );
+				expect( view.element.classList.contains( 'ck' ) ).to.be.false;
+				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
 			} );
 		} );
 	} );