[ADF-5204] Metadata - Error message still appears after exiting Edit …

…form (#5922) * show error only in editable mode * reset errors when reset value * update tests
Alfresco · Jul 29, 2020 · 54df083 · 54df083
1 parent 1581cfc
commit 54df083
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -53,7 +53,7 @@
 
     <mat-error [attr.data-automation-id]="'card-textitem-error-' + property.key"
                class="adf-textitem-editable-error"
-               *ngIf="hasErrors">
+               *ngIf="isEditable && hasErrors">
         <ul>
             <li *ngFor="let error of errors">{{ error.message | translate: error }}</li>
         </ul>

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -454,6 +454,40 @@ describe('CardViewTextItemComponent', () => {
             expect(component.errors).toBe(expectedErrorMessages);
         });
 
+        it('should render the error when the editedValue is invalid', async () => {
+            const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
+            component.property.isValid = () => false;
+            component.property.getValidationErrors = () => expectedErrorMessages;
+            component.editable = true;
+            component.ngOnChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            updateTextField(component.property.key, 'updated-value');
+            const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
+            expect(errorMessage).toBe('Something went wrong');
+        });
+
+        it('should reset erros when exiting editable mode', async () => {
+            let errorMessage: string;
+            const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
+            component.property.isValid = () => false;
+            component.property.getValidationErrors = () => expectedErrorMessages;
+            component.editable = true;
+            component.ngOnChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            updateTextField(component.property.key, 'updated-value');
+
+            component.editable = false;
+            component.ngOnChanges();
+            fixture.detectChanges();
+            errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
+            expect(errorMessage).toBe(null);
+            expect(component.errors).toEqual([]);
+        });
+
         it('should update the property value after a successful update attempt', async () => {
             component.property.isValid = () => true;
             component.update();

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -90,6 +90,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         } else {
             this.editedValue = this.property.displayValue;
         }
+
+        this.resetErrorMessages();
     }
 
     private resetErrorMessages() {