Selaa lähdekoodia

Tests: Added InputTextView and LabeledInputView tests related to error handling.

Aleksander Nowodzinski 7 vuotta sitten
vanhempi
commit
b8cc3f2813

+ 9 - 9
packages/ckeditor5-ui/src/labeledinput/labeledinputview.js

@@ -30,14 +30,6 @@ export default class LabeledInputView extends View {
 		const id = `ck-input-${ uid() }`;
 
 		/**
-		 * The error associated with the field.
-		 *
-		 * @observable
-		 * @member {String} #error
-		 */
-		this.set( 'errorText', null );
-
-		/**
 		 * The text of the label.
 		 *
 		 * @observable
@@ -62,6 +54,14 @@ export default class LabeledInputView extends View {
 		this.set( 'isReadOnly', false );
 
 		/**
+		 * The error text associated with the field.
+		 *
+		 * @observable
+		 * @member {String} #error
+		 */
+		this.set( 'errorText', null );
+
+		/**
 		 * The label view.
 		 *
 		 * @member {module:ui/label/labelview~LabelView} #labelView
@@ -143,7 +143,7 @@ export default class LabeledInputView extends View {
 		inputView.on( 'input', () => {
 			// UX: Make the error text disappear and disable the error indicator as the user
 			// starts fixing the errors.
-			this.errorText = false;
+			this.errorText = null;
 		} );
 
 		return inputView;

+ 23 - 0
packages/ckeditor5-ui/tests/inputtext/inputtextview.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global Event */
+
 import InputTextView from '../../src/inputtext/inputtextview';
 
 describe( 'InputTextView', () => {
@@ -98,6 +100,27 @@ describe( 'InputTextView', () => {
 				expect( view.element.readOnly ).to.true;
 			} );
 		} );
+
+		describe( 'hasErrors', () => {
+			it( 'should react on view#hasErrors', () => {
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.false;
+
+				view.hasError = true;
+
+				expect( view.element.classList.contains( 'ck-error' ) ).to.be.true;
+			} );
+		} );
+
+		describe( 'input event', () => {
+			it( 'triggers view#input', () => {
+				const spy = sinon.spy();
+
+				view.on( 'input', spy );
+
+				view.element.dispatchEvent( new Event( 'input' ) );
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
 	} );
 
 	describe( 'select()', () => {

+ 43 - 2
packages/ckeditor5-ui/tests/labeledinput/labeledinputview.js

@@ -23,6 +23,10 @@ describe( 'LabeledInputView', () => {
 			expect( view.locale ).to.deep.equal( locale );
 		} );
 
+		it( 'should set view#errorText', () => {
+			expect( view.errorText ).to.be.null;
+		} );
+
 		it( 'should create view#inputView', () => {
 			expect( view.inputView ).to.instanceOf( InputView );
 		} );
@@ -50,6 +54,14 @@ describe( 'LabeledInputView', () => {
 			expect( view.template.children[ 1 ] ).to.equal( view.inputView );
 		} );
 
+		it( 'should have the error container', () => {
+			const errorContainer = view.element.lastChild;
+
+			expect( errorContainer.tagName ).to.equal( 'DIV' );
+			expect( errorContainer.classList.contains( 'ck' ) ).to.be.true;
+			expect( errorContainer.classList.contains( 'ck-labeled-input__error' ) ).to.be.true;
+		} );
+
 		describe( 'DOM bindings', () => {
 			describe( 'class', () => {
 				it( 'should react on view#isReadOnly', () => {
@@ -60,6 +72,20 @@ describe( 'LabeledInputView', () => {
 					expect( view.element.classList.contains( 'ck-disabled' ) ).to.be.true;
 				} );
 			} );
+
+			describe( 'error container', () => {
+				it( 'should react on view#errorText', () => {
+					const errorContainer = view.element.lastChild;
+
+					view.errorText = '';
+					expect( errorContainer.classList.contains( 'ck-hidden' ) ).to.be.true;
+					expect( errorContainer.innerHTML ).to.equal( '' );
+
+					view.errorText = 'foo';
+					expect( errorContainer.classList.contains( 'ck-hidden' ) ).to.be.false;
+					expect( errorContainer.innerHTML ).to.equal( 'foo' );
+				} );
+			} );
 		} );
 	} );
 
@@ -79,11 +105,26 @@ describe( 'LabeledInputView', () => {
 		it( 'should bind view#isreadOnly to view.inputView#isReadOnly', () => {
 			view.isReadOnly = false;
 
-			expect( view.inputView.isReadOnly ).to.false;
+			expect( view.inputView.isReadOnly ).to.be.false;
 
 			view.isReadOnly = true;
 
-			expect( view.inputView.isReadOnly ).to.true;
+			expect( view.inputView.isReadOnly ).to.be.true;
+		} );
+
+		it( 'should bind view#errorText to view.inputView#hasError', () => {
+			view.errorText = '';
+			expect( view.inputView.hasError ).to.be.false;
+
+			view.errorText = 'foo';
+			expect( view.inputView.hasError ).to.be.true;
+		} );
+
+		it( 'should clear view#errorText upon view.inputView#input', () => {
+			view.errorText = 'foo';
+
+			view.inputView.fire( 'input' );
+			expect( view.errorText ).to.be.null;
 		} );
 	} );