Преглед изворни кода

Tests: Added tests for changes in InlineEditableUIView.

Aleksander Nowodzinski пре 7 година
родитељ
комит
29ea671908

+ 1 - 2
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -41,10 +41,9 @@ export default class EditableUIView extends View {
 		/**
 		 * The name of the editable UI view.
 		 *
-		 * @observable
 		 * @member {String} #name
 		 */
-		this.set( 'name', null );
+		this.name = null;
 
 		/**
 		 * Controls whether the editable is focused, i.e. the user is typing in it.

+ 9 - 20
packages/ckeditor5-ui/src/editableui/inline/inlineeditableuiview.js

@@ -19,6 +19,7 @@ export default class InlineEditableUIView extends EditableUIView {
 	 * Creates an instance of the InlineEditableUIView 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, the
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}
 	 * will create it. Otherwise, the existing element will be used.
@@ -26,14 +27,6 @@ export default class InlineEditableUIView extends EditableUIView {
 	constructor( locale, editingView, editableElement ) {
 		super( locale, editingView, editableElement );
 
-		/**
-		 * The name of the editable UI view.
-		 *
-		 * @observable
-		 * @member {String} #name
-		 */
-		this.set( 'name', null );
-
 		this.extendTemplate( {
 			attributes: {
 				role: 'textbox',
@@ -42,23 +35,19 @@ export default class InlineEditableUIView extends EditableUIView {
 		} );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	render() {
 		super.render();
 
+		const editingView = this._editingView;
 		const t = this.t;
-		const updateAriaLabelAttribute = () => {
-			this.editingView.change( writer => {
-				const viewRoot = this.editingView.document.getRoot( this.name );
 
-				if ( this.name ) {
-					writer.setAttribute( 'aria-label', t( 'Rich Text Editor, %0', [ this.name ] ), viewRoot );
-				} else {
-					writer.removeAttribute( 'aria-label', viewRoot );
-				}
-			} );
-		};
+		editingView.change( writer => {
+			const viewRoot = editingView.document.getRoot( this.name );
 
-		this.on( 'change:name', updateAriaLabelAttribute );
-		updateAriaLabelAttribute();
+			writer.setAttribute( 'aria-label', t( 'Rich Text Editor, %0', [ this.name ] ), viewRoot );
+		} );
 	}
 }

+ 13 - 13
packages/ckeditor5-ui/tests/editableui/inline/inlineeditableuiview.js

@@ -5,17 +5,25 @@
 
 /* globals document */
 
+import EditingView from '@ckeditor/ckeditor5-engine/src/view/view';
+import ViewRootEditableElement from '@ckeditor/ckeditor5-engine/src/view/rooteditableelement';
 import InlineEditableUIView from '../../../src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
 describe( 'InlineEditableUIView', () => {
-	let view, editableElement, locale;
+	let view, editableElement, editingView, editingViewRoot, locale;
 
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		editableElement = document.createElement( 'div' );
 
-		view = new InlineEditableUIView( locale );
+		editingView = new EditingView();
+		editingViewRoot = new ViewRootEditableElement( 'div' );
+		editingViewRoot._document = editingView.document;
+		editingView.document.roots.add( editingViewRoot );
+		view = new InlineEditableUIView( locale, editingView );
+		view.name = editingViewRoot.rootName;
+
 		view.render();
 	} );
 
@@ -24,12 +32,8 @@ describe( 'InlineEditableUIView', () => {
 			expect( view.locale ).to.equal( locale );
 		} );
 
-		it( 'sets initial values of attributes', () => {
-			expect( view.name ).to.be.null;
-		} );
-
 		it( 'accepts editableElement', () => {
-			view = new InlineEditableUIView( locale, editableElement );
+			view = new InlineEditableUIView( locale, editingView, editableElement );
 
 			expect( view._editableElement ).to.equal( editableElement );
 		} );
@@ -40,18 +44,14 @@ describe( 'InlineEditableUIView', () => {
 	} );
 
 	describe( 'editableElement', () => {
-		const ariaLabel = 'Rich Text Editor, foo';
-
-		beforeEach( () => {
-			view.name = 'foo';
-		} );
+		const ariaLabel = 'Rich Text Editor, main';
 
 		it( 'has proper accessibility role', () => {
 			expect( view.element.attributes.getNamedItem( 'role' ).value ).to.equal( 'textbox' );
 		} );
 
 		it( 'has proper ARIA label', () => {
-			expect( view.element.getAttribute( 'aria-label' ) ).to.equal( ariaLabel );
+			expect( editingViewRoot.getAttribute( 'aria-label' ) ).to.equal( ariaLabel );
 		} );
 
 		it( 'has proper class name', () => {