[AAE-10644] Fix tests that have no expectations - core lib part 1 (#7891)

* [AAE-10644] Fix tests that have no expectations - core lib part 1

* [AAE-10644] fix app config tests

* replace subscription with spy

* use done instead of await in subject related unit test

lib/core/src/lib/app-config/app-config.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { fakeAsync, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService } from './app-config.service';
 import { AppConfigModule } from './app-config.module';
 import { ExtensionConfig, ExtensionService } from '@alfresco/adf-extensions';
@@ -68,7 +68,6 @@ describe('AppConfigService', () => {
 
         extensionService = TestBed.inject(ExtensionService);
         appConfigService = TestBed.inject(AppConfigService);
-        appConfigService.load();
     });
 
     it('should merge the configs from extensions', () => {
@@ -111,19 +110,25 @@ describe('AppConfigService', () => {
         expect(appConfigService.get('application.name')).toEqual('custom name');
     });
 
-    it('should stream only the selected attribute changes when using select',  fakeAsync(() => {
+    it('should stream only the selected attribute when using select', (done) => {
-        appConfigService.config.testProp = true;
         appConfigService.select('testProp').subscribe((property) => {
-            expect(property).toBeTruthy();
+            expect(property).toEqual(true);
+            done();
         });
-    }));
 
-    it('should stream the page size value when is set', fakeAsync(() => {
         appConfigService.config.testProp = true;
-        appConfigService.onLoad.subscribe((config) => {
+        appConfigService.load();
-            expect(config.testProp).toBeTruthy();
+    });
+
+    it('should stream the value when is set', (done) => {
+        appConfigService.onLoad.subscribe((config) => {
+            expect(config.testProp).toBe(true);
+            done();
+        });
+
+        appConfigService.config.testProp = true;
+        appConfigService.load();
     });
-    }));
 
     it('should skip the optional port number', () => {
         appConfigService.config.testUrl = 'http://{hostname}{:port}';
@@ -164,24 +169,23 @@ describe('AppConfigService', () => {
         expect(appConfigService.get('testUrl')).toBe('ftp://localhost:9090');
     });
 
-    it('should load external settings', () => {
+    it('should load external settings', async () => {
-        appConfigService.load().then((config) => {
+        const config = await appConfigService.load();
 
         expect(config).toEqual(mockResponse);
     });
-    });
 
-    it('should retrieve settings', () => {
+    it('should retrieve settings', async () => {
-        appConfigService.load().then(() => {
+        await appConfigService.load();
+
         expect(appConfigService.get('ecmHost')).toBe(mockResponse.ecmHost);
         expect(appConfigService.get('bpmHost')).toBe(mockResponse.bpmHost);
         expect(appConfigService.get('application.name')).toBe(mockResponse.application.name);
     });
-    });
 
-    it('should take excluded file list', () => {
+    it('should take excluded file list', async () => {
-        appConfigService.load().then(() => {
+        await appConfigService.load();
+
         expect(appConfigService.get('files.excluded')[0]).toBe('excluded');
     });
-    });
 });

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { setupTestBed } from '../../../testing/setup-test-bed';
 import moment from 'moment';
@@ -189,27 +189,25 @@ describe('CardViewDateItemComponent', () => {
         expect(component.datepicker.open).toHaveBeenCalled();
     });
 
-    it('should trigger an update event on the CardViewUpdateService', (done) => {
+    it('should trigger an update event on the CardViewUpdateService', () => {
+        const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+        const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
         component.editable = true;
         component.property.editable = true;
-        const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
         const expectedDate = moment('Jul 10 2017', 'MMM DD YYYY');
         fixture.detectChanges();
         const property = { ...component.property };
 
-        const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
-            (updateNotification) => {
-                expect(updateNotification.target).toEqual(property);
-                expect(updateNotification.changed).toEqual({ dateKey: expectedDate.toDate() });
-                disposableUpdate.unsubscribe();
-                done();
-            }
-        );
-
         component.onDateChanged({ value: expectedDate });
+        expect(itemUpdatedSpy).toHaveBeenCalledWith({
+            target: property,
+            changed: {
+                dateKey: expectedDate.toDate()
+            }
+        });
     });
 
-    it('should update the property value after a successful update attempt', fakeAsync(() => {
+    it('should update the property value after a successful update attempt', async () => {
         component.editable = true;
         component.property.editable = true;
         component.property.value = null;
@@ -218,12 +216,9 @@ describe('CardViewDateItemComponent', () => {
 
         component.onDateChanged({ value: expectedDate });
 
-        fixture.whenStable().then(
+        await fixture.whenStable();
-            () => {
         expect(component.property.value).toEqual(expectedDate.toDate());
-            }
+    });
-        );
-    }));
 
     it('should copy value to clipboard on double click', () => {
         const clipboardService = TestBed.inject(ClipboardService);
@@ -271,7 +266,7 @@ describe('CardViewDateItemComponent', () => {
             expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
         });
 
-        it('should remove the property value after a successful clear attempt', fakeAsync(() => {
+        it('should remove the property value after a successful clear attempt', async () => {
             component.editable = true;
             component.property.editable = true;
             component.property.value = 'Jul 10 2017';
@@ -279,14 +274,11 @@ describe('CardViewDateItemComponent', () => {
 
             component.onDateClear();
 
-            fixture.whenStable().then(
+            await fixture.whenStable();
-                () => {
             expect(component.property.value).toBeNull();
-                }
+        });
-            );
-        }));
 
-        it('should remove the property default value after a successful clear attempt', fakeAsync(() => {
+        it('should remove the property default value after a successful clear attempt', async () => {
             component.editable = true;
             component.property.editable = true;
             component.property.default = 'Jul 10 2017';
@@ -294,37 +286,34 @@ describe('CardViewDateItemComponent', () => {
 
             component.onDateClear();
 
-            fixture.whenStable().then(
+            await fixture.whenStable();
-                () => {
             expect(component.property.default).toBeNull();
-                }
+        });
-            );
-        }));
 
-        it('should remove actual and default value after a successful clear attempt', fakeAsync(() => {
+        it('should remove actual and default value after a successful clear attempt', async () => {
+            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
             component.editable = true;
             component.property.editable = true;
             component.property.default = 'Jul 10 2017';
             component.property.value = 'Jul 10 2017';
             fixture.detectChanges();
-            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
             const property = { ...component.property };
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
-                (updateNotification) => {
-                    expect(updateNotification.target).toEqual(property);
-                    expect(updateNotification.changed).toEqual({ dateKey: null });
-                    disposableUpdate.unsubscribe();
-                }
-            );
-
             component.onDateClear();
 
-            fixture.whenStable().then(() => {
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
+                target: property,
+                changed: {
+                    dateKey: null
+                }
+            });
+
+            await fixture.whenStable();
+
             expect(component.property.value).toBeNull();
             expect(component.property.default).toBeNull();
         });
-        }));
     });
 
     it('should be possible update a date-time', async () => {

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, tick, fakeAsync, discardPeriodicTasks } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
@@ -28,7 +28,7 @@ import { CardViewIntItemModel } from '../../models/card-view-intitem.model';
 import { CardViewFloatItemModel } from '../../models/card-view-floatitem.model';
 import { MatChipsModule } from '@angular/material/chips';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
-import { DebugElement, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
 
@@ -37,6 +37,27 @@ describe('CardViewTextItemComponent', () => {
     let fixture: ComponentFixture<CardViewTextItemComponent>;
     let component: CardViewTextItemComponent;
 
+    const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
+
+    const updateTextField = (key, value) => {
+        const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
+        editInput.nativeElement.value = value;
+        editInput.nativeElement.dispatchEvent(new Event('input'));
+        fixture.detectChanges();
+    };
+
+    const getTextFieldValue = (key): string => {
+        const textItemInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
+        expect(textItemInput).not.toBeNull();
+        return textItemInput.nativeElement.value;
+    };
+
+    const getTextFieldError = (key): string => {
+        const textItemInputError = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${key}"] li`));
+        expect(textItemInputError).not.toBeNull();
+        return textItemInputError.nativeElement.innerText;
+    };
+
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
@@ -263,18 +284,15 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', (done) => {
+        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', async () => {
             component.property.clickable = false;
             component.displayEmpty = true;
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
 
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('FAKE-DEFAULT-KEY');
-                done();
-            });
         });
 
         it('should render the default as value if the value is empty and clickable true', async () => {
@@ -391,35 +409,25 @@ describe('CardViewTextItemComponent', () => {
             expect(cardViewUpdateService.clicked).toHaveBeenCalled();
         });
 
-        it('should update input the value on input updated', fakeAsync((done) => {
+        it('should update input the value on input updated', async () => {
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
-            component.property.clickable = true;
             component.property.editable = true;
             component.editable = true;
             component.property.isValid = () => true;
             const expectedText = 'changed text';
-            component.ngOnChanges({});
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-
-                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                    expect(updateNotification.target).toEqual({ ...component.property });
-                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
-
-                    expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
-                    disposableUpdate.unsubscribe();
-                    done();
-                });
 
             updateTextField(component.property.key, expectedText);
-                tick(1000);
+            await fixture.whenStable();
 
-                fixture.detectChanges();
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
-                discardPeriodicTasks();
+                target: { ...component.property },
+                changed: {
+                    textkey: expectedText
+                }
+            });
+            expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
         });
-        }));
 
         it('should copy value to clipboard on double click', async () => {
             const clipboardService = TestBed.inject(ClipboardService);
@@ -476,184 +484,101 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should call the isValid method with the edited value', fakeAsync((done) => {
+        it('should call the isValid method with the edited value', async () => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-
             spyOn(component.property, 'isValid');
-                updateTextField(component.property.key, 'updated-value');
-                tick(600);
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
-                    expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
-                    done();
-                });
-            });
-        }));
 
-        it('should trigger the update event if the editedValue is valid', fakeAsync((done) => {
+            updateTextField(component.property.key, 'updated-value');
+            await fixture.whenStable();
+
+            expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
+        });
+
+        it('should trigger the update event if the editedValue is valid', async () => {
+            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            spyOn(cardViewUpdateService, 'update');
             component.property.isValid = () => true;
 
-            fixture.detectChanges();
+            updateTextField(component.property.key, 'updated-value');
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
             const property = { ...component.property };
-
-                spyOn(cardViewUpdateService, 'update');
-                updateTextField(component.property.key, 'updated-value');
-                tick(600);
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
             expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
-                    done();
         });
-            });
-        }));
 
-        it('should NOT trigger the update event if the editedValue is invalid', fakeAsync((done) => {
+        it('should NOT trigger the update event if the editedValue is invalid', async () => {
-            component.property.isValid = () => false;
-
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-
             spyOn(cardViewUpdateService, 'update');
+            component.property.isValid = () => false;
+
             updateTextField(component.property.key, 'updated-value');
-                tick(600);
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                fixture.whenStable().then(() => {
             expect(cardViewUpdateService.update).not.toHaveBeenCalled();
-                    done();
         });
-            });
-        }));
 
-        it('should set the errorMessages properly if the editedValue is invalid', fakeAsync((done) => {
+        it('should set the errorMessages properly if the editedValue is invalid', async () => {
-            const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
             component.property.isValid = () => false;
             component.property.getValidationErrors = () => expectedErrorMessages;
 
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
             updateTextField(component.property.key, 'updated-value');
-                tick(600);
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                fixture.whenStable().then(() => {
             expect(component.errors).toBe(expectedErrorMessages);
-                    done();
         });
-            });
-        }));
 
-        it('should render the error when the editedValue is invalid', fakeAsync((done) => {
+        it('should render the error', () => {
-            const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
+            component.errors = expectedErrorMessages;
-            component.property.isValid = () => false;
-            component.property.getValidationErrors = () => expectedErrorMessages;
             component.editable = true;
-
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
 
-                updateTextField(component.property.key, 'updated-value');
+            const errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
-                tick(600);
+            expect(errorMessage.textContent).toBe(expectedErrorMessages[0].message);
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
-                    const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
-                    expect(errorMessage).toBe('Something went wrong');
-                    done();
         });
-            });
-        }));
 
-        it('should reset erros when exiting editable mode', fakeAsync(() => {
+        it('should NOT display error when exiting editable mode', () => {
-            let errorMessage: string;
+            component.errors = expectedErrorMessages;
-            const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
-            component.property.isValid = () => false;
-            component.property.getValidationErrors = () => expectedErrorMessages;
             component.editable = true;
-
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
 
-                updateTextField(component.property.key, 'updated-value');
+            let errorMessage: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
-                tick(600);
+            expect(errorMessage.textContent).toBe(expectedErrorMessages[0].message);
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
 
             component.editable = false;
-
             fixture.detectChanges();
+
             errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
-                    expect(errorMessage).toBe(null);
+            expect(errorMessage).toBeNull();
-                    expect(component.errors).toEqual([]);
         });
-            });
-        }));
 
         it('should update the property value after a successful update attempt', async () => {
-            component.property.isValid = () => true;
+            component.editedValue = 'TEST';
             component.update();
 
-            fixture.detectChanges();
+            expect(component.property.value).toEqual(component.editedValue);
-            await fixture.whenStable();
-            expect(component.property.value).toBe(component.editedValue);
         });
 
-        it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', fakeAsync(async (done) => {
+        it('should trigger an update event on the CardViewUpdateService [integration]', async () => {
-            const functionTestClick = () => done();
-
-            component.property = new CardViewTextItemModel({
-                label: 'Text label',
-                value: '',
-                key: 'textkey',
-                default: 'FAKE-DEFAULT-KEY',
-                clickable: true,
-                clickCallBack: () => {
-                    functionTestClick();
-                }
-            });
-            component.displayEmpty = true;
-
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            const inputField = getTextField(component.property.key);
-            inputField.nativeElement.click();
-        }));
-
-        it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
-            component.property.isValid = () => true;
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
+            component.property.isValid = () => true;
             const expectedText = 'changed text';
 
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
-                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
-                    (updateNotification) => {
-                        expect(updateNotification.target).toEqual({ ...component.property });
-                        expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                        disposableUpdate.unsubscribe();
-                        done();
-                    }
-                );
-
             updateTextField(component.property.key, expectedText);
-            });
-        });
-
-        it('should update the value using the updateItem$ subject', (async () => {
-            component.property.isValid = () => true;
-            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-            const expectedText = 'changed text';
-
-            fixture.detectChanges();
             await fixture.whenStable();
 
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
+                target: { ...component.property },
+                changed: {
+                    textkey: expectedText
+                }
+            });
+        });
+
+        it('should update the value using the updateItem$ subject', () => {
+            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            component.property.isValid = () => true;
+            const expectedText = 'changed text';
+
             let value = getTextFieldValue(component.property.key);
             expect(value).toEqual('Lorem ipsum');
             expect(component.property.value).toBe('Lorem ipsum');
@@ -661,45 +586,47 @@ describe('CardViewTextItemComponent', () => {
             cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText } as any);
             component.ngOnChanges({ property: new SimpleChange(value, expectedText, false) });
             fixture.detectChanges();
-            await fixture.whenStable();
 
             value = getTextFieldValue(component.property.key);
             expect(value).toEqual(expectedText);
             expect(component.property.value).toBe(expectedText);
 
-        }));
+        });
 
