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

Aligned the media form's input info text to the updates in the API. Added tests for the feature.

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

+ 1 - 1
packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -81,7 +81,7 @@ export default class MediaEmbedUI extends Plugin {
 			}
 		} );
 
-		dropdown.on( 'change:isOpen', () => form.resetErrors() );
+		dropdown.on( 'change:isOpen', () => form.resetFormStatus() );
 		dropdown.on( 'cancel', () => closeUI() );
 
 		function closeUI() {

+ 14 - 11
packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -218,7 +218,7 @@ export default class MediaFormView extends View {
 	 * @returns {Boolean}
 	 */
 	isValid() {
-		this.resetErrors();
+		this.resetFormStatus();
 
 		for ( const validator of this._validators ) {
 			const errorText = validator( this );
@@ -236,11 +236,14 @@ export default class MediaFormView extends View {
 	}
 
 	/**
-	 * Cleans up the errors in all form fields. See {@link #isValid}.
+	 * Cleans up the supplementary error and information text of the {@link #urlInputView}
+	 * bringing them back to the state when the form has been displayed for the first time.
+	 *
+	 * See {@link #isValid}.
 	 */
-	resetErrors() {
+	resetFormStatus() {
 		this.urlInputView.errorText = null;
-		this.urlInputView.tipText = null;
+		this.urlInputView.infoText = null;
 	}
 
 	/**
@@ -253,16 +256,16 @@ export default class MediaFormView extends View {
 		const t = this.locale.t;
 
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+		const inputView = labeledInput.inputView;
 
 		labeledInput.label = t( 'Media URL' );
-		labeledInput.inputView.placeholder = 'https://example.com';
+		inputView.placeholder = 'https://example.com';
 
-		labeledInput.inputView.on( 'input', () => {
-			if ( labeledInput.inputView.element.value ) {
-				labeledInput.tipText = t( 'Paste the URL into the content to embed faster.' );
-			} else {
-				labeledInput.tipText = null;
-			}
+		inputView.on( 'input', () => {
+			// Display the #infoText only when there's some value to hide it when the input
+			// is empty, e.g. user used backspace to clean it up.
+			labeledInput.infoText = inputView.element.value ?
+				t( 'Paste the URL into the content to embed faster.' ) : null;
 		} );
 
 		return labeledInput;

+ 2 - 2
packages/ckeditor5-media-embed/tests/mediaembedui.js

@@ -151,8 +151,8 @@ describe( 'MediaEmbedUI', () => {
 		} );
 
 		describe( '#change:isOpen event', () => {
-			it( 'resets form errors', () => {
-				const spy = sinon.spy( form, 'resetErrors' );
+			it( 'resets form status', () => {
+				const spy = sinon.spy( form, 'resetFormStatus' );
 
 				dropdown.fire( 'change:isOpen' );
 

+ 26 - 6
packages/ckeditor5-media-embed/tests/ui/mediaformview.js

@@ -81,6 +81,18 @@ describe( 'MediaFormView', () => {
 			it( 'has placeholder', () => {
 				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
 			} );
+
+			it( 'displays the info text when upon #input when the field has a value', () => {
+				view.urlInputView.inputView.element.value = 'foo';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.match( /^Paste the URL/ );
+
+				view.urlInputView.inputView.element.value = '';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.be.null;
+			} );
 		} );
 
 		describe( 'template', () => {
@@ -244,8 +256,8 @@ describe( 'MediaFormView', () => {
 	} );
 
 	describe( 'isValid()', () => {
-		it( 'calls resetErrors()', () => {
-			const spy = sinon.spy( view, 'resetErrors' );
+		it( 'calls resetFormStatus()', () => {
+			const spy = sinon.spy( view, 'resetFormStatus' );
 
 			view.isValid();
 
@@ -277,17 +289,25 @@ describe( 'MediaFormView', () => {
 			sinon.assert.calledOnce( val1 );
 			sinon.assert.calledOnce( val2 );
 
-			expect( view.urlInputView.errorText ).to.be.false;
+			expect( view.urlInputView.errorText ).to.be.null;
 		} );
 	} );
 
-	describe( 'resetErrors()', () => {
+	describe( 'resetFormStatus()', () => {
 		it( 'resets urlInputView#errorText', () => {
 			view.urlInputView.errorText = 'foo';
 
-			view.resetErrors();
+			view.resetFormStatus();
+
+			expect( view.urlInputView.errorText ).to.be.null;
+		} );
+
+		it( 'resets urlInputView#infoText', () => {
+			view.urlInputView.infoText = 'foo';
+
+			view.resetFormStatus();
 
-			expect( view.urlInputView.errorText ).to.be.false;
+			expect( view.urlInputView.infoText ).to.be.null;
 		} );
 	} );
 } );