-        it('should update multiline input the value on input updated', (done) => {
+        it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', () => {
+            component.property.value = '';
+            component.property.clickable = true;
+            component.displayEmpty = true;
+
+            fixture.detectChanges();
+
+            const inputField = getTextFieldValue(component.property.key);
+            expect(inputField).toBe('Lorem ipsum');
+        });
+
+        it('should update multiline input the value on input updated', async () => {
+            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
+            spyOn(component, 'update').and.callThrough();
             component.property.isValid = () => true;
             component.property.multiline = true;
             const expectedText = 'changed text';
-            spyOn(component, 'update').and.callThrough();
-            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
-                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                    expect(updateNotification.target).toEqual({ ...component.property });
-                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                    disposableUpdate.unsubscribe();
-                    done();
-                });
 
             updateTextField(component.property.key, expectedText);
-                tick(600);
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                fixture.whenStable().then(() => {
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
+                target: { ...component.property },
+                changed: {
+                    textkey: expectedText
+                }
+            });
 
             expect(component.update).toHaveBeenCalled();
-                    fixture.detectChanges();
-
             expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
             expect(component.property.value).toBe(expectedText);
         });
     });
-        });
-    });
 
     describe('number', () => {
         let cardViewUpdateService: CardViewUpdateService;
@@ -719,21 +646,35 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should show validation error when string passed', fakeAsync((done) => {
+        it('should show validation error when string passed', async () => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
             updateTextField(component.property.key, 'update number');
-                tick(600);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+
-                    const error = getTextFieldError(component.property.key);
+            const errorMessage = getTextFieldError(component.property.key);
-                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+            expect(errorMessage).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
-                    expect(component.property.value).toBe(10);
-                    done();
         });
+
+        it('should NOT show validation error for empty string', async () => {
+            updateTextField(component.property.key, '');
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
+            expect(errorElement).toBeNull();
+        });
+
+        it('should NOT show validation error for null', async () => {
+            updateTextField(component.property.key, null);
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const inputElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-textkey"]'));
+            const errorElement = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-textkey"]'));
+
+            expect(inputElement.nativeElement.value).toBe('');
+            expect(errorElement).toBeNull();
         });
-        }));
 
         it('should show validation error for only spaces string', async () => {
             updateTextField(component.property.key, ' ');
@@ -765,82 +706,57 @@ describe('CardViewTextItemComponent', () => {
             expect(errorElement).toBeNull();
         });
 
-        it('should show validation error for float number', fakeAsync((done) => {
+        it('should show validation error for float number', async () => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
             updateTextField(component.property.key, 123.456);
-                tick(600);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
 
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
             expect(component.property.value).toBe(10);
-                    done();
         });
-            });
-        }));
-
-        it('should show validation error for exceed the number limit (2147483648)', fakeAsync((done) => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
 
+        it('should show validation error for exceed the number limit (2147483648)', async () => {
             updateTextField(component.property.key, 2147483648);
-                tick(600);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
 
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
             expect(component.property.value).toBe(10);
-                    done();
         });
-            });
-        }));
-
-        it('should not show validation error for below the number limit (2147483647)', fakeAsync((done) => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
 
+        it('should not show validation error for below the number limit (2147483647)', async () => {
             updateTextField(component.property.key, 2147483647);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+
             const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
             expect(error).toBeFalsy();
-
             expect(component.property.value).toBe('2147483647');
-                    done();
         });
-            });
-        }));
 
-        it('should update input the value on input updated', (done) => {
+        it('should update input the value on input updated', async () => {
             const expectedNumber = 2020;
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
             spyOn(component, 'update').and.callThrough();
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
-                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                    expect(updateNotification.target).toEqual({ ...component.property });
-                    expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
-                    disposableUpdate.unsubscribe();
-                    done();
-                });
 
             updateTextField(component.property.key, expectedNumber);
-                tick(600);
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                fixture.whenStable().then(() => {
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
+                target: { ...component.property },
+                changed: {
+                    textkey: expectedNumber.toString()
+                }
+            });
+
             const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
             expect(error).toBeFalsy();
-
             expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
             expect(component.property.value).toBe(expectedNumber.toString());
         });
     });
-        });
-    });
 
     describe('float', () => {
         let cardViewUpdateService: CardViewUpdateService;
@@ -861,87 +777,45 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should show validation error when string passed', fakeAsync((done) => {
+        it('should show validation error when string passed', async () => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
             updateTextField(component.property.key, 'hello there');
-                tick(600);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
             expect(component.property.value).toBe(floatValue);
-                    done();
         });
-            });
-        }));
-
-        it('should show validation error for empty string (float)', fakeAsync((done) => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
 
+        it('should show validation error for empty string (float)', async () => {
             updateTextField(component.property.key, ' ');
-                tick(600);
+            await fixture.whenStable();
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+
             const error = getTextFieldError(component.property.key);
             expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
             expect(component.property.value).toBe(floatValue);
-                    done();
         });
-            });
-        }));
 
-        it('should update input the value on input updated', (done) => {
+        it('should update input the value on input updated', async () => {
             const expectedNumber = 88.44;
+            const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
             spyOn(component, 'update').and.callThrough();
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
-
-                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                    expect(updateNotification.target).toEqual({ ...component.property });
-                    expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
-                    disposableUpdate.unsubscribe();
-                    done();
-                });
 
             updateTextField(component.property.key, expectedNumber);
-                tick(600);
+            await fixture.whenStable();
-                fixture.detectChanges();
+
-                fixture.whenStable().then(() => {
+            expect(itemUpdatedSpy).toHaveBeenCalledWith({
+                target: { ...component.property },
+                changed: {
+                    textkey: expectedNumber.toString()
+                }
+            });
+
             const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
             expect(error).toBeFalsy();
-
             expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
             expect(component.property.value).toBe(expectedNumber.toString());
         });
     });
-        });
-    });
-
-    const updateTextField = (key, value) => {
-        const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
-        editInput.nativeElement.value = value;
-        editInput.nativeElement.dispatchEvent(new Event('input'));
-        fixture.detectChanges();
-    };
-
-    const getTextFieldValue = (key): string => {
-        const textItemInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
-        expect(textItemInput).not.toBeNull();
-        return textItemInput.nativeElement.value;
-    };
-
-    const getTextField = (key): DebugElement => {
-        const textItemInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
-        expect(textItemInput).not.toBeNull();
-        return textItemInput;
-    };
-
-    const getTextFieldError = (key): string => {
-        const textItemInputError = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${key}"] li`));
-        expect(textItemInputError).not.toBeNull();
-        return textItemInputError.nativeElement.innerText;
-    };
 });