[ADF-5422] remove deprecated "async()" from unit tests (#7109)

* remove angualar async from content services

* upgrade more tests

* upgrade core tests

* upgrade tests

* fix deprecated constant

* fix tests

* fix after rebase

lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.spec.ts

@@ -305,17 +305,23 @@ describe('AspectListDialogComponent', () => {
         });
 
         it('Should apply button be disabled by default', async () => {
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const applyButton = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply');
             expect(applyButton.disabled).toBe(true);
         });
 
         it('Should apply button get enabled when the aspect list gets updated', async () => {
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const applyButton = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply');
 
             fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear').click();
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(applyButton.disabled).toBe(false);
         });

lib/content-services/src/lib/aspect-list/aspect-list.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { AspectEntry, AspectPaging } from '@alfresco/js-api';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { TranslateModule } from '@ngx-translate/core';
 import { AlfrescoApiService, AppConfigService, LogService, setupTestBed } from 'core';
@@ -163,34 +163,37 @@ describe('AspectListService', () => {
             service = TestBed.inject(AspectListService);
         });
 
-        it('should get the list of only available aspects', async(() => {
+        it('should get the list of only available aspects', (done) => {
             aspectTypesApi.listAspects.and.returnValues(of(listAspectResp), of(customListAspectResp));
             service.getAspects().subscribe((list) => {
                 expect(list.length).toBe(2);
                 expect(list[0].entry.id).toBe('frs:AspectOne');
                 expect(list[1].entry.id).toBe('frs:AspectCustom');
+                done();
+            });
         });
-        }));
 
-        it('should return a value when the standard aspect call fails', async(() => {
+        it('should return a value when the standard aspect call fails', (done) => {
             spyOn(logService, 'error').and.stub();
             aspectTypesApi.listAspects.and.returnValues(throwError('Insert Coin'), of(customListAspectResp));
             service.getAspects().subscribe((list) => {
                 expect(list.length).toBe(1);
                 expect(list[0].entry.id).toBe('frs:AspectCustom');
                 expect(logService.error).toHaveBeenCalled();
+                done();
+            });
         });
-        }));
 
-        it('should return a value when the custom aspect call fails', async(() => {
+        it('should return a value when the custom aspect call fails', (done) => {
             spyOn(logService, 'error').and.stub();
             aspectTypesApi.listAspects.and.returnValues(of(listAspectResp), throwError('Insert Coin'));
             service.getAspects().subscribe((list) => {
                 expect(list.length).toBe(1);
                 expect(list[0].entry.id).toBe('frs:AspectOne');
                 expect(logService.error).toHaveBeenCalled();
+                done();
+            });
         });
-        }));
     });
 
 });

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { setupTestBed } from '@alfresco/adf-core';
 import { fakeNodeWithCreatePermission } from '../mock';
@@ -42,16 +42,16 @@ describe('DropdownBreadcrumb', () => {
         providers: [{ provide: DocumentListService, useValue: documentListService }]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(DropdownBreadcrumbComponent);
         component = fixture.componentInstance;
         documentList = TestBed.createComponent<DocumentListComponent>(DocumentListComponent).componentInstance;
         documentListService = TestBed.inject(DocumentListService);
-    }));
+    });
 
-    afterEach(async(() => {
+    afterEach(() => {
         fixture.destroy();
-    }));
+    });
 
     function openSelect() {
         const folderIcon = fixture.debugElement.nativeElement.querySelector('[data-automation-id="dropdown-breadcrumb-trigger"]');

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { MinimalNode, Node } from '@alfresco/js-api';
@@ -98,17 +98,18 @@ describe('ContentMetadataComponent', () => {
     });
 
     describe('Folder', () => {
-        it('should show the folder node', () => {
+        it('should show the folder node', (done) => {
             component.expanded = false;
             fixture.detectChanges();
 
-            component.ngOnChanges({ node: new SimpleChange(node, folderNode, false) });
-
             component.basicProperties$.subscribe(() => {
                 fixture.detectChanges();
                 const basicPropertiesComponent = fixture.debugElement.query(By.directive(CardViewComponent)).componentInstance;
                 expect(basicPropertiesComponent.properties).toBeDefined();
+                done();
             });
+
+            component.ngOnChanges({ node: new SimpleChange(node, folderNode, false) });
         });
     });
 
@@ -138,10 +139,8 @@ describe('ContentMetadataComponent', () => {
         it('should save changedProperties on save click', fakeAsync(async () => {
             component.editable = true;
             const property = <CardViewBaseItemModel> { key: 'properties.property-key', value: 'original-value' };
-            const expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
+            const expectedNode = { ...node, name: 'some-modified-value' };
-            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+            spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
-                return of(expectedNode);
-            });
 
             updateService.update(property, 'updated-value');
             tick(600);
@@ -156,7 +155,7 @@ describe('ContentMetadataComponent', () => {
             expect(nodesApiService.updateNode).toHaveBeenCalled();
         }));
 
-        it('should throw error on unsuccessful save', fakeAsync(async (done) => {
+        it('should throw error on unsuccessful save', fakeAsync((done) => {
             const logService: LogService = TestBed.inject(LogService);
             component.editable = true;
             const property = <CardViewBaseItemModel> { key: 'properties.property-key', value: 'original-value' };
@@ -171,25 +170,22 @@ describe('ContentMetadataComponent', () => {
                 done();
             });
 
-            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+            spyOn(nodesApiService, 'updateNode').and.returnValue(throwError(new Error('My bad')));
-                return throwError(new Error('My bad'));
-            });
 
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
                 const saveButton = fixture.debugElement.query(By.css('[data-automation-id="save-metadata"]'));
                 saveButton.nativeElement.click();
                 fixture.detectChanges();
+            });
         }));
 
         it('should open the confirm dialog when content type is changed', fakeAsync(() => {
             component.editable = true;
             const property = <CardViewBaseItemModel> { key: 'nodeType', value: 'ft:sbiruli' };
-            const expectedNode = Object.assign({}, node, { nodeType: 'ft:sbiruli' });
+            const expectedNode = { ...node, nodeType: 'ft:sbiruli' };
             spyOn(contentMetadataService, 'openConfirmDialog').and.returnValue(of(true));
-            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+            spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
-                return of(expectedNode);
-            });
 
             updateService.update(property, 'ft:poppoli');
             tick(600);
@@ -211,9 +207,7 @@ describe('ContentMetadataComponent', () => {
             const expectedNode = Object.assign({}, node, { nodeType: 'ft:sbiruli' });
             spyOn(contentMetadataService, 'openConfirmDialog').and.returnValue(of(true));
             spyOn(updateService, 'updateNodeAspect');
-            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+            spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
-                return of(expectedNode);
-            });
 
             updateService.update(property, 'ft:poppoli');
             tick(600);
@@ -235,9 +229,7 @@ describe('ContentMetadataComponent', () => {
             component.hasMetadataChanged = true;
             component.editable = true;
             const expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
-            spyOn(nodesApiService, 'updateNode').and.callFake(() => {
+            spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
-                return of(expectedNode);
-            });
 
             fixture.detectChanges();
             await fixture.whenStable();
@@ -251,10 +243,10 @@ describe('ContentMetadataComponent', () => {
     });
 
     describe('Properties loading', () => {
-        let expectedNode;
+        let expectedNode: MinimalNode;
 
         beforeEach(() => {
-            expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
+            expectedNode = { ...node, name: 'some-modified-value' };
             fixture.detectChanges();
         });
 
@@ -267,36 +259,37 @@ describe('ContentMetadataComponent', () => {
             expect(contentMetadataService.getBasicProperties).toHaveBeenCalledWith(expectedNode);
         });
 
-        it('should pass through the loaded basic properties to the card view', async(() => {
+        it('should pass through the loaded basic properties to the card view', async () => {
             const expectedProperties = [];
             component.expanded = false;
-            fixture.detectChanges();
+
-            spyOn(contentMetadataService, 'getBasicProperties').and.callFake(() => {
+            spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(of(expectedProperties));
-                return of(expectedProperties);
-            });
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const basicPropertiesComponent = fixture.debugElement.query(By.directive(CardViewComponent)).componentInstance;
             expect(basicPropertiesComponent.properties.length).toBe(expectedProperties.length);
         });
-        }));
 
-        it('should pass through the displayEmpty to the card view of basic properties', async(() => {
+        it('should pass through the displayEmpty to the card view of basic properties', async () => {
             component.displayEmpty = false;
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             spyOn(contentMetadataService, 'getBasicProperties').and.returnValue(of([]));
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const basicPropertiesComponent = fixture.debugElement.query(By.directive(CardViewComponent)).componentInstance;
             expect(basicPropertiesComponent.displayEmpty).toBe(false);
         });
-        }));
 
         it('should load the group properties on node change', () => {
             spyOn(contentMetadataService, 'getGroupedProperties');
@@ -306,55 +299,55 @@ describe('ContentMetadataComponent', () => {
             expect(contentMetadataService.getGroupedProperties).toHaveBeenCalledWith(expectedNode, 'custom-preset');
         });
 
-        it('should pass through the loaded group properties to the card view', async(() => {
+        it('should pass through the loaded group properties to the card view', async () => {
             const expectedProperties = [];
             component.expanded = true;
-            fixture.detectChanges();
+
             spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: expectedProperties } as any]));
             spyOn(component, 'showGroup').and.returnValue(true);
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const firstGroupedPropertiesComponent = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container adf-card-view')).componentInstance;
             expect(firstGroupedPropertiesComponent.properties).toBe(expectedProperties);
         });
-        }));
 
-        it('should pass through the displayEmpty to the card view of grouped properties', async(() => {
+        it('should pass through the displayEmpty to the card view of grouped properties', async () => {
             component.expanded = true;
             component.displayEmpty = false;
-            fixture.detectChanges();
+
             spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [] } as any]));
             spyOn(component, 'showGroup').and.returnValue(true);
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const basicPropertiesComponent = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container adf-card-view')).componentInstance;
             expect(basicPropertiesComponent.displayEmpty).toBe(false);
         });
-        }));
 
-        it('should hide card views group when the grouped properties are empty', async(() => {
+        it('should hide card views group when the grouped properties are empty', async () => {
             component.expanded = true;
-            fixture.detectChanges();
+
             spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of([{ properties: [] } as any]));
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container mat-expansion-panel'));
             expect(basicPropertiesGroup).toBeNull();
         });
-        }));
 
-        it('should display card views group when there is at least one property that is not empty', async(() => {
+        it('should display card views group when there is at least one property that is not empty', async () => {
             component.expanded = true;
-            fixture.detectChanges();
+
             const cardViewGroup = {
                 title: 'Group 1', properties: [{
                     data: null,
@@ -369,12 +362,12 @@ describe('ContentMetadataComponent', () => {
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
-            component.basicProperties$.subscribe(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const basicPropertiesGroup = fixture.debugElement.query(By.css('.adf-metadata-grouped-properties-container mat-expansion-panel'));
             expect(basicPropertiesGroup).toBeDefined();
         });
-        }));
     });
 
     describe('Properties displaying', () => {
@@ -400,20 +393,22 @@ describe('ContentMetadataComponent', () => {
     });
 
     describe('Expand the panel', () => {
-        let expectedNode;
+        let expectedNode: MinimalNode;
 
         beforeEach(() => {
-            expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
+            expectedNode = { ...node, name: 'some-modified-value' };
             spyOn(contentMetadataService, 'getGroupedProperties').and.returnValue(of(mockGroupProperties));
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
         });
 
-        it('should open and update drawer with expand section dynamically', async(() => {
+        it('should open and update drawer with expand section dynamically', async () => {
             component.displayAspect = 'EXIF';
             component.expanded = true;
             component.displayEmpty = true;
 
             fixture.detectChanges();
+            await fixture.whenStable()
+
             let defaultProp = queryDom(fixture);
             let exifProp = queryDom(fixture, 'EXIF');
             let customProp = queryDom(fixture, 'CUSTOM');
@@ -422,7 +417,10 @@ describe('ContentMetadataComponent', () => {
             expect(customProp.componentInstance.expanded).toBeFalsy();
 
             component.displayAspect = 'CUSTOM';
+
             fixture.detectChanges();
+            await fixture.whenStable()
+
             defaultProp = queryDom(fixture);
             exifProp = queryDom(fixture, 'EXIF');
             customProp = queryDom(fixture, 'CUSTOM');
@@ -431,29 +429,33 @@ describe('ContentMetadataComponent', () => {
             expect(customProp.componentInstance.expanded).toBeTruthy();
 
             component.displayAspect = 'Properties';
+
             fixture.detectChanges();
+            await fixture.whenStable()
+
             defaultProp = queryDom(fixture);
             exifProp = queryDom(fixture, 'EXIF');
             customProp = queryDom(fixture, 'CUSTOM');
             expect(defaultProp.componentInstance.expanded).toBeTruthy();
             expect(exifProp.componentInstance.expanded).toBeFalsy();
             expect(customProp.componentInstance.expanded).toBeFalsy();
-        }));
+        });
 
-        it('should not expand anything if input is wrong', async(() => {
+        it('should not expand anything if input is wrong', async () => {
             component.displayAspect = 'XXXX';
             component.expanded = true;
             component.displayEmpty = true;
 
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const defaultProp = queryDom(fixture);
             const exifProp = queryDom(fixture, 'EXIF');
             const customProp = queryDom(fixture, 'CUSTOM');
             expect(defaultProp.componentInstance.expanded).toBeFalsy();
             expect(exifProp.componentInstance.expanded).toBeFalsy();
             expect(customProp.componentInstance.expanded).toBeFalsy();
-
+        });
-        }));
     });
 
     describe('events', () => {

lib/content-services/src/lib/content-metadata/services/config/content-metadata-config.factory.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService, LogService, setupTestBed } from '@alfresco/adf-core';
 import { IndifferentConfigService } from './indifferent-config.service';
 import { AspectOrientedConfigService } from './aspect-oriented-config.service';
@@ -43,55 +43,51 @@ describe('ContentMetadataConfigFactory', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         factory = TestBed.inject(ContentMetadataConfigFactory);
         appConfig = TestBed.inject(AppConfigService);
-    }));
+    });
 
     describe('get', () => {
 
         let logService: LogService;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             logService = TestBed.inject(LogService);
             spyOn(logService, 'error').and.stub();
-        }));
-
-        afterEach(() => {
-            TestBed.resetTestingModule();
         });
 
         describe('get', () => {
 
-            it('should get back to default preset if no preset is provided as parameter', async(() => {
+            it('should get back to default preset if no preset is provided as parameter', () => {
                 config = factory.get();
 
                 expect(config).toEqual(jasmine.any(IndifferentConfigService));
-            }));
+            });
 
-            it('should get back to default preset if no preset is set', async(() => {
+            it('should get back to default preset if no preset is set', () => {
                 config = factory.get('default');
 
                 expect(config).toEqual(jasmine.any(IndifferentConfigService));
                 expect(logService.error).not.toHaveBeenCalled();
-            }));
+            });
 
-            it('should get back to the default preset if the requested preset does not exist', async(() => {
+            it('should get back to the default preset if the requested preset does not exist', () => {
                 config = factory.get('not-existing-preset');
 
                 expect(config).toEqual(jasmine.any(IndifferentConfigService));
-            }));
+            });
 
-            it('should log an error message if the requested preset does not exist', async(() => {
+            it('should log an error message if the requested preset does not exist', () => {
                 config = factory.get('not-existing-preset');
 
                 expect(logService.error).toHaveBeenCalledWith('No content-metadata preset for: not-existing-preset');
-            }));
+            });
         });
 
         describe('set', () => {
 
-            function setConfig(presetName, presetConfig) {
+            function setConfig(presetName: string, presetConfig: any) {
                 appConfig.config['content-metadata'] = {
                     presets: {
                         [presetName]: presetConfig
@@ -99,29 +95,29 @@ describe('ContentMetadataConfigFactory', () => {
                 };
             }
 
-            it('should get back the IndifferentConfigService preset if the preset config is indifferent', async(() => {
+            it('should get back the IndifferentConfigService preset if the preset config is indifferent', () => {
                 setConfig('default', '*');
 
                 config = factory.get('default');
 
                 expect(config).toEqual(jasmine.any(IndifferentConfigService));
-            }));
+            });
 
-            it('should get back the AspectOrientedConfigService preset if the preset config is aspect oriented', async(() => {
+            it('should get back the AspectOrientedConfigService preset if the preset config is aspect oriented', () => {
                 setConfig('default', { 'exif:exif': '*' });
 
                 config = factory.get('default');
 
                 expect(config).toEqual(jasmine.any(AspectOrientedConfigService));
-            }));
+            });
 
-            it('should get back the LayoutOrientedConfigService preset if the preset config is layout oriented', async(() => {
+            it('should get back the LayoutOrientedConfigService preset if the preset config is layout oriented', () => {
                 setConfig('default', []);
 
                 config = factory.get('default');
 
                 expect(config).toEqual(jasmine.any(LayoutOrientedConfigService));
-            }));
+            });
         });
    });
 });

lib/content-services/src/lib/dialogs/folder.dialog.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { MatDialogRef } from '@angular/material/dialog';
 import { NodesApiService, setupTestBed } from '@alfresco/adf-core';
 import { FolderDialogComponent } from './folder.dialog';
@@ -25,7 +25,6 @@ import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('FolderDialogComponent', () => {
-
     let fixture: ComponentFixture<FolderDialogComponent>;
     let component: FolderDialogComponent;
     let nodesApi: NodesApiService;
@@ -125,7 +124,7 @@ describe('FolderDialogComponent', () => {
             expect(dialogRef.close).toHaveBeenCalledWith(folder);
         });
 
-        it('should emit success output event with folder when submit is successful', async(() => {
+        it('should emit success output event with folder when submit is successful', async () => {
             const folder: any = { data: 'folder-data' };
             let expectedNode = null;
 
@@ -134,10 +133,11 @@ describe('FolderDialogComponent', () => {
             component.success.subscribe((node) => { expectedNode = node; });
             component.submit();
 
-                fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(expectedNode).toBe(folder);
         });
-            }));
 
         it('should not submit if form is invalid', () => {
             spyOn(nodesApi, 'updateNode');

lib/content-services/src/lib/document-list/components/content-action/content-action.component.spec.ts

@@ -16,10 +16,10 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange, EventEmitter } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { ContentService, setupTestBed } from '@alfresco/adf-core';
 import { FileNode } from '../../../mock';
-import { ContentActionHandler, ContentActionModel } from './../../models/content-action.model';
+import { ContentActionModel } from './../../models/content-action.model';
 import { DocumentActionsService } from './../../services/document-actions.service';
 import { FolderActionsService } from './../../services/folder-actions.service';
 import { NodeActionsService } from './../../services/node-actions.service';
@@ -30,7 +30,6 @@ import { ContentTestingModule } from '../../../testing/content.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('ContentAction', () => {
-
     let documentList: DocumentListComponent;
     let actionList: ContentActionListComponent;
     let documentActions: DocumentActionsService;
@@ -229,16 +228,14 @@ describe('ContentAction', () => {
     });
 
     it('should find document action handler via service', () => {
-        const handler = <ContentActionHandler> function () {
+        const handler = () => {};
-        };
         const action = new ContentActionComponent(actionList, documentActions, null);
         spyOn(documentActions, 'getHandler').and.returnValue(handler);
         expect(action.getSystemHandler('document', 'name')).toBe(handler);
     });
 
     it('should find folder action handler via service', () => {
-        const handler = <ContentActionHandler> function () {
+        const handler = () => {};
-        };
         const action = new ContentActionComponent(actionList, null, folderActions);
         spyOn(folderActions, 'getHandler').and.returnValue(handler);
         expect(action.getSystemHandler('folder', 'name')).toBe(handler);
@@ -255,20 +252,21 @@ describe('ContentAction', () => {
         expect(documentActions.getHandler).not.toHaveBeenCalled();
    });
 
-    it('should wire model with custom event handler', async(() => {
+    it('should wire model with custom event handler', (done) => {
         const action = new ContentActionComponent(actionList, documentActions, folderActions);
         const file = new FileNode();
 
         const handler = new EventEmitter();
         handler.subscribe((e) => {
             expect(e.value).toBe(file);
+            done();
         });
 
         action.execute = handler;
 
         action.ngOnInit();
         documentList.actions[0].execute(file);
-    }));
+    });
 
     it('should allow registering model without handler', () => {
         const action = new ContentActionComponent(actionList, documentActions, folderActions);

lib/content-services/src/lib/document-list/services/document-list.service.ts

@@ -56,7 +56,7 @@ export class DocumentListService implements DocumentListLoader {
      * @param targetParentId The id of the folder where the node will be copied
      * @returns NodeEntry for the copied node
      */
-    copyNode(nodeId: string, targetParentId: string) {
+    copyNode(nodeId: string, targetParentId: string): Observable<NodeEntry> {
         return from(this.apiService.getInstance().nodes.copyNode(nodeId, { targetParentId })).pipe(
             catchError((err) => this.handleError(err))
         );

lib/content-services/src/lib/document-list/services/node-actions.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { fakeAsync, TestBed } from '@angular/core/testing';
 import { Node, NodeEntry } from '@alfresco/js-api';
 import { AppConfigService, setupTestBed } from '@alfresco/adf-core';
 import { DocumentListService } from './document-list.service';
@@ -58,7 +58,7 @@ describe('NodeActionsService', () => {
         contentDialogService = TestBed.inject(ContentNodeDialogService);
     });
 
-    it('should be able to copy content', async(() => {
+    it('should be able to copy content', fakeAsync(() => {
         spyOn(documentListService, 'copyNode').and.returnValue(of(new NodeEntry()));
         spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(of([fakeNode]));
 
@@ -67,7 +67,7 @@ describe('NodeActionsService', () => {
         });
     }));
 
-    it('should be able to move content', async(() => {
+    it('should be able to move content', fakeAsync(() => {
         spyOn(documentListService, 'moveNode').and.returnValue(of(new NodeEntry()));
         spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(of([fakeNode]));
 
@@ -76,7 +76,7 @@ describe('NodeActionsService', () => {
         });
     }));
 
-    it('should be able to move folder', async(() => {
+    it('should be able to move folder', fakeAsync(() => {
         spyOn(documentListService, 'moveNode').and.returnValue(of(new NodeEntry()));
         spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(of([fakeNode]));
 
@@ -85,7 +85,7 @@ describe('NodeActionsService', () => {
         });
     }));
 
-    it('should be able to copy folder', async(() => {
+    it('should be able to copy folder', fakeAsync(() => {
         spyOn(documentListService, 'copyNode').and.returnValue(of(new NodeEntry()));
         spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(of([fakeNode]));
 
@@ -94,7 +94,7 @@ describe('NodeActionsService', () => {
         });
     }));
 
-    it('should be able to propagate the dialog error', async(() => {
+    it('should be able to propagate the dialog error', fakeAsync(() => {
         spyOn(documentListService, 'copyNode').and.returnValue(throwError('FAKE-KO'));
         spyOn(contentDialogService, 'openCopyMoveDialog').and.returnValue(of([fakeNode]));
 

lib/content-services/src/lib/folder-directive/folder-create.directive.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 import { Subject, of } from 'rxjs';
@@ -112,19 +112,19 @@ describe('FolderCreateDirective', () => {
             });
         });
 
-        it('should emit success event with node if the folder creation was successful', async(() => {
+        it('should emit success event with node if the folder creation was successful', async () => {
             const testNode = <Node> {};
-            fixture.detectChanges();
 
             element.triggerEventHandler('click', event);
             dialogRefMock.componentInstance.success.next(testNode);
 
-            fixture.whenStable().then(() => {
+            fixture.whenStable();
+            await fixture.whenStable();
+
             expect(fixture.componentInstance.successParameter).toBe(testNode);
         });
-        }));
 
-        it('should open the dialog with the proper title and nodeType', async(() => {
+        it('should open the dialog with the proper title and nodeType', () => {
             fixture.detectChanges();
             element.triggerEventHandler('click', event);
 
@@ -136,7 +136,7 @@ describe('FolderCreateDirective', () => {
                 },
                 width: jasmine.any(String)
             });
-        }));
+        });
     });
 
     describe('Without overrides', () => {
@@ -149,7 +149,7 @@ describe('FolderCreateDirective', () => {
             spyOn(dialog, 'open').and.returnValue(dialogRefMock);
         });
 
-        it('should open the dialog with the default title and nodeType', async(() => {
+        it('should open the dialog with the default title and nodeType', () => {
             fixture.detectChanges();
             element.triggerEventHandler('click', event);
 
@@ -161,6 +161,6 @@ describe('FolderCreateDirective', () => {
                 },
                 width: jasmine.any(String)
             });
-        }));
+        });
     });
 });

lib/content-services/src/lib/folder-directive/folder-edit.directive.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialog } from '@angular/material/dialog';
 import { By } from '@angular/platform-browser';
 import { Subject, of } from 'rxjs';
@@ -80,34 +80,35 @@ describe('FolderEditDirective', () => {
         spyOn(dialog, 'open').and.returnValue(dialogRefMock);
     });
 
-    it('should not emit folderEdit event when input value is undefined', () => {
+    it('should not emit folderEdit event when input value is undefined', async () => {
         spyOn(dialogRefMock, 'afterClosed').and.returnValue(of(null));
         spyOn(contentService.folderEdit, 'next');
 
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         element.nativeElement.click();
         expect(contentService.folderEdit.next).not.toHaveBeenCalled();
     });
-    });
 
-    it('should emit success event with node if the folder creation was successful', async(() => {
+    it('should emit success event with node if the folder creation was successful', async () => {
-        const testNode = <Node> {};
         fixture.detectChanges();
+        const testNode = <Node> {};
 
         element.triggerEventHandler('click', event);
         dialogRefMock.componentInstance.success.next(testNode);
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
         expect(fixture.componentInstance.successParameter).toBe(testNode);
     });
-    }));
 
-    it('should open the dialog with the proper title', async(() => {
+    it('should open the dialog with the proper title', async () => {
         fixture.detectChanges();
         element.triggerEventHandler('click', event);
 
+        await fixture.whenStable();
+
         expect(dialog.open).toHaveBeenCalledWith(jasmine.any(Function), {
             data: {
                 folder: jasmine.any(Object),
@@ -115,5 +116,5 @@ describe('FolderEditDirective', () => {
             },
             width: jasmine.any(String)
         });
-    }));
+    });
 });

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.spec.ts

@@ -89,37 +89,45 @@ describe('AddPermissionDialog', () => {
     });
 
     it('should close the dialog when close button is clicked', () => {
-        const closeButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-close-button"]');
+        const closeButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-close-button"]');
         expect(closeButton).not.toBeNull();
         closeButton.click();
         expect(dialogRef.close).toHaveBeenCalled();
     });
 
     it('should disable the confirm button when no selection is applied', () => {
-        const confirmButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        const confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBeTruthy();
     });
 
     it('should enable the button when a selection is done', async() => {
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
         addPermissionPanelComponent.select.emit(fakeAuthorityResults);
-        let confirmButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        let confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBeTruthy();
-        await fixture.detectChanges();
+
-        confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(false);
     });
 
     it('should update the role after selection', async (done) => {
         spyOn(component, 'onMemberUpdate').and.callThrough();
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
-        let confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        let confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(true);
         addPermissionPanelComponent.select.emit([fakeAuthorityResults[0]]);
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(confirmButton.disabled).toBe(false);
         confirmButton.click();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
 
         const selectBox = fixture.debugElement.query(By.css(('[id="adf-select-role-permission"] .mat-select-trigger')));
         selectBox.triggerEventHandler('click', null);
@@ -129,7 +137,10 @@ describe('AddPermissionDialog', () => {
         expect(options).not.toBeNull();
         expect(options.length).toBe(2);
         options[0].triggerEventHandler('click', {});
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(component.onMemberUpdate).toHaveBeenCalled();
 
         data.confirm.subscribe((selection) => {
@@ -137,7 +148,7 @@ describe('AddPermissionDialog', () => {
             done();
         });
 
-        confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(false);
         confirmButton.click();
     });
@@ -145,30 +156,40 @@ describe('AddPermissionDialog', () => {
     it('should update all the user role on header column update', async () => {
         spyOn(component, 'onBulkUpdate').and.callThrough();
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
-        let confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        let confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(true);
         addPermissionPanelComponent.select.emit(fakeAuthorityResults);
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(confirmButton.disabled).toBe(false);
         confirmButton.click();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
 
         const selectBox = fixture.debugElement.query(By.css(('[id="adf-bulk-select-role-permission"] .mat-select-trigger')));
         selectBox.triggerEventHandler('click', null);
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const options = fixture.debugElement.queryAll(By.css('mat-option'));
         expect(options).not.toBeNull();
         expect(options.length).toBe(2);
         options[0].triggerEventHandler('click', {});
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(component.onBulkUpdate).toHaveBeenCalled();
 
         data.confirm.subscribe((selection) => {
             expect(selection.length).toBe(3);
         });
 
-        confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(false);
         confirmButton.click();
     });
@@ -177,31 +198,42 @@ describe('AddPermissionDialog', () => {
         spyOn(component, 'onMemberUpdate').and.callThrough();
         spyOn(component, 'onMemberDelete').and.callThrough();
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
-        let confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        let confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(true);
         addPermissionPanelComponent.select.emit(fakeAuthorityResults);
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(confirmButton.disabled).toBe(false);
         confirmButton.click();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
 
         const selectBox = fixture.debugElement.query(By.css(('[id="adf-select-role-permission"] .mat-select-trigger')));
         selectBox.triggerEventHandler('click', null);
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const options = fixture.debugElement.queryAll(By.css('mat-option'));
         expect(options).not.toBeNull();
         expect(options.length).toBe(2);
         options[0].triggerEventHandler('click', {});
-        await fixture.detectChanges();
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(component.onMemberUpdate).toHaveBeenCalled();
 
-        confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         expect(confirmButton.disabled).toBe(true);
         const deleteButton = element.querySelectorAll('[data-automation-id="adf-delete-permission-button"]') as any;
         deleteButton[1].click();
         deleteButton[2].click();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(confirmButton.disabled).toBe(false);
         expect(component.onMemberDelete).toHaveBeenCalled();
@@ -220,8 +252,9 @@ describe('AddPermissionDialog', () => {
             expect(fakeAuthorityResults[0].entry.id).toBe(selection[0].authorityId);
         });
 
-        await fixture.detectChanges();
+        fixture.detectChanges();
-        const confirmButton = <HTMLButtonElement> element.querySelector('[data-automation-id="add-permission-dialog-confirm-button"]');
+        await fixture.whenStable();
+        const confirmButton = element.querySelector<HTMLButtonElement>('[data-automation-id="add-permission-dialog-confirm-button"]');
         confirmButton.click();
     });
 });

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { AddPermissionPanelComponent } from './add-permission-panel.component';
 import { By } from '@angular/platform-browser';
 import { SearchService, setupTestBed } from '@alfresco/adf-core';
@@ -42,9 +42,12 @@ describe('AddPermissionPanelComponent', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(AddPermissionPanelComponent);
+        searchApiService = fixture.componentRef.injector.get(SearchService);
+
         debugElement = fixture.debugElement;
         element = fixture.nativeElement;
         component = fixture.componentInstance;
+
         fixture.detectChanges();
     });
 
@@ -64,8 +67,7 @@ describe('AddPermissionPanelComponent', () => {
         expect(element.querySelector('#searchInput')).not.toBeNull();
     });
 
-    it('should show search results when user types something', async(() => {
+    it('should show search results when user types something', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         expect(element.querySelector('#adf-add-permission-type-search')).not.toBeNull();
         expect(element.querySelector('#searchInput')).not.toBeNull();
@@ -78,8 +80,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should emit a select event with the selected items when an item is clicked', async(() => {
+    it('should emit a select event with the selected items when an item is clicked', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         component.select.subscribe((items) => {
             expect(items).not.toBeNull();
@@ -98,8 +99,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should show the icon related on the nodeType', async(() => {
+    it('should show the icon related on the nodeType', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         expect(element.querySelector('#adf-add-permission-type-search')).not.toBeNull();
         expect(element.querySelector('#searchInput')).not.toBeNull();
@@ -115,8 +115,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should clear the search when user delete the search input field', async(() => {
+    it('should clear the search when user delete the search input field', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         expect(element.querySelector('#adf-add-permission-type-search')).not.toBeNull();
         expect(element.querySelector('#searchInput')).not.toBeNull();
@@ -136,8 +135,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should remove element from selection when is clicked and already selected', async(() => {
+    it('should remove element from selection when is clicked and already selected', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         component.selectedItems.push(fakeAuthorityListResult.list.entries[0]);
         component.select.subscribe((items) => {
@@ -156,8 +154,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should always show as extra result the everyone group', async(() => {
+    it('should always show as extra result the everyone group', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         component.selectedItems.push(fakeAuthorityListResult.list.entries[0]);
 
@@ -175,8 +172,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should show everyone group when search return no result', async(() => {
+    it('should show everyone group when search return no result', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of({ list: { entries: [] } }));
         component.selectedItems.push(fakeAuthorityListResult.list.entries[0]);
 
@@ -190,8 +186,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should show first and last name of users', async(() => {
+    it('should show first and last name of users', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeNameListResult));
         component.selectedItems.push(fakeNameListResult.list.entries[0]);
         component.selectedItems.push(fakeNameListResult.list.entries[1]);
@@ -208,8 +203,7 @@ describe('AddPermissionPanelComponent', () => {
         });
     }));
 
-    it('should emit unique element in between multiple search', async(() => {
+    it('should emit unique element in between multiple search', fakeAsync(() => {
-        searchApiService = fixture.componentRef.injector.get(SearchService);
         spyOn(searchApiService, 'search').and.returnValue(of(fakeAuthorityListResult));
         let searchAttempt = 0;
 

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { setupTestBed } from '@alfresco/adf-core';
 import { Node } from '@alfresco/js-api';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AddPermissionComponent } from './add-permission.component';
 import { AddPermissionPanelComponent } from './add-permission-panel.component';
 import { By } from '@angular/platform-browser';
@@ -61,27 +61,28 @@ describe('AddPermissionComponent', () => {
         expect(addButton.disabled).toBeTruthy();
     });
 
-    it('should enable the ADD button when a selection is sent', async(() => {
+    it('should enable the ADD button when a selection is sent', async () => {
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
         addPermissionPanelComponent.select.emit(fakeAuthorityResults);
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
-            const addButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#adf-add-permission-action-button');
+        const addButton = element.querySelector<HTMLButtonElement>('#adf-add-permission-action-button');
         expect(addButton.disabled).toBeFalsy();
     });
-    }));
 
-    it('should NOT enable the ADD button when a selection is sent but the user does not have the permissions', async(() => {
+    it('should NOT enable the ADD button when a selection is sent but the user does not have the permissions', async () => {
         const addPermissionPanelComponent: AddPermissionPanelComponent = fixture.debugElement.query(By.directive(AddPermissionPanelComponent)).componentInstance;
         addPermissionPanelComponent.select.emit(fakeAuthorityResults);
         fixture.componentInstance.currentNode = new Node({id: 'fake-node-id'});
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
-            const addButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#adf-add-permission-action-button');
+        await fixture.whenStable();
+
+        const addButton = element.querySelector<HTMLButtonElement>('#adf-add-permission-action-button');
         expect(addButton.disabled).toBeTruthy();
     });
-    }));
 
     it('should emit a success event when the node is updated', async (done) => {
         fixture.componentInstance.selectedItems = fakeAuthorityResults;
@@ -92,8 +93,10 @@ describe('AddPermissionComponent', () => {
             done();
         });
 
-        await fixture.detectChanges();
+        fixture.detectChanges();
-        const addButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#adf-add-permission-action-button');
+        await fixture.whenStable();
+
+        const addButton = element.querySelector<HTMLButtonElement>('#adf-add-permission-action-button');
         addButton.click();
     });
 
@@ -116,8 +119,10 @@ describe('AddPermissionComponent', () => {
             done();
         });
 
-        await fixture.detectChanges();
+        fixture.detectChanges();
-        const addButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#adf-add-permission-action-button');
+        await fixture.whenStable();
+
+        const addButton = element.querySelector<HTMLButtonElement>('#adf-add-permission-action-button');
         addButton.click();
     });
 });

lib/content-services/src/lib/permission-manager/components/inherited-button.directive.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleInheritedPermissionTestComponent } from '../../mock/inherited-permission.component.mock';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NodesApiService, setupTestBed } from '@alfresco/adf-core';
 import { of } from 'rxjs';
 import { ContentTestingModule } from '../../testing/content.testing.module';
@@ -43,20 +43,22 @@ describe('InheritPermissionDirective', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(SimpleInheritedPermissionTestComponent);
         component = fixture.componentInstance;
         element = fixture.nativeElement;
         nodeService = TestBed.inject(NodesApiService);
-    }));
+    });
 
-    it('should be able to render the simple component', async(() => {
+    it('should be able to render the simple component', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelector('#sample-button-permission')).not.toBeNull();
         expect(element.querySelector('#update-notification')).toBeNull();
-    }));
+    });
 
-    it('should be able to add inherited permission', async(() => {
+    it('should be able to add inherited permission', async () => {
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeNoInherit));
         spyOn(nodeService, 'updateNode').and.callFake((_, nodeBody) => {
             if (nodeBody.permissions?.isInheritanceEnabled) {
@@ -66,17 +68,20 @@ describe('InheritPermissionDirective', () => {
             }
         });
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const buttonPermission: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#sample-button-permission');
         expect(buttonPermission).not.toBeNull();
         expect(element.querySelector('#update-notification')).toBeNull();
         buttonPermission.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(element.querySelector('#update-notification')).not.toBeNull();
     });
-    }));
 
-    it('should be able to remove inherited permission', async(() => {
+    it('should be able to remove inherited permission', async () => {
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeWithInherit));
         spyOn(nodeService, 'updateNode').and.callFake((_, nodeBody) => {
             if (nodeBody.permissions?.isInheritanceEnabled) {
@@ -86,29 +91,37 @@ describe('InheritPermissionDirective', () => {
             }
         });
         component.updatedNode = true;
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const buttonPermission: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#sample-button-permission');
         expect(buttonPermission).not.toBeNull();
         expect(element.querySelector('#update-notification')).not.toBeNull();
         buttonPermission.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(element.querySelector('#update-notification')).toBeNull();
     });
-    }));
 
-    it('should not update the node when node has no permission', async(() => {
+    it('should not update the node when node has no permission', async () => {
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeWithInheritNoPermission));
         const spyUpdateNode = spyOn(nodeService, 'updateNode');
         component.updatedNode = true;
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const buttonPermission: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#sample-button-permission');
         expect(buttonPermission).not.toBeNull();
         expect(element.querySelector('#update-notification')).not.toBeNull();
         buttonPermission.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(spyUpdateNode).not.toHaveBeenCalled();
     });
-    }));
 });

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { NodesApiService, SearchService, setupTestBed } from '@alfresco/adf-core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { of, throwError } from 'rxjs';
@@ -78,7 +78,10 @@ describe('PermissionListComponent', () => {
         component.nodeId = 'fake-node-id';
         getNodeSpy.and.returnValue(of(fakeNodeWithoutPermissions));
         component.ngOnInit();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelector('.adf-permission-container')).not.toBeNull();
         expect(element.querySelector('[data-automation-id="adf-locally-set-permission"]')).not.toBeNull();
     });
@@ -87,7 +90,9 @@ describe('PermissionListComponent', () => {
         component.nodeId = 'fake-node-id';
         getNodeSpy.and.returnValue(throwError(null));
         component.ngOnInit();
-        await fixture.detectChanges();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(element.querySelector('.adf-no-permission__template')).not.toBeNull();
         expect(element.querySelector('.adf-no-permission__template p').textContent).toContain('PERMISSION_MANAGER.ERROR.NOT-FOUND');
@@ -101,7 +106,7 @@ describe('PermissionListComponent', () => {
 
         expect(element.querySelectorAll('[data-automation-id="adf-locally-set-permission"] .adf-datatable-row').length).toBe(2);
 
-        const showButton: HTMLButtonElement = element.querySelector('[data-automation-id="permission-info-button"]');
+        const showButton = element.querySelector<HTMLButtonElement>('[data-automation-id="permission-info-button"]');
         showButton.click();
         fixture.detectChanges();
 
@@ -112,7 +117,9 @@ describe('PermissionListComponent', () => {
         it('should show inherited details',  async() => {
             getNodeSpy.and.returnValue(of(fakeNodeInheritedOnly));
             component.ngOnInit();
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('.adf-inherit-container .mat-checked')).toBeDefined();
             expect(element.querySelector('.adf-inherit-container h3').textContent.trim())
@@ -121,10 +128,11 @@ describe('PermissionListComponent', () => {
                 .toBe('PERMISSION_MANAGER.LABELS.INHERITED-SUBTITLE');
         });
 
-        it('should toggle the inherited button',  async() => {
+        it('should toggle the inherited button',  fakeAsync(() => {
             getNodeSpy.and.returnValue(of(fakeNodeInheritedOnly));
             component.ngOnInit();
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
 
             expect(element.querySelector('.adf-inherit-container .mat-checked')).toBeDefined();
             expect(element.querySelector('.adf-inherit-container h3').textContent.trim())
@@ -136,19 +144,22 @@ describe('PermissionListComponent', () => {
 
             const slider = fixture.debugElement.query(By.css('mat-slide-toggle'));
             slider.triggerEventHandler('change', { source: { checked: false } });
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
 
             expect(element.querySelector('.adf-inherit-container .mat-checked')).toBe(null);
             expect(element.querySelector('.adf-inherit-container h3').textContent.trim())
                 .toBe('PERMISSION_MANAGER.LABELS.INHERITED-PERMISSIONS PERMISSION_MANAGER.LABELS.OFF');
             expect(element.querySelector('span[title="total"]').textContent.trim())
                 .toBe('PERMISSION_MANAGER.LABELS.INHERITED-SUBTITLE');
-        });
+        }));
 
         it('should not toggle inherited button for read only users',  async () => {
             getNodeSpy.and.returnValue(of(fakeReadOnlyNodeInherited));
             component.ngOnInit();
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('.adf-inherit-container .mat-checked')).toBeDefined();
             expect(element.querySelector('.adf-inherit-container h3').textContent.trim())
@@ -160,7 +171,9 @@ describe('PermissionListComponent', () => {
 
             const slider = fixture.debugElement.query(By.css('mat-slide-toggle'));
             slider.triggerEventHandler('change', { source: { checked: false } });
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('.adf-inherit-container .mat-checked')).toBeDefined();
             expect(element.querySelector('.adf-inherit-container h3').textContent.trim())
@@ -182,7 +195,9 @@ describe('PermissionListComponent', () => {
             searchQuerySpy.and.returnValue(of(fakeSiteNodeResponse));
             component.ngOnInit();
 
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelector('adf-user-name-column').textContent).toContain('GROUP_EVERYONE');
             expect(element.querySelector('#adf-select-role-permission').textContent).toContain('Contributor');
         });
@@ -191,7 +206,9 @@ describe('PermissionListComponent', () => {
             searchQuerySpy.and.returnValue(of(fakeSiteNodeResponse));
             component.ngOnInit();
 
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelector('adf-user-name-column').textContent).toContain('GROUP_EVERYONE');
             expect(element.querySelector('#adf-select-role-permission').textContent).toContain('Contributor');
 
@@ -199,7 +216,7 @@ describe('PermissionListComponent', () => {
             selectBox.triggerEventHandler('click', null);
             fixture.detectChanges();
 
-            const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
+            const options = fixture.debugElement.queryAll(By.css('mat-option'));
             expect(options).not.toBeNull();
             expect(options.length).toBe(4);
             expect(options[0].nativeElement.innerText).toContain('ADF.ROLES.SITECOLLABORATOR');
@@ -212,12 +229,14 @@ describe('PermissionListComponent', () => {
             getNodeSpy.and.returnValue(of(fakeNodeLocalSiteManager));
             component.ngOnInit();
 
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelector('adf-user-name-column').textContent).toContain('GROUP_site_testsite_SiteManager');
             expect(element.querySelector('#adf-select-role-permission').textContent).toContain('ADF.ROLES.SITEMANAGER');
-            const deleteButton: HTMLButtonElement = element.querySelector('[data-automation-id="adf-delete-permission-button-GROUP_site_testsite_SiteManager"]');
+            const deleteButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-delete-permission-button-GROUP_site_testsite_SiteManager"]');
             expect(deleteButton.disabled).toBe(true);
-            const otherDeleteButton: HTMLButtonElement = element.querySelector('[data-automation-id="adf-delete-permission-button-superadminuser"]');
+            const otherDeleteButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-delete-permission-button-superadminuser"]');
             expect(otherDeleteButton.disabled).toBe(false);
         });
 
@@ -226,7 +245,8 @@ describe('PermissionListComponent', () => {
             searchQuerySpy.and.returnValue(of(fakeEmptyResponse));
             component.ngOnInit();
 
-            await fixture.detectChanges();
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('adf-user-name-column').textContent).toContain('GROUP_EVERYONE');
             expect(element.querySelector('#adf-select-role-permission').textContent).toContain('Contributor');
@@ -234,7 +254,7 @@ describe('PermissionListComponent', () => {
             const selectBox = fixture.debugElement.query(By.css(('[id="adf-select-role-permission"] .mat-select-trigger')));
             selectBox.triggerEventHandler('click', null);
             fixture.detectChanges();
-            const options: any = fixture.debugElement.queryAll(By.css('mat-option'));
+            const options = fixture.debugElement.queryAll(By.css('mat-option'));
             expect(options).not.toBeNull();
             expect(options.length).toBe(5);
             options[3].triggerEventHandler('click', {});
@@ -246,12 +266,14 @@ describe('PermissionListComponent', () => {
             spyOn(nodeService, 'updateNode').and.returnValue(of(new MinimalNode({id: 'fake-uwpdated-node'})));
             searchQuerySpy.and.returnValue(of(fakeEmptyResponse));
             component.ngOnInit();
-            await fixture.detectChanges();
+
+            fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('adf-user-name-column').textContent).toContain('GROUP_EVERYONE');
             expect(element.querySelector('#adf-select-role-permission').textContent).toContain('Contributor');
 
-            const deleteButton: HTMLButtonElement = element.querySelector('[data-automation-id="adf-delete-permission-button-GROUP_EVERYONE"]');
+            const deleteButton = element.querySelector<HTMLButtonElement>('[data-automation-id="adf-delete-permission-button-GROUP_EVERYONE"]');
             deleteButton.click();
             fixture.detectChanges();
 

lib/content-services/src/lib/permission-manager/services/node-permission.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { NodePermissionService } from './node-permission.service';
 import { SearchService, NodesApiService, setupTestBed } from '@alfresco/adf-core';
 import { Node, PermissionElement } from '@alfresco/js-api';
@@ -62,18 +62,14 @@ describe('NodePermissionService', () => {
         nodeService = TestBed.inject(NodesApiService);
     });
 
-    afterEach(() => {
+    function returnUpdatedNode(nodeBody: Node) {
-        TestBed.resetTestingModule();
+        return of(new Node({
-    });
+            id: 'fake-updated-node',
-
+            permissions: nodeBody.permissions
-    function returnUpdatedNode(_, nodeBody) {
+        }));
-        const fakeNode: Node = new Node({});
-        fakeNode.id = 'fake-updated-node';
-        fakeNode.permissions = nodeBody.permissions;
-        return of(fakeNode);
     }
 
-    it('should return a list of roles taken from the site groups', async(() => {
+    it('should return a list of roles taken from the site groups', (done) => {
         spyOn(searchApiService, 'searchByQueryBody').and.returnValue(of(fakeSiteNodeResponse));
         spyOn(service, 'getGroupMemberByGroupName').and.returnValue(of(fakeSiteRoles));
 
@@ -81,20 +77,22 @@ describe('NodePermissionService', () => {
             expect(roleArray).not.toBeNull();
             expect(roleArray.length).toBe(4);
             expect(roleArray[0]).toBe('SiteCollaborator');
+            done();
+        });
     });
-    }));
 
-    it('should return a list of settable if node has no site', async(() => {
+    it('should return a list of settable if node has no site', (done) => {
         spyOn(searchApiService, 'searchByQueryBody').and.returnValue(of(fakeEmptyResponse));
 
         service.getNodeRoles(fakeNodeWithOnlyLocally).subscribe((roleArray: string[]) => {
             expect(roleArray).not.toBeNull();
             expect(roleArray.length).toBe(5);
             expect(roleArray[0]).toBe('Contributor');
+            done();
+        });
     });
-    }));
 
-    it('should be able to update a locally set permission role', async(() => {
+    it('should be able to update a locally set permission role', (done) => {
         const fakeAccessStatus: any = 'DENIED';
         const fakePermission: PermissionElement = {
             'authorityId': 'GROUP_EVERYONE',
@@ -102,7 +100,7 @@ describe('NodePermissionService', () => {
             'accessStatus' : fakeAccessStatus
         };
 
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
 
         service.updatePermissionRole(JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally)), fakePermission).subscribe((node: Node) => {
             expect(node).not.toBeNull();
@@ -111,16 +109,17 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet[0].authorityId).toBe(fakePermission.authorityId);
             expect(node.permissions.locallySet[0].name).toBe(fakePermission.name);
             expect(node.permissions.locallySet[0].accessStatus).toBe(fakePermission.accessStatus);
+            done();
+        });
     });
-    }));
 
-    it('should be able to remove a locally set permission', async(() => {
+    it('should be able to remove a locally set permission', (done) => {
-        const fakePermission: PermissionElement = <PermissionElement> {
+        const fakePermission = <PermissionElement> {
             'authorityId': 'FAKE_PERSON_1',
             'name': 'Contributor',
             'accessStatus' : 'ALLOWED'
         };
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeToRemovePermission));
 
         service.removePermission(fakeNodeCopy, fakePermission).subscribe((node: Node) => {
@@ -129,13 +128,14 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet.length).toBe(2);
             expect(node.permissions.locallySet[0].authorityId).not.toBe(fakePermission.authorityId);
             expect(node.permissions.locallySet[1].authorityId).not.toBe(fakePermission.authorityId);
+            done();
+        });
     });
-    }));
 
-    it('should be able to update locally set permissions on the node by node id', async(() => {
+    it('should be able to update locally set permissions on the node by node id', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeCopy));
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
 
         service.updateNodePermissions('fake-node-id', fakePermissionElements).subscribe((node: Node) => {
             expect(node).not.toBeNull();
@@ -144,12 +144,13 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet[3].authorityId).not.toBe(fakeAuthorityResults[0].entry['cm:userName']);
             expect(node.permissions.locallySet[2].authorityId).not.toBe(fakeAuthorityResults[1].entry['cm:userName']);
             expect(node.permissions.locallySet[1].authorityId).not.toBe(fakeAuthorityResults[2].entry['cm:userName']);
+            done();
+        });
     });
-    }));
 
-    it('should be able to update locally permissions on the node', async(() => {
+    it('should be able to update locally permissions on the node', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
 
         service.updateLocallySetPermissions(fakeNodeCopy, fakePermissionElements).subscribe((node: Node) => {
             expect(node).not.toBeNull();
@@ -158,13 +159,14 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet[3].authorityId).not.toBe(fakeAuthorityResults[0].entry['cm:userName']);
             expect(node.permissions.locallySet[2].authorityId).not.toBe(fakeAuthorityResults[1].entry['cm:userName']);
             expect(node.permissions.locallySet[1].authorityId).not.toBe(fakeAuthorityResults[2].entry['cm:userName']);
+            done();
+        });
     });
-    }));
 
-    it('should be able to update locally permissions on the node without locally set permissions', async(() => {
+    it('should be able to update locally permissions on the node without locally set permissions', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithoutPermissions));
         fakeNodeCopy.permissions.locallySet = undefined;
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
         service.updateLocallySetPermissions(fakeNodeCopy, fakePermissionElements).subscribe((node: Node) => {
             expect(node).not.toBeNull();
             expect(node.id).toBe('fake-updated-node');
@@ -172,10 +174,11 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet[2].authorityId).not.toBe(fakeAuthorityResults[0].entry['cm:userName']);
             expect(node.permissions.locallySet[1].authorityId).not.toBe(fakeAuthorityResults[1].entry['cm:userName']);
             expect(node.permissions.locallySet[0].authorityId).not.toBe(fakeAuthorityResults[2].entry['cm:userName']);
+            done();
+        });
     });
-    }));
 
-    it('should fail when user select the same authority and role to add', async(() => {
+    it('should fail when user select the same authority and role to add', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
 
         const fakeDuplicateAuthority: PermissionElement []  = [{
@@ -185,32 +188,35 @@ describe('NodePermissionService', () => {
         }];
 
         service.updateLocallySetPermissions(fakeNodeCopy, fakeDuplicateAuthority)
-            .subscribe(() => {
+            .subscribe(
-                fail('should throw exception');
+                () => { fail('should throw exception'); },
-            }, (errorMessage) => {
+                (errorMessage) => {
                     expect(errorMessage).not.toBeNull();
                     expect(errorMessage).toBeDefined();
                     expect(errorMessage).toBe('PERMISSION_MANAGER.ERROR.DUPLICATE-PERMISSION');
+                    done();
+                }
+            );
     });
-    }));
 
-    it('should be able to remove the locallyset permission', async(() => {
+    it('should be able to remove the locallyset permission', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithoutPermissions));
         fakeNodeCopy.permissions.locallySet = [...fakePermissionElements];
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
-        service.removePermissions(fakeNodeCopy, [fakePermissionElements[2]]).subscribe((node: Node) => {
+        service.removePermissions(fakeNodeCopy, [fakePermissionElements[2]]).subscribe((node) => {
             expect(node).not.toBeNull();
             expect(node.id).toBe('fake-updated-node');
             expect(node.permissions.locallySet.length).toBe(2);
             expect(node.permissions.locallySet[0].authorityId).toBe(fakePermissionElements[0].authorityId);
             expect(node.permissions.locallySet[1].authorityId).toBe(fakePermissionElements[1].authorityId);
+            done();
+        });
     });
-    }));
 
-    it('should be able to replace the locally set', async(() => {
+    it('should be able to replace the locally set', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
         fakeNodeCopy.permissions.locallySet = [];
-        spyOn(nodeService, 'updateNode').and.callFake((nodeId, permissionBody) => returnUpdatedNode(nodeId, permissionBody));
+        spyOn(nodeService, 'updateNode').and.callFake((_, permissionBody) => returnUpdatedNode(permissionBody));
         service.updatePermissions(fakeNodeCopy, fakePermissionElements).subscribe((node: Node) => {
             expect(node).not.toBeNull();
             expect(node.id).toBe('fake-updated-node');
@@ -218,10 +224,11 @@ describe('NodePermissionService', () => {
             expect(node.permissions.locallySet[0].authorityId).toBe(fakePermissionElements[0].authorityId);
             expect(node.permissions.locallySet[1].authorityId).toBe(fakePermissionElements[1].authorityId);
             expect(node.permissions.locallySet[2].authorityId).toBe(fakePermissionElements[2].authorityId);
+            done();
+        });
     });
-    }));
 
-    it('should be able to get node and it\'s roles', async(() => {
+    it('should be able to get node and its roles', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeCopy));
         spyOn(searchApiService, 'searchByQueryBody').and.returnValue(of(fakeSiteNodeResponse));
@@ -230,10 +237,11 @@ describe('NodePermissionService', () => {
             expect(node).toBe(fakeNodeCopy);
             expect(roles.length).toBe(4);
             expect(roles[0].role).toBe('SiteCollaborator');
+            done();
+        });
     });
-    }));
 
-    it('should provide node and default role if search API failed', async(() => {
+    it('should provide node and default role if search API failed', (done) => {
         const fakeNodeCopy = JSON.parse(JSON.stringify(fakeNodeWithOnlyLocally));
         spyOn(nodeService, 'getNode').and.returnValue(of(fakeNodeCopy));
         spyOn(searchApiService, 'searchByQueryBody').and.returnValue(throwError('search service down'));
@@ -241,6 +249,7 @@ describe('NodePermissionService', () => {
             expect(node).toBe(fakeNodeCopy);
             expect(roles.length).toBe(5);
             expect(roles[0].role).toBe('Contributor');
+            done();
+        });
     });
-    }));
 });

lib/content-services/src/lib/search/components/search-control.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, DebugElement, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
     AuthenticationService,
@@ -90,7 +90,6 @@ describe('SearchControlComponent', () => {
 
     afterEach(() => {
         fixture.destroy();
-        TestBed.resetTestingModule();
     });
 
     function typeWordIntoSearchInput(word: string): void {
@@ -151,18 +150,22 @@ describe('SearchControlComponent', () => {
 
     describe('component rendering', () => {
 
-        it('should display a text input field by default', async(() => {
+        it('should display a text input field by default', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelectorAll('#adf-control-input').length).toBe(1);
             expect(element.querySelector('#adf-control-input')).toBeDefined();
             expect(element.querySelector('#adf-control-input')).not.toBeNull();
-        }));
+        });
 
-        it('should set browser autocomplete to off by default', async(() => {
+        it('should set browser autocomplete to off by default', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const attr = element.querySelector('#adf-control-input').getAttribute('autocomplete');
             expect(attr).toBe('off');
-        }));
+        });
    });
 
     describe('autocomplete list', () => {

lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.spec.ts

@@ -18,7 +18,7 @@
 import { SearchDateRangeComponent } from './search-date-range.component';
 import { MomentDateAdapter, setupTestBed } from '@alfresco/adf-core';
 import { DateAdapter } from '@angular/material/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -195,11 +195,12 @@ describe('SearchDateRangeComponent', () => {
         expect(component.getFromValidationMessage()).toEqual('');
     });
 
-    it('should have no maximum date by default', async(() => {
+    it('should have no maximum date by default', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(fixture.debugElement.nativeElement.querySelector('input[ng-reflect-max]')).toBeNull();
-    }));
+    });
 
     it('should be able to set a fixed maximum date', async () => {
         component.settings = { field: 'cm:created', dateFormat: dateFormatFixture, maxDate: maxDate };

lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.spec.ts

@@ -17,7 +17,7 @@
 
 import { SearchDatetimeRangeComponent } from './search-datetime-range.component';
 import { setupTestBed } from '@alfresco/adf-core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -45,17 +45,20 @@ describe('SearchDatetimeRangeComponent', () => {
 
     afterEach(() => fixture.destroy());
 
-    it('should setup form elements on init', () => {
+    it('should setup form elements on init', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(component.from).toBeDefined();
         expect(component.to).toBeDefined();
         expect(component.form).toBeDefined();
     });
 
-    it('should setup form control with formatted valid datetime on change', () => {
+    it('should setup form control with formatted valid datetime on change', async () => {
         component.settings = { field: 'cm:created', datetimeFormat: datetimeFormatFixture };
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const inputString = '20-feb-18 20:00';
         const momentFromInput = moment(inputString, datetimeFormatFixture);
@@ -67,9 +70,11 @@ describe('SearchDatetimeRangeComponent', () => {
         expect(component.from.value.toString()).toEqual(momentFromInput.toString());
     });
 
-    it('should NOT setup form control with invalid datetime on change', () => {
+    it('should NOT setup form control with invalid datetime on change', async () => {
         component.settings = { field: 'cm:created', datetimeFormat: datetimeFormatFixture };
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const inputString = '2017-10-16 20:f:00';
         const momentFromInput = moment(inputString, datetimeFormatFixture);
@@ -81,8 +86,10 @@ describe('SearchDatetimeRangeComponent', () => {
         expect(component.from.value.toString()).not.toEqual(momentFromInput.toString());
     });
 
-    it('should reset form', () => {
+    it('should reset form', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.form.setValue({ from: fromDatetime, to: toDatetime });
 
         expect(component.from.value).toEqual(fromDatetime);
@@ -95,15 +102,17 @@ describe('SearchDatetimeRangeComponent', () => {
         expect(component.form.value).toEqual({ from: '', to: '' });
     });
 
-    it('should reset fromMaxDatetime on reset', () => {
+    it('should reset fromMaxDatetime on reset', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.fromMaxDatetime = fromDatetime;
         component.reset();
 
         expect(component.fromMaxDatetime).toEqual(undefined);
     });
 
-    it('should update query builder on reset', () => {
+    it('should update query builder on reset', async () => {
         const context: any = {
             queryFragments: {
                 createdDatetimeRange: 'query'
@@ -118,13 +127,15 @@ describe('SearchDatetimeRangeComponent', () => {
         spyOn(context, 'update').and.stub();
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.reset();
 
         expect(context.queryFragments.createdDatetimeRange).toEqual('');
         expect(context.update).toHaveBeenCalled();
     });
 
-    it('should update the query in UTC format when values change', () => {
+    it('should update the query in UTC format when values change', async () => {
         const context: any = {
             queryFragments: {},
             update() {
@@ -138,6 +149,8 @@ describe('SearchDatetimeRangeComponent', () => {
         spyOn(context, 'update').and.stub();
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.apply({
             from: fromDatetime,
             to: toDatetime
@@ -149,7 +162,7 @@ describe('SearchDatetimeRangeComponent', () => {
         expect(context.update).toHaveBeenCalled();
     });
 
-    it('should be able to update the query in UTC format from a GMT format', () => {
+    it('should be able to update the query in UTC format from a GMT format', async () => {
         const context: any = {
             queryFragments: {},
             update() {
@@ -165,6 +178,8 @@ describe('SearchDatetimeRangeComponent', () => {
         spyOn(context, 'update').and.stub();
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.apply({
             from: fromInGmt,
             to: toInGmt
@@ -178,6 +193,8 @@ describe('SearchDatetimeRangeComponent', () => {
 
     it('should show datetime-format error when an invalid datetime is set', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.onChangedHandler({ value: '10/14/2020 10:00:00 PM' }, component.from);
 
         fixture.detectChanges();
@@ -188,6 +205,8 @@ describe('SearchDatetimeRangeComponent', () => {
 
     it('should not show datetime-format error when valid found', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const input = fixture.debugElement.nativeElement.querySelector('[data-automation-id="datetime-range-from-input"]');
         input.value = '10/16/2017 9:00 PM';
         input.dispatchEvent(new Event('input'));
@@ -198,15 +217,18 @@ describe('SearchDatetimeRangeComponent', () => {
         expect(component.getFromValidationMessage()).toEqual('');
     });
 
-    it('should have no maximum datetime by default', async(() => {
+    it('should have no maximum datetime by default', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(fixture.debugElement.nativeElement.querySelector('input[ng-reflect-max]')).toBeNull();
-    }));
+    });
 
     it('should be able to set a fixed maximum datetime', async () => {
         component.settings = { field: 'cm:created', datetimeFormat: datetimeFormatFixture, maxDatetime: maxDatetime };
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const inputs = fixture.debugElement.nativeElement.querySelectorAll('input[ng-reflect-max="Tue Mar 10 2020 20:00:00 GMT+0"]');
 

lib/content-services/src/lib/search/components/search-filter/search-filter.component.spec.ts

@@ -22,7 +22,7 @@ import { Subject } from 'rxjs';
 import { FacetFieldBucket } from '../../models/facet-field-bucket.interface';
 import { FacetField } from '../../models/facet-field.interface';
 import { SearchFilterList } from '../../models/search-filter-list.model';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
 import {
@@ -714,44 +714,53 @@ describe('SearchFilterComponent', () => {
 
     describe('widgets', () => {
 
-        it('should have expandable categories', async(() => {
+        it('should have expandable categories', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             queryBuilder.categories = expandableCategories;
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
             expect(panels.length).toBe(1);
 
             const element: HTMLElement = panels[0].nativeElement;
 
             (element.childNodes[0] as HTMLElement).click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.classList.contains('mat-expanded')).toBeTruthy();
 
             (element.childNodes[0] as HTMLElement).click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.classList.contains('mat-expanded')).toEqual(false);
         });
-        }));
 
-        it('should not show the disabled widget', async(() => {
+        it('should not show the disabled widget', async () => {
             appConfigService.config.search = { categories: disabledCategories };
             queryBuilder.resetToDefaults();
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
             expect(panels.length).toBe(0);
         });
-        }));
 
-        it('should show the widget in expanded mode', async(() => {
+        it('should show the widget in expanded mode', async () => {
             appConfigService.config.search = { categories: expandedCategories };
             queryBuilder.resetToDefaults();
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
             expect(panels.length).toBe(1);
 
@@ -762,26 +771,28 @@ describe('SearchFilterComponent', () => {
             expect(element.classList.contains('mat-expanded')).toBeTruthy();
 
             (element.childNodes[0] as HTMLElement).click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.classList.contains('mat-expanded')).toEqual(false);
         });
-        }));
 
-        it('should show the widgets only if configured', async(() => {
+        it('should show the widgets only if configured', async () => {
             appConfigService.config.search = { categories: simpleCategories };
             queryBuilder.resetToDefaults();
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
             expect(panels.length).toBe(2);
 
             const titleElements = fixture.debugElement.queryAll(By.css('.mat-expansion-panel-header-title'));
             expect(titleElements.map(title => title.nativeElement.innerText.trim())).toEqual(['Name', 'Type']);
         });
-        }));
 
-        it('should be update the search query when name changed', async( async () => {
+        it('should be update the search query when name changed', async () => {
             spyOn(queryBuilder, 'update').and.stub();
             appConfigService.config.search = searchFilter;
             queryBuilder.resetToDefaults();
@@ -800,7 +811,7 @@ describe('SearchFilterComponent', () => {
 
             panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
             expect(panels.length).toBe(8);
-        }));
+        });
 
         it('should add a panel only for the response buckets that are present in the response', async () => {
             appConfigService.config.search = searchFilter;

lib/content-services/src/lib/search/components/search-text/search-text.component.spec.ts

@@ -18,7 +18,7 @@
 import { SearchTextComponent } from './search-text.component';
 import { setupTestBed } from '@alfresco/adf-core';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('SearchTextComponent', () => {
@@ -97,24 +97,22 @@ describe('SearchTextComponent', () => {
         expect(component.context.queryFragments[component.id]).toBe('');
     });
 
-    it('should show the custom/default name', async(() => {
+    it('should show the custom/default name', async () => {
         component.context.queryFragments[component.id] = "cm:name:'secret.pdf'";
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
         expect(component.value).toEqual('secret.pdf');
         const input = fixture.debugElement.nativeElement.querySelector('.mat-form-field-infix input');
         expect(input.value).toEqual('secret.pdf');
     });
-    }));
 
-    it('should be able to reset by clicking clear button',  async(() => {
+    it('should be able to reset by clicking clear button',  async () => {
         component.context.queryFragments[component.id] = "cm:name:'secret.pdf'";
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
         const clearElement = fixture.debugElement.nativeElement.querySelector('button');
         clearElement.click();
         expect(component.value).toBe('');
         expect(component.context.queryFragments[component.id]).toBe('');
     });
-    }));
 });

lib/content-services/src/lib/site-dropdown/sites-dropdown.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DropdownSitesComponent, Relations } from './sites-dropdown.component';
 import { SitesService, setupTestBed } from '@alfresco/adf-core';
@@ -68,36 +68,35 @@ describe('DropdownSitesComponent', () => {
 
         describe('Infinite Loading', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 siteService = TestBed.inject(SitesService);
                 fixture = TestBed.createComponent(DropdownSitesComponent);
                 debug = fixture.debugElement;
                 element = fixture.nativeElement;
                 component = fixture.componentInstance;
                 spyOn(siteService, 'getSites').and.returnValue(of(getFakeSitePaging()));
-            }));
+            });
 
-            it('Should show loading item if there are more itemes', async(() => {
+            it('Should show loading item if there are more itemes', async () => {
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(element.querySelector('[data-automation-id="site-loading"]')).toBeDefined();
             });
-            }));
 
-            it('Should not show loading item if there are more itemes', async(() => {
+            it('Should not show loading item if there are more itemes', async () => {
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 fixture.detectChanges();
                 expect(element.querySelector('[data-automation-id="site-loading"]')).toBeNull();
             });
-            }));
 
         });
 
         describe('Sites', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 siteService = TestBed.inject(SitesService);
                 spyOn(siteService, 'getSites').and.returnValue(of(getFakeSitePagingNoMoreItems()));
 
@@ -105,108 +104,113 @@ describe('DropdownSitesComponent', () => {
                 debug = fixture.debugElement;
                 element = fixture.nativeElement;
                 component = fixture.componentInstance;
-            }));
+            });
 
             function openSelectBox() {
                 const selectBox = debug.query(By.css(('[data-automation-id="site-my-files-option"] .mat-select-trigger')));
                 selectBox.triggerEventHandler('click', null);
             }
 
-            it('Dropdown sites should be rendered', async(() => {
+            it('Dropdown sites should be rendered', async () => {
-                fixture.detectChanges();
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(element.querySelector('#site-dropdown-container')).toBeDefined();
                 expect(element.querySelector('#site-dropdown')).toBeDefined();
                 expect(element.querySelector('#site-dropdown-container')).not.toBeNull();
                 expect(element.querySelector('#site-dropdown')).not.toBeNull();
             });
-            }));
 
-            it('should show the "My files" option by default', async(() => {
+            it('should show the "My files" option by default', async () => {
                 component.hideMyFiles = false;
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null);
+
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const options: any = debug.queryAll(By.css('mat-option'));
                 expect(options[0].nativeElement.innerText).toContain('DROPDOWN.MY_FILES_OPTION');
             });
-            }));
 
-            it('should hide the "My files" option if the developer desires that way', async(() => {
+            it('should hide the "My files" option if the developer desires that way', async () => {
                 component.hideMyFiles = true;
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null);
+
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const options: any = debug.queryAll(By.css('mat-option'));
                 expect(options[0].nativeElement.innerText).not.toContain('DROPDOWN.MY_FILES_OPTION');
             });
-            }));
 
-            it('should show the default placeholder label by default', async(() => {
+            it('should show the default placeholder label by default', async () => {
                 fixture.detectChanges();
+                await fixture.whenStable();
 
                 openSelectBox();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(fixture.nativeElement.innerText.trim()).toContain('DROPDOWN.PLACEHOLDER_LABEL');
             });
-            }));
-
-            it('should show custom placeholder label when the \'placeholder\' input property is given a value', async(() => {
-                fixture.detectChanges();
 
+            it('should show custom placeholder label when the "placeholder" input property is given a value', async () => {
                 component.placeholder = 'NODE_SELECTOR.SELECT_LOCATION';
+
                 fixture.detectChanges();
+                await fixture.whenStable();
 
                 openSelectBox();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(fixture.nativeElement.innerText.trim()).toContain('NODE_SELECTOR.SELECT_LOCATION');
             });
-            }));
 
-            it('should load custom sites when the \'siteList\' input property is given a value', async(() => {
+            it('should load custom sites when the "siteList" input property is given a value', async () => {
                 component.siteList = customSiteList;
 
                 fixture.detectChanges();
+                await fixture.whenStable();
 
                 openSelectBox();
 
-                let options: any = [];
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                    options = debug.queryAll(By.css('mat-option'));
+                await fixture.whenStable();
+
+                let options = debug.queryAll(By.css('mat-option'));
                 options[0].triggerEventHandler('click', null);
+
                 fixture.detectChanges();
-                });
+                await fixture.whenStable();
 
-                component.change.subscribe(() => {
                 expect(options[0].nativeElement.innerText).toContain('PERSONAL_FILES');
                 expect(options[1].nativeElement.innerText).toContain('FILE_LIBRARIES');
             });
-            }));
 
-            it('should load sites by default', async(() => {
+            it('should load sites by default', async () => {
                 fixture.detectChanges();
+                await fixture.whenStable();
 
-                fixture.whenStable().then(() => {
-                    fixture.detectChanges();
                 debug.query(By.css('.mat-select-trigger')).triggerEventHandler('click', null);
+
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const options: any = debug.queryAll(By.css('mat-option'));
                 expect(options[1].nativeElement.innerText).toContain('fake-test-site');
                 expect(options[2].nativeElement.innerText).toContain('fake-test-2');
             });
-            }));
 
             it('should raise an event when a site is selected', (done) => {
                 fixture.detectChanges();
@@ -226,26 +230,25 @@ describe('DropdownSitesComponent', () => {
                 });
             });
 
-            it('should be possible to select the default value', (done) => {
+            it('should be possible to select the default value', async () => {
                 component.value = 'swsdp';
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(component.selected.entry.title).toBe('fake-test-2');
-                    done();
-                });
             });
         });
 
         describe('Default value', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 siteService = TestBed.inject(SitesService);
                 spyOn(siteService, 'getSites').and.returnValues(of(getFakeSitePagingFirstPage()), of(getFakeSitePagingLastPage()));
 
                 fixture = TestBed.createComponent(DropdownSitesComponent);
                 component = fixture.componentInstance;
-            }));
+            });
 
             it('should load new sites if default value is not in the first page', (done) => {
                 component.value = 'fake-test-4';
@@ -271,7 +274,7 @@ describe('DropdownSitesComponent', () => {
 
         describe('Sites with members', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 siteService = TestBed.inject(SitesService);
                 spyOn(siteService, 'getSites').and.returnValue(of(getFakeSitePagingWithMembers()));
 
@@ -279,18 +282,17 @@ describe('DropdownSitesComponent', () => {
                 debug = fixture.debugElement;
                 element = fixture.nativeElement;
                 component = fixture.componentInstance;
-            }));
+            });
 
-            afterEach(async(() => {
+            afterEach(() => {
                 fixture.destroy();
-                TestBed.resetTestingModule();
+            });
-            }));
 
             describe('No relations', () => {
 
-                beforeEach(async(() => {
+                beforeEach(() => {
                     component.relations = Relations.Members;
-                }));
+                });
 
                 it('should show only sites which logged user is member of when member relation is set', (done) => {
                     spyOn(siteService, 'getEcmCurrentLoggedUserName').and.returnValue('test');
@@ -312,9 +314,9 @@ describe('DropdownSitesComponent', () => {
             });
 
             describe('No relations', () => {
-                beforeEach(async(() => {
+                beforeEach(() => {
                     component.relations = [];
-                }));
+                });
 
                 it('should show all the sites if no relation is set', (done) => {
                     spyOn(siteService, 'getEcmCurrentLoggedUserName').and.returnValue('test');

lib/content-services/src/lib/social/like.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LikeComponent } from './like.component';
 import { setupTestBed } from '@alfresco/adf-core';
 
@@ -38,7 +38,7 @@ describe('Like component', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         service = TestBed.inject(RatingService);
 
         spyOn(service, 'getRating').and.returnValue(of({
@@ -54,17 +54,16 @@ describe('Like component', () => {
         component.nodeId = 'test-id';
         component.ngOnChanges();
         fixture.detectChanges();
-    }));
+    });
 
-    it('should load the likes by default on onChanges', async(() => {
+    it('should load the likes by default on onChanges', async () => {
-
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelector('#adf-like-counter').innerHTML).toBe('2');
     });
-    }));
 
-    it('should increase the number of likes when clicked', async(() => {
+    it('should increase the number of likes when clicked', async () => {
         spyOn(service, 'postRating').and.returnValue(of({
             entry: {
                 id: 'likes',
@@ -75,13 +74,13 @@ describe('Like component', () => {
         const likeButton: any = element.querySelector('#adf-like-test-id');
         likeButton.click();
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelector('#adf-like-counter').innerHTML).toBe('3');
     });
-    }));
 
-    it('should decrease the number of likes when clicked and is already liked', async(() => {
+    it('should decrease the number of likes when clicked and is already liked', async () => {
         spyOn(service, 'deleteRating').and.returnValue(of(''));
 
         component.isLike = true;
@@ -89,10 +88,9 @@ describe('Like component', () => {
         const likeButton: any = element.querySelector('#adf-like-test-id');
         likeButton.click();
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelector('#adf-like-counter').innerHTML).toBe('1');
     });
-
-    }));
 });

lib/content-services/src/lib/tree-view/components/tree-view.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { TreeViewComponent } from './tree-view.component';
 import { ContentTestingModule } from '../../testing/content.testing.module';
@@ -76,13 +76,12 @@ describe('TreeViewComponent', () => {
         imports: [
             TranslateModule.forRoot(),
             ContentTestingModule
-        ],
+        ]
-        declarations: []
     });
 
     describe('When there is a nodeId', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             treeService = TestBed.inject(TreeViewService);
             fixture = TestBed.createComponent(TreeViewComponent);
             element = fixture.nativeElement;
@@ -92,44 +91,50 @@ describe('TreeViewComponent', () => {
             const changeNodeId = new SimpleChange(null, '9999999', true);
             component.ngOnChanges({ 'nodeId': changeNodeId });
             fixture.detectChanges();
-        }));
+        });
 
         afterEach(() => {
             fixture.destroy();
         });
 
-        it('should show the folder', async(() => {
+        it('should show the folder', async () => {
-            expect(element.querySelector('#fake-node-name-tree-child-node')).not.toBeNull();
+            fixture.detectChanges();
-        }));
+            await fixture.whenStable();
 
-        it('should show the subfolders when the folder is clicked', async(() => {
+            expect(element.querySelector('#fake-node-name-tree-child-node')).not.toBeNull();
-            const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-node-name');
+        });
+
+        it('should show the subfolders when the folder is clicked', async () => {
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-node-name');
             expect(rootFolderButton).not.toBeNull();
             rootFolderButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-child-name-tree-child-node')).not.toBeNull();
             expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
         });
-        }));
 
-        it('should show only the correct subfolders when the nodeId is changed', async(() => {
+        it('should show only the correct subfolders when the nodeId is changed', async () => {
             component.nodeId = 'fake-second-id';
             const changeNodeId = new SimpleChange('9999999', 'fake-second-id', true);
             component.ngOnChanges({ 'nodeId': changeNodeId });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-next-child-name');
+
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-next-child-name');
             expect(rootFolderButton).not.toBeNull();
             rootFolderButton.click();
+
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-child-name-tree-child-node')).not.toBeNull();
             expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
             expect(element.querySelectorAll('mat-tree-node').length).toBe(4);
         });
-            });
-        }));
 
         it('should throw a nodeClicked event when a node is clicked', (done) => {
             component.nodeClicked.subscribe((nodeClicked: NodeEntry) => {
@@ -139,100 +144,105 @@ describe('TreeViewComponent', () => {
                 expect(nodeClicked.entry.id).toBe('fake-node-id');
                 done();
             });
-            const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-node-name');
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-node-name');
             expect(rootFolderButton).not.toBeNull();
             rootFolderButton.click();
         });
 
-        it('should change the icon of the opened folders', async(() => {
+        it('should change the icon of the opened folders', async () => {
-            const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-node-name');
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-node-name');
             expect(rootFolderButton).not.toBeNull();
             expect(element.querySelector('#button-fake-node-name .mat-icon').textContent.trim()).toBe('folder');
             rootFolderButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#button-fake-node-name .mat-icon').textContent.trim()).toBe('folder_open');
         });
-        }));
 
-        it('should show the subfolders of a subfolder if there are any', async(() => {
+        it('should show the subfolders of a subfolder if there are any', async () => {
-            const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-node-name');
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-node-name');
             expect(rootFolderButton).not.toBeNull();
             rootFolderButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
-                const childButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-second-name');
+            const childButton = element.querySelector<HTMLButtonElement>('#button-fake-second-name');
             expect(childButton).not.toBeNull();
             childButton.click();
+
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-next-child-name-tree-child-node')).not.toBeNull();
             expect(element.querySelector('#fake-next-second-name-tree-child-node')).not.toBeNull();
         });
-            });
-        }));
 
-        it('should hide the subfolders when clicked again', async(() => {
+        it('should hide the subfolders when clicked again', async () => {
-            const rootFolderButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#button-fake-node-name');
+            const rootFolderButton = element.querySelector<HTMLButtonElement>('#button-fake-node-name');
             expect(rootFolderButton).not.toBeNull();
             rootFolderButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-child-name-tree-child-node')).not.toBeNull();
             expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
             rootFolderButton.click();
+
             fixture.detectChanges();
-                fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#button-fake-node-name .mat-icon').textContent.trim()).toBe('folder');
             expect(element.querySelector('#fake-child-name-tree-child-node')).toBeNull();
             expect(element.querySelector('#fake-second-name-tree-child-node')).toBeNull();
         });
-            });
-        }));
 
-        it('should show the subfolders when the label is clicked', async(() => {
+        it('should show the subfolders when the label is clicked', async () => {
-            const rootLabel: HTMLButtonElement = <HTMLButtonElement> element.querySelector('.adf-tree-view-label');
+            const rootLabel = element.querySelector<HTMLButtonElement>('.adf-tree-view-label');
             rootLabel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#fake-child-name-tree-child-node')).not.toBeNull();
             expect(element.querySelector('#fake-second-name-tree-child-node')).not.toBeNull();
         });
-        }));
     });
 
     describe('When no nodeId is given', () => {
 
         let emptyElement: HTMLElement;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(TreeViewComponent);
             emptyElement = fixture.nativeElement;
-        }));
+        });
 
         afterEach(() => {
             fixture.destroy();
         });
 
-        it('should show an error message when no nodeId is provided', async(() => {
+        it('should show an error message when no nodeId is provided', async () => {
-            fixture.detectChanges();
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(emptyElement.querySelector('#adf-tree-view-missing-node')).toBeDefined();
             expect(emptyElement.querySelector('#adf-tree-view-missing-node')).not.toBeNull();
         });
-        }));
     });
 
     describe('When invalid nodeId is given', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(TreeViewComponent);
             treeService = TestBed.inject(TreeViewService);
-            spyOn(treeService, 'getTreeNodes').and.callFake(() => throwError('Invalid Node Id'));
+            spyOn(treeService, 'getTreeNodes').and.returnValue(throwError('Invalid Node Id'));
             fixture.componentInstance.nodeId = 'Poopoovic';
-        }));
+        });
 
         afterEach(() => {
             fixture.destroy();

lib/content-services/src/lib/upload/components/upload-drag-area.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { FileModel, UploadService, setupTestBed } from '@alfresco/adf-core';
 import { UploadDragAreaComponent } from './upload-drag-area.component';
 import { ContentTestingModule } from '../../testing/content.testing.module';
@@ -197,13 +197,13 @@ describe('UploadDragAreaComponent', () => {
     });
 
     describe('Upload Files', () => {
-        let addToQueueSpy;
+        let addToQueueSpy: jasmine.Spy;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             addToQueueSpy = spyOn(uploadService, 'addToQueue');
-        }));
+        });
 
-        it('should upload the list of files dropped', async(() => {
+        it('should upload the list of files dropped', (done) => {
             component.success = null;
             spyOn(uploadService, 'uploadFilesInTheQueue');
             fixture.detectChanges();
@@ -215,12 +215,13 @@ describe('UploadDragAreaComponent', () => {
             fixture.whenStable().then(() => {
                 addToQueueSpy.and.callFake((f: FileModel) => {
                     expect(f.file).toBe(file);
+                    done();
                 });
                 component.onFilesDropped(filesList);
             });
-        }));
+        });
 
-        it('should only upload those files whose fileTypes are in acceptedFilesType', async(() => {
+        it('should only upload those files whose fileTypes are in acceptedFilesType', async () => {
             spyOn(uploadService, 'uploadFilesInTheQueue');
             component.success = null;
             component.error = null;
@@ -232,27 +233,28 @@ describe('UploadDragAreaComponent', () => {
                 <File> { name: 'ganymede.bmp' }
             ];
             component.onFilesDropped(files);
-            fixture.whenStable().then(() => {
+
+            await fixture.whenStable();
+
             expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null, null);
             const filesCalledWith = addToQueueSpy.calls.mostRecent().args;
             expect(filesCalledWith.length).toBe(2, 'Files should contain two elements');
             expect(filesCalledWith[0].name).toBe('phobos.jpg');
             expect(filesCalledWith[1].name).toBe('deimos.pdf');
         });
-        }));
 
-        it('should upload a file if fileType is in acceptedFilesType', async(() => {
+        it('should upload a file if fileType is in acceptedFilesType', async () => {
             spyOn(uploadService, 'uploadFilesInTheQueue');
             component.success = null;
             component.error = null;
             component.acceptedFilesType = '.png';
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             component.onFilesDropped([new File(['fakefake'], 'file-fake.png', { type: 'image/png' })]);
             expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null, null);
         });
-        }));
 
         it('should NOT upload the file if it is dropped on another file', () => {
             const fakeItem = {
@@ -282,30 +284,34 @@ describe('UploadDragAreaComponent', () => {
             component.onUploadFiles(fakeCustomEvent);
         });
 
-        it('should not upload a file if fileType is not in acceptedFilesType', async(() => {
+        it('should not upload a file if fileType is not in acceptedFilesType', async () => {
             component.success = null;
             component.error = null;
             component.acceptedFilesType = '.pdf';
-            fixture.detectChanges();
+
             spyOn(uploadService, 'uploadFilesInTheQueue');
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             component.onFilesDropped([new File(['fakefake'], 'file-fake.png', { type: 'image/png' })]);
             expect(uploadService.uploadFilesInTheQueue).not.toHaveBeenCalledWith(null, null);
         });
-        }));
 
-        it('should upload a file with a custom root folder ID when dropped', async(() => {
+        it('should upload a file with a custom root folder ID when dropped', async () => {
             component.success = null;
             component.error = null;
-            fixture.detectChanges();
+
             spyOn(uploadService, 'uploadFilesInTheQueue');
 
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             component.onFilesDropped([new File(['fakefake'], 'file-fake.png', { type: 'image/png' })]);
             expect(uploadService.uploadFilesInTheQueue).toHaveBeenCalledWith(null, null);
-        }));
+        });
 
-        it('should upload a file when user has create permission on target folder', async(() => {
+        it('should upload a file when user has create permission on target folder', () => {
             const fakeItem = {
                 fullPath: '/folder-fake/file-fake.png',
                 isDirectory: false,
@@ -327,10 +333,9 @@ describe('UploadDragAreaComponent', () => {
 
             component.onUploadFiles(fakeCustomEvent);
             expect(uploadService.addToQueue).toHaveBeenCalled();
-        }));
+        });
-
-        it('should upload a file to a specific target folder when dropped onto one', async(() => {
 
+        it('should upload a file to a specific target folder when dropped onto one', (done) => {
             const fakeItem = {
                 fullPath: '/folder-fake/file-fake.png',
                 isDirectory: false,
@@ -346,6 +351,7 @@ describe('UploadDragAreaComponent', () => {
             addToQueueSpy.and.callFake((fileList) => {
                 expect(fileList.name).toBe('file');
                 expect(fileList.options.path).toBe('pippo/');
+                done();
             });
 
             const fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
@@ -356,10 +362,9 @@ describe('UploadDragAreaComponent', () => {
             });
 
             component.onUploadFiles(fakeCustomEvent);
-        }));
+        });
-
-        it('should upload a folder to a specific target folder when dropped onto one', async(() => {
 
+        it('should upload a folder to a specific target folder when dropped onto one', (done) => {
             const fakeItem = {
                 fullPath: '/folder-fake/file-fake.png',
                 isDirectory: false,
@@ -375,6 +380,7 @@ describe('UploadDragAreaComponent', () => {
             addToQueueSpy.and.callFake((fileList) => {
                 expect(fileList.name).toBe('file');
                 expect(fileList.options.path).toBe('pippo/super');
+                done();
             });
 
             const fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
@@ -385,9 +391,9 @@ describe('UploadDragAreaComponent', () => {
             });
 
             component.onUploadFiles(fakeCustomEvent);
-        }));
+        });
 
-        it('should trigger updating the file version when we drop a file over another file', async(() => {
+        it('should trigger updating the file version when we drop a file over another file', fakeAsync((done) => {
             spyOn(component.updateFileVersion, 'emit');
             const fakeItem = {
                 fullPath: '/folder-fake/file-fake.png',
@@ -404,6 +410,7 @@ describe('UploadDragAreaComponent', () => {
             addToQueueSpy.and.callFake((fileList) => {
                 expect(fileList.name).toBe('file');
                 expect(fileList.options.path).toBe('/');
+                done();
             });
 
             const fakeCustomEvent: CustomEvent = new CustomEvent('CustomEvent', {
@@ -414,6 +421,8 @@ describe('UploadDragAreaComponent', () => {
             });
 
             component.onUploadFiles(fakeCustomEvent);
+            fixture.detectChanges();
+
             expect(component.updateFileVersion.emit).toHaveBeenCalledWith(fakeCustomEvent);
         }));
     });

lib/content-services/src/lib/version-manager/version-manager.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AlfrescoApiService, setupTestBed } from '@alfresco/adf-core';
 import { Node, VersionPaging } from '@alfresco/js-api';
@@ -80,7 +80,7 @@ describe('VersionManagerComponent', () => {
         expect(component.viewVersion.emit).toHaveBeenCalledWith('1.0');
     });
 
-    it('should display comments for versions when not configured otherwise', async(() => {
+    it('should display comments for versions when not configured otherwise', fakeAsync(() => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
@@ -91,27 +91,26 @@ describe('VersionManagerComponent', () => {
         });
     }));
 
-    it('should not display comments for versions when configured not to show them', async(() => {
+    it('should not display comments for versions when configured not to show them', async () => {
         component.showComments = false;
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const versionCommentEl = fixture.debugElement.query(By.css('.adf-version-list-item-comment'));
-
         expect(versionCommentEl).toBeNull();
     });
-    }));
 
-    it('should emit success event upon successful upload of a new version', async(() => {
+    it('should emit success event upon successful upload of a new version', (done) => {
         fixture.detectChanges();
 
         const emittedData = { value: { entry: node }};
         component.uploadSuccess.subscribe((event) => {
             expect(event).toBe(node);
+            done();
         });
         component.onUploadSuccess(emittedData);
-    }));
+    });
 
     it('should emit nodeUpdated event upon successful upload of a new version', (done) => {
         fixture.detectChanges();

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

@@ -16,7 +16,7 @@
  */
 
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { async, TestBed } from '@angular/core/testing';
+import { fakeAsync, TestBed } from '@angular/core/testing';
 import { AppConfigService } from './app-config.service';
 import { AppConfigModule } from './app-config.module';
 import { ExtensionConfig, ExtensionService } from '@alfresco/adf-extensions';
@@ -111,14 +111,14 @@ describe('AppConfigService', () => {
         done();
     });
 
-    it('should stream only the selected attribute changes when using select', async(() => {
+    it('should stream only the selected attribute changes when using select',  fakeAsync(() => {
         appConfigService.config.testProp = true;
         appConfigService.select('testProp').subscribe((property) => {
             expect(property).toBeTruthy();
         });
     }));
 
-    it('should stream the page size value when is set', async(() => {
+    it('should stream the page size value when is set', fakeAsync(() => {
         appConfigService.config.testProp = true;
         appConfigService.onLoad.subscribe((config) => {
             expect(config.testProp).toBeTruthy();

lib/core/buttons-menu/buttons-menu.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { MaterialModule } from '../material.module';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { setupTestBed } from '../testing/setup-test-bed';
@@ -55,7 +55,7 @@ describe('ButtonsMenuComponent', () => {
 
     describe('When Buttons are injected', () => {
 
-        let fixture;
+        let fixture: ComponentFixture<CustomContainerComponent>;
         let component: CustomContainerComponent;
         let element: HTMLElement;
 
@@ -81,31 +81,34 @@ describe('ButtonsMenuComponent', () => {
 
         afterEach(() => {
             fixture.destroy();
-            TestBed.resetTestingModule();
         });
 
-        it('should render buttons menu when at least one button is declared', async(() => {
+        it('should render buttons menu when at least one button is declared', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
             expect(buttonsMenuElement).toBeDefined();
         });
-        }));
 
-        it('should trigger event when a specific button is clicked', async(() => {
+        it('should trigger event when a specific button is clicked', async () => {
             expect(component.value).toBeUndefined();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const button = element.querySelector('button');
             button.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(component.value).toBe(1);
         });
-        }));
     });
 
     describe('When no buttons are injected', () => {
-        let fixture;
+        let fixture: ComponentFixture<CustomEmptyContainerComponent>;
         let element: HTMLElement;
 
         setupTestBed({
@@ -132,12 +135,12 @@ describe('ButtonsMenuComponent', () => {
             TestBed.resetTestingModule();
         });
 
-        it('should hide buttons menu if buttons input is empty', async(() => {
+        it('should hide buttons menu if buttons input is empty', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const buttonsMenuElement = element.querySelector('#adf-buttons-menu');
             expect(buttonsMenuElement).toBeNull();
         });
-        }));
     });
 });

lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { setupTestBed } from '../../../testing/setup-test-bed';
@@ -68,7 +68,7 @@ describe('CardViewBoolItemComponent', () => {
             expect(value).not.toBeNull();
         });
 
-        it('should NOT render the label and value if the property is NOT editable and doesn\'t have a proper boolean value set', () => {
+        it('should NOT render the label and value if the property is NOT editable and has no proper boolean value set', () => {
             component.editable = true;
             component.property.value = undefined;
             component.property.editable = false;
@@ -189,15 +189,16 @@ describe('CardViewBoolItemComponent', () => {
             expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, true);
         });
 
-        it('should update the property value after a changed', async(() => {
+        it('should update the property value after a changed', async () => {
             component.property.value = true;
 
             component.changed(<MatCheckboxChange> { checked: false });
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(component.property.value).toBe(false);
         });
-        }));
 
         it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { setupTestBed } from '../../../testing/setup-test-bed';
 import moment from 'moment-es6';
@@ -209,7 +209,7 @@ describe('CardViewDateItemComponent', () => {
         component.onDateChanged({ value: expectedDate });
     });
 
-    it('should update the property value after a successful update attempt', async(() => {
+    it('should update the property value after a successful update attempt', fakeAsync(() => {
         component.editable = true;
         component.property.editable = true;
         component.property.value = null;
@@ -271,7 +271,7 @@ describe('CardViewDateItemComponent', () => {
             expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
         });
 
-        it('should remove the property value after a successful clear attempt', async(() => {
+        it('should remove the property value after a successful clear attempt', fakeAsync(() => {
             component.editable = true;
             component.property.editable = true;
             component.property.value = 'Jul 10 2017';
@@ -286,7 +286,7 @@ describe('CardViewDateItemComponent', () => {
             );
         }));
 
-        it('should remove the property default value after a successful clear attempt', async(() => {
+        it('should remove the property default value after a successful clear attempt', fakeAsync(() => {
             component.editable = true;
             component.property.editable = true;
             component.property.default = 'Jul 10 2017';
@@ -301,7 +301,7 @@ describe('CardViewDateItemComponent', () => {
             );
         }));
 
-        it('should remove actual and default value after a successful clear attempt', async(() => {
+        it('should remove actual and default value after a successful clear attempt', fakeAsync(() => {
             component.editable = true;
             component.property.editable = true;
             component.property.default = 'Jul 10 2017';

lib/core/card-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CardViewKeyValuePairsItemModel } from '../../models/card-view-keyvaluepairs.model';
 import { CardViewKeyValuePairsItemComponent } from './card-view-keyvaluepairsitem.component';
@@ -28,7 +28,7 @@ describe('CardViewKeyValuePairsItemComponent', () => {
 
     let fixture: ComponentFixture<CardViewKeyValuePairsItemComponent>;
     let component: CardViewKeyValuePairsItemComponent;
-    let cardViewUpdateService;
+    let cardViewUpdateService: CardViewUpdateService;
     const mockEmptyData = [{ name: '', value: '' }];
     const mockData = [{ name: 'test-name', value: 'test-value' }];
 
@@ -125,7 +125,7 @@ describe('CardViewKeyValuePairsItemComponent', () => {
             expect(component.property.value.length).toBe(0);
         });
 
-        it('should update property on input blur', async(() => {
+        it('should update property on input blur', fakeAsync(() => {
             spyOn(cardViewUpdateService, 'update');
             component.ngOnChanges();
             fixture.detectChanges();
@@ -153,7 +153,7 @@ describe('CardViewKeyValuePairsItemComponent', () => {
             });
         }));
 
-        it('should not update property if at least one input is empty on blur', async(() => {
+        it('should not update property if at least one input is empty on blur', fakeAsync(() => {
             spyOn(cardViewUpdateService, 'update');
             component.ngOnChanges();
             fixture.detectChanges();

lib/core/card-view/components/card-view-selectitem/select-filter-input/select-filter-input.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '../../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
@@ -46,29 +46,33 @@ describe('SelectFilterInputComponent', () => {
         fixture.detectChanges();
     });
 
-    it('should focus input on initialization', async(() => {
+    it('should focus input on initialization', async () => {
         spyOn(component.selectFilterInput.nativeElement, 'focus');
         matSelect.openedChange.next(true);
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(component.selectFilterInput.nativeElement.focus).toHaveBeenCalled();
-    }));
+    });
 
-    it('should clear search term on close', async(() => {
+    it('should clear search term on close', async () => {
         component.onModelChange('some-search-term');
         expect(component.term).toBe('some-search-term');
 
         matSelect.openedChange.next(false);
 
         fixture.detectChanges();
-        expect(component.term).toBe('');
+        await fixture.whenStable();
-    }));
 
-    it('should emit event when value changes', async(() => {
+        expect(component.term).toBe('');
+    });
+
+    it('should emit event when value changes', async () => {
         spyOn(component.change, 'next');
         component.onModelChange('some-search-term');
         expect(component.change.next).toHaveBeenCalledWith('some-search-term');
-    }));
+    });
 
     it('should reset value on reset() event', () => {
         component.onModelChange('some-search-term');

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, 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 { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
@@ -45,11 +45,11 @@ describe('CardViewComponent', () => {
         fixture.destroy();
     });
 
-    it('should render the label and value', async(() => {
+    it('should render the label and value', async () => {
         component.properties = [new CardViewTextItemModel({ label: 'My label', value: 'My value', key: 'some key' })];
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
 
         const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
         expect(labelValue).not.toBeNull();
@@ -59,7 +59,6 @@ describe('CardViewComponent', () => {
         expect(value).not.toBeNull();
         expect(value.nativeElement.value).toBe('My value');
     });
-    }));
 
     it('should pass through editable property to the items', () => {
         component.editable = true;
@@ -76,16 +75,16 @@ describe('CardViewComponent', () => {
         expect(datePicker).not.toBeNull('Datepicker should be in DOM');
     });
 
-    it('should render the date in the correct format', async(() => {
+    it('should render the date in the correct format', async () => {
         component.properties = [new CardViewDateItemModel({
             label: 'My date label',
             value: '2017-06-14',
             key: 'some key',
             format: 'short'
         })];
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
 
         const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
         expect(labelValue).not.toBeNull();
@@ -95,9 +94,8 @@ describe('CardViewComponent', () => {
         expect(value).not.toBeNull();
         expect(value.nativeElement.innerText).toBe('6/14/17, 12:00 AM');
     });
-    }));
 
-    it('should render the default value if the value is empty, not editable and displayEmpty is true', async(() => {
+    it('should render the default value if the value is empty, not editable and displayEmpty is true', async () => {
         component.properties = [new CardViewTextItemModel({
             label: 'My default label',
             value: null,
@@ -107,10 +105,9 @@ describe('CardViewComponent', () => {
         })];
         component.editable = true;
         component.displayEmpty = true;
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
         expect(labelValue).not.toBeNull();
@@ -120,9 +117,8 @@ describe('CardViewComponent', () => {
         expect(value).not.toBeNull();
         expect(value.nativeElement.value).toBe('default value');
     });
-    }));
 
-    it('should render the default value if the value is empty and is editable', async(() => {
+    it('should render the default value if the value is empty and is editable', async () => {
         component.properties = [new CardViewTextItemModel({
             label: 'My default label',
             value: null,
@@ -132,10 +128,9 @@ describe('CardViewComponent', () => {
         })];
         component.editable = true;
         component.displayEmpty = false;
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const labelValue = fixture.debugElement.query(By.css('.adf-property-label'));
         expect(labelValue).not.toBeNull();
@@ -145,5 +140,4 @@ describe('CardViewComponent', () => {
         expect(value).not.toBeNull();
         expect(value.nativeElement.value).toBe('default value');
     });
-    }));
 });

lib/core/card-view/models/card-view-selectitem.model.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async } from '@angular/core/testing';
+import { fakeAsync } from '@angular/core/testing';
 import { CardViewSelectItemModel } from './card-view-selectitem.model';
 import { CardViewSelectItemProperties } from '../interfaces/card-view.interfaces';
 import { of } from 'rxjs';
@@ -35,7 +35,7 @@ describe('CardViewSelectItemModel', () => {
     });
 
     describe('displayValue', () => {
-        it('should return the value if it is present', async(() => {
+        it('should return the value if it is present', fakeAsync(() => {
             const itemModel = new CardViewSelectItemModel(properties);
 
             itemModel.displayValue.subscribe((value) => {

lib/core/card-view/services/card-view-update.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { MinimalNode } from '@alfresco/js-api';
-import { async, TestBed } from '@angular/core/testing';
+import { fakeAsync, TestBed } from '@angular/core/testing';
 import { CardViewBaseItemModel } from '../models/card-view-baseitem.model';
 import { CardViewUpdateService, transformKeyToObject } from './card-view-update.service';
 
@@ -63,7 +63,7 @@ describe('CardViewUpdateService', () => {
             cardViewUpdateService = TestBed.inject(CardViewUpdateService);
         });
 
-        it('should send updated message with proper parameters', async(() => {
+        it('should send updated message with proper parameters', fakeAsync(() => {
 
             cardViewUpdateService.itemUpdated$.subscribe(
                 ( { target, changed } ) => {
@@ -74,7 +74,7 @@ describe('CardViewUpdateService', () => {
             cardViewUpdateService.update(property, 'changed-property-value');
         }));
 
-        it('should send clicked message with proper parameters', async(() => {
+        it('should send clicked message with proper parameters', fakeAsync(() => {
 
             cardViewUpdateService.itemClicked$.subscribe(
                 ( { target } ) => {
@@ -84,7 +84,7 @@ describe('CardViewUpdateService', () => {
             cardViewUpdateService.clicked(property);
         }));
 
-        it('should send updated node when aspect changed', async(() => {
+        it('should send updated node when aspect changed', fakeAsync(() => {
             const fakeNode: MinimalNode = <MinimalNode> { id: 'Bigfoot'};
             cardViewUpdateService.updatedAspect$.subscribe((node: MinimalNode) => {
                 expect(node.id).toBe('Bigfoot');

lib/core/comments/comment-list.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { CommentModel, UserProcessModel } from '../models';
 import { CommentListComponent } from './comment-list.component';
 import { By } from '@angular/platform-browser';
@@ -26,28 +26,28 @@ import { setupTestBed } from '../testing/setup-test-bed';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 
-const testUser: UserProcessModel = new UserProcessModel({
+const testUser = new UserProcessModel({
     id: '1',
     firstName: 'Test',
     lastName: 'User',
     email: 'tu@domain.com'
 });
 
-const processCommentOne: CommentModel = new CommentModel({
+const processCommentOne = new CommentModel({
     id: 1,
     message: 'Test Comment',
     created: new Date(),
     createdBy: testUser
 });
 
-const processCommentTwo: CommentModel = new CommentModel({
+const processCommentTwo = new CommentModel({
     id: 2,
     message: '2nd Test Comment',
     created: new Date(),
     createdBy: testUser
 });
 
-const contentCommentUserPictureDefined: CommentModel = new CommentModel({
+const contentCommentUserPictureDefined = new CommentModel({
     id: 2,
     message: '2nd Test Comment',
     created: new Date(),
@@ -63,7 +63,7 @@ const contentCommentUserPictureDefined: CommentModel = new CommentModel({
     }
 });
 
-const processCommentUserPictureDefined: CommentModel = new CommentModel({
+const processCommentUserPictureDefined = new CommentModel({
     id: 2,
     message: '2nd Test Comment',
     created: new Date(),
@@ -76,7 +76,7 @@ const processCommentUserPictureDefined: CommentModel = new CommentModel({
     }
 });
 
-const contentCommentUserNoPictureDefined: CommentModel = new CommentModel({
+const contentCommentUserNoPictureDefined = new CommentModel({
     id: 2,
     message: '2nd Test Comment',
     created: new Date(),
@@ -91,7 +91,7 @@ const contentCommentUserNoPictureDefined: CommentModel = new CommentModel({
     }
 });
 
-const processCommentUserNoPictureDefined: CommentModel = new CommentModel({
+const processCommentUserNoPictureDefined = new CommentModel({
     id: 2,
     message: '2nd Test Comment',
     created: new Date(),
@@ -119,7 +119,7 @@ describe('CommentListComponent', () => {
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         ecmUserService = TestBed.inject(EcmUserService);
         spyOn(ecmUserService, 'getUserProfileImage').and.returnValue('alfresco-logo.svg');
 
@@ -130,16 +130,16 @@ describe('CommentListComponent', () => {
         commentList = fixture.componentInstance;
         element = fixture.nativeElement;
         fixture.detectChanges();
-    }));
+    });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should emit row click event', async(() => {
+    it('should emit row click event', fakeAsync(() => {
         commentList.comments = [Object.assign({}, processCommentOne)];
 
-        commentList.clickRow.subscribe((selectedComment) => {
+        commentList.clickRow.subscribe((selectedComment: CommentModel) => {
             expect(selectedComment.id).toEqual(1);
             expect(selectedComment.message).toEqual('Test Comment');
             expect(selectedComment.createdBy).toEqual(testUser);
@@ -153,7 +153,7 @@ describe('CommentListComponent', () => {
         });
     }));
 
-    it('should deselect the previous selected comment when a new one is clicked', async(() => {
+    it('should deselect the previous selected comment when a new one is clicked', fakeAsync(() => {
         processCommentOne.isSelected = true;
         const commentOne = Object.assign({}, processCommentOne);
         const commentTwo = Object.assign({}, processCommentTwo);
@@ -174,127 +174,126 @@ describe('CommentListComponent', () => {
         });
     }));
 
-    it('should not show comment list if no input is given', async(() => {
+    it('should not show comment list if no input is given', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         expect(fixture.nativeElement.querySelector('adf-datatable')).toBeNull();
     });
-    }));
 
-    it('should show comment message when input is given', async(() => {
+    it('should show comment message when input is given', async () => {
         commentList.comments = [Object.assign({}, processCommentOne)];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('#comment-message');
         expect(elements.length).toBe(1);
         expect(elements[0].innerText).toBe(processCommentOne.message);
         expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
     });
-    }));
 
-    it('should show comment user when input is given', async(() => {
+    it('should show comment user when input is given', async () => {
         commentList.comments = [Object.assign({}, processCommentOne)];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('#comment-user');
         expect(elements.length).toBe(1);
         expect(elements[0].innerText).toBe(processCommentOne.createdBy.firstName + ' ' + processCommentOne.createdBy.lastName);
         expect(fixture.nativeElement.querySelector('#comment-user:empty')).toBeNull();
     });
-    }));
 
-    it('comment date time should start with few seconds ago when comment date is few seconds ago', async(() => {
+    it('comment date time should start with few seconds ago when comment date is few seconds ago', async () => {
         const commentFewSecond = Object.assign({}, processCommentOne);
         commentFewSecond.created = new Date();
 
         commentList.comments = [commentFewSecond];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         element = fixture.nativeElement.querySelector('#comment-time');
         expect(element.innerText).toContain('a few seconds ago');
     });
-    }));
 
-    it('comment date time should start with Yesterday when comment date is yesterday', async(() => {
+    it('comment date time should start with Yesterday when comment date is yesterday', async () => {
         const commentOld = Object.assign({}, processCommentOne);
         commentOld.created = new Date((Date.now() - 24 * 3600 * 1000));
         commentList.comments = [commentOld];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         element = fixture.nativeElement.querySelector('#comment-time');
         expect(element.innerText).toContain('a day ago');
     });
-    }));
 
-    it('comment date time should not start with Today/Yesterday when comment date is before yesterday', async(() => {
+    it('comment date time should not start with Today/Yesterday when comment date is before yesterday', async () => {
         const commentOld = Object.assign({}, processCommentOne);
         commentOld.created = new Date((Date.now() - 24 * 3600 * 1000 * 2));
         commentList.comments = [commentOld];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         element = fixture.nativeElement.querySelector('#comment-time');
         expect(element.innerText).not.toContain('Today');
         expect(element.innerText).not.toContain('Yesterday');
     });
-    }));
 
-    it('should show user icon when input is given', async(() => {
+    it('should show user icon when input is given', async () => {
         commentList.comments = [Object.assign({}, processCommentOne)];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('#comment-user-icon');
         expect(elements.length).toBe(1);
         expect(elements[0].innerText).toContain(commentList.getUserShortName(processCommentOne.createdBy));
         expect(fixture.nativeElement.querySelector('#comment-user-icon:empty')).toBeNull();
     });
-    }));
 
-    it('should return content picture when is a content user with a picture', async(() => {
+    it('should return content picture when is a content user with a picture', async () => {
         commentList.comments = [contentCommentUserPictureDefined];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('.adf-people-img');
         expect(elements.length).toBe(1);
         expect(fixture.nativeElement.getElementsByClassName('adf-people-img')[0].src).toContain('alfresco-logo.svg');
     });
-    }));
 
-    it('should return process picture when is a process user with a picture', async(() => {
+    it('should return process picture when is a process user with a picture', async () => {
         commentList.comments = [processCommentUserPictureDefined];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('.adf-people-img');
         expect(elements.length).toBe(1);
         expect(fixture.nativeElement.getElementsByClassName('adf-people-img')[0].src).toContain('alfresco-logo.svg');
     });
-    }));
 
-    it('should return content short name when is a content user without a picture', async(() => {
+    it('should return content short name when is a content user without a picture', async () => {
         commentList.comments = [contentCommentUserNoPictureDefined];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('.adf-comment-user-icon');
         expect(elements.length).toBe(1);
     });
-    }));
 
-    it('should return process short name when  is a process user without a picture', async(() => {
+    it('should return process short name when  is a process user without a picture', async () => {
         commentList.comments = [processCommentUserNoPictureDefined];
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const elements = fixture.nativeElement.querySelectorAll('.adf-comment-user-icon');
         expect(elements.length).toBe(1);
     });
-    }));
 });

lib/core/comments/comments.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { CUSTOM_ELEMENTS_SCHEMA, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { of, throwError } from 'rxjs';
 import { CommentProcessService } from '../services/comment-process.service';
 import { CommentsComponent } from './comments.component';
@@ -27,7 +27,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CommentModel } from '../models/comment.model';
 
 describe('CommentsComponent', () => {
-
     let component: CommentsComponent;
     let fixture: ComponentFixture<CommentsComponent>;
     let getProcessCommentsSpy: jasmine.Spy;
@@ -109,66 +108,65 @@ describe('CommentsComponent', () => {
         expect(getProcessCommentsSpy).not.toHaveBeenCalled();
     });
 
-    it('should display comments when the task has comments', async(() => {
+    it('should display comments when the task has comments', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({'taskId': change});
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(fixture.nativeElement.querySelectorAll('#comment-message').length).toBe(3);
         expect(fixture.nativeElement.querySelector('#comment-message:empty')).toBeNull();
     });
-    }));
 
-    it('should display comments count when the task has comments', async(() => {
+    it('should display comments count when the task has comments', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({'taskId': change});
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const element = fixture.nativeElement.querySelector('#comment-header');
         expect(element.innerText).toBe('COMMENTS.HEADER');
     });
-    }));
 
-    it('should not display comments when the task has no comments', async(() => {
+    it('should not display comments when the task has no comments', async () => {
         component.taskId = '123';
         getProcessCommentsSpy.and.returnValue(of([]));
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable()
+
         expect(fixture.nativeElement.querySelector('#comment-container')).toBeNull();
     });
-    }));
 
-    it('should display comments input by default', async(() => {
+    it('should display comments input by default', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({'taskId': change});
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable()
+
         expect(fixture.nativeElement.querySelector('#comment-input')).not.toBeNull();
     });
-    }));
 
-    it('should not display comments input when the task is readonly', async(() => {
+    it('should not display comments input when the task is readonly', async () => {
         component.readOnly = true;
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable()
-            fixture.detectChanges();
+
         expect(fixture.nativeElement.querySelector('#comment-input')).toBeNull();
     });
-    }));
 
     describe('change detection taskId', () => {
-
         const change = new SimpleChange('123', '456', true);
         const nullChange = new SimpleChange('123', null, true);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.taskId = '123';
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                getProcessCommentsSpy.calls.reset();
         });
-        }));
 
         it('should fetch new comments when taskId changed', () => {
             component.ngOnChanges({'taskId': change});
@@ -187,17 +185,13 @@ describe('CommentsComponent', () => {
     });
 
     describe('change detection node', () => {
-
         const change = new SimpleChange('123', '456', true);
         const nullChange = new SimpleChange('123', null, true);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.nodeId = '123';
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                getContentCommentsSpy.calls.reset();
         });
-        }));
 
         it('should fetch new comments when nodeId changed', () => {
             component.ngOnChanges({'nodeId': change});
@@ -217,81 +211,81 @@ describe('CommentsComponent', () => {
 
     describe('Add comment task', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.taskId = '123';
             fixture.detectChanges();
             fixture.whenStable();
-        }));
+        });
 
-        it('should sanitize comment when user input contains html elements', async(() => {
+        it('should sanitize comment when user input contains html elements', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = '<div class="text-class"><button onclick=""><h1>action</h1></button></div>';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addProcessCommentSpy).toHaveBeenCalledWith('123', 'action');
         });
-        }));
 
-        it('should normalize comment when user input contains spaces sequence', async(() => {
+        it('should normalize comment when user input contains spaces sequence', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'test    comment';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addProcessCommentSpy).toHaveBeenCalledWith('123', 'test comment');
         });
-        }));
 
-        it('should add break lines to comment when user input contains new line characters', async(() => {
+        it('should add break lines to comment when user input contains new line characters', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'these\nare\nparagraphs\n';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addProcessCommentSpy).toHaveBeenCalledWith('123', 'these<br/>are<br/>paragraphs');
         });
-        }));
 
-        it('should call service to add a comment when add button is pressed', async(() => {
+        it('should call service to add a comment when add button is pressed', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'Test Comment';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addProcessCommentSpy).toHaveBeenCalled();
             const elements = fixture.nativeElement.querySelectorAll('#comment-message');
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toBe('Test Comment');
         });
-        }));
 
-        it('should not call service to add a comment when comment is empty', async(() => {
+        it('should not call service to add a comment when comment is empty', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = '';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addProcessCommentSpy).not.toHaveBeenCalled();
         });
-        }));
 
-        it('should clear comment when escape key is pressed', async(() => {
+        it('should clear comment when escape key is pressed', async () => {
             const event = new KeyboardEvent('keydown', {'key': 'Escape'});
             let element = fixture.nativeElement.querySelector('#comment-input');
             element.dispatchEvent(event);
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             element = fixture.nativeElement.querySelector('#comment-input');
             expect(element.value).toBe('');
         });
-        }));
 
         it('should emit an error when an error occurs adding the comment', () => {
             const emitSpy = spyOn(component.error, 'emit');
@@ -304,81 +298,81 @@ describe('CommentsComponent', () => {
 
     describe('Add comment node', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.nodeId = '123';
             fixture.detectChanges();
             fixture.whenStable();
-        }));
+        });
 
-        it('should call service to add a comment when add button is pressed', async(() => {
+        it('should call service to add a comment when add button is pressed', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'Test Comment';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addContentCommentSpy).toHaveBeenCalled();
             const elements = fixture.nativeElement.querySelectorAll('#comment-message');
             expect(elements.length).toBe(1);
             expect(elements[0].innerText).toBe('Test Comment');
         });
-        }));
 
-        it('should sanitize comment when user input contains html elements', async(() => {
+        it('should sanitize comment when user input contains html elements', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = '<div class="text-class"><button onclick=""><h1>action</h1></button></div>';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addContentCommentSpy).toHaveBeenCalledWith('123', 'action');
         });
-        }));
 
-        it('should normalize comment when user input contains spaces sequence', async(() => {
+        it('should normalize comment when user input contains spaces sequence', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'test    comment';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addContentCommentSpy).toHaveBeenCalledWith('123', 'test comment');
         });
-        }));
 
-        it('should add break lines to comment when user input contains new line characters', async(() => {
+        it('should add break lines to comment when user input contains new line characters', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = 'these\nare\nparagraphs\n';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addContentCommentSpy).toHaveBeenCalledWith('123', 'these<br/>are<br/>paragraphs');
         });
-        }));
 
-        it('should not call service to add a comment when comment is empty', async(() => {
+        it('should not call service to add a comment when comment is empty', async () => {
             const element = fixture.nativeElement.querySelector('.adf-comments-input-add');
             component.message = '';
             element.dispatchEvent(new Event('click'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(addContentCommentSpy).not.toHaveBeenCalled();
         });
-        }));
 
-        it('should clear comment when escape key is pressed', async(() => {
+        it('should clear comment when escape key is pressed', async () => {
             const event = new KeyboardEvent('keydown', {'key': 'Escape'});
             let element = fixture.nativeElement.querySelector('#comment-input');
             element.dispatchEvent(event);
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             element = fixture.nativeElement.querySelector('#comment-input');
             expect(element.value).toBe('');
         });
-        }));
 
         it('should emit an error when an error occurs adding the comment', () => {
             const emitSpy = spyOn(component.error, 'emit');

lib/core/datatable/components/empty-list/empty-list.component.spec.ts

@@ -15,14 +15,13 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { EmptyListComponent } from './empty-list.component';
 import { setupTestBed } from '../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('EmptyListComponentComponent', () => {
-    let component: EmptyListComponent;
     let fixture: ComponentFixture<EmptyListComponent>;
 
     setupTestBed({
@@ -34,22 +33,16 @@ describe('EmptyListComponentComponent', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(EmptyListComponent);
-        component = fixture.componentInstance;
     });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should be defined', () => {
+    it('should render the input values', async () => {
-        expect(component).toBeDefined();
+        fixture.detectChanges();
-    });
+        await fixture.whenStable();
 
-    it('should render the input values', async(() => {
-        fixture.detectChanges();
-        fixture.whenStable().then(() => {
-            fixture.detectChanges();
         expect(fixture.nativeElement.querySelector('.adf-empty-list_template')).toBeDefined();
     });
-    }));
 });

lib/core/directives/infinite-select-scroll.directive.ts

@@ -16,10 +16,12 @@
  */
 
 import { Inject, AfterViewInit, Directive, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { MatSelect, SELECT_ITEM_HEIGHT_EM } from '@angular/material/select';
+import { MatSelect } from '@angular/material/select';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+const SELECT_ITEM_HEIGHT_EM = 3;
+
 @Directive({
     selector: '[adf-infinite-select-scroll]'
 })

lib/core/form/components/form-list.component.spec.ts

@@ -46,17 +46,17 @@ describe('TaskAttachmentList', () => {
 
     }));
 
-    it('should show the forms as a list', async(() => {
+    it('should show the forms as a list', async () => {
         spyOn(service, 'getForms').and.returnValue(of([
             { name: 'FakeName-1', lastUpdatedByFullName: 'FakeUser-1', lastUpdated: '2017-01-02' },
             { name: 'FakeName-2', lastUpdatedByFullName: 'FakeUser-2', lastUpdated: '2017-01-03' }
         ]));
 
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(element.querySelectorAll('.adf-datatable-body > .adf-datatable-row').length).toBe(2);
     });
-    }));
 });

lib/core/form/components/widgets/amount/amount.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormFieldModel } from './../core/form-field.model';
 import { AmountWidgetComponent, ADF_AMOUNT_SETTINGS } from './amount.widget';
 import { setupTestBed } from '../../../../testing/setup-test-bed';
@@ -147,7 +147,7 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(errorWidget.textContent).toBe('FORM.FIELD.VALIDATOR.INVALID_NUMBER');
     });
 
-    it('should display tooltip when tooltip is set', async(() => {
+    it('should display tooltip when tooltip is set', async () => {
         widget.field = new FormFieldModel(new FormModel(), {
             id: 'TestAmount1',
             name: 'Test Amount',
@@ -168,11 +168,13 @@ describe('AmountWidgetComponent - rendering', () => {
         });
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const ammountElement: any = fixture.nativeElement.querySelector('#TestAmount1');
         const tooltip = ammountElement.getAttribute('ng-reflect-message');
 
         expect(tooltip).toEqual(widget.field.tooltip);
-    }));
+    });
 });
 
 describe('AmountWidgetComponent settings', () => {

lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
@@ -54,6 +54,8 @@ describe('CheckboxWidgetComponent', () => {
         element = fixture.nativeElement;
     });
 
+    afterEach(() => fixture.destroy());
+
     describe('when template is ready', () => {
 
         beforeEach(() => {
@@ -67,14 +69,14 @@ describe('CheckboxWidgetComponent', () => {
             });
         });
 
-        it('should be marked as invalid when required', async(() => {
+        it('should be marked as invalid when required', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('.adf-invalid')).not.toBeNull();
         });
-        }));
 
-        it('should be checked if boolean true is passed', async(() => {
+        it('should be checked if boolean true is passed', fakeAsync(() => {
             widget.field.value = true;
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -84,26 +86,26 @@ describe('CheckboxWidgetComponent', () => {
             });
         }));
 
-        it('should not be checked if false is passed', async(() => {
+        it('should not be checked if false is passed', async () => {
             widget.field.value = false;
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             const checkbox = fixture.debugElement.nativeElement.querySelector('mat-checkbox input');
             expect(checkbox.getAttribute('aria-checked')).toBe('false');
         });
-        }));
 
-        it('should display tooltip when tooltip is set', async(() => {
+        it('should display tooltip when tooltip is set', async () => {
             widget.field.tooltip = 'checkbox widget';
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const checkbox = fixture.debugElement.nativeElement.querySelector('#check-id');
             const tooltip = checkbox.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(widget.field.tooltip);
         });
-        }));
     });
 });

lib/core/form/components/widgets/date-time/date-time.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import moment from 'moment-es6';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormModel } from './../core/form.model';
@@ -109,7 +109,7 @@ describe('DateTimeWidgetComponent', () => {
 
     describe('template check', () => {
 
-        it('should show visible date widget', async(() => {
+        it('should show visible date widget', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -117,17 +117,17 @@ describe('DateTimeWidgetComponent', () => {
                 type: 'datetime',
                 readOnly: 'false'
             });
+
             fixture.detectChanges();
-            fixture.whenStable()
+            await fixture.whenStable();
-                .then(() => {
+
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
             const dateElement: any = element.querySelector('#date-field-id');
             expect(dateElement.value).toBe('30-11-9999 10:30 AM');
         });
-        }));
 
-        it('should show the correct format type', async(() => {
+        it('should show the correct format type', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -136,18 +136,17 @@ describe('DateTimeWidgetComponent', () => {
                 type: 'datetime',
                 readOnly: 'false'
             });
+
             fixture.detectChanges();
-            fixture.whenStable()
+            await fixture.whenStable();
-                .then(() => {
+
-                    fixture.detectChanges();
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
             const dateElement: any = element.querySelector('#date-field-id');
             expect(dateElement.value).toContain('12-30-9999 10:30 AM');
         });
-        }));
 
-        it('should disable date button when is readonly', async(() => {
+        it('should disable date button when is readonly', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -157,18 +156,20 @@ describe('DateTimeWidgetComponent', () => {
                 readOnly: 'false'
             });
             fixture.detectChanges();
+            await fixture.whenStable();
 
             let dateButton = <HTMLButtonElement> element.querySelector('button');
             expect(dateButton.disabled).toBeFalsy();
 
             widget.field.readOnly = true;
             fixture.detectChanges();
+            await fixture.whenStable();
 
             dateButton = <HTMLButtonElement> element.querySelector('button');
             expect(dateButton.disabled).toBeTruthy();
-        }));
+        });
 
-        it('should display tooltip when tooltip is set', async(() => {
+        it('should display tooltip when tooltip is set', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -180,11 +181,13 @@ describe('DateTimeWidgetComponent', () => {
             });
 
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const dateElement: any = element.querySelector('#date-field-id');
             const tooltip = dateElement.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(widget.field.tooltip);
-        }));
+        });
     });
 
     it('should display always the json value', () => {

lib/core/form/components/widgets/date/date.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import moment from 'moment-es6';
 import { FormFieldModel } from './../core/form-field.model';
 import { FormModel } from './../core/form.model';
@@ -105,7 +105,7 @@ describe('DateWidgetComponent', () => {
             TestBed.resetTestingModule();
         });
 
-        it('should show visible date widget', async(() => {
+        it('should show visible date widget', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -115,16 +115,17 @@ describe('DateWidgetComponent', () => {
             });
             widget.field.isVisible = true;
             widget.ngOnInit();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
             const dateElement: any = element.querySelector('#date-field-id');
             expect(dateElement.value).toContain('9-9-9999');
         });
-        }));
 
-        it('should show the correct format type', async(() => {
+        it('should show the correct format type', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -135,17 +136,17 @@ describe('DateWidgetComponent', () => {
             widget.field.isVisible = true;
             widget.field.dateDisplayFormat = 'MM-DD-YYYY';
             widget.ngOnInit();
+
             fixture.detectChanges();
-            fixture.whenStable()
+            await fixture.whenStable();
-                .then(() => {
+
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
             const dateElement: any = element.querySelector('#date-field-id');
             expect(dateElement.value).toContain('12-30-9999');
         });
-        }));
 
-        it('should disable date button when is readonly', async(() => {
+        it('should disable date button when is readonly', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -155,7 +156,9 @@ describe('DateWidgetComponent', () => {
             });
             widget.field.isVisible = true;
             widget.field.readOnly = false;
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             let dateButton = <HTMLButtonElement> element.querySelector('button');
             expect(dateButton.disabled).toBeFalsy();
@@ -165,9 +168,9 @@ describe('DateWidgetComponent', () => {
 
             dateButton = <HTMLButtonElement> element.querySelector('button');
             expect(dateButton.disabled).toBeTruthy();
-        }));
+        });
 
-        it('should set isValid to false when the value is not a correct date value', async(() => {
+        it('should set isValid to false when the value is not a correct date value', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -177,9 +180,11 @@ describe('DateWidgetComponent', () => {
             });
             widget.field.isVisible = true;
             widget.field.readOnly = false;
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(widget.field.isValid).toBeFalsy();
-        }));
+        });
     });
 });

lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts

@@ -132,28 +132,33 @@ describe('DropdownWidgetComponent', () => {
             });
         }));
 
-        it('should be able to display label with asterix', async(() => {
+        it('should be able to display label with asterix', async () => {
             const label = 'MyLabel123';
             widget.field.name = label;
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('label').innerText).toBe(label + '*');
-        }));
+        });
 
-        it('should be invalid if no default option', async(() => {
+        it('should be invalid if no default option', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('.adf-invalid')).toBeDefined();
             expect(element.querySelector('.adf-invalid')).not.toBeNull();
-        }));
+        });
 
-        it('should be valid if default option', async(() => {
+        it('should be valid if default option', async () => {
             widget.field.options = fakeOptionList;
             widget.field.value = fakeOptionList[0].id;
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(element.querySelector('.adf-invalid')).toBeNull();
-        }));
+        });
     });
 
     describe('when template is ready', () => {
@@ -177,7 +182,7 @@ describe('DropdownWidgetComponent', () => {
                 fixture.detectChanges();
             }));
 
-            it('should show visible dropdown widget', async(() => {
+            it('should show visible dropdown widget', async () => {
                 expect(element.querySelector('#dropdown-id')).toBeDefined();
                 expect(element.querySelector('#dropdown-id')).not.toBeNull();
 
@@ -190,36 +195,35 @@ describe('DropdownWidgetComponent', () => {
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
                 expect(optThree).not.toBeNull();
-            }));
+            });
 
-            it('should select the default value when an option is chosen as default', async(() => {
+            it('should select the default value when an option is chosen as default', async () => {
                 widget.field.value = 'option_2';
                 widget.ngOnInit();
+
                 fixture.detectChanges();
-                fixture.whenStable()
+                await fixture.whenStable();
-                    .then(() => {
+
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
                 expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
             });
-            }));
 
-            it('should select the empty value when no default is chosen', async(() => {
+            it('should select the empty value when no default is chosen', async () => {
                 widget.field.value = 'empty';
                 widget.ngOnInit();
+
                 fixture.detectChanges();
+                await fixture.whenStable();
 
                 openSelect();
 
                 fixture.detectChanges();
+                await fixture.whenStable();
 
-                fixture.whenStable()
-                    .then(() => {
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
             });
-            }));
-
         });
 
         describe('and dropdown is populated via processDefinitionId', () => {
@@ -241,7 +245,7 @@ describe('DropdownWidgetComponent', () => {
                 fixture.detectChanges();
             }));
 
-            it('should show visible dropdown widget', async(() => {
+            it('should show visible dropdown widget', () => {
                 expect(element.querySelector('#dropdown-id')).toBeDefined();
                 expect(element.querySelector('#dropdown-id')).not.toBeNull();
 
@@ -254,37 +258,37 @@ describe('DropdownWidgetComponent', () => {
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
                 expect(optThree).not.toBeNull();
-            }));
+            });
 
-            it('should select the default value when an option is chosen as default', async(() => {
+            it('should select the default value when an option is chosen as default', async () => {
                 widget.field.value = 'option_2';
                 widget.ngOnInit();
+
                 fixture.detectChanges();
-                fixture.whenStable()
+                await fixture.whenStable();
-                    .then(() => {
+
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
                 expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
             });
-            }));
 
-            it('should select the empty value when no default is chosen', async(() => {
+            it('should select the empty value when no default is chosen', async () => {
                 widget.field.value = 'empty';
                 widget.ngOnInit();
+
                 fixture.detectChanges();
+                await fixture.whenStable();
 
                 openSelect();
 
                 fixture.detectChanges();
+                await fixture.whenStable();
 
-                fixture.whenStable()
-                    .then(() => {
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
             });
-            }));
 
-            it('should be disabled when the field is readonly', async(() => {
+            it('should be disabled when the field is readonly', async () => {
                 widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                     id: 'dropdown-id',
                     name: 'date-name',
@@ -294,15 +298,14 @@ describe('DropdownWidgetComponent', () => {
                 });
 
                 fixture.detectChanges();
-                fixture.whenStable()
+                await fixture.whenStable();
-                    .then(() => {
+
                 const dropDownElement: HTMLSelectElement = <HTMLSelectElement> element.querySelector('#dropdown-id');
                 expect(dropDownElement).not.toBeNull();
                 expect(dropDownElement.getAttribute('aria-disabled')).toBe('true');
             });
-            }));
 
-            it('should show the option value when the field is readonly', async(() => {
+            it('should show the option value when the field is readonly', async () => {
                 widget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
                     id: 'dropdown-id',
                     name: 'date-name',
@@ -315,16 +318,14 @@ describe('DropdownWidgetComponent', () => {
                 openSelect();
 
                 fixture.detectChanges();
-                fixture.whenStable()
+                await fixture.whenStable();
-                    .then(() => {
+
-                        fixture.detectChanges();
                 const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
                 expect(options.length).toBe(1);
 
                 const option = options[0].nativeElement;
                 expect(option.innerText).toEqual('FakeValue');
             });
-            }));
         });
     });
 });

lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { LogService } from '../../../../services';
 import { FormService } from './../../../services/form.service';
 import { FormFieldModel, FormFieldTypes, FormModel } from './../core/index';
@@ -338,7 +338,7 @@ describe('DynamicTableWidgetComponent', () => {
             TestBed.resetTestingModule();
         });
 
-        it('should select a row when press space bar', async(() => {
+        it('should select a row when press space bar', async () => {
             const rowElement = element.querySelector('#fake-dynamic-table-row-0');
 
             expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
@@ -348,15 +348,15 @@ describe('DynamicTableWidgetComponent', () => {
             const event: any = new Event('keyup');
             event.keyCode = 32;
             rowElement.dispatchEvent(event);
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const selectedRow = element.querySelector('#fake-dynamic-table-row-0');
             expect(selectedRow.className).toContain('adf-dynamic-table-widget__row-selected');
         });
-        }));
 
-        it('should focus on add button when a new row is saved', async(() => {
+        it('should focus on add button when a new row is saved', async () => {
             const addNewRowButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#fake-dynamic-table-add-row');
 
             expect(element.querySelector('#dynamic-table-fake-dynamic-table')).not.toBeNull();
@@ -364,11 +364,11 @@ describe('DynamicTableWidgetComponent', () => {
 
             widget.addNewRow();
             widget.onSaveChanges();
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(document.activeElement.id).toBe('fake-dynamic-table-add-row');
         });
-        }));
     });
 });

lib/core/form/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Observable, of, throwError } from 'rxjs';
 import { FormService } from './../../../../../services/form.service';
@@ -195,11 +195,11 @@ describe('DropdownEditorComponent', () => {
             fixture.detectChanges();
         }
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(DropdownEditorComponent);
             dropDownEditorComponent = fixture.componentInstance;
             element = fixture.nativeElement;
-        }));
+        });
 
         afterEach(() => {
             fixture.destroy();
@@ -207,7 +207,7 @@ describe('DropdownEditorComponent', () => {
 
         describe('and dropdown is populated via taskId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 stubFormService = fixture.debugElement.injector.get(FormService);
                 spyOn(stubFormService, 'getRestFieldValuesColumn').and.returnValue(of(fakeOptionList));
                 row = <DynamicTableRow> {value: {dropdown: 'one'}};
@@ -235,9 +235,9 @@ describe('DropdownEditorComponent', () => {
                 });
                 dropDownEditorComponent.table.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show visible dropdown widget', async(() => {
+            it('should show visible dropdown widget', () => {
                 expect(element.querySelector('#column-id')).toBeDefined();
                 expect(element.querySelector('#column-id')).not.toBeNull();
 
@@ -250,12 +250,12 @@ describe('DropdownEditorComponent', () => {
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
                 expect(optThree).not.toBeNull();
-            }));
+            });
         });
 
         describe('and dropdown is populated via processDefinitionId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 stubFormService = fixture.debugElement.injector.get(FormService);
                 spyOn(stubFormService, 'getRestFieldValuesColumnByProcessId').and.returnValue(of(fakeOptionList));
                 row = <DynamicTableRow> {value: {dropdown: 'one'}};
@@ -283,9 +283,9 @@ describe('DropdownEditorComponent', () => {
                 });
                 dropDownEditorComponent.table.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show visible dropdown widget', async(() => {
+            it('should show visible dropdown widget', () => {
                 expect(element.querySelector('#column-id')).toBeDefined();
                 expect(element.querySelector('#column-id')).not.toBeNull();
 
@@ -298,8 +298,7 @@ describe('DropdownEditorComponent', () => {
                 expect(optOne).not.toBeNull();
                 expect(optTwo).not.toBeNull();
                 expect(optThree).not.toBeNull();
-            }));
+            });
-
         });
    });
 });

lib/core/form/components/widgets/people/people.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { UserProcessModel } from '../../../../models';
 import { Observable, of } from 'rxjs';
@@ -83,28 +83,23 @@ describe('PeopleWidgetComponent', () => {
         expect(widget.getDisplayName(model)).toBe('John');
     });
 
-    it('should init value from the field', async(() => {
+    it('should init value from the field', async () => {
         widget.field.value = new UserProcessModel({
             id: 'people-id',
             firstName: 'John',
             lastName: 'Doe'
         });
 
-        spyOn(formService, 'getWorkflowUsers').and.returnValue(
+        spyOn(formService, 'getWorkflowUsers').and.returnValue(of(null));
-            new Observable((observer) => {
-                observer.next(null);
-                observer.complete();
-            })
-        );
 
         widget.ngOnInit();
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
     });
-    }));
 
-    it('should show the readonly value when the form is readonly', async(() => {
+    it('should show the readonly value when the form is readonly', async () => {
         widget.field.value = new UserProcessModel({
             id: 'people-id',
             firstName: 'John',
@@ -113,20 +108,15 @@ describe('PeopleWidgetComponent', () => {
         widget.field.readOnly = true;
         widget.field.form.readOnly = true;
 
-        spyOn(formService, 'getWorkflowUsers').and.returnValue(
+        spyOn(formService, 'getWorkflowUsers').and.returnValue(of(null));
-            new Observable((observer) => {
-                observer.next(null);
-                observer.complete();
-            })
-        );
 
         widget.ngOnInit();
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect((element.querySelector('input') as HTMLInputElement).value).toBe('John Doe');
         expect((element.querySelector('input') as HTMLInputElement).disabled).toBeTruthy();
     });
-    }));
 
     it('should require form field to setup values on init', () => {
         widget.field.value = null;
@@ -175,7 +165,7 @@ describe('PeopleWidgetComponent', () => {
             { id: 1001, firstName: 'Test01', lastName: 'Test01', email: 'test' },
             { id: 1002, firstName: 'Test02', lastName: 'Test02', email: 'test2' }];
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             spyOn(formService, 'getWorkflowUsers').and.returnValue(new Observable((observer) => {
                 observer.next(fakeUserResult);
                 observer.complete();
@@ -188,7 +178,7 @@ describe('PeopleWidgetComponent', () => {
             });
             fixture.detectChanges();
             element = fixture.nativeElement;
-        }));
+        });
 
         afterAll(() => {
             if (fixture) {
@@ -201,32 +191,33 @@ describe('PeopleWidgetComponent', () => {
             expect(element.querySelector('#people-widget-content')).not.toBeNull();
         });
 
-        it('should show an error message if the user is invalid', async(() => {
+        it('should show an error message if the user is invalid', async () => {
             const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
             peopleHTMLElement.focus();
             peopleHTMLElement.value = 'K';
             peopleHTMLElement.dispatchEvent(new Event('keyup'));
             peopleHTMLElement.dispatchEvent(new Event('input'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('.adf-error-text')).not.toBeNull();
             expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
         });
-        }));
 
-        it('should show the people if the typed result match', async(() => {
+        it('should show the people if the typed result match', async () => {
             const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
             peopleHTMLElement.focus();
             peopleHTMLElement.value = 'T';
             peopleHTMLElement.dispatchEvent(new Event('keyup'));
             peopleHTMLElement.dispatchEvent(new Event('input'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
             expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
         });
-        }));
 
         it('should hide result list if input is empty', () => {
             const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
@@ -241,19 +232,22 @@ describe('PeopleWidgetComponent', () => {
             });
         });
 
-        it('should display two options if we tap one letter', async(() => {
+        it('should display two options if we tap one letter', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const peopleHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('input');
             peopleHTMLElement.focus();
             peopleHTMLElement.value = 'T';
             peopleHTMLElement.dispatchEvent(new Event('keyup'));
             peopleHTMLElement.dispatchEvent(new Event('input'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(fixture.debugElement.query(By.css('#adf-people-widget-user-0'))).not.toBeNull();
             expect(fixture.debugElement.query(By.css('#adf-people-widget-user-1'))).not.toBeNull();
         });
-        }));
 
         it('should emit peopleSelected if option is valid', async () => {
             const selectEmitSpy = spyOn(widget.peopleSelected, 'emit');
@@ -262,21 +256,23 @@ describe('PeopleWidgetComponent', () => {
             peopleHTMLElement.value = 'Test01 Test01';
             peopleHTMLElement.dispatchEvent(new Event('keyup'));
             peopleHTMLElement.dispatchEvent(new Event('input'));
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(selectEmitSpy).toHaveBeenCalledWith(1001);
         });
-        });
 
-        it('should display tooltip when tooltip is set', async(() => {
+        it('should display tooltip when tooltip is set', async () => {
             widget.field.tooltip = 'people widget';
 
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const radioButtonsElement: any = element.querySelector('#people-id');
             const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(widget.field.tooltip);
-        }));
+        });
     });
 });

lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { Observable, of } from 'rxjs';
 import { FormService } from '../../../services/form.service';
 import { ContainerModel } from '../core/container.model';
@@ -150,12 +150,12 @@ describe('RadioButtonsWidgetComponent', () => {
                 name: 'opt-name-2'
             }];
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(RadioButtonsWidgetComponent);
             radioButtonWidget = fixture.componentInstance;
             element = fixture.nativeElement;
             stubFormService = fixture.debugElement.injector.get(FormService);
-        }));
+        });
 
         it('should show radio buttons as text when is readonly', async () => {
             radioButtonWidget.field = new FormFieldModel(new FormModel({}), {
@@ -230,7 +230,7 @@ describe('RadioButtonsWidgetComponent', () => {
             expect(radioButtonWidget.field.isValid).toBe(true);
         });
 
-        it('should display tooltip when tooltip is set', async(() => {
+        it('should display tooltip when tooltip is set', async () => {
             radioButtonWidget.field = new FormFieldModel(new FormModel(), {
                 id: 'radio-id',
                 name: 'radio-name-label',
@@ -244,15 +244,17 @@ describe('RadioButtonsWidgetComponent', () => {
             });
 
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const radioButtonsElement: any = element.querySelector('#radio-id-opt-1');
             const tooltip = radioButtonsElement.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(radioButtonWidget.field.tooltip);
-        }));
+        });
 
         describe('and radioButton is populated via taskId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(restOption));
                 radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
                     id: 'radio-id',
@@ -264,17 +266,17 @@ describe('RadioButtonsWidgetComponent', () => {
                 const fakeContainer = new ContainerModel(radioButtonWidget.field);
                 radioButtonWidget.field.form.fields.push(fakeContainer);
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show radio buttons', async(() => {
+            it('should show radio buttons', () => {
                 expect(element.querySelector('#radio-id')).toBeDefined();
                 expect(element.querySelector('#radio-id-opt-1-input')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-2-input')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
-            }));
+            });
 
-            it('should trigger field changed event on click', async(() => {
+            it('should trigger field changed event on click', fakeAsync(() => {
                 const option: HTMLElement = <HTMLElement> element.querySelector('#radio-id-opt-1-input');
                 expect(element.querySelector('#radio-id')).not.toBeNull();
                 expect(option).not.toBeNull();
@@ -287,35 +289,35 @@ describe('RadioButtonsWidgetComponent', () => {
 
             describe('and radioButton is readonly', () => {
 
-                beforeEach(async(() => {
+                beforeEach(() => {
                     radioButtonWidget.field.readOnly = true;
                     fixture.detectChanges();
-                }));
+                });
 
-                it('should show radio buttons disabled', async(() => {
+                it('should show radio buttons disabled', () => {
                     expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).toBeDefined();
                     expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-1"]')).not.toBeNull();
                     expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).toBeDefined();
                     expect(element.querySelector('.mat-radio-disabled[ng-reflect-id="radio-id-opt-2"]')).not.toBeNull();
-                }));
+                });
 
                 describe('and a value is selected', () => {
 
-                    beforeEach(async(() => {
+                    beforeEach(() => {
                         radioButtonWidget.field.value = restOption[0].id;
                         fixture.detectChanges();
-                    }));
+                    });
 
-                    it('should check the selected value', async(() => {
+                    it('should check the selected value', () => {
                         expect(element.querySelector('.mat-radio-checked')).toBe(element.querySelector('mat-radio-button[ng-reflect-id="radio-id-opt-1"]'));
-                    }));
+                    });
                 });
             });
         });
 
         describe('and radioButton is populated via processDefinitionId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 radioButtonWidget.field = new FormFieldModel(new FormModel({ processDefinitionId: 'proc-id' }), {
                     id: 'radio-id',
                     name: 'radio-name',
@@ -325,15 +327,15 @@ describe('RadioButtonsWidgetComponent', () => {
                 spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(restOption));
                 radioButtonWidget.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show visible radio buttons', async(() => {
+            it('should show visible radio buttons', () => {
                 expect(element.querySelector('#radio-id')).toBeDefined();
                 expect(element.querySelector('#radio-id-opt-1-input')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-1')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-2-input')).not.toBeNull();
                 expect(element.querySelector('#radio-id-opt-2')).not.toBeNull();
-            }));
+            });
         });
     });
 });

lib/core/form/components/widgets/text/text.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { FormFieldTypes } from '../core/form-field-types';
 import { FormFieldModel } from '../core/form-field.model';
 import { FormModel } from '../core/form.model';
@@ -203,7 +203,7 @@ describe('TextWidgetComponent', () => {
                 expect(widget.field.isValid).toBe(false);
             });
 
-            it('should display tooltip when tooltip is set', async(() => {
+            it('should display tooltip when tooltip is set', async () => {
                 widget.field = new FormFieldModel(new FormModel(), {
                     id: 'text-id',
                     name: 'text-name',
@@ -213,11 +213,13 @@ describe('TextWidgetComponent', () => {
                 });
 
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const textElement: any = element.querySelector('#text-id');
                 const tooltip = textElement.getAttribute('ng-reflect-message');
 
                 expect(tooltip).toEqual(widget.field.tooltip);
-            }));
+            });
         });
 
         describe('and no mask is configured on text element', () => {
@@ -237,7 +239,7 @@ describe('TextWidgetComponent', () => {
                 inputElement = element.querySelector<HTMLInputElement>('#text-id');
             });
 
-            it('should be disabled on readonly forms', async(() => {
+            it('should be disabled on readonly forms', fakeAsync(() => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
                     expect(inputElement).toBeDefined();
@@ -286,7 +288,7 @@ describe('TextWidgetComponent', () => {
                 expect(label.innerText).toBe('simple placeholder');
             });
 
-            it('should prevent text to be written if is not allowed by the mask on keyUp event', async(() => {
+            it('should prevent text to be written if is not allowed by the mask on keyUp event', async () => {
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
                 inputElement.value = 'F';
@@ -294,31 +296,32 @@ describe('TextWidgetComponent', () => {
                 const event: any = new Event('keyup');
                 event.keyCode = '70';
                 inputElement.dispatchEvent(event);
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 inputElement = element.querySelector<HTMLInputElement>('#text-id');
                 expect(inputElement.value).toBe('');
             });
-            }));
 
-            it('should prevent text to be written if is not allowed by the mask on input event', async(() => {
+            it('should prevent text to be written if is not allowed by the mask on input event', async () => {
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
                 inputElement.value = 'F';
                 widget.field.value = 'F';
                 inputElement.dispatchEvent(new Event('input'));
-                fixture.detectChanges();
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 inputElement = element.querySelector<HTMLInputElement>('#text-id');
                 expect(inputElement.value).toBe('');
             });
-            }));
 
-            it('should allow masked configured value on keyUp event', async(() => {
+            it('should allow masked configured value on keyUp event', async () => {
+                fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
                 inputElement.value = '1';
@@ -327,14 +330,17 @@ describe('TextWidgetComponent', () => {
                 event.keyCode = '49';
                 inputElement.dispatchEvent(event);
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const textEle = element.querySelector<HTMLInputElement>('#text-id');
                 expect(textEle.value).toBe('1');
             });
-            }));
 
-            it('should auto-fill masked configured value on keyUp event', async(() => {
+            it('should auto-fill masked configured value on keyUp event', async () => {
+                fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
                 inputElement.value = '12345678';
@@ -343,12 +349,12 @@ describe('TextWidgetComponent', () => {
                 event.keyCode = '49';
                 inputElement.dispatchEvent(event);
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const textEle = element.querySelector<HTMLInputElement>('#text-id');
                 expect(textEle.value).toBe('12-345,67%');
             });
-            }));
         });
 
         describe('when the mask is reversed ', () => {
@@ -374,7 +380,10 @@ describe('TextWidgetComponent', () => {
                 TestBed.resetTestingModule();
             });
 
-            it('should be able to apply the mask reversed', async(() => {
+            it('should be able to apply the mask reversed', async () => {
+                fixture.detectChanges();
+                await fixture.whenStable();
+
                 expect(element.querySelector('#text-id')).not.toBeNull();
 
                 inputElement.value = '1234';
@@ -383,12 +392,12 @@ describe('TextWidgetComponent', () => {
                 event.keyCode = '49';
                 inputElement.dispatchEvent(event);
 
-                fixture.whenStable().then(() => {
                 fixture.detectChanges();
+                await fixture.whenStable();
+
                 const textEle = element.querySelector<HTMLInputElement>('#text-id');
                 expect(textEle.value).toBe('12,34%');
             });
-            }));
         });
 
         describe('and a mask placeholder is configured', () => {

lib/core/form/components/widgets/typeahead/typeahead.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Observable, of, throwError } from 'rxjs';
 
 import { By } from '@angular/platform-browser';
@@ -234,11 +234,11 @@ describe('TypeaheadWidgetComponent', () => {
             name: 'Fake Name 2'
         }, { id: '3', name: 'Fake Name 3' }];
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(TypeaheadWidgetComponent);
             typeaheadWidgetComponent = fixture.componentInstance;
             element = fixture.nativeElement;
-        }));
+        });
 
         afterEach(() => {
             fixture.destroy();
@@ -247,7 +247,7 @@ describe('TypeaheadWidgetComponent', () => {
 
         describe ('and typeahead is in readonly mode', () => {
 
-            it('should show typeahead value with input disabled', async(() => {
+            it('should show typeahead value with input disabled', async () => {
                 typeaheadWidgetComponent.field = new FormFieldModel(
                     new FormModel({ processVariables: [{ name: 'typeahead-id_LABEL', value: 'FakeProcessValue' }] }), {
                     id: 'typeahead-id',
@@ -255,15 +255,15 @@ describe('TypeaheadWidgetComponent', () => {
                     type: 'readonly',
                     params: { field: { id: 'typeahead-id', name: 'typeahead-name', type: 'typeahead' } }
                 });
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                    fixture.detectChanges();
+
-                    const readonlyInput: HTMLInputElement = <HTMLInputElement> element.querySelector('#typeahead-id');
+                const readonlyInput = element.querySelector<HTMLInputElement>('#typeahead-id');
                 expect(readonlyInput.disabled).toBeTruthy();
                 expect(readonlyInput).not.toBeNull();
                 expect(readonlyInput.value).toBe('FakeProcessValue');
             });
-            }));
 
             afterEach(() => {
                 fixture.destroy();
@@ -273,7 +273,7 @@ describe('TypeaheadWidgetComponent', () => {
 
         describe('and typeahead is populated via taskId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 stubFormService = fixture.debugElement.injector.get(FormService);
                 spyOn(stubFormService, 'getRestFieldValues').and.returnValue(of(fakeOptionList));
                 typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
@@ -285,73 +285,73 @@ describe('TypeaheadWidgetComponent', () => {
                 });
                 typeaheadWidgetComponent.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show visible typeahead widget', async(() => {
+            it('should show visible typeahead widget', () => {
                 expect(element.querySelector('#typeahead-id')).toBeDefined();
                 expect(element.querySelector('#typeahead-id')).not.toBeNull();
-            }));
+            });
 
-            it('should show typeahead options', async(() => {
+            it('should show typeahead options', async () => {
                 const typeaheadElement = fixture.debugElement.query(By.css('#typeahead-id'));
-                const typeaheadHTMLElement: HTMLInputElement = <HTMLInputElement> typeaheadElement.nativeElement;
+                const typeaheadHTMLElement = <HTMLInputElement> typeaheadElement.nativeElement;
                 typeaheadHTMLElement.focus();
                 typeaheadWidgetComponent.value = 'F';
                 typeaheadHTMLElement.value = 'F';
                 typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
                 typeaheadHTMLElement.dispatchEvent(new Event('input'));
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                    fixture.detectChanges();
+
                 expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
                 expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-1"] span'))).not.toBeNull();
                 expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-2"] span'))).not.toBeNull();
             });
-            }));
 
-            it('should hide the option when the value is empty', async(() => {
+            it('should hide the option when the value is empty', async () => {
                 const typeaheadElement = fixture.debugElement.query(By.css('#typeahead-id'));
-                const typeaheadHTMLElement: HTMLInputElement = <HTMLInputElement> typeaheadElement.nativeElement;
+                const typeaheadHTMLElement = <HTMLInputElement> typeaheadElement.nativeElement;
                 typeaheadHTMLElement.focus();
                 typeaheadWidgetComponent.value = 'F';
                 typeaheadHTMLElement.value = 'F';
                 typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
                 typeaheadHTMLElement.dispatchEvent(new Event('input'));
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                    fixture.detectChanges();
+
                 expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
                 typeaheadHTMLElement.focus();
                 typeaheadWidgetComponent.value = '';
                 typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
                 typeaheadHTMLElement.dispatchEvent(new Event('input'));
+
                 fixture.detectChanges();
-                    fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                        fixture.detectChanges();
+
                 expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeNull();
             });
-                });
-            }));
 
-            it('should show error message when the value is not valid', async(() => {
+            it('should show error message when the value is not valid', async () => {
                 typeaheadWidgetComponent.value = 'Fake Name';
                 typeaheadWidgetComponent.field.value = 'Fake Name';
                 typeaheadWidgetComponent.field.options = fakeOptionList;
                 expect(element.querySelector('.adf-error-text')).toBeNull();
                 const keyboardEvent = new KeyboardEvent('keypress');
                 typeaheadWidgetComponent.onKeyUp(keyboardEvent);
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                    fixture.detectChanges();
+
                 expect(element.querySelector('.adf-error-text')).not.toBeNull();
                 expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE');
             });
-            }));
         });
 
         describe('and typeahead is populated via processDefinitionId', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 stubFormService = fixture.debugElement.injector.get(FormService);
                 spyOn(stubFormService, 'getRestFieldValuesByProcessId').and.returnValue(of(fakeOptionList));
                 typeaheadWidgetComponent.field = new FormFieldModel(new FormModel({ processDefinitionId: 'fake-process-id' }), {
@@ -363,24 +363,25 @@ describe('TypeaheadWidgetComponent', () => {
                 typeaheadWidgetComponent.field.emptyOption = { id: 'empty', name: 'Choose one...' };
                 typeaheadWidgetComponent.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should show visible typeahead widget', async(() => {
+            it('should show visible typeahead widget', () => {
                 expect(element.querySelector('#typeahead-id')).toBeDefined();
                 expect(element.querySelector('#typeahead-id')).not.toBeNull();
-            }));
+            });
 
-            it('should show typeahead options', async(() => {
+            it('should show typeahead options', async () => {
                 const keyboardEvent = new KeyboardEvent('keypress');
                 typeaheadWidgetComponent.value = 'F';
                 typeaheadWidgetComponent.onKeyUp(keyboardEvent);
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeDefined();
                 expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-1"] span'))).toBeDefined();
                 expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-2"] span'))).toBeDefined();
             });
-            }));
         });
     });
 });

lib/core/form/components/widgets/upload/upload.widget.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { DebugElement } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { FormService } from '../../../services/form.service';
@@ -60,7 +60,7 @@ const fakeJpgAnswer = {
 
 describe('UploadWidgetComponent', () => {
 
-    function  fakeCreationFile  (name, id) {
+    function  fakeCreationFile  (name: string, id: string | number) {
         return {
             'id': id,
             'name': name,
@@ -96,13 +96,13 @@ describe('UploadWidgetComponent', () => {
         let inputElement: HTMLInputElement;
         let formServiceInstance: FormService;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture = TestBed.createComponent(UploadWidgetComponent);
             uploadWidgetComponent = fixture.componentInstance;
             element = fixture.nativeElement;
             debugElement = fixture.debugElement;
             contentService = TestBed.inject(ProcessContentService);
-        }));
+        });
 
         it('should setup with field data', () => {
             const fileName = 'hello world';
@@ -152,57 +152,60 @@ describe('UploadWidgetComponent', () => {
             uploadWidgetComponent.field.value = [];
         });
 
-        it('should be not present in readonly forms', async(() => {
+        it('should be not present in readonly forms', async () => {
             uploadWidgetComponent.field.form.readOnly = true;
             fixture.detectChanges();
-            inputElement = <HTMLInputElement> element.querySelector('#upload-id');
+            inputElement = element.querySelector<HTMLInputElement>('#upload-id');
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(inputElement).toBeNull();
         });
-        }));
 
-        it('should have the multiple attribute when is selected in parameters', async(() => {
+        it('should have the multiple attribute when is selected in parameters', async () => {
             uploadWidgetComponent.field.params.multiple = true;
             fixture.detectChanges();
-            inputElement = <HTMLInputElement> element.querySelector('#upload-id');
+            inputElement = element.querySelector<HTMLInputElement>('#upload-id');
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(inputElement).toBeDefined();
             expect(inputElement).not.toBeNull();
             expect(inputElement.getAttributeNode('multiple')).toBeTruthy();
         });
-        }));
 
-        it('should not have the multiple attribute if multiple is false', async(() => {
+        it('should not have the multiple attribute if multiple is false', async () => {
             uploadWidgetComponent.field.params.multiple = false;
             fixture.detectChanges();
-            inputElement = <HTMLInputElement> element.querySelector('#upload-id');
+            inputElement = element.querySelector<HTMLInputElement>('#upload-id');
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(inputElement).toBeDefined();
             expect(inputElement).not.toBeNull();
             expect(inputElement.getAttributeNode('multiple')).toBeFalsy();
         });
-        }));
 
-        it('should show the list file after upload a new content', async(() => {
+        it('should show the list file after upload a new content', async () => {
             spyOn(contentService, 'createTemporaryRawRelatedContent').and.returnValue(of(fakePngAnswer));
 
             uploadWidgetComponent.field.params.multiple = false;
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
             inputDebugElement.triggerEventHandler('change', { target: { files: [filJpgFake] } });
 
             const filesList = fixture.debugElement.query(By.css('#file-1156'));
             expect(filesList).toBeDefined();
 
-        }));
+        });
 
-        it('should update the form after deleted a file', async(() => {
+        it('should update the form after deleted a file', async () => {
             spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file: any) => {
                 if (file.name === 'file-fake.png') {
                     return of(fakePngAnswer);
@@ -218,21 +221,23 @@ describe('UploadWidgetComponent', () => {
             uploadWidgetComponent.field.params.multiple = true;
 
             spyOn(uploadWidgetComponent.field, 'updateForm');
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
             inputDebugElement.triggerEventHandler('change', { target: { files: [filePngFake, filJpgFake] } });
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const deleteButton = <HTMLInputElement> element.querySelector('#file-1155-remove');
             deleteButton.click();
 
             expect(uploadWidgetComponent.field.updateForm).toHaveBeenCalled();
         });
 
-        }));
+        it('should set has field value all the files uploaded', async () => {
-
-        it('should set has field value all the files uploaded', async(() => {
             spyOn(contentService, 'createTemporaryRawRelatedContent').and.callFake((file: any) => {
                 if (file.name === 'file-fake.png') {
                     return of(fakePngAnswer);
@@ -246,12 +251,16 @@ describe('UploadWidgetComponent', () => {
             });
 
             uploadWidgetComponent.field.params.multiple = true;
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputDebugElement = fixture.debugElement.query(By.css('#upload-id'));
             inputDebugElement.triggerEventHandler('change', { target: { files: [filePngFake, filJpgFake] } });
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             inputElement = <HTMLInputElement> element.querySelector('#upload-id');
             expect(inputElement).toBeDefined();
             expect(inputElement).not.toBeNull();
@@ -261,16 +270,15 @@ describe('UploadWidgetComponent', () => {
             expect(uploadWidgetComponent.field.value[1].id).toBe(1156);
             expect(uploadWidgetComponent.field.json.value.length).toBe(2);
         });
-        }));
 
-        it('should show all the file uploaded on multiple field', async(() => {
+        it('should show all the file uploaded on multiple field', async () => {
             uploadWidgetComponent.field.params.multiple = true;
             uploadWidgetComponent.field.value.push(fakeJpgAnswer);
             uploadWidgetComponent.field.value.push(fakePngAnswer);
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-1156');
             const pngElement = element.querySelector('#file-1155');
             expect(jpegElement).not.toBeNull();
@@ -278,109 +286,99 @@ describe('UploadWidgetComponent', () => {
             expect(jpegElement.textContent).toBe('a_jpg_file.jpg');
             expect(pngElement.textContent).toBe('a_png_file.png');
         });
-        }));
 
-        it('should show correctly the file name when is formed with special characters', async(() => {
+        it('should show correctly the file name when is formed with special characters', async () => {
             uploadWidgetComponent.field.value.push(fakeCreationFile('±!@#$%^&*()_+{}:”|<>?§™£-=[];’\\,./.jpg', 10));
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-10');
             expect(jpegElement).not.toBeNull();
             expect(jpegElement.textContent).toBe(`±!@#$%^&*()_+{}:”|<>?§™£-=[];’\\,./.jpg`);
         });
-        }));
 
-        it('should show correctly the file name when is formed with Arabic characters', async(() => {
+        it('should show correctly the file name when is formed with Arabic characters', async () => {
             const name = 'غ ظ	ض	ذ	خ	ث	ت	ش	ر	ق	ص	ف	ع	س	ن	م	ل	ك	ي	ط	ح	ز	و	ه	د	ج	ب	ا.jpg';
             uploadWidgetComponent.field.value.push(fakeCreationFile(name, 11));
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-11');
             expect(jpegElement).not.toBeNull();
             expect(jpegElement.textContent).toBe('غ ظ	ض	ذ	خ	ث	ت	ش	ر	ق	ص	ف	ع	س	ن	م	ل	ك	ي	ط	ح	ز	و	ه	د	ج	ب	ا.jpg');
         });
-        }));
 
-        it('should show correctly the file name when is formed with French characters', async(() => {
+        it('should show correctly the file name when is formed with French characters', async () => {
             // cspell: disable-next
             uploadWidgetComponent.field.value.push(fakeCreationFile('Àâæçéèêëïîôœùûüÿ.jpg', 12));
 
             fixture.detectChanges();
+            await fixture.whenStable();
 
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             const jpegElement = element.querySelector('#file-12');
             expect(jpegElement).not.toBeNull();
             // cspell: disable-next
             expect(jpegElement.textContent).toBe('Àâæçéèêëïîôœùûüÿ.jpg');
         });
-        }));
 
-        it('should show correctly the file name when is formed with Greek characters', async(() => {
+        it('should show correctly the file name when is formed with Greek characters', async () => {
             // cspell: disable-next
             uploadWidgetComponent.field.value.push(fakeCreationFile('άέήίϊϊΐόύϋΰώθωερτψυιοπασδφγηςκλζχξωβνμ.jpg', 13));
 
             fixture.detectChanges();
+            await fixture.whenStable();
 
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             const jpegElement = element.querySelector('#file-13');
             expect(jpegElement).not.toBeNull();
             // cspell: disable-next
             expect(jpegElement.textContent).toBe('άέήίϊϊΐόύϋΰώθωερτψυιοπασδφγηςκλζχξωβνμ.jpg');
         });
-        }));
 
-        it('should show correctly the file name when is formed with Polish accented characters', async(() => {
+        it('should show correctly the file name when is formed with Polish accented characters', async () => {
             uploadWidgetComponent.field.value.push(fakeCreationFile('Ą	Ć	Ę	Ł	Ń	Ó	Ś	Ź	Żą	ć	ę	ł	ń	ó	ś	ź	ż.jpg', 14));
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-14');
             expect(jpegElement).not.toBeNull();
             expect(jpegElement.textContent).toBe('Ą	Ć	Ę	Ł	Ń	Ó	Ś	Ź	Żą	ć	ę	ł	ń	ó	ś	ź	ż.jpg');
         });
-        }));
 
-        it('should show correctly the file name when is formed with Spanish accented characters', async(() => {
+        it('should show correctly the file name when is formed with Spanish accented characters', async () => {
             uploadWidgetComponent.field.value.push(fakeCreationFile('á, é, í, ó, ú, ñ, Ñ, ü, Ü, ¿, ¡. Á, É, Í, Ó, Ú.jpg', 15));
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-15');
             expect(jpegElement).not.toBeNull();
             expect(jpegElement.textContent).toBe('á, é, í, ó, ú, ñ, Ñ, ü, Ü, ¿, ¡. Á, É, Í, Ó, Ú.jpg');
         });
-        }));
 
-        it('should show correctly the file name when is formed with Swedish characters', async(() => {
+        it('should show correctly the file name when is formed with Swedish characters', async () => {
             // cspell: disable-next
             uploadWidgetComponent.field.value.push(fakeCreationFile('Äåéö.jpg', 16));
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const jpegElement = element.querySelector('#file-16');
             expect(jpegElement).not.toBeNull();
             // cspell: disable-next
             expect(jpegElement.textContent).toBe('Äåéö.jpg');
         });
-        }));
 
-        it('should remove file from field value', async(() => {
+        it('should remove file from field value', async () => {
             uploadWidgetComponent.field.params.multiple = true;
             uploadWidgetComponent.field.value.push(fakeJpgAnswer);
             uploadWidgetComponent.field.value.push(fakePngAnswer);
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const buttonElement = <HTMLButtonElement> element.querySelector('#file-1156-remove');
             buttonElement.click();
             fixture.detectChanges();
@@ -388,7 +386,6 @@ describe('UploadWidgetComponent', () => {
             expect(jpegElement).toBeNull();
             expect(uploadWidgetComponent.field.value.length).toBe(1);
         });
-        }));
 
         it('should emit form content clicked event on icon click', (done) => {
             spyOn(contentService, 'getContentPreview').and.returnValue(of(new Blob()));

lib/core/login/components/login.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { Validators } from '@angular/forms';
 
 import { Router } from '@angular/router';
@@ -67,7 +67,7 @@ describe('LoginComponent', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(fakeAsync(() => {
         fixture = TestBed.createComponent(LoginComponent);
 
         element = fixture.nativeElement;
@@ -93,7 +93,7 @@ describe('LoginComponent', () => {
         fixture.destroy();
     });
 
-    function loginWithCredentials(username, password) {
+    function loginWithCredentials(username: string, password: string) {
         usernameInput.value = username;
         passwordInput.value = password;
 
@@ -175,7 +175,7 @@ describe('LoginComponent', () => {
         expect(router.navigateByUrl).toHaveBeenCalledWith('some-route');
     });
 
-    it('should update user preferences upon login', async(() => {
+    it('should update user preferences upon login', fakeAsync(() => {
         spyOn(userPreferences, 'setStoragePrefix').and.callThrough();
         spyOn(alfrescoApiService.getInstance(), 'login').and.returnValue(Promise.resolve());
 
@@ -465,7 +465,7 @@ describe('LoginComponent', () => {
             loginWithCredentials('fake-username-CORS-error', 'fake-password');
         });
 
-        it('should return CSRF error when server CSRF error occurs', async(() => {
+        it('should return CSRF error when server CSRF error occurs', fakeAsync(() => {
             spyOn(authService, 'login')
                 .and.returnValue(throwError({ message: 'ERROR: Invalid CSRF-token', status: 403 }));
 
@@ -480,7 +480,7 @@ describe('LoginComponent', () => {
             loginWithCredentials('fake-username-CSRF-error', 'fake-password');
         }));
 
-        it('should return ECM read-only error when error occurs', async(() => {
+        it('should return ECM read-only error when error occurs', fakeAsync(() => {
             spyOn(authService, 'login')
                 .and.returnValue(
                 throwError(
@@ -544,7 +544,7 @@ describe('LoginComponent', () => {
         loginWithCredentials('fake-username', 'fake-password');
    });
 
-    it('should emit success event after the login has succeeded and discard password', async(() => {
+    it('should emit success event after the login has succeeded and discard password', fakeAsync(() => {
         spyOn(authService, 'login').and.returnValue(of({ type: 'type', ticket: 'ticket' }));
 
         component.success.subscribe((event) => {
@@ -559,7 +559,7 @@ describe('LoginComponent', () => {
         loginWithCredentials('fake-username', 'fake-password');
     }));
 
-    it('should emit error event after the login has failed', async(() => {
+    it('should emit error event after the login has failed', fakeAsync(() => {
         spyOn(authService, 'login').and.returnValue(throwError('Fake server error'));
 
         component.error.subscribe((error) => {
@@ -596,7 +596,7 @@ describe('LoginComponent', () => {
         expect(element.querySelector('#password').type).toEqual('password');
     });
 
-    it('should emit only the username and not the password as part of the executeSubmit', async(() => {
+    it('should emit only the username and not the password as part of the executeSubmit', fakeAsync(() => {
         spyOn(alfrescoApiService.getInstance(), 'login').and.returnValue(Promise.resolve());
 
         component.executeSubmit.subscribe((res) => {
@@ -620,20 +620,18 @@ describe('LoginComponent', () => {
                 alfrescoApiService.reset();
             });
 
-            it('should not show login username and password if SSO implicit flow is active', async(() => {
+            it('should not show login username and password if SSO implicit flow is active', fakeAsync(() => {
                 spyOn(authService, 'isOauth').and.returnValue(true);
                 component.ngOnInit();
                 fixture.detectChanges();
 
-                fixture.detectChanges();
-
                 fixture.whenStable().then(() => {
                     expect(element.querySelector('#username')).toBeNull();
                     expect(element.querySelector('#password')).toBeNull();
                 });
             }));
 
-            it('should not render the implicitFlow button in case silentLogin is enabled', async(() => {
+            it('should not render the implicitFlow button in case silentLogin is enabled', fakeAsync(() => {
                 spyOn(authService, 'isOauth').and.returnValue(true);
                 appConfigService.config.oauth2 = <OauthConfigModel> { implicitFlow: true, silentLogin: true };
 
@@ -649,7 +647,7 @@ describe('LoginComponent', () => {
 
             }));
 
-            it('should render the implicitFlow button in case silentLogin is disabled', async(() => {
+            it('should render the implicitFlow button in case silentLogin is disabled', fakeAsync(() => {
                 spyOn(authService, 'isOauth').and.returnValue(true);
 
                 component.ngOnInit();
@@ -661,7 +659,7 @@ describe('LoginComponent', () => {
 
             }));
 
-            it('should not show the login base auth button', async(() => {
+            it('should not show the login base auth button', fakeAsync(() => {
                 spyOn(authService, 'isOauth').and.returnValue(true);
 
                 component.ngOnInit();
@@ -672,7 +670,7 @@ describe('LoginComponent', () => {
                 });
             }));
 
-            it('should show the login SSO button', async(() => {
+            it('should show the login SSO button', fakeAsync(() => {
                 spyOn(authService, 'isOauth').and.returnValue(true);
 
                 component.ngOnInit();

lib/core/pipes/time-ago.pipe.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { TimeAgoPipe } from './time-ago.pipe';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService } from '../app-config/app-config.service';
 import { UserPreferencesService } from '../services/user-preferences.service';
 import { setupTestBed } from '../testing/setup-test-bed';
@@ -36,11 +36,11 @@ describe('TimeAgoPipe', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         userPreferences = TestBed.inject(UserPreferencesService);
         spyOn(userPreferences, 'select').and.returnValue(of(''));
         pipe = new TimeAgoPipe(userPreferences, TestBed.inject(AppConfigService));
-    }));
+    });
 
     it('should return time difference for a given date', () => {
         const date = new Date();
@@ -59,11 +59,11 @@ describe('TimeAgoPipe', () => {
 
     describe('When a locale is given', () => {
 
-        it('should return a localised message', async(() => {
+        it('should return a localised message', () => {
             const date = new Date();
             const transformedDate  = pipe.transform(date, 'de');
             /* cspell:disable-next-line */
             expect(transformedDate).toBe('vor ein paar Sekunden');
-        }));
+        });
     });
 });

lib/core/search-text/search-text-input.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, discardPeriodicTasks, fakeAsync, tick, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, discardPeriodicTasks, fakeAsync, tick } from '@angular/core/testing';
 import { CoreTestingModule } from '../testing/core.testing.module';
 import { SearchTextInputComponent } from './search-text-input.component';
 import { DebugElement } from '@angular/core';
@@ -55,12 +55,17 @@ describe('SearchTextInputComponent', () => {
 
     describe('component rendering', () => {
 
-        it('should display a search input field when specified', async(() => {
+        it('should display a search input field when specified', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             component.inputType = 'search';
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelectorAll('input[type="search"]').length).toBe(1);
-        }));
+        });
     });
 
     describe('expandable option false', () => {
@@ -246,10 +251,13 @@ describe('SearchTextInputComponent', () => {
             discardPeriodicTasks();
         }));
 
-        it('should set browser autocomplete to on when configured', async(() => {
+        it('should set browser autocomplete to on when configured', async () => {
             component.autocomplete = true;
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(element.querySelector('#adf-control-input').getAttribute('autocomplete')).toBe('on');
-        }));
+        });
     });
 });

lib/core/services/auth-guard-bpm.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService } from '../app-config/app-config.service';
 import { AuthGuardBpm } from './auth-guard-bpm.service';
 import { AuthenticationService } from './authentication.service';
@@ -51,7 +51,7 @@ describe('AuthGuardService BPM', () => {
         appConfigService.config.oauth2 = {};
     });
 
-    it('should redirect url if the alfresco js api is NOT logged in and isOAuth with silentLogin', async(async () => {
+    it('should redirect url if the alfresco js api is NOT logged in and isOAuth with silentLogin', async () => {
         spyOn(router, 'navigateByUrl').and.stub();
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
@@ -72,33 +72,33 @@ describe('AuthGuardService BPM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(authService.ssoImplicitLogin).toHaveBeenCalledTimes(1);
-    }));
+    });
 
-    it('if the alfresco js api is logged in should canActivate be true', async(async () => {
+    it('if the alfresco js api is logged in should canActivate be true', async () => {
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
-        const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
+        const route = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeTruthy();
-    }));
+    });
 
-    it('if the alfresco js api is configured with withCredentials true should canActivate be true', async(async () => {
+    it('if the alfresco js api is configured with withCredentials true should canActivate be true', async () => {
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
         appConfigService.config.auth.withCredentials = true;
 
-        const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
+        const route = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeTruthy();
-    }));
+    });
 
-    it('if the alfresco js api is NOT logged in should canActivate be false', async(async () => {
+    it('if the alfresco js api is NOT logged in should canActivate be false', async () => {
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
-    }));
+    });
 
-    it('if the alfresco js api is NOT logged in should trigger a redirect event', async(async () => {
+    it('if the alfresco js api is NOT logged in should trigger a redirect event', async () => {
         appConfigService.config.loginRoute = 'login';
 
         spyOn(router, 'navigateByUrl');
@@ -107,31 +107,31 @@ describe('AuthGuardService BPM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalledWith(router.parseUrl('/login?redirectUrl=some-url'));
-    }));
+    });
 
-    it('should redirect url if the alfresco js api is NOT logged in and isOAuthWithoutSilentLogin', async(async () => {
+    it('should redirect url if the alfresco js api is NOT logged in and isOAuthWithoutSilentLogin', async () => {
         spyOn(router, 'navigateByUrl').and.stub();
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
         appConfigService.config.oauth2.silentLogin = false;
-        const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
+        const route = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalled();
-    }));
+    });
 
-    it('should redirect url if NOT logged in and isOAuth but no silentLogin configured', async(async () => {
+    it('should redirect url if NOT logged in and isOAuth but no silentLogin configured', async () => {
         spyOn(router, 'navigateByUrl').and.stub();
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
         appConfigService.config.oauth2.silentLogin = undefined;
-        const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
+        const route = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalled();
-    }));
+    });
 
-    it('should set redirect url', async(() => {
+    it('should set redirect url', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
@@ -142,9 +142,9 @@ describe('AuthGuardService BPM', () => {
             provider: 'BPM', url: 'some-url'
         });
         expect(authService.getRedirect()).toEqual('some-url');
-    }));
+    });
 
-    it('should set redirect navigation commands with query params', async(() => {
+    it('should set redirect navigation commands with query params', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url;q=123' };
@@ -155,9 +155,9 @@ describe('AuthGuardService BPM', () => {
             provider: 'BPM', url: 'some-url;q=123'
         });
         expect(authService.getRedirect()).toEqual('some-url;q=123');
-    }));
+    });
 
-    it('should set redirect navigation commands with query params', async(() => {
+    it('should set redirect navigation commands with query params', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: '/' };
@@ -168,9 +168,9 @@ describe('AuthGuardService BPM', () => {
             provider: 'BPM', url: '/'
         });
         expect(authService.getRedirect()).toEqual('/');
-    }));
+    });
 
-    it('should get redirect url from config if there is one configured', async(() => {
+    it('should get redirect url from config if there is one configured', () => {
         appConfigService.config.loginRoute = 'fakeLoginRoute';
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
@@ -182,7 +182,7 @@ describe('AuthGuardService BPM', () => {
             provider: 'BPM', url: 'some-url'
         });
         expect(router.navigateByUrl).toHaveBeenCalledWith(router.parseUrl('/fakeLoginRoute?redirectUrl=some-url'));
-    }));
+    });
 
     it('should to close the material dialog if is redirect to the login', () => {
         const materialDialog = TestBed.inject(MatDialog);

lib/core/services/auth-guard-ecm.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppConfigService } from '../app-config/app-config.service';
 import { AuthGuardEcm } from './auth-guard-ecm.service';
 import { AuthenticationService } from './authentication.service';
@@ -51,31 +51,31 @@ describe('AuthGuardService ECM', () => {
         appConfigService.config.oauth2 = {};
     });
 
-    it('if the alfresco js api is logged in should canActivate be true', async(async() => {
+    it('if the alfresco js api is logged in should canActivate be true', async() => {
         spyOn(authService, 'isEcmLoggedIn').and.returnValue(true);
         const route: RouterStateSnapshot = <RouterStateSnapshot>  {url : 'some-url'};
 
         expect(await authGuard.canActivate(null, route)).toBeTruthy();
-    }));
+    });
 
-    it('if the alfresco js api is configured with withCredentials true should canActivate be true', async(async() => {
+    it('if the alfresco js api is configured with withCredentials true should canActivate be true', async() => {
         spyOn(authService, 'isBpmLoggedIn').and.returnValue(true);
         appConfigService.config.auth.withCredentials = true;
 
         const route: RouterStateSnapshot = <RouterStateSnapshot>  {url : 'some-url'};
 
         expect(await authGuard.canActivate(null, route)).toBeTruthy();
-    }));
+    });
 
-    it('if the alfresco js api is NOT logged in should canActivate be false', async(async() => {
+    it('if the alfresco js api is NOT logged in should canActivate be false', async() => {
         spyOn(authService, 'isEcmLoggedIn').and.returnValue(false);
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
-    }));
+    });
 
-    it('if the alfresco js api is NOT logged in should trigger a redirect event', async(async() => {
+    it('if the alfresco js api is NOT logged in should trigger a redirect event', async() => {
         appConfigService.config.loginRoute = 'login';
 
         spyOn(router, 'navigateByUrl');
@@ -84,9 +84,9 @@ describe('AuthGuardService ECM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalledWith(router.parseUrl('/login?redirectUrl=some-url'));
-    }));
+    });
 
-    it('should redirect url if the alfresco js api is NOT logged in and isOAuthWithoutSilentLogin', async(async() => {
+    it('should redirect url if the alfresco js api is NOT logged in and isOAuthWithoutSilentLogin', async() => {
         spyOn(router, 'navigateByUrl').and.stub();
         spyOn(authService, 'isEcmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
@@ -95,9 +95,9 @@ describe('AuthGuardService ECM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalled();
-    }));
+    });
 
-    it('should redirect url if the alfresco js api is NOT logged in and isOAuth with silentLogin', async(async() => {
+    it('should redirect url if the alfresco js api is NOT logged in and isOAuth with silentLogin', async() => {
         spyOn(authService, 'isEcmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
         spyOn(authService, 'isPublicUrl').and.returnValue(false);
@@ -116,9 +116,9 @@ describe('AuthGuardService ECM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(authService.ssoImplicitLogin).toHaveBeenCalledTimes(1);
-    }));
+    });
 
-    it('should not redirect url if NOT logged in and isOAuth but no silentLogin configured', async(async() => {
+    it('should not redirect url if NOT logged in and isOAuth but no silentLogin configured', async() => {
         spyOn(router, 'navigateByUrl').and.stub();
         spyOn(authService, 'isEcmLoggedIn').and.returnValue(false);
         spyOn(authService, 'isOauth').and.returnValue(true);
@@ -127,9 +127,9 @@ describe('AuthGuardService ECM', () => {
 
         expect(await authGuard.canActivate(null, route)).toBeFalsy();
         expect(router.navigateByUrl).toHaveBeenCalled();
-    }));
+    });
 
-    it('should set redirect navigation commands', async(() => {
+    it('should set redirect navigation commands', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url' };
@@ -140,9 +140,9 @@ describe('AuthGuardService ECM', () => {
             provider: 'ECM', url: 'some-url'
         });
         expect(authService.getRedirect()).toEqual('some-url');
-    }));
+    });
 
-    it('should set redirect navigation commands with query params', async(() => {
+    it('should set redirect navigation commands with query params', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: 'some-url;q=123' };
@@ -153,9 +153,9 @@ describe('AuthGuardService ECM', () => {
             provider: 'ECM', url: 'some-url;q=123'
         });
         expect(authService.getRedirect()).toEqual('some-url;q=123');
-    }));
+    });
 
-    it('should set redirect navigation commands with query params', async(() => {
+    it('should set redirect navigation commands with query params', () => {
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
         const route: RouterStateSnapshot = <RouterStateSnapshot> { url: '/' };
@@ -166,9 +166,9 @@ describe('AuthGuardService ECM', () => {
             provider: 'ECM', url: '/'
         });
         expect(authService.getRedirect()).toEqual('/');
-    }));
+    });
 
-    it('should get redirect url from config if there is one configured', async(() => {
+    it('should get redirect url from config if there is one configured', () => {
         appConfigService.config.loginRoute = 'fakeLoginRoute';
         spyOn(authService, 'setRedirect').and.callThrough();
         spyOn(router, 'navigateByUrl').and.stub();
@@ -180,7 +180,7 @@ describe('AuthGuardService ECM', () => {
             provider: 'ECM', url: 'some-url'
         });
         expect(router.navigateByUrl).toHaveBeenCalledWith(router.parseUrl('/fakeLoginRoute?redirectUrl=some-url'));
-    }));
+    });
 
     it('should to close the material dialog if is redirect to the login', () => {
         const materialDialog = TestBed.inject(MatDialog);

lib/core/services/comment-process.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { CommentModel } from '../models/comment.model';
 import { fakeProcessComment, fakeTasksComment, fakeUser1 } from '../mock/comment-process-service.mock';
 import { CommentProcessService } from './comment-process.service';
@@ -65,37 +65,40 @@ describe('Comment ProcessService Service', () => {
                     .returnValue(Promise.resolve({data: [fakeProcessComment, fakeProcessComment]}));
             });
 
-            it('should return the correct number of comments', async(() => {
+            it('should return the correct number of comments', (done) => {
                 service.getProcessInstanceComments(processId).subscribe((tasks) => {
                     expect(tasks.length).toBe(2);
+                    done();
+                });
             });
-            }));
 
-            it('should return the correct comment data', async(() => {
+            it('should return the correct comment data', (done) => {
                 service.getProcessInstanceComments(processId).subscribe((comments) => {
                     const comment: any = comments[0];
                     expect(comment.id).toBe(fakeProcessComment.id);
                     expect(comment.created).toBe(fakeProcessComment.created);
                     expect(comment.message).toBe(fakeProcessComment.message);
                     expect(comment.createdBy.id).toBe(fakeProcessComment.createdBy.id);
+                    done();
+                });
             });
-            }));
 
             it('should call service to fetch process instance comments', () => {
                 service.getProcessInstanceComments(processId);
                 expect(getProcessInstanceComments).toHaveBeenCalledWith(processId);
             });
 
-            it('should return a default error if no data is returned by the API', async(() => {
+            it('should return a default error if no data is returned by the API', (done) => {
                 getProcessInstanceComments = getProcessInstanceComments.and.returnValue(Promise.reject(null));
                 service.getProcessInstanceComments(processId).subscribe(
                     () => {
                     },
                     (res) => {
                         expect(res).toBe('Server error');
+                        done();
                     }
                 );
-            }));
+            });
 
         });
 
@@ -117,25 +120,26 @@ describe('Comment ProcessService Service', () => {
                 }, processId);
             });
 
-            it('should return the created comment', async(() => {
+            it('should return the created comment', (done) => {
                 service.addProcessInstanceComment(processId, message).subscribe((comment) => {
                     expect(comment.id).toBe(fakeProcessComment.id);
                     expect(comment.created).toBe(fakeProcessComment.created);
                     expect(comment.message).toBe(fakeProcessComment.message);
                     expect(comment.createdBy).toBe(fakeProcessComment.createdBy);
+                    done();
+                });
             });
-            }));
 
-            it('should return a default error if no data is returned by the API', async(() => {
+            it('should return a default error if no data is returned by the API', (done) => {
                 addProcessInstanceComment = addProcessInstanceComment.and.returnValue(Promise.reject(null));
                 service.addProcessInstanceComment(processId, message).subscribe(
-                    () => {
+                    () => {},
-                    },
                     (res) => {
                         expect(res).toBe('Server error');
+                        done();
                     }
                 );
-            }));
+            });
 
         });
    });

lib/core/services/upload.service.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { EventEmitter } from '@angular/core';
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { FileModel, FileUploadOptions, FileUploadStatus } from '../models/file.model';
 import { AppConfigModule } from '../app-config/app-config.module';
 import { UploadService } from './upload.service';
@@ -447,32 +447,32 @@ describe('UploadService', () => {
         expect(result[0]).toBe(file2);
     });
 
-    it('should call onUploadDeleted if file was deleted', async(() => {
+    it('should call onUploadDeleted if file was deleted', () => {
         const file = <any> ({ status: FileUploadStatus.Deleted });
         spyOn(service.fileUploadDeleted, 'next');
 
         service.cancelUpload(file);
 
         expect(service.fileUploadDeleted.next).toHaveBeenCalled();
-    }));
+    });
 
-    it('should call fileUploadError if file has error status', async(() => {
+    it('should call fileUploadError if file has error status', () => {
         const file = <any> ({ status: FileUploadStatus.Error });
         spyOn(service.fileUploadError, 'next');
 
         service.cancelUpload(file);
 
         expect(service.fileUploadError.next).toHaveBeenCalled();
-    }));
+    });
 
-    it('should call fileUploadCancelled if file is in pending', async(() => {
+    it('should call fileUploadCancelled if file is in pending', () => {
         const file = <any> ({ status: FileUploadStatus.Pending });
         spyOn(service.fileUploadCancelled, 'next');
 
         service.cancelUpload(file);
 
         expect(service.fileUploadCancelled.next).toHaveBeenCalled();
-    }));
+    });
 
     it('Should not pass rendition if it is disabled', () => {
         mockProductInfo.next({ status: { isThumbnailGenerationEnabled: false } } as EcmProductVersionModel);

lib/core/services/user-preferences.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { AppConfigService } from '../app-config/app-config.service';
 import { StorageService } from './storage.service';
@@ -177,7 +177,7 @@ describe('UserPreferencesService', () => {
 
     describe('with language config', () => {
 
-        it('should store default textOrientation based on language', async(() => {
+        it('should store default textOrientation based on language', () => {
             appConfig.config.languages = [
                 {
                     key: 'fake-locale-config'
@@ -187,9 +187,9 @@ describe('UserPreferencesService', () => {
             alfrescoApiService.initialize();
             const textOrientation = preferences.getPropertyKey('textOrientation');
             expect(storage.getItem(textOrientation)).toBe('ltr');
-        }));
+        });
 
-        it('should store textOrientation based on language config direction', async(() => {
+        it('should store textOrientation based on language config direction', () => {
             appConfig.config.languages = [
                 {
                     key: 'fake-locale-config',
@@ -200,9 +200,9 @@ describe('UserPreferencesService', () => {
             alfrescoApiService.initialize();
             const textOrientation = preferences.getPropertyKey('textOrientation');
             expect(storage.getItem(textOrientation)).toBe('rtl');
-        }));
+        });
 
-        it('should not store textOrientation based on language ', async(() => {
+        it('should not store textOrientation based on language ', () => {
             appConfig.config.languages = [
                 {
                     key: 'fake-locale-browser'
@@ -212,7 +212,7 @@ describe('UserPreferencesService', () => {
 
             const textOrientation = preferences.getPropertyKey('textOrientation');
             expect(storage.getItem(textOrientation)).toBe(null);
-        }));
+        });
 
         it('should default to browser locale for textOrientation when locale is not defined in configuration', (done) => {
             appConfig.config.languages = [

lib/core/templates/empty-content/empty-content.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { setupTestBed } from '@alfresco/adf-core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -58,16 +58,16 @@ describe('EmptyContentComponent', () => {
         translateService = TestBed.inject(TranslateService);
     });
 
-    it('should render custom title', async(() => {
+    it('should render custom title', async () => {
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         const title = fixture.debugElement.query(By.css('.adf-empty-content__title'));
         expect(title).toBeDefined('title element not found');
         expect(title.nativeElement.textContent).toContain('CUSTOM_TITLE', 'incorrect title value');
     });
-    }));
 
-    it('should translate title and subtitle', async(() => {
+    it('should translate title and subtitle', async () => {
         spyOn(translateService, 'get').and.callFake((key: string) => {
             switch (key) {
                 case 'CUSTOM_TITLE':
@@ -80,7 +80,8 @@ describe('EmptyContentComponent', () => {
         });
 
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         const title = fixture.debugElement.query(By.css('.adf-empty-content__title'));
         const subtitle = fixture.debugElement.query(By.css('.adf-empty-content__subtitle'));
 
@@ -90,7 +91,6 @@ describe('EmptyContentComponent', () => {
         expect(subtitle).toBeDefined('subtitle element not found');
         expect(subtitle.nativeElement.textContent).toContain('ENG_CUSTOM_SUBTITLE', 'incorrect subtitle value');
     });
-    }));
 
     it('should render multiple subtitle elements', () => {
         const subTitles = fixture.debugElement.queryAll(By.css('.adf-empty-content__text'));

lib/core/templates/error-content/error-content.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { CoreTestingModule } from '../../testing/core.testing.module';
 import { ErrorContentComponent } from './error-content.component';
 import { TranslationService } from '../../services/translation.service';
@@ -40,7 +40,6 @@ describe('ErrorContentComponent', () => {
 
     afterEach(() => {
         fixture.destroy();
-        TestBed.resetTestingModule();
     });
 
     describe(' with an undefined error', () => {
@@ -55,56 +54,57 @@ describe('ErrorContentComponent', () => {
             ]
         });
 
-        it('should create error component', async(() => {
+        it('should render error code', async () => {
             fixture.detectChanges();
-            expect(errorContentComponent).toBeTruthy();
+            await fixture.whenStable();
-        }));
 
-        it('should render error code', async(() => {
-            fixture.detectChanges();
             const errorContentElement = element.querySelector('.adf-error-content-code');
             expect(errorContentElement).not.toBeNull();
             expect(errorContentElement).toBeDefined();
-        }));
+        });
 
-        it('should render error title', async(() => {
+        it('should render error title', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const errorContentElement = element.querySelector('.adf-error-content-title');
             expect(errorContentElement).not.toBeNull();
             expect(errorContentElement).toBeDefined();
-        }));
-
-        it('should render error description', async(() => {
-            fixture.detectChanges();
-            const errorContentElement = element.querySelector('.adf-error-content-description');
-            expect(errorContentElement).not.toBeNull();
-            expect(errorContentElement).toBeDefined();
-        }));
-
-        it('should render error description', async(() => {
-            fixture.detectChanges();
-            const errorContentElement = element.querySelector('.adf-error-content-description');
-            expect(errorContentElement).not.toBeNull();
-            expect(errorContentElement).toBeDefined();
-        }));
-
-        it('should hide secondary button if this one has no value', async(() => {
-            spyOn(translateService, 'instant').and.callFake(() => {
-                return '';
         });
+
+        it('should render error description', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
+            const errorContentElement = element.querySelector('.adf-error-content-description');
+            expect(errorContentElement).not.toBeNull();
+            expect(errorContentElement).toBeDefined();
+        });
+
+        it('should render error description', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            const errorContentElement = element.querySelector('.adf-error-content-description');
+            expect(errorContentElement).not.toBeNull();
+            expect(errorContentElement).toBeDefined();
+        });
+
+        it('should hide secondary button if this one has no value', async () => {
+            spyOn(translateService, 'instant').and.returnValue('');
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const errorContentElement = element.querySelector('.adf-error-content-description-link');
             expect(errorContentElement).toBeNull();
         });
-        }));
 
-        it('should navigate to the default error UNKNOWN if it does not find the error', async(() => {
+        it('should navigate to the default error UNKNOWN if it does not find the error', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(errorContentComponent.errorCode).toBe('UNKNOWN');
         });
-        }));
     });
 
     describe(' with a specific error', () => {
@@ -119,12 +119,12 @@ describe('ErrorContentComponent', () => {
             ]
         });
 
-        it('should navigate to an error given by the route params', async(() => {
+        it('should navigate to an error given by the route params', async () => {
             spyOn(translateService, 'instant').and.returnValue(of('404'));
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(errorContentComponent.errorCodeTranslated).toBe('404');
         });
-        }));
     });
 });

lib/core/viewer/components/viewer.component.spec.ts

@@ -18,7 +18,7 @@
 import { Location } from '@angular/common';
 import { SpyLocation } from '@angular/common/testing';
 import { Component } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { AlfrescoApiService, RenditionsService } from '../../services';
 
 import { throwError } from 'rxjs';
@@ -715,7 +715,7 @@ describe('ViewerComponent', () => {
                 });
             });
 
-            it('should emit `showViewerChange` event on close', async(() => {
+            it('should emit `showViewerChange` event on close', async () => {
 
                 spyOn(component.showViewerChange, 'emit');
 
@@ -723,11 +723,10 @@ describe('ViewerComponent', () => {
                 button.click();
 
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
-                    fixture.detectChanges();
+
                 expect(component.showViewerChange.emit).toHaveBeenCalled();
             });
-            }));
 
             it('should not render close viewer button if it is a shared link', (done) => {
                 spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')

lib/extensions/src/lib/services/extension-loader.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ExtensionConfig } from '../config/extension.config';
 import { ExtensionLoaderService } from './extension-loader.service';
@@ -94,28 +94,31 @@ describe('ExtensionLoaderService', () => {
         });
     });
 
-    it('should load default registered app extensions when no custom $references defined', async(() => {
+    it('should load default registered app extensions when no custom $references defined', (done) => {
         extensionLoaderService.load('assets/app.extensions.json', 'assets/plugins', ['test.extension.1.json']).then((config: ExtensionConfig) => {
             const pluginsReference = config.$references.map((entry: ExtensionConfig) => entry.$name);
             expect(pluginsReference).toEqual(['test.extension.1']);
+            done();
+        });
     });
-    }));
 
-    it('should ignore default registered app extension if defined in $ignoreReferenceList', async(() => {
+    it('should ignore default registered app extension if defined in $ignoreReferenceList', (done) => {
         appExtensionsConfig.$ignoreReferenceList = ['test.extension.1.json'];
 
         extensionLoaderService.load('assets/app.extensions.json', 'assets/plugins', ['test.extension.1.json']).then((config: ExtensionConfig) => {
             const pluginsReference = config.$references.map((entry: ExtensionConfig) => entry.$name);
             expect(pluginsReference).toEqual([]);
+            done();
+        });
     });
-    }));
 
-    it('should load only extensions defined by $references', async(() => {
+    it('should load only extensions defined by $references', (done) => {
         appExtensionsConfig.$references = ['test.extension.1.json'];
 
         extensionLoaderService.load('assets/app.extensions.json', 'assets/plugins', ['test.extension.2.json, test.extension.3.json']).then((config: ExtensionConfig) => {
             const pluginsReference = config.$references.map((entry: ExtensionConfig) => entry.$name);
             expect(pluginsReference).toEqual(['test.extension.1']);
+            done();
+        });
     });
-    }));
 });

lib/insights/src/lib/analytics-process/components/analytics-report-heat-map.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-heat-map.component';
 import { setupTestBed } from '@alfresco/adf-core';
 import { InsightsTestingModule } from '../../testing/insights.testing.module';
@@ -69,11 +69,12 @@ describe('AnalyticsReportHeatMapComponent', () => {
             jasmine.Ajax.uninstall();
         });
 
-        it('should render the dropdown with the metric options', async(() => {
+        it('should render the dropdown with the metric options', async () => {
             component.report = { totalCountsPercentages: { 'sid-fake-id': 10, 'fake-start-event': 30 } };
 
-            component.success.subscribe(() => {
+            fixture.detectChanges();
-                fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const dropDown: any = element.querySelector('#select-metrics');
             expect(dropDown).toBeDefined();
             expect(dropDown.length).toEqual(3);
@@ -81,38 +82,35 @@ describe('AnalyticsReportHeatMapComponent', () => {
             expect(dropDown[1].innerHTML).toEqual('Total time spent in a process step');
             expect(dropDown[2].innerHTML).toEqual('Average time spent in a process step');
         });
-            });
-            fixture.detectChanges();
-        }));
 
-        it('should return false when no metrics are defined in the report', async(() => {
+        it('should return false when no metrics are defined in the report', () => {
             component.report = {};
             expect(component.hasMetric()).toBeFalsy();
-        }));
+        });
 
-        it('should return true when the metrics are defined in the report', async(() => {
+        it('should return true when the metrics are defined in the report', () => {
             expect(component.hasMetric()).toBeTruthy();
-        }));
+        });
 
-        it('should change the currentMetric width totalCount', async(() => {
+        it('should change the currentMetric width totalCount', () => {
             const field = { value: 'totalCount' };
             component.onMetricChanges(field);
             expect(component.currentMetric).toEqual(totalCountValues);
             expect(component.currentMetricColors).toEqual(totalCountPercent);
-        }));
+        });
 
-        it('should change the currentMetric width totalTime', async(() => {
+        it('should change the currentMetric width totalTime', () => {
             const field = { value: 'totalTime' };
             component.onMetricChanges(field);
             expect(component.currentMetric).toEqual(totalTimeValues);
             expect(component.currentMetricColors).toEqual(totalTimePercent);
-        }));
+        });
 
-        it('should change the currentMetric width avgTime', async(() => {
+        it('should change the currentMetric width avgTime', () => {
             const field = { value: 'avgTime' };
             component.onMetricChanges(field);
             expect(component.currentMetric).toEqual(avgTimeValues);
             expect(component.currentMetricColors).toEqual(avgTimePercentages);
-        }));
+        });
    });
 });

lib/insights/src/lib/analytics-process/components/analytics-report-parameters.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { ReportParametersModel } from '../../diagram/models/report/report-parameters.model';
 import * as analyticParamsMock from '../../mock';
 import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
@@ -408,7 +408,7 @@ describe('AnalyticsReportParametersComponent', () => {
 
         describe('When the form is rendered correctly', () => {
 
-            beforeEach(async(() => {
+            beforeEach(async () => {
                 const reportId = 1;
                 const change = new SimpleChange(null, reportId, true);
                 component.ngOnChanges({'reportId': change});
@@ -420,20 +420,19 @@ describe('AnalyticsReportParametersComponent', () => {
                     responseText: analyticParamsMock.reportDefParamStatus
                 });
 
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
                 component.toggleParameters();
                 fixture.detectChanges();
             });
-            }));
 
             it('Should be able to change the report title', (done) => {
                 spyOn(service, 'updateReport').and.returnValue(of(analyticParamsMock.reportDefParamStatus));
 
-                const title: HTMLElement = element.querySelector('h4');
+                const title = element.querySelector<HTMLElement>('h4');
                 title.click();
                 fixture.detectChanges();
 
-                const reportName: HTMLInputElement = <HTMLInputElement> element.querySelector('#reportName');
+                const reportName = element.querySelector<HTMLInputElement>('#reportName');
                 expect(reportName).not.toBeNull();
 
                 reportName.focus();
@@ -444,31 +443,31 @@ describe('AnalyticsReportParametersComponent', () => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    const titleChanged: HTMLElement = element.querySelector('h4');
+                    const titleChanged = element.querySelector<HTMLElement>('h4');
                     expect(titleChanged.textContent.trim()).toEqual('FAKE_TEST_NAME');
                     done();
                 });
             });
 
-            it('should render adf-buttons-menu component', async(() => {
+            it('should render adf-buttons-menu component', async () => {
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const buttonsMenuComponent = element.querySelector('adf-buttons-action-menu');
                 expect(buttonsMenuComponent).not.toBeNull();
                 expect(buttonsMenuComponent).toBeDefined();
             });
-            }));
 
-            it('should render delete button', async(() => {
+            it('should render delete button', async () => {
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const buttonsMenuComponent = element.querySelector('#delete-button');
                 expect(buttonsMenuComponent).not.toBeNull();
                 expect(buttonsMenuComponent).toBeDefined();
             });
-            }));
 
-            it('Should raise an event for report deleted', async(() => {
+            it('Should raise an event for report deleted', fakeAsync(() => {
                 fixture.detectChanges();
                 spyOn(component, 'deleteReport');
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('#delete-button');
@@ -481,7 +480,7 @@ describe('AnalyticsReportParametersComponent', () => {
                 expect(component.deleteReport).toHaveBeenCalled();
             }));
 
-            it('Should hide export button if the form is not valid', async(() => {
+            it('Should hide export button if the form is not valid', fakeAsync(() => {
                 validForm = true;
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -501,7 +500,7 @@ describe('AnalyticsReportParametersComponent', () => {
 
             }));
 
-            it('Should hide save button if the form is not valid', async(() => {
+            it('Should hide save button if the form is not valid', fakeAsync(() => {
                 validForm = true;
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -520,7 +519,7 @@ describe('AnalyticsReportParametersComponent', () => {
                 });
             }));
 
-            it('Should show export and save button when the form became valid', async(() => {
+            it('Should show export and save button when the form became valid', fakeAsync(() => {
                 validForm = false;
                 fixture.detectChanges();
                 let saveButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#save-button');

lib/insights/src/lib/diagram/components/diagram.component.activities.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as diagramsActivitiesMock from '../../mock/diagram/diagram-activities.mock';
 import { DiagramComponent } from './diagram.component';
@@ -69,7 +69,7 @@ describe('Diagrams activities', () => {
 
     describe('Diagrams component Activities: ', () => {
 
-        it('Should render the User Task', async(() => {
+        it('Should render the User Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -87,14 +87,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.userTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Manual Task', async(() => {
+        it('Should render the Manual Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -112,14 +113,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.manualTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Task', async(() => {
+        it('Should render the Service Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -135,14 +137,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.serviceTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Camel Task', async(() => {
+        it('Should render the Service Camel Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -160,14 +163,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.camelTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Mule Task', async(() => {
+        it('Should render the Service Mule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -181,14 +185,15 @@ describe('Diagrams activities', () => {
 
                     const iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
                     expect(iconTask).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.muleTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Alfresco Publish Task', async(() => {
+        it('Should render the Service Alfresco Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -207,14 +212,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.alfrescoPublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Google Drive Publish Task', async(() => {
+        it('Should render the Service Google Drive Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -233,14 +239,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.googleDrivePublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Rest Call Task', async(() => {
+        it('Should render the Rest Call Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -259,14 +266,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.restCallTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Box Publish Task', async(() => {
+        it('Should render the Service Box Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -285,14 +293,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.boxPublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Receive Task', async(() => {
+        it('Should render the Receive Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -310,14 +319,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.receiveTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Script Task', async(() => {
+        it('Should render the Script Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -335,14 +345,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.scriptTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Business Rule Task', async(() => {
+        it('Should render the Business Rule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -360,17 +371,18 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.businessRuleTask] };
             ajaxReply(resp);
-        }));
+        });
    });
 
     describe('Diagrams component Activities with process instance id: ', () => {
 
-        it('Should render the User Task', async(() => {
+        it('Should render the User Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -388,14 +400,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.userTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active User Task', async(() => {
+        it('Should render the Active User Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -413,14 +426,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.userTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed User Task', async(() => {
+        it('Should render the Completed User Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -438,14 +452,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.userTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Manual Task', async(() => {
+        it('Should render the Manual Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -463,14 +478,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.manualTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Manual Task', async(() => {
+        it('Should render the Active Manual Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -488,14 +504,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.manualTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Manual Task', async(() => {
+        it('Should render the Completed Manual Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -513,14 +530,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.manualTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Task', async(() => {
+        it('Should render the Service Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -538,14 +556,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.serviceTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Task', async(() => {
+        it('Should render the Active Service Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -563,14 +582,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.serviceTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Task', async(() => {
+        it('Should render the Completed Service Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -588,14 +608,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.serviceTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Camel Task', async(() => {
+        it('Should render the Service Camel Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -613,14 +634,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.camelTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Camel Task', async(() => {
+        it('Should render the Active Service Camel Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -638,14 +660,16 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.camelTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Camel Task', async(() => {
+        it('Should render the Completed Service Camel Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -663,14 +687,16 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.camelTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Mule Task', async(() => {
+        it('Should render the Service Mule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -684,14 +710,15 @@ describe('Diagrams activities', () => {
 
                     const iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
                     expect(iconTask).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.muleTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Mule Task', async(() => {
+        it('Should render the Active Service Mule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -705,14 +732,15 @@ describe('Diagrams activities', () => {
 
                     const iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
                     expect(iconTask).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.muleTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Mule Task', async(() => {
+        it('Should render the Completed Service Mule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -726,14 +754,15 @@ describe('Diagrams activities', () => {
 
                     const iconTask: any = element.querySelector('diagram-mule-task > diagram-icon-mule-task > raphael-icon-mule');
                     expect(iconTask).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.muleTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Alfresco Publish Task', async(() => {
+        it('Should render the Service Alfresco Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -752,14 +781,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.alfrescoPublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Alfresco Publish Task', async(() => {
+        it('Should render the Active Service Alfresco Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -778,14 +808,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.alfrescoPublishTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Alfresco Publish Task', async(() => {
+        it('Should render the Completed Service Alfresco Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -804,14 +835,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.alfrescoPublishTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Google Drive Publish Task', async(() => {
+        it('Should render the Service Google Drive Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -830,14 +862,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.googleDrivePublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Google Drive Publish Task', async(() => {
+        it('Should render the Active Service Google Drive Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -856,14 +889,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.googleDrivePublishTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Google Drive Publish Task', async(() => {
+        it('Should render the Completed Service Google Drive Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -882,14 +916,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.googleDrivePublishTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Rest Call Task', async(() => {
+        it('Should render the Rest Call Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -908,14 +943,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.restCallTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Rest Call Task', async(() => {
+        it('Should render the Active Rest Call Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -934,14 +970,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.restCallTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Rest Call Task', async(() => {
+        it('Should render the Completed Rest Call Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -960,14 +997,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.restCallTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Service Box Publish Task', async(() => {
+        it('Should render the Service Box Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -986,14 +1024,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.boxPublishTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Service Box Publish Task', async(() => {
+        it('Should render the Active Service Box Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1012,14 +1051,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.boxPublishTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Service Box Publish Task', async(() => {
+        it('Should render the Completed Service Box Publish Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1038,14 +1078,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.boxPublishTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Receive Task', async(() => {
+        it('Should render the Receive Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1063,14 +1104,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.receiveTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Receive Task', async(() => {
+        it('Should render the Active Receive Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1088,14 +1130,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.receiveTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Receive Task', async(() => {
+        it('Should render the Completed Receive Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1113,14 +1156,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.receiveTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Script Task', async(() => {
+        it('Should render the Script Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1138,14 +1182,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.scriptTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Script Task', async(() => {
+        it('Should render the Active Script Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1163,14 +1208,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.scriptTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Script Task', async(() => {
+        it('Should render the Completed Script Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1188,14 +1234,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.scriptTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Business Rule Task', async(() => {
+        it('Should render the Business Rule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1213,14 +1260,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.businessRuleTask] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Business Rule Task', async(() => {
+        it('Should render the Active Business Rule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1238,14 +1286,15 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.businessRuleTaskActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Business Rule Task', async(() => {
+        it('Should render the Completed Business Rule Task', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -1263,11 +1312,12 @@ describe('Diagrams activities', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].name);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsActivitiesMock.businessRuleTaskCompleted] };
             ajaxReply(resp);
-        }));
+        });
    });
 });

lib/insights/src/lib/diagram/components/diagram.component.boundary.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as boundaryEventMock from '../../mock/diagram/diagram-boundary.mock';
 import { DiagramComponent } from './diagram.component';
@@ -43,9 +43,7 @@ describe('Diagrams boundary', () => {
         component = fixture.componentInstance;
         element = fixture.nativeElement;
         fixture.detectChanges();
-    });
 
-    beforeEach(() => {
         jasmine.Ajax.install();
         component.processInstanceId = '38399';
         component.processDefinitionId = 'fakeprocess:24:38399';
@@ -53,7 +51,6 @@ describe('Diagrams boundary', () => {
     });
 
     afterEach(() => {
-        component.success.unsubscribe();
         fixture.destroy();
         jasmine.Ajax.uninstall();
     });
@@ -68,7 +65,7 @@ describe('Diagrams boundary', () => {
 
     describe('Diagrams component Boundary events with process instance id: ', () => {
 
-        it('Should render the Boundary time event', async(() => {
+        it('Should render the Boundary time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -90,14 +87,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Boundary time event', async(() => {
+        it('Should render the Active Boundary time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -123,14 +121,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryTimeEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Boundary time event', async(() => {
+        it('Should render the Completed Boundary time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -156,14 +155,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryTimeEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary error event', async(() => {
+        it('Should render the Boundary error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -185,14 +185,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Boundary error event', async(() => {
+        it('Should render the Active Boundary error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -218,14 +219,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryErrorEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Boundary error event', async(() => {
+        it('Should render the Completed Boundary error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -251,14 +253,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryErrorEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal event', async(() => {
+        it('Should render the Boundary signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -280,14 +283,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundarySignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Boundary signal event', async(() => {
+        it('Should render the Active Boundary signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -313,14 +317,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundarySignalEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Boundary signal event', async(() => {
+        it('Should render the Completed Boundary signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -346,14 +351,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundarySignalEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal message', async(() => {
+        it('Should render the Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -375,14 +381,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Boundary signal message', async(() => {
+        it('Should render the Active Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -408,14 +415,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Boundary signal message', async(() => {
+        it('Should render the Completed Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -441,14 +449,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal message', async(() => {
+        it('Should render the Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -470,14 +479,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Boundary signal message', async(() => {
+        it('Should render the Active Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -503,14 +513,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Boundary signal message', async(() => {
+        it('Should render the Completed Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -536,17 +547,18 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Boundary events: ', () => {
 
-        it('Should render the Boundary time event', async(() => {
+        it('Should render the Boundary time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -568,14 +580,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary error event', async(() => {
+        it('Should render the Boundary error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -597,14 +610,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal event', async(() => {
+        it('Should render the Boundary signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -626,14 +640,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundarySignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal message', async(() => {
+        it('Should render the Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -655,14 +670,15 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Boundary signal message', async(() => {
+        it('Should render the Boundary signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -684,11 +700,12 @@ describe('Diagrams boundary', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [boundaryEventMock.boundaryMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.catching.events.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as intermediateCatchingMock from '../../mock/diagram/diagram-intermediate.mock';
 import { DiagramComponent } from './diagram.component';
@@ -68,7 +68,7 @@ describe('Diagrams Catching', () => {
 
     describe('Diagrams component Intermediate Catching events: ', () => {
 
-        it('Should render the Intermediate catching time event', async(() => {
+        it('Should render the Intermediate catching time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -90,14 +90,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching error event', async(() => {
+        it('Should render the Intermediate catching error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -119,14 +120,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching signal event', async(() => {
+        it('Should render the Intermediate catching signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -148,14 +150,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching signal message', async(() => {
+        it('Should render the Intermediate catching signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -177,17 +180,18 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Intermediate Catching events with process instance id: ', () => {
 
-        it('Should render the Intermediate catching time event', async(() => {
+        it('Should render the Intermediate catching time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -209,14 +213,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Intermediate catching time event', async(() => {
+        it('Should render the Active Intermediate catching time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -242,14 +247,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Intermediate catching time event', async(() => {
+        it('Should render the Completed Intermediate catching time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -275,14 +281,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingTimeEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching error event', async(() => {
+        it('Should render the Intermediate catching error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -304,14 +311,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Intermediate catching error event', async(() => {
+        it('Should render the Active Intermediate catching error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -337,14 +345,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Intermediate catching error event', async(() => {
+        it('Should render the Completed Intermediate catching error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -370,14 +379,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingErrorEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching signal event', async(() => {
+        it('Should render the Intermediate catching signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -399,14 +409,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate Active catching signal event', async(() => {
+        it('Should render the Intermediate Active catching signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -432,14 +443,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Intermediate catching signal event', async(() => {
+        it('Should render the Completed Intermediate catching signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -465,14 +477,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingSignalEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Intermediate catching signal message', async(() => {
+        it('Should render the Intermediate catching signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -494,14 +507,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Intermediate catching signal message', async(() => {
+        it('Should render the Active Intermediate catching signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -527,14 +541,15 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Intermediate catching signal message', async(() => {
+        it('Should render the Completed Intermediate catching signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -560,11 +575,12 @@ describe('Diagrams Catching', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [intermediateCatchingMock.intermediateCatchingMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.events.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as diagramsEventsMock from '../../mock/diagram/diagram-events.mock';
 import { DiagramComponent } from './diagram.component';
@@ -68,7 +68,7 @@ describe('Diagrams events', () => {
 
     describe('Diagrams component Events: ', () => {
 
-        it('Should render the Start Event', async(() => {
+        it('Should render the Start Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -78,14 +78,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Timer Event', async(() => {
+        it('Should render the Start Timer Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -99,15 +100,16 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
 
             const resp = { elements: [diagramsEventsMock.startTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Signal Event', async(() => {
+        it('Should render the Start Signal Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -121,14 +123,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Message Event', async(() => {
+        it('Should render the Start Message Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -142,14 +145,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Error Event', async(() => {
+        it('Should render the Start Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -163,14 +167,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the End Event', async(() => {
+        it('Should render the End Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -180,14 +185,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the End Error Event', async(() => {
+        it('Should render the End Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -201,17 +207,18 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Events with process instance id: ', () => {
 
-        it('Should render the Start Event', async(() => {
+        it('Should render the Start Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -221,14 +228,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Start Event', async(() => {
+        it('Should render the Active Start Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -238,14 +246,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Start Event', async(() => {
+        it('Should render the Completed Start Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -255,14 +264,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Timer Event', async(() => {
+        it('Should render the Start Timer Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -276,15 +286,16 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startTimeEvent] };
 
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Start Timer Event', async(() => {
+        it('Should render the Active Start Timer Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -298,15 +309,16 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startTimeEventActive] };
 
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Start Timer Event', async(() => {
+        it('Should render the Completed Start Timer Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -320,15 +332,16 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startTimeEventCompleted] };
 
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Signal Event', async(() => {
+        it('Should render the Start Signal Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -342,14 +355,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Start Signal Event', async(() => {
+        it('Should render the Active Start Signal Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -363,14 +377,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startSignalEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Start Signal Event', async(() => {
+        it('Should render the Completed Start Signal Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -384,14 +399,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startSignalEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Message Event', async(() => {
+        it('Should render the Start Message Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -405,14 +421,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Start Message Event', async(() => {
+        it('Should render the Active Start Message Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -426,14 +443,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Start Message Event', async(() => {
+        it('Should render the Completed Start Message Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -447,14 +465,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Start Error Event', async(() => {
+        it('Should render the Start Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -468,14 +487,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Start Error Event', async(() => {
+        it('Should render the Active Start Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -489,14 +509,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startErrorEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Start Error Event', async(() => {
+        it('Should render the Completed Start Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -510,14 +531,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.startErrorEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the End Event', async(() => {
+        it('Should render the End Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -527,14 +549,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active End Event', async(() => {
+        it('Should render the Active End Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -544,14 +567,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed End Event', async(() => {
+        it('Should render the Completed End Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -561,14 +585,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the End Error Event', async(() => {
+        it('Should render the End Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -582,14 +607,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active End Error Event', async(() => {
+        it('Should render the Active End Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -603,14 +629,15 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endErrorEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed End Error Event', async(() => {
+        it('Should render the Completed End Error Event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -624,11 +651,12 @@ describe('Diagrams events', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsEventsMock.endErrorEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.flows.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as flowsMock from '../../mock/diagram/diagram-flows.mock';
 import { DiagramComponent } from './diagram.component';
@@ -43,9 +43,7 @@ describe('Diagrams flows', () => {
         component = fixture.componentInstance;
         element = fixture.nativeElement;
         fixture.detectChanges();
-    });
 
-    beforeEach(() => {
         jasmine.Ajax.install();
         component.processInstanceId = '38399';
         component.processDefinitionId = 'fakeprocess:24:38399';
@@ -68,7 +66,7 @@ describe('Diagrams flows', () => {
 
     describe('Diagrams component Flows with process instance id: ', () => {
 
-        it('Should render the flow', async(() => {
+        it('Should render the flow', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -79,17 +77,18 @@ describe('Diagrams flows', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.flows[0].id);
                     expect(tooltip.textContent).toContain(res.flows[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { flows: [flowsMock.flow] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Flows: ', () => {
 
-        it('Should render the flow', async(() => {
+        it('Should render the flow', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -100,11 +99,12 @@ describe('Diagrams flows', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.flows[0].id);
                     expect(tooltip.textContent).toContain(res.flows[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { flows: [flowsMock.flow] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.gateways.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as diagramsGatewaysMock from '../../mock/diagram/diagram-gateways.mock';
 import { DiagramComponent } from './diagram.component';
@@ -68,7 +68,7 @@ describe('Diagrams gateways', () => {
 
     describe('Diagrams component Gateways: ', () => {
 
-        it('Should render the Exclusive Gateway', async(() => {
+        it('Should render the Exclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -82,14 +82,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.exclusiveGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Inclusive Gateway', async(() => {
+        it('Should render the Inclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -103,14 +104,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.inclusiveGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Parallel Gateway', async(() => {
+        it('Should render the Parallel Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -124,14 +126,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.parallelGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Event Gateway', async(() => {
+        it('Should render the Event Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -155,17 +158,18 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.eventGateway] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Gateways with process instance id: ', () => {
 
-        it('Should render the Exclusive Gateway', async(() => {
+        it('Should render the Exclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -179,14 +183,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.exclusiveGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Exclusive Gateway', async(() => {
+        it('Should render the Active Exclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -200,14 +205,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.exclusiveGatewayActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Exclusive Gateway', async(() => {
+        it('Should render the Completed Exclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -221,14 +227,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.exclusiveGatewayCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Inclusive Gateway', async(() => {
+        it('Should render the Inclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -242,14 +249,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.inclusiveGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Inclusive Gateway', async(() => {
+        it('Should render the Active Inclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -263,14 +271,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.inclusiveGatewayActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Inclusive Gateway', async(() => {
+        it('Should render the Completed Inclusive Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -284,14 +293,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.inclusiveGatewayCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Parallel Gateway', async(() => {
+        it('Should render the Parallel Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -305,14 +315,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.parallelGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Parallel Gateway', async(() => {
+        it('Should render the Active Parallel Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -326,14 +337,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.parallelGatewayActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Parallel Gateway', async(() => {
+        it('Should render the Completed Parallel Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -347,14 +359,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.parallelGatewayCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Event Gateway', async(() => {
+        it('Should render the Event Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -378,14 +391,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.eventGateway] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Event Gateway', async(() => {
+        it('Should render the Active Event Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -409,14 +423,15 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.eventGatewayActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Event Gateway', async(() => {
+        it('Should render the Completed Event Gateway', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -440,11 +455,12 @@ describe('Diagrams gateways', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [diagramsGatewaysMock.eventGatewayCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.structural.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as structuralMock from '../../mock/diagram/diagram-structural.mock';
 import { DiagramComponent } from './diagram.component';
@@ -68,7 +68,7 @@ describe('Diagrams structural', () => {
 
     describe('Diagrams component Structural: ', () => {
 
-        it('Should render the Subprocess', async(() => {
+        it('Should render the Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -79,14 +79,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.subProcess] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Event Subprocess', async(() => {
+        it('Should render the Event Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -97,17 +98,18 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.eventSubProcess] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Structural with process instance id: ', () => {
 
-        it('Should render the Subprocess', async(() => {
+        it('Should render the Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -118,14 +120,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.subProcess] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Subprocess', async(() => {
+        it('Should render the Active Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -136,14 +139,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.subProcessActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Subprocess', async(() => {
+        it('Should render the Completed Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -154,14 +158,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.subProcessCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Event Subprocess', async(() => {
+        it('Should render the Event Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -172,14 +177,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.eventSubProcess] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Event Subprocess', async(() => {
+        it('Should render the Active Event Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -190,14 +196,15 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.eventSubProcessActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Event Subprocess', async(() => {
+        it('Should render the Completed Event Subprocess', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -208,11 +215,12 @@ describe('Diagrams structural', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [structuralMock.eventSubProcessCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.swim.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as swimLanesMock from '../../mock/diagram/diagram-swimlanes.mock';
 import { DiagramComponent } from './diagram.component';
@@ -68,7 +68,7 @@ describe('Diagrams swim', () => {
 
     describe('Diagrams component Swim lane: ', () => {
 
-        it('Should render the Pool', async(() => {
+        it('Should render the Pool', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -79,14 +79,15 @@ describe('Diagrams swim', () => {
                     const shapeText: any = element.querySelector('diagram-pool > raphael-text');
                     expect(shapeText).not.toBeNull();
                     expect(shapeText.attributes.getNamedItem('ng-reflect-text').value).toEqual('Activiti');
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { pools: [swimLanesMock.pool] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Pool with Lanes', async(() => {
+        it('Should render the Pool with Lanes', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -100,17 +101,18 @@ describe('Diagrams swim', () => {
                     const shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text');
                     expect(shapeText).not.toBeNull();
                     expect(shapeText.attributes.getNamedItem('ng-reflect-text').value).toEqual('Backend');
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { pools: [swimLanesMock.poolLanes] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Swim lane with process instance id: ', () => {
 
-        it('Should render the Pool', async(() => {
+        it('Should render the Pool', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -121,14 +123,15 @@ describe('Diagrams swim', () => {
                     const shapeText: any = element.querySelector('diagram-pool > raphael-text');
                     expect(shapeText).not.toBeNull();
                     expect(shapeText.attributes.getNamedItem('ng-reflect-text').value).toEqual('Activiti');
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { pools: [swimLanesMock.pool] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Pool with Lanes', async(() => {
+        it('Should render the Pool with Lanes', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -142,11 +145,12 @@ describe('Diagrams swim', () => {
                     const shapeText: any = element.querySelector('diagram-lanes > div > div > diagram-lane > raphael-text');
                     expect(shapeText).not.toBeNull();
                     expect(shapeText.attributes.getNamedItem('ng-reflect-text').value).toEqual('Backend');
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { pools: [swimLanesMock.poolLanes] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/insights/src/lib/diagram/components/diagram.component.throw.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import * as throwEventMock from '../../mock/diagram/diagram-throw.mock';
 import { DiagramComponent } from './diagram.component';
@@ -38,7 +38,7 @@ describe('Diagrams throw', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         jasmine.Ajax.install();
 
         fixture = TestBed.createComponent(DiagramComponent);
@@ -49,10 +49,9 @@ describe('Diagrams throw', () => {
         component.metricPercentages = { startEvent: 0 };
 
         fixture.detectChanges();
-    }));
+    });
 
     afterEach(() => {
-        component.success.unsubscribe();
         fixture.destroy();
         jasmine.Ajax.uninstall();
     });
@@ -67,7 +66,7 @@ describe('Diagrams throw', () => {
 
     describe('Diagrams component Throw events with process instance id: ', () => {
 
-        it('Should render the Throw time event', async(() => {
+        it('Should render the Throw time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -85,14 +84,15 @@ describe('Diagrams throw', () => {
                     const iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Throw time event', async(() => {
+        it('Should render the Active Throw time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -114,14 +114,15 @@ describe('Diagrams throw', () => {
                     const iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwTimeEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Throw time event', async(() => {
+        it('Should render the Completed Throw time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -143,14 +144,15 @@ describe('Diagrams throw', () => {
                     const iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwTimeEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw error event', async(() => {
+        it('Should render the Throw error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -172,14 +174,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Throw error event', async(() => {
+        it('Should render the Active Throw error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -205,14 +208,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwErrorEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Throw error event', async(() => {
+        it('Should render the Completed Throw error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -238,14 +242,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwErrorEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal event', async(() => {
+        it('Should render the Throw signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -267,14 +272,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Throw signal event', async(() => {
+        it('Should render the Active Throw signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -300,14 +306,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwSignalEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Throw signal event', async(() => {
+        it('Should render the Completed Throw signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -333,14 +340,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwSignalEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal message', async(() => {
+        it('Should render the Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -362,14 +370,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Throw signal message', async(() => {
+        it('Should render the Active Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -395,14 +404,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Throw signal message', async(() => {
+        it('Should render the Completed Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -428,14 +438,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal message', async(() => {
+        it('Should render the Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -457,14 +468,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Active Throw signal message', async(() => {
+        it('Should render the Active Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -490,14 +502,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEventActive] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Completed Throw signal message', async(() => {
+        it('Should render the Completed Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -523,17 +536,18 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEventCompleted] };
             ajaxReply(resp);
-        }));
+        });
     });
 
     describe('Diagrams component Throw events: ', () => {
 
-        it('Should render the Throw time event', async(() => {
+        it('Should render the Throw time event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -551,14 +565,15 @@ describe('Diagrams throw', () => {
                     const iconShape: any = element.querySelector('diagram-throw-event > diagram-container-icon-event >' +
                         ' div > div > diagram-icon-timer');
                     expect(iconShape).not.toBeNull();
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwTimeEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw error event', async(() => {
+        it('Should render the Throw error event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -580,14 +595,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwErrorEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal event', async(() => {
+        it('Should render the Throw signal event', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -609,14 +625,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwSignalEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal message', async(() => {
+        it('Should render the Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -638,14 +655,15 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
 
-        it('Should render the Throw signal message', async(() => {
+        it('Should render the Throw signal message', (done) => {
             component.success.subscribe((res) => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
@@ -667,11 +685,12 @@ describe('Diagrams throw', () => {
                     const tooltip: any = element.querySelector('diagram-tooltip > div');
                     expect(tooltip.textContent).toContain(res.elements[0].id);
                     expect(tooltip.textContent).toContain(res.elements[0].type);
+                    done();
                 });
             });
             component.ngOnChanges();
             const resp = { elements: [throwEventMock.throwMessageEvent] };
             ajaxReply(resp);
-        }));
+        });
     });
 });

lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed, AlfrescoApiService } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
 
@@ -81,7 +81,7 @@ describe('AppListCloudComponent', () => {
         expect(component.isGrid()).toBe(true);
     });
 
-    it('Should fetch deployed apps', async(() => {
+    it('Should fetch deployed apps', (done) => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             component.apps$.subscribe((response: any[]) => {
@@ -95,10 +95,10 @@ describe('AppListCloudComponent', () => {
                 expect(response[1].status).toEqual('Pending');
                 expect(response[1].icon).toEqual('favorite_border');
                 expect(response[1].theme).toEqual('theme-2');
+                done();
+            });
         });
     });
-        expect(getAppsSpy).toHaveBeenCalled();
-    }));
 
     it('should display default adf-empty-content template when response empty', () => {
         getAppsSpy.and.returnValue(of([]));
@@ -115,7 +115,7 @@ describe('AppListCloudComponent', () => {
         expect(getAppsSpy).toHaveBeenCalled();
     });
 
-    it('should display default no permissions template when response returns exception', () => {
+    it('should display default no permissions template when response returns exception', (done) => {
         getAppsSpy.and.returnValue(throwError({}));
         fixture.detectChanges();
         fixture.whenStable().then(() => {
@@ -128,6 +128,7 @@ describe('AppListCloudComponent', () => {
             expect(errorTitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.TITLE');
             expect(errorSubtitle.innerText).toBe('ADF_CLOUD_TASK_LIST.APPS.ERROR.SUBTITLE');
             expect(getAppsSpy).toHaveBeenCalled();
+            done();
         });
    });
 
@@ -219,12 +220,12 @@ describe('AppListCloudComponent', () => {
             customFixture.destroy();
         });
 
-        it('should render the custom empty template', async(() => {
+        it('should render the custom empty template', async () => {
             customFixture.detectChanges();
-            customFixture.whenStable().then(() => {
+            await customFixture.whenStable();
+
             const title: any =  customFixture.nativeElement.querySelector('#custom-id');
             expect(title.innerText).toBe('No Apps Found');
         });
-        }));
     });
 });

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -1085,7 +1085,7 @@ describe('FormCloudWithCustomOutComesComponent', () => {
         fixture.destroy();
     });
 
-    it('should be able to inject custom outcomes and click on custom outcomes', async(() => {
+    it('should be able to inject custom outcomes and click on custom outcomes', async () => {
         fixture.detectChanges();
 
         const onCustomButtonOneSpy = spyOn(customComponent, 'onCustomButtonOneClick').and.callThrough();
@@ -1096,11 +1096,12 @@ describe('FormCloudWithCustomOutComesComponent', () => {
 
         buttonOneBtn.nativeElement.click();
         fixture.detectChanges();
+        await fixture.whenStable();
 
         expect(onCustomButtonOneSpy).toHaveBeenCalled();
         expect(buttonOneBtn.nativeElement.innerText).toBe('CUSTOM-BUTTON-1');
         expect(buttonTwoBtn.nativeElement.innerText).toBe('CUSTOM-BUTTON-2');
-    }));
+    });
 });
 
 describe('retrieve metadata on submit', () => {

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContentCloudNodeSelectorService } from '../../../services/content-cloud-node-selector.service';
 import { ProcessCloudContentService } from '../../../services/process-cloud-content.service';
@@ -114,7 +114,7 @@ describe('AttachFileCloudWidgetComponent', () => {
         schemas: [CUSTOM_ELEMENTS_SCHEMA]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         downloadService = TestBed.inject(DownloadService);
         fixture = TestBed.createComponent(AttachFileCloudWidgetComponent);
         widget = fixture.componentInstance;
@@ -130,29 +130,28 @@ describe('AttachFileCloudWidgetComponent', () => {
         alfrescoApiService = TestBed.inject(AlfrescoApiService);
         contentNodeSelectorPanelService = TestBed.inject(ContentNodeSelectorPanelService);
         openUploadFileDialogSpy = spyOn(contentCloudNodeSelectorService, 'openUploadFileDialog').and.returnValue(of([fakeMinimalNode]));
-    }));
+    });
 
     afterEach(() => {
         fixture.destroy();
     });
 
-    it('should show up as simple upload when is configured for only local files', async(() => {
+    it('should show up as simple upload when is configured for only local files', async () => {
         createUploadWidgetField(new FormModel(), 'simple-upload-button', [], allSourceParams);
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         expect(element.querySelector('#simple-upload-button')).not.toBeNull();
     });
-    }));
 
-    it('should show up as content upload when is configured with content', async(() => {
+    it('should show up as content upload when is configured with content', async () => {
         createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [], contentSourceParam);
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         expect(element.querySelector('.adf-attach-widget__menu-upload')).not.toBeNull();
     });
-    }));
+
     it('should be able to attach files coming from content selector', async () => {
         createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [], contentSourceParam);
         fixture.detectChanges();
@@ -183,14 +182,13 @@ describe('AttachFileCloudWidgetComponent', () => {
         expect(fileIcon).not.toBeNull();
     });
 
-    it('should display file list when field has value', async(() => {
+    it('should display file list when field has value', async () => {
         createUploadWidgetField(new FormModel(), 'attach-file-alfresco', [fakeLocalPngResponse], onlyLocalParams);
         fixture.detectChanges();
+        await fixture.whenStable();
 
-        fixture.whenStable().then(() => {
         expect(element.querySelector('#file-1155-icon')).not.toBeNull();
     });
-    }));
 
     it('should be able to set label property for Attach File widget', () => {
         createUploadWidgetField(new FormModel(), 'attach-file', [], onlyLocalParams, false, 'Label', true);
@@ -469,56 +467,68 @@ describe('AttachFileCloudWidgetComponent', () => {
                 expect(openUploadFileDialogSpy).toHaveBeenCalledWith('-my-', 'single', false, true);
             });
 
-            it('should display tooltip when tooltip is set', async(() => {
+            it('should display tooltip when tooltip is set', async () => {
                 createUploadWidgetField(new FormModel(), 'attach-file-attach', [], onlyLocalParams);
 
                 fixture.detectChanges();
-                const attachElement: any = element.querySelector('#attach-file-attach');
+                await fixture.whenStable();
+
+                const attachElement = element.querySelector('#attach-file-attach');
                 const tooltip = attachElement.getAttribute('ng-reflect-message');
 
                 expect(tooltip).toEqual(widget.field.tooltip);
-            }));
+            });
         });
     });
 
     describe('when is readonly', () => {
 
-        it('should show empty list message when there are no file', async(() => {
+        it('should show empty list message when there are no file', async () => {
             createUploadWidgetField(new FormModel(), 'empty-test', [], onlyLocalParams, null, null, true);
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#adf-attach-empty-list-empty-test')).not.toBeNull();
         });
-        }));
 
-        it('should not show empty list message when there are files', async(() => {
+        it('should not show empty list message when there are files', async () => {
             createUploadWidgetField(new FormModel(), 'fill-test', [fakeLocalPngResponse], onlyLocalParams, null, null, true);
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(element.querySelector('#adf-attach-empty-list-fill-test')).toBeNull();
         });
-        }));
 
-        it('should not show remove button when there are files attached', async(() => {
+        it('should not show remove button when there are files attached', async () => {
             createUploadWidgetField(new FormModel(), 'fill-test', [fakeLocalPngResponse], onlyLocalParams, null, null, true);
+
             fixture.detectChanges();
-            const menuButton: HTMLButtonElement = <HTMLButtonElement> (
+            await fixture.whenStable();
+
+            const menuButton = <HTMLButtonElement> (
                 fixture.debugElement.query(By.css('#file-1155-option-menu'))
                     .nativeElement
             );
             menuButton.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(fixture.debugElement.query(By.css('#file-1155-remove'))).toBeNull();
-        }));
+        });
 
-        it('should not show any action when the attached file is a physical record', async(() => {
+        it('should not show any action when the attached file is a physical record', async () => {
             createUploadWidgetField(new FormModel(), 'fill-test', [fakeLocalPhysicalRecordResponse], onlyLocalParams, null, null, true);
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const menuButton = fixture.debugElement.query(By.css('#file-1155-option-menu'));
 
             expect(menuButton).toBeNull();
-        }));
+        });
     });
 
     describe('when a file is uploaded', () => {
@@ -532,9 +542,12 @@ describe('AttachFileCloudWidgetComponent', () => {
             });
             widget.field.id = 'attach-file-alfresco';
             widget.field.params = <FormFieldMetadata> menuTestSourceParam;
+
             fixture.detectChanges();
             await fixture.whenStable();
+
             clickOnAttachFileWidget('attach-file-alfresco');
+
             fixture.detectChanges();
             await fixture.whenStable();
         });

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DateCloudWidgetComponent } from './date-cloud.widget';
 import { setupTestBed, FormFieldModel, FormModel } from '@alfresco/adf-core';
 import moment from 'moment-es6';
@@ -36,11 +36,11 @@ describe('DateWidgetComponent', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(DateCloudWidgetComponent);
         widget = fixture.componentInstance;
         element = fixture.nativeElement;
-    }));
+    });
 
     it('should setup min value for date picker', () => {
         const minValue = '1982-03-13';
@@ -103,7 +103,7 @@ describe('DateWidgetComponent', () => {
             TestBed.resetTestingModule();
         });
 
-        it('should show visible date widget', async(() => {
+        it('should show visible date widget', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -114,15 +114,14 @@ describe('DateWidgetComponent', () => {
             widget.field.isVisible = true;
             widget.ngOnInit();
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
-                const dateElement: any = element.querySelector('#date-field-id');
+            const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
             expect(dateElement.value).toContain('9-9-9999');
         });
-        }));
 
-        it('should show the correct format type', async(() => {
+        it('should show the correct format type', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -134,16 +133,14 @@ describe('DateWidgetComponent', () => {
             widget.field.dateDisplayFormat = 'YYYY-DD-MM';
             widget.ngOnInit();
             fixture.detectChanges();
-            fixture.whenStable()
+            await fixture.whenStable();
-                .then(() => {
             expect(element.querySelector('#date-field-id')).toBeDefined();
             expect(element.querySelector('#date-field-id')).not.toBeNull();
-                    const dateElement: any = element.querySelector('#date-field-id');
+            const dateElement = element.querySelector<HTMLInputElement>('#date-field-id');
             expect(dateElement.value).toContain('9999-30-12');
         });
-        }));
 
-        it('should disable date button when is readonly', async(() => {
+        it('should disable date button when is readonly', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -154,18 +151,20 @@ describe('DateWidgetComponent', () => {
             widget.field.isVisible = true;
             widget.field.readOnly = false;
             fixture.detectChanges();
+            await fixture.whenStable();
 
-            let dateButton = <HTMLButtonElement> element.querySelector('button');
+            let dateButton = element.querySelector<HTMLButtonElement>('button');
             expect(dateButton.disabled).toBeFalsy();
 
             widget.field.readOnly = true;
             fixture.detectChanges();
+            await fixture.whenStable();
 
-            dateButton = <HTMLButtonElement> element.querySelector('button');
+            dateButton = element.querySelector<HTMLButtonElement> ('button');
             expect(dateButton.disabled).toBeTruthy();
-        }));
+        });
 
-        it('should set isValid to false when the value is not a correct date value', async(() => {
+        it('should set isValid to false when the value is not a correct date value', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -175,12 +174,14 @@ describe('DateWidgetComponent', () => {
             });
             widget.field.isVisible = true;
             widget.field.readOnly = false;
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             expect(widget.field.isValid).toBeFalsy();
-        }));
+        });
 
-        it('should display tooltip when tooltip is set', async(() => {
+        it('should display tooltip when tooltip is set', async () => {
             widget.field = new FormFieldModel(new FormModel(), {
                 id: 'date-field-id',
                 name: 'date-name',
@@ -191,11 +192,13 @@ describe('DateWidgetComponent', () => {
             });
 
             fixture.detectChanges();
-            const dateElement: any = element.querySelector('#date-field-id');
+            await fixture.whenStable();
+
+            const dateElement = element.querySelector('#date-field-id');
             const tooltip = dateElement.getAttribute('ng-reflect-message');
 
             expect(tooltip).toEqual(widget.field.tooltip);
-        }));
+        });
     });
 
     it('should display always the json value', () => {

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { DropdownCloudWidgetComponent } from './dropdown-cloud.widget';
@@ -58,7 +58,7 @@ describe('DropdownCloudWidgetComponent', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(DropdownCloudWidgetComponent);
         widget = fixture.componentInstance;
         element = fixture.nativeElement;
@@ -68,11 +68,11 @@ describe('DropdownCloudWidgetComponent', () => {
         formCloudService = TestBed.inject(FormCloudService);
 
         widget.field = new FormFieldModel(new FormModel());
-    }));
+    });
 
     afterEach(() => fixture.destroy());
 
-    it('should require field with restUrl', async(() => {
+    it('should require field with restUrl', () => {
         spyOn(formService, 'getRestFieldValues').and.stub();
 
         widget.field = null;
@@ -82,13 +82,13 @@ describe('DropdownCloudWidgetComponent', () => {
         widget.field = new FormFieldModel(null, { restUrl: null });
         widget.ngOnInit();
         expect(formService.getRestFieldValues).not.toHaveBeenCalled();
-    }));
+    });
 
     describe('when template is ready', () => {
 
         describe('and dropdown is populated', () => {
 
-            beforeEach(async(() => {
+            beforeEach(() => {
                 spyOn(visibilityService, 'refreshVisibility').and.stub();
                 spyOn(formService, 'getRestFieldValues').and.callFake(() => {
                     return of(fakeOptionList);
@@ -103,21 +103,21 @@ describe('DropdownCloudWidgetComponent', () => {
                 widget.field.emptyOption = { id: 'empty', name: 'Choose one...' };
                 widget.field.isVisible = true;
                 fixture.detectChanges();
-            }));
+            });
 
-            it('should select the default value when an option is chosen as default', async(() => {
+            it('should select the default value when an option is chosen as default', async () => {
                 widget.field.value = 'option_2';
                 widget.ngOnInit();
+
                 fixture.detectChanges();
-                fixture.whenStable()
+                await fixture.whenStable();
-                    .then(() => {
+
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('option_2');
                 expect(dropDownElement.attributes['ng-reflect-model'].textContent).toBe('option_2');
             });
-            }));
 
-            it('should select the empty value when no default is chosen', async(() => {
+            it('should select the empty value when no default is chosen', async () => {
                 widget.field.value = 'empty';
                 widget.ngOnInit();
                 fixture.detectChanges();
@@ -125,26 +125,25 @@ describe('DropdownCloudWidgetComponent', () => {
                 openSelect('#dropdown-id');
 
                 fixture.detectChanges();
+                await fixture.whenStable();
 
-                fixture.whenStable()
+                const dropDownElement = element.querySelector('#dropdown-id');
-                    .then(() => {
-                        const dropDownElement: any = element.querySelector('#dropdown-id');
                 expect(dropDownElement.attributes['ng-reflect-model'].value).toBe('empty');
             });
-            }));
 
-            it('should display tooltip when tooltip is set', async(() => {
+            it('should display tooltip when tooltip is set', async () => {
                 widget.field.tooltip = 'dropdown widget';
 
                 widget.ngOnInit();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const dropDownElement: any = element.querySelector('#dropdown-id');
                 const tooltip = dropDownElement.getAttribute('ng-reflect-message');
 
                 expect(tooltip).toEqual(widget.field.tooltip);
             });
-            }));
 
             it('should load data from restUrl and populate options', async () => {
                 const jsonDataSpy = spyOn(formCloudService, 'getDropDownJsonData').and.returnValue(of(fakeOptionList));

lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { ProcessServiceCloudTestingModule } from './../../testing/process-service-cloud.testing.module';
@@ -74,24 +74,22 @@ describe('GroupCloudComponent', () => {
         spyOn(alfrescoApiService, 'getInstance').and.returnValue(mock);
     });
 
-    it('should populate placeholder when title is present', async(() => {
+    it('should populate placeholder when title is present', async () => {
         component.title = 'TITLE_KEY';
-        fixture.detectChanges();
 
-        const matLabel: HTMLInputElement = <HTMLInputElement> element.querySelector('#adf-group-cloud-title-id');
-
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
+        const matLabel = element.querySelector<HTMLInputElement>('#adf-group-cloud-title-id');
         expect(matLabel.textContent).toEqual('TITLE_KEY');
     });
-    }));
 
     describe('Search group', () => {
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture.detectChanges();
             findGroupsByNameSpy = spyOn(identityGroupService, 'findGroupsByName').and.returnValue(of(mockIdentityGroups));
-        }));
+        });
 
         it('should list the groups as dropdown options if the search term has results', (done) => {
             const input = getElement<HTMLInputElement>('input');
@@ -228,7 +226,7 @@ describe('GroupCloudComponent', () => {
         let checkGroupHasAnyClientAppRoleSpy: jasmine.Spy;
         let checkGroupHasClientAppSpy: jasmine.Spy;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             findGroupsByNameSpy = spyOn(identityGroupService, 'findGroupsByName').and.returnValue(of(mockIdentityGroups));
             checkGroupHasAnyClientAppRoleSpy = spyOn(identityGroupService, 'checkGroupHasAnyClientAppRole').and.returnValue(of(true));
             checkGroupHasClientAppSpy = spyOn(identityGroupService, 'checkGroupHasClientApp').and.returnValue(of(true));
@@ -237,9 +235,9 @@ describe('GroupCloudComponent', () => {
             component.appName = 'mock-app-name';
 
             fixture.detectChanges();
-        }));
+        });
 
-        it('should fetch the client ID if appName specified', async (() => {
+        it('should fetch the client ID if appName specified', async () => {
             const getClientIdByApplicationNameSpy = spyOn(identityGroupService, 'getClientIdByApplicationName').and.callThrough();
             component.appName = 'mock-app-name';
 
@@ -247,11 +245,10 @@ describe('GroupCloudComponent', () => {
             component.ngOnChanges({ 'appName': change });
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
         });
-        }));
 
         it('should list groups who have access to the app when appName is specified', (done) => {
             const input = getElement<HTMLInputElement>('input');
@@ -423,12 +420,12 @@ describe('GroupCloudComponent', () => {
     describe('When roles defined', () => {
         let checkGroupHasRoleSpy: jasmine.Spy;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.roles = ['mock-role-1', 'mock-role-2'];
             spyOn(identityGroupService, 'findGroupsByName').and.returnValue(of(mockIdentityGroups));
             checkGroupHasRoleSpy = spyOn(identityGroupService, 'checkGroupHasRole').and.returnValue(of(true));
             fixture.detectChanges();
-        }));
+        });
 
         it('should filter if groups has any specified role', (done) => {
             fixture.detectChanges();
@@ -487,12 +484,12 @@ describe('GroupCloudComponent', () => {
     describe('Single Mode with pre-selected groups', () => {
         const changes = new SimpleChange(null, mockIdentityGroups, false);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.mode = 'single';
             component.preSelectGroups = <any> mockIdentityGroups;
             component.ngOnChanges({ 'preSelectGroups': changes });
             fixture.detectChanges();
-        }));
+        });
 
         it('should show only one mat chip with the first preSelectedGroup', () => {
             const chips = fixture.debugElement.queryAll(By.css('mat-chip'));
@@ -504,12 +501,12 @@ describe('GroupCloudComponent', () => {
     describe('Multiple Mode with pre-selected groups', () => {
         const change = new SimpleChange(null, mockIdentityGroups, false);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.mode = 'multiple';
             component.preSelectGroups = <any> mockIdentityGroups;
             component.ngOnChanges({ 'preSelectGroups': change });
             fixture.detectChanges();
-        }));
+        });
 
         it('should render all preselected groups', () => {
             component.mode = 'multiple';

lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { PeopleCloudComponent } from './people-cloud.component';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import {
     IdentityUserService,
     AlfrescoApiService,
@@ -78,36 +78,33 @@ describe('PeopleCloudComponent', () => {
         spyOn(alfrescoApiService, 'getInstance').and.returnValue(mock);
     });
 
-    it('should populate placeholder when title is present', async(() => {
+    it('should populate placeholder when title is present', async () => {
         component.title = 'TITLE_KEY';
         fixture.detectChanges();
 
         const matLabel = getElement<HTMLInputElement>('#adf-people-cloud-title-id');
 
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
         expect(matLabel.textContent).toEqual('TITLE_KEY');
     });
-    }));
 
-    it('should not populate placeholder when title is not present', async(() => {
+    it('should not populate placeholder when title is not present', async () => {
         fixture.detectChanges();
 
         const matLabel = getElement<HTMLInputElement>('#adf-people-cloud-title-id');
 
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         expect(matLabel.textContent).toEqual('');
     });
-    }));
 
     describe('Search user', () => {
-        beforeEach(async(() => {
+        beforeEach(() => {
             fixture.detectChanges();
             element = fixture.nativeElement;
             findUsersByNameSpy = spyOn(identityService, 'findUsersByName').and.returnValue(of(mockUsers));
-        }));
+        });
 
         it('should list the users as dropdown options if the search term has results', (done) => {
             const input = getElement<HTMLInputElement>('input');
@@ -337,7 +334,7 @@ describe('PeopleCloudComponent', () => {
         let checkUserHasAccessSpy: jasmine.Spy;
         let checkUserHasAnyClientAppRoleSpy: jasmine.Spy;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             findUsersByNameSpy = spyOn(identityService, 'findUsersByName').and.returnValue(of(mockUsers));
             checkUserHasAccessSpy = spyOn(identityService, 'checkUserHasClientApp').and.returnValue(of(true));
             checkUserHasAnyClientAppRoleSpy = spyOn(identityService, 'checkUserHasAnyClientAppRole').and.returnValue(of(true));
@@ -346,9 +343,9 @@ describe('PeopleCloudComponent', () => {
             component.appName = 'mock-app-name';
             fixture.detectChanges();
             element = fixture.nativeElement;
-        }));
+        });
 
-        it('should fetch the client ID if appName specified', async (() => {
+        it('should fetch the client ID if appName specified', async () => {
             const getClientIdByApplicationNameSpy = spyOn(identityService, 'getClientIdByApplicationName').and.callThrough();
             component.appName = 'mock-app-name';
 
@@ -356,11 +353,10 @@ describe('PeopleCloudComponent', () => {
             component.ngOnChanges({ 'appName': change });
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             expect(getClientIdByApplicationNameSpy).toHaveBeenCalled();
         });
-        }));
 
         it('should list users who have access to the app when appName is specified', (done) => {
             const input = getElement<HTMLInputElement>('input');
@@ -529,13 +525,13 @@ describe('PeopleCloudComponent', () => {
     describe('When roles defined', () => {
         let checkUserHasRoleSpy: jasmine.Spy;
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.roles = ['mock-role-1', 'mock-role-2'];
             spyOn(identityService, 'findUsersByName').and.returnValue(of(mockUsers));
             checkUserHasRoleSpy = spyOn(identityService, 'checkUserHasRole').and.returnValue(of(true));
             fixture.detectChanges();
             element = fixture.nativeElement;
-        }));
+        });
 
         it('should filter users if users has any specified role', (done) => {
             fixture.detectChanges();
@@ -594,14 +590,14 @@ describe('PeopleCloudComponent', () => {
     describe('Single Mode with Pre-selected users', () => {
         const changes = new SimpleChange(null, mockPreselectedUsers, false);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.mode = 'single';
             component.preSelectUsers = <any> mockPreselectedUsers;
             component.ngOnChanges({ 'preSelectUsers': changes });
 
             fixture.detectChanges();
             element = fixture.nativeElement;
-        }));
+        });
 
         it('should show only one mat chip with the first preSelectedUser', (done) => {
             fixture.whenStable().then(() => {

lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
@@ -126,12 +126,13 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(count).toBe(1);
     });
 
-    it('should fetch process instance filter by id', async(() => {
+    it('should fetch process instance filter by id', async () => {
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         expect(getProcessFilterByIdSpy).toHaveBeenCalled();
         expect(component.processFilter.name).toEqual('FakeRunningProcess');
         expect(component.processFilter.icon).toEqual('adjust');
@@ -139,65 +140,65 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(component.processFilter.order).toEqual('ASC');
         expect(component.processFilter.sort).toEqual('id');
     });
-    }));
 
-    it('should display filter name as title', async(() => {
+    it('should display filter name as title', async () => {
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.showProcessFilterName = true;
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
 
-        fixture.whenStable().then(() => {
         expect(title).toBeDefined();
         expect(subTitle).toBeDefined();
         expect(title.innerText).toEqual('FakeRunningProcess');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE');
     });
-    }));
 
-    it('should not display filter name as title if the flag is false', async(() => {
+    it('should not display filter name as title if the flag is false', async () => {
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.showProcessFilterName = false;
         component.ngOnChanges({ 'id': processFilterIdChange });
-        fixture.detectChanges();
-        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
         expect(title).toBeNull();
     });
-    }));
 
-    it('should not display mat-spinner if isloading set to false', async(() => {
+    it('should not display mat-spinner if isloading set to false', async () => {
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
 
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeNull();
         expect(title).toBeDefined();
         expect(subTitle).toBeDefined();
         expect(title.innerText).toEqual('FakeRunningProcess');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE');
     });
-    }));
 
-    it('should display mat-spinner if isloading set to true', async(() => {
+    it('should display mat-spinner if isloading set to true', async () => {
         component.isLoading = true;
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-process-filter-loading-margin');
-
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeDefined();
     });
-    }));
 
     describe('EditProcessFilter form', () => {
 
@@ -207,16 +208,14 @@ describe('EditProcessFilterCloudComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should defined editProcessFilter form', () => {
+        it('should create editProcessFilter form', async () => {
-            expect(component.editProcessFilterForm).toBeDefined();
-        });
-
-        it('should create editProcessFilter form', async(() => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const stateController = component.editProcessFilterForm.get('status');
             const sortController = component.editProcessFilterForm.get('sort');
             const orderController = component.editProcessFilterForm.get('order');
+
             expect(component.editProcessFilterForm).toBeDefined();
             expect(stateController).toBeDefined();
             expect(sortController).toBeDefined();
@@ -226,19 +225,19 @@ describe('EditProcessFilterCloudComponent', () => {
             expect(sortController.value).toEqual('id');
             expect(orderController.value).toEqual('ASC');
         });
-        }));
 
         describe('Save & Delete buttons', () => {
-            it('should enable delete button for custom process filters', async(() => {
+            it('should enable delete button for custom process filters', async () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
                 expect(deleteButton.disabled).toEqual(false);
             });
-            }));
         });
 
         describe('SaveAs Button', () => {
@@ -303,12 +302,16 @@ describe('EditProcessFilterCloudComponent', () => {
             });
         });
 
-        it('should display current process filter details', async(() => {
+        it('should display current process filter details', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"]');
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
             const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"]');
@@ -319,10 +322,10 @@ describe('EditProcessFilterCloudComponent', () => {
             expect(sortElement.innerText.trim()).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.ID');
             expect(orderElement.innerText.trim()).toEqual('ADF_CLOUD_PROCESS_FILTERS.DIRECTION.ASCENDING');
         });
-        }));
 
-        it('should display state drop down', async(() => {
+        it('should display state drop down', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
 
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
@@ -331,76 +334,93 @@ describe('EditProcessFilterCloudComponent', () => {
             stateElement.click();
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const statusOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(statusOptions.length).toEqual(5);
         });
-        }));
 
-        it('should display sort drop down', async(() => {
+        it('should display sort drop down', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"] .mat-select-trigger');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortOptions.length).toEqual(4);
         });
-        }));
 
-        it('should display order drop down', async(() => {
+        it('should display order drop down', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"] .mat-select-trigger');
             orderElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const orderOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(orderOptions.length).toEqual(2);
         });
-        }));
     });
 
-    it('should have floating labels when values are present', async(() => {
+    it('should have floating labels when values are present', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const inputLabelsNodes = document.querySelectorAll('mat-form-field');
         inputLabelsNodes.forEach(labelNode => {
             expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
         });
-    }));
+    });
 
-    it('should be able to filter filterProperties when input is defined', async(() => {
+    it('should be able to filter filterProperties when input is defined', async () => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.filterProperties = ['appName', 'processName'];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         expect(component.processFilterProperties.length).toEqual(2);
         expect(component.processFilterProperties[0].key).toEqual('appName');
         expect(component.processFilterProperties[1].key).toEqual('processName');
     });
-    }));
 
     it('should get form attributes', async() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.filterProperties = ['appName', 'completedDateRange'];
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         expect(component.editProcessFilterForm.get('_completedFrom')).toBeDefined();
         expect(component.editProcessFilterForm.get('_completedTo')).toBeDefined();
         expect(component.editProcessFilterForm.get('completedDateType')).toBeDefined();
     });
-    });
 
     it('should get form attributes for suspendedData', async() => {
         const filter = new ProcessFilterCloudModel({
@@ -416,33 +436,46 @@ describe('EditProcessFilterCloudComponent', () => {
         getProcessFilterByIdSpy.and.returnValue(of(filter));
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         component.filterProperties = ['appName', 'suspendedDateRange'];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         expect(component.editProcessFilterForm.get('_suspendedFrom').value).toEqual(new Date(2021, 1, 1).toString());
         expect(component.editProcessFilterForm.get('_suspendedTo').value).toEqual(new Date(2021, 1, 2).toString());
         expect(component.editProcessFilterForm.get('suspendedDateType').value).toEqual(DateCloudFilterType.RANGE);
     });
-    });
 
-    it('should able to build a editProcessFilter form with default properties if input is empty', async(() => {
+    it('should able to build a editProcessFilter form with default properties if input is empty', async () => {
         fixture.detectChanges();
         component.filterProperties = [];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         const stateController = component.editProcessFilterForm.get('status');
         const sortController = component.editProcessFilterForm.get('sort');
         const orderController = component.editProcessFilterForm.get('order');
         const lastModifiedFromController = component.editProcessFilterForm.get('lastModifiedFrom');
         const lastModifiedToController = component.editProcessFilterForm.get('lastModifiedTo');
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(component.processFilterProperties).toBeDefined();
         expect(component.processFilterProperties.length).toEqual(5);
         expect(component.editProcessFilterForm).toBeDefined();
@@ -455,42 +488,46 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(sortController.value).toEqual('id');
         expect(orderController.value).toEqual('ASC');
     });
-    }));
 
-    it('should able to fetch running applications when appName property defined in the input', async(() => {
+    it('should able to fetch running applications when appName property defined in the input', async () => {
-        fixture.detectChanges();
         component.filterProperties = ['appName', 'processName'];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const appController = component.editProcessFilterForm.get('appName');
-        fixture.detectChanges();
+
-        fixture.whenStable().then(() => {
         expect(getRunningApplicationsSpy).toHaveBeenCalled();
         expect(appController).toBeDefined();
         expect(appController.value).toEqual('mock-app-name');
     });
-    }));
 
-    it('should fetch applications when appName and appVersion input is set', async(() => {
+    it('should fetch applications when appName and appVersion input is set', async () => {
-        fixture.detectChanges();
         component.filterProperties = ['appName', 'processName', 'appVersion'];
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const appController = component.editProcessFilterForm.get('appName');
         const appVersionController = component.editProcessFilterForm.get('appVersion');
-        fixture.detectChanges();
+
-        fixture.whenStable().then(() => {
         expect(getRunningApplicationsSpy).toHaveBeenCalled();
         expect(appController).toBeDefined();
         expect(appController.value).toEqual('mock-app-name');
         expect(appVersionController).toBeDefined();
         expect(appVersionController.value).toEqual(1);
     });
-    }));
 
     it('should fetch appVersionMultiple options when appVersionMultiple filter property is set', async () => {
         const mockAppVersion1: ApplicationVersionModel = {
@@ -535,49 +572,60 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(appVersionOptions[1].nativeElement.innerText).toEqual('2');
     });
 
-    it('should fetch process definitions when processDefinitionName filter property is set', async(() => {
+    it('should fetch process definitions when processDefinitionName filter property is set', async () => {
         const processSpy = spyOn(processService, 'getProcessDefinitions').and.returnValue(of([new ProcessDefinitionCloud({ id: 'fake-id', name: 'fake-name' })]));
-        fixture.detectChanges();
         component.filterProperties = ['processDefinitionName'];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const controller = component.editProcessFilterForm.get('processDefinitionName');
         const processDefinitionNamesElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-processDefinitionName"]');
         processDefinitionNamesElement.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(processSpy).toHaveBeenCalled();
         expect(controller).toBeDefined();
         const processDefinitionNamesOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
         expect(processDefinitionNamesOptions[0].nativeElement.value).toBeUndefined();
         expect(processDefinitionNamesOptions[0].nativeElement.innerText).toEqual(component.allProcessDefinitionNamesOption.label);
     });
-    }));
 
-    it('should display default sort properties', async(() => {
+    it('should display default sort properties', async () => {
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
         expansionPanel.click();
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
         sortElement.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
-            fixture.detectChanges();
+
         const sortController = component.editProcessFilterForm.get('sort');
         const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
-            fixture.detectChanges();
         expect(sortController).toBeDefined();
         expect(sortController.value).toEqual('id');
         expect(sortOptions.length).toEqual(4);
     });
-    }));
 
-    it('should display sort properties when sort properties are specified', async(() => {
+    it('should display sort properties when sort properties are specified', async () => {
         getProcessFilterByIdSpy.and.returnValue(of({
             id: 'filter-id',
             processName: 'process-name',
@@ -586,17 +634,28 @@ describe('EditProcessFilterCloudComponent', () => {
             priority: '12'
         }));
         component.sortProperties = ['id', 'name', 'processDefinitionId'];
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
         expansionPanel.click();
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
         sortElement.click();
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         const sortController = component.editProcessFilterForm.get('sort');
         const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
         expect(sortController).toBeDefined();
@@ -605,7 +664,6 @@ describe('EditProcessFilterCloudComponent', () => {
         expect(sortController.value).toBe('my-custom-sort');
         expect(sortOptions.length).toEqual(3);
     });
-    }));
 
     it('should display the process name label for the name property', async () => {
         getProcessFilterByIdSpy.and.returnValue(of({
@@ -618,14 +676,22 @@ describe('EditProcessFilterCloudComponent', () => {
         component.sortProperties = ['name'];
         const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
         component.ngOnChanges({ 'id': processFilterIdChange });
-        fixture.detectChanges();
+
-        const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
-        expansionPanel.click();
-        fixture.detectChanges();
-        const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
-        sortElement.click();
         fixture.detectChanges();
         await fixture.whenStable();
+
+        const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
+        expansionPanel.click();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
+        sortElement.click();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
         expect(sortOptions[0].nativeElement.textContent).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_NAME');
     });
@@ -644,28 +710,37 @@ describe('EditProcessFilterCloudComponent', () => {
             fixture.destroy();
         });
 
-        it('should emit save event and save the filter on click save button', async(() => {
+        it('should emit save event and save the filter on click save button', async () => {
             component.toggleFilterActions = true;
             const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(of([fakeFilter]));
             const saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
 
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             stateOptions[2].nativeElement.click();
             saveButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(saveFilterSpy).toHaveBeenCalled();
             expect(saveSpy).toHaveBeenCalled();
         });
-        }));
 
         it('should emit delete event and delete the filter on click of delete button', async () => {
             component.toggleFilterActions = true;
@@ -689,6 +764,7 @@ describe('EditProcessFilterCloudComponent', () => {
 
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
             deleteButton.click();
+
             fixture.detectChanges();
             await fixture.whenStable();
 
@@ -696,39 +772,47 @@ describe('EditProcessFilterCloudComponent', () => {
             expect(deleteSpy).toHaveBeenCalled();
         });
 
-        it('should emit saveAs event and add filter on click saveAs button', async(() => {
+        it('should emit saveAs event and add filter on click saveAs button', async () => {
             component.toggleFilterActions = true;
             const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
-            const saveAsSpy: jasmine.Spy = spyOn(component.action, 'emit');
+            const saveAsSpy = spyOn(component.action, 'emit');
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-status"] .mat-select-trigger');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             stateOptions[2].nativeElement.click();
-            fixture.detectChanges();
             saveButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(saveAsFilterSpy).toHaveBeenCalled();
             expect(saveAsSpy).toHaveBeenCalled();
             expect(dialog.open).toHaveBeenCalled();
         });
-        }));
 
-        it('should display default filter actions', async(() => {
+        it('should display default filter actions', async () => {
-            fixture.detectChanges();
             component.toggleFilterActions = true;
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
-                fixture.detectChanges();
+
             const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
@@ -738,34 +822,38 @@ describe('EditProcessFilterCloudComponent', () => {
             expect(saveAsButton).toBeDefined();
             expect(deleteButton).toBeDefined();
         });
-        }));
 
-        it('should filter actions when input actions are specified', async(() => {
+        it('should filter actions when input actions are specified', async () => {
-            fixture.detectChanges();
             component.actions = ['save'];
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const processFilterIdChange = new SimpleChange(null, 'mock-process-filter-id', true);
             component.ngOnChanges({ 'id': processFilterIdChange });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(component.processFilterActions).toBeDefined();
             expect(component.actions.length).toEqual(1);
             expect(component.processFilterActions.length).toEqual(1);
         });
-        }));
 
-        it('should display default filter actions when input is empty', async(() => {
+        it('should display default filter actions when input is empty', async () => {
-            fixture.detectChanges();
             component.toggleFilterActions = true;
             component.actions = [];
             component.id = 'mock-process-filter-id';
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
 
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
@@ -775,7 +863,6 @@ describe('EditProcessFilterCloudComponent', () => {
             expect(saveAsButton).toBeDefined();
             expect(deleteButton).toBeDefined();
         });
-        }));
 
         it('should set the correct lastModifiedTo date', (done) => {
             component.appName = 'fake';

lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud.component';
 import { setupTestBed } from '@alfresco/adf-core';
@@ -70,7 +70,7 @@ describe('ProcessFilterDialogCloudComponent', () => {
         expect(titleElement.textContent).toEqual(' ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.TITLE ');
     });
 
-    it('should enable save button if form is valid', async(() => {
+    it('should enable save button if form is valid', async () => {
         fixture.detectChanges();
         const saveButton = fixture.debugElement.nativeElement.querySelector(
             '#adf-save-button-id'
@@ -80,48 +80,52 @@ describe('ProcessFilterDialogCloudComponent', () => {
         );
         inputElement.value = 'My custom Name';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBeFalsy();
     });
-    }));
 
-    it('should disable save button if form is not valid', async(() => {
+    it('should disable save button if form is not valid', async () => {
         fixture.detectChanges();
         const inputElement = fixture.debugElement.nativeElement.querySelector(
             '#adf-filter-name-id'
         );
         inputElement.value = '';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const saveButton = fixture.debugElement.nativeElement.querySelector(
             '#adf-save-button-id'
         );
-            fixture.detectChanges();
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBe(true);
     });
-    }));
 
-    it('should able to close dialog on click of save button if form is valid', async(() => {
+    it('should able to close dialog on click of save button if form is valid', async () => {
         fixture.detectChanges();
         const inputElement = fixture.debugElement.nativeElement.querySelector(
             '#adf-filter-name-id'
         );
         inputElement.value = 'My custom Name';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const saveButton = fixture.debugElement.nativeElement.querySelector(
             '#adf-save-button-id'
         );
-            fixture.detectChanges();
-            saveButton.click();
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBeFalsy();
+
+        saveButton.click();
         expect(component.dialogRef.close).toHaveBeenCalled();
     });
-    }));
 
     it('should able close dialog on click of cancel button', () => {
         component.data = { data: { name: '' } };

lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed, AppConfigService } from '@alfresco/adf-core';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
@@ -62,139 +62,139 @@ describe('ProcessHeaderCloudComponent', () => {
         component.processInstanceId = 'sdfsdf-323';
     });
 
-    it('should render empty component if no process instance details are provided', async(() => {
+    it('should render empty component if no process instance details are provided', async () => {
         component.appName = undefined;
         component.processInstanceId = undefined;
 
         component.ngOnChanges();
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(component.properties).toBeUndefined();
     });
-    }));
 
-    it('should display process instance id', async(() => {
+    it('should display process instance id', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-id"]'));
         expect(formNameEl.nativeElement.value).toBe('00fcc4ab-4290-11e9-b133-0a586460016a');
     });
-    }));
 
-    it('should display name', async(() => {
+    it('should display name', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-name"]'));
         expect(formNameEl.nativeElement.value).toBe('new name');
     });
-    }));
 
-    it('should display placeholder if no name is available', async(() => {
+    it('should display placeholder if no name is available', async () => {
         processInstanceDetailsCloudMock.name = null;
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const valueEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-name"]'));
         expect(valueEl.nativeElement.value).toBe('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.NAME_DEFAULT');
     });
 
-    }));
+    it('should display status', async () => {
-
-    it('should display status', async(() => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
         expect(formNameEl.nativeElement.value).toBe('RUNNING');
     });
-    }));
 
-    it('should display initiator', async(() => {
+    it('should display initiator', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-initiator"]'));
         expect(formNameEl.nativeElement.value).toBe('devopsuser');
     });
-    }));
 
-    it('should display start date', async(() => {
+    it('should display start date', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-startDate"] .adf-property-value'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
     });
-    }));
 
-    it('should display lastModified date', async(() => {
+    it('should display lastModified date', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-lastModified"] .adf-property-value'));
         expect(valueEl.nativeElement.innerText.trim()).toBe('Mar 9, 2019');
     });
-    }));
 
-    it('should display parentId', async(() => {
+    it('should display parentId', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentId"]'));
         expect(formNameEl.nativeElement.value).toBe('00fcc4ab-4290-11e9-b133-0a586460016b');
     });
-    }));
 
-    it('should display default value when parentId is not available', async(() => {
+    it('should display default value when parentId is not available', async () => {
         processInstanceDetailsCloudMock.parentId = null;
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentId"]'));
         expect(formNameEl.nativeElement.value).toBe('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.NONE');
     });
-    }));
 
-    it('should display businessKey', async(() => {
+    it('should display businessKey', async () => {
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-businessKey"]'));
         expect(formNameEl.nativeElement.value).toBe('MyBusinessKey');
     });
-    }));
 
-    it('should display default value when businessKey is not available', async(() => {
+    it('should display default value when businessKey is not available', async () => {
         processInstanceDetailsCloudMock.businessKey = null;
         component.ngOnChanges();
-        fixture.detectChanges();
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
         const formNameEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-businessKey"]'));
         expect(formNameEl.nativeElement.value).toBe('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.NONE');
     });
-    }));
 
     describe('Config Filtering', () => {
 
-        it('should show only the properties from the configuration file', async(() => {
+        it('should show only the properties from the configuration file', async () => {
             spyOn(appConfigService, 'get').and.returnValue(['name', 'status']);
             component.ngOnChanges();
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
             expect(propertyList).toBeDefined();
             expect(propertyList).not.toBeNull();
@@ -202,14 +202,14 @@ describe('ProcessHeaderCloudComponent', () => {
             expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.NAME');
             expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.STATUS');
         });
-        }));
 
-        it('should show all the default properties if there is no configuration', async(() => {
+        it('should show all the default properties if there is no configuration', async () => {
             spyOn(appConfigService, 'get').and.returnValue(null);
             component.ngOnChanges();
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
             expect(propertyList).toBeDefined();
             expect(propertyList).not.toBeNull();
@@ -217,6 +217,5 @@ describe('ProcessHeaderCloudComponent', () => {
             expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.ID');
             expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_PROCESS_HEADER.PROPERTIES.NAME');
         });
-        }));
     });
 });

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { Component, SimpleChange, ViewChild } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
     AppConfigService,
@@ -419,7 +419,7 @@ describe('ProcessListCloudComponent', () => {
             fixtureEmpty.destroy();
         });
 
-        it('should render the custom template', async((done) => {
+        it('should render the custom template', fakeAsync((done) => {
             const emptyList = {list: {entries: []}};
             spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(emptyList));
             component.success.subscribe(() => {

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleChange, DebugElement } from '@angular/core';
-import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
 import { StartProcessCloudService } from '../services/start-process-cloud.service';
@@ -141,8 +141,7 @@ describe('StartProcessCloudComponent', () => {
             });
         }));
 
-        it('should create a process instance if the selection is valid', async(() => {
+        it('should create a process instance if the selection is valid', fakeAsync(() => {
-
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
             component.name = 'My new process';
             component.processDefinitionName = 'process';
@@ -178,29 +177,29 @@ describe('StartProcessCloudComponent', () => {
             });
         }));
 
-        it('should have start button disabled when no process is selected', async(() => {
+        it('should have start button disabled when no process is selected', async () => {
             component.name = '';
             component.processDefinitionName = '';
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const startBtn = fixture.nativeElement.querySelector('#button-start');
             expect(startBtn.disabled).toBe(true);
             expect(component.isProcessFormValid()).toBe(false);
         });
-        }));
 
-        it('should have start button disabled when name not filled out', async(() => {
+        it('should have start button disabled when name not filled out', async () => {
             component.name = '';
             component.processDefinitionName = 'processwithoutform2';
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const startBtn = fixture.nativeElement.querySelector('#button-start');
             expect(startBtn.disabled).toBe(true);
             expect(component.isProcessFormValid()).toBe(false);
         });
-        }));
     });
 
     describe('start a process with start form', () => {
@@ -445,40 +444,41 @@ describe('StartProcessCloudComponent', () => {
             });
         });
 
-        it('should indicate an error to the user if process defs cannot be loaded', async(() => {
+        it('should indicate an error to the user if process defs cannot be loaded', async () => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(throwError({}));
             const change = new SimpleChange('myApp', 'myApp1', true);
             component.ngOnChanges({ appName: change });
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const errorEl = fixture.nativeElement.querySelector('#error-message');
             expect(errorEl.innerText.trim()).toBe('ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.LOAD_PROCESS_DEFS');
         });
-        }));
 
-        it('should show no process available message when no process definition is loaded', async(() => {
+        it('should show no process available message when no process definition is loaded', async () => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([]));
             const change = new SimpleChange('myApp', 'myApp1', true);
             component.ngOnChanges({ appName: change });
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const noProcessElement = fixture.nativeElement.querySelector('#no-process-message');
             expect(noProcessElement).not.toBeNull('Expected no available process message to be present');
             expect(noProcessElement.innerText.trim()).toBe('ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.NO_PROCESS_DEFINITIONS');
         });
-        }));
 
-        it('should select automatically the processDefinition if the app contain only one', async(() => {
+        it('should select automatically the processDefinition if the app contain only one', async () => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([fakeProcessDefinitions[0]]));
             const change = new SimpleChange('myApp', 'myApp1', true);
             component.ngOnChanges({ appName: change });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(component.processForm.controls['processDefinition'].value).toBe(JSON.parse(JSON.stringify(fakeProcessDefinitions[0])).name);
         });
-        }));
 
         it('should select automatically the form when processDefinition is selected as default', fakeAsync(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of([fakeProcessDefinitions[0]]));
@@ -501,17 +501,18 @@ describe('StartProcessCloudComponent', () => {
             });
         }));
 
-        it('should not select automatically any processDefinition if the app contain multiple process and does not have any processDefinition as input', async(() => {
+        it('should not select automatically any processDefinition if the app contain multiple process and does not have any processDefinition as input', async () => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
             component.appName = 'myApp';
             component.ngOnChanges({});
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(component.processPayloadCloud.name).toBeNull();
         });
-        }));
 
-        it('should select the right process when the processKey begins with the name', async(() => {
+        it('should select the right process when the processKey begins with the name', fakeAsync(() => {
             getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
             component.name = 'My new process';
             component.processDefinitionName = 'process';
@@ -525,45 +526,48 @@ describe('StartProcessCloudComponent', () => {
 
         describe('dropdown', () => {
 
-            it('should hide the process dropdown button if showSelectProcessDropdown is false', async(() => {
+            it('should hide the process dropdown button if showSelectProcessDropdown is false', async () => {
                 fixture.detectChanges();
                 getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
                 component.appName = 'myApp';
                 component.showSelectProcessDropdown = false;
                 component.ngOnChanges({});
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
                 expect(selectElement).toBeNull();
             });
-            }));
 
-            it('should show the process dropdown button if showSelectProcessDropdown is false', async(() => {
+            it('should show the process dropdown button if showSelectProcessDropdown is false', async () => {
                 fixture.detectChanges();
                 getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
                 component.appName = 'myApp';
                 component.processDefinitionName = 'NewProcess 2';
                 component.showSelectProcessDropdown = true;
                 component.ngOnChanges({});
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
                 expect(selectElement).not.toBeNull();
             });
-            }));
 
-            it('should show the process dropdown button by default', async(() => {
+            it('should show the process dropdown button by default', async () => {
                 fixture.detectChanges();
                 getDefinitionsSpy = getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
                 component.appName = 'myApp';
                 component.processDefinitionName = 'NewProcess 2';
                 component.ngOnChanges({});
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const selectElement = fixture.nativeElement.querySelector('button#adf-select-process-dropdown');
                 expect(selectElement).not.toBeNull();
             });
-            }));
         });
     });
 
@@ -571,53 +575,57 @@ describe('StartProcessCloudComponent', () => {
 
         const change = new SimpleChange('myApp', 'myApp1', false);
 
-        beforeEach(async(() => {
+        beforeEach(() => {
             component.appName = 'myApp';
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                getDefinitionsSpy.calls.reset();
         });
-        }));
 
-        it('should have labels for process name and type', async(() => {
+        it('should have labels for process name and type', async () => {
             component.appName = 'myApp';
             component.processDefinitionName = 'NewProcess 2';
             component.ngOnChanges({ appName: firstChange });
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container mat-label');
             expect(inputLabelsNodes.length).toBe(2);
-        }));
+        });
 
-        it('should have floating labels for process name and type', async(() => {
+        it('should have floating labels for process name and type', async () => {
             component.appName = 'myApp';
             component.processDefinitionName = 'NewProcess 2';
             component.ngOnChanges({});
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container');
             inputLabelsNodes.forEach(labelNode => {
                 expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('always');
             });
-        }));
+        });
 
-        it('should reload processes when appName input changed', async(() => {
+        it('should reload processes when appName input changed', async () => {
             component.ngOnChanges({ appName: firstChange });
             component.ngOnChanges({ appName: change });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(getDefinitionsSpy).toHaveBeenCalledWith('myApp1');
         });
-        }));
 
-        it('should reload processes ONLY when appName input changed', async(() => {
+        it('should reload processes ONLY when appName input changed', async () => {
             component.ngOnChanges({ appName: firstChange });
             fixture.detectChanges();
+
             component.ngOnChanges({ maxNameLength: new SimpleChange(0, 2, false) });
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(getDefinitionsSpy).toHaveBeenCalledTimes(1);
         });
-        }));
 
         it('should get current processDef', () => {
             component.ngOnChanges({ appName: change });
@@ -643,15 +651,16 @@ describe('StartProcessCloudComponent', () => {
             expect(component.filteredProcesses.length).toEqual(1);
         }));
 
-        it('should display the process definion field as empty if are more than one process definition in the list', async(() => {
+        it('should display the process definion field as empty if are more than one process definition in the list', async () => {
             getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
             component.ngOnChanges({ appName: change });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const processDefinitionInput = fixture.nativeElement.querySelector('#processDefinitionName');
             expect(processDefinitionInput.textContent).toEqual('');
         });
-        }));
     });
 
     describe('start process', () => {
@@ -663,23 +672,20 @@ describe('StartProcessCloudComponent', () => {
             component.ngOnChanges({});
         });
 
-        it('should call service to start process if required fields provided', async(() => {
+        it('should call service to start process if required fields provided', () => {
             component.currentCreatedProcess = fakeProcessInstance;
             component.startProcess();
-            fixture.whenStable().then(() => {
             expect(startProcessSpy).toHaveBeenCalled();
         });
-        }));
 
-        it('should call service to start process with the correct parameters', async(() => {
+        it('should call service to start process with the correct parameters', () => {
             component.currentCreatedProcess = fakeProcessInstance;
             component.startProcess();
-            fixture.whenStable().then(() => {
+
             expect(startProcessSpy).toHaveBeenCalledWith(component.appName, fakeProcessInstance.id, component.processPayloadCloud);
         });
-        }));
 
-        it('should call service to start process with the variables setted', async(() => {
+        it('should call service to start process with the variables setted', async () => {
             const inputProcessVariable: Map<string, object>[] = [];
             inputProcessVariable['name'] = { value: 'Josh' };
 
@@ -687,44 +693,42 @@ describe('StartProcessCloudComponent', () => {
             component.currentCreatedProcess = fakeProcessInstance;
 
             component.startProcess();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
             expect(component.processPayloadCloud.variables).toBe(inputProcessVariable);
         });
-        }));
 
-        it('should output start event when process started successfully', async(() => {
+        it('should output start event when process started successfully', () => {
             const emitSpy = spyOn(component.success, 'emit');
             component.currentCreatedProcess = fakeProcessInstance;
             component.startProcess();
-            fixture.whenStable().then(() => {
+
             expect(emitSpy).toHaveBeenCalledWith(fakeProcessInstance);
         });
-        }));
 
-        it('should throw error event when process cannot be started', async(() => {
+        it('should throw error event when process cannot be started', async () => {
             const errorSpy = spyOn(component.error, 'emit');
             const error = { message: 'My error' };
             startProcessSpy = startProcessSpy.and.returnValue(throwError(error));
             component.currentCreatedProcess = fakeProcessInstance;
             component.startProcess();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
             expect(errorSpy).toHaveBeenCalledWith(error);
         });
-        }));
 
-        it('should indicate an error to the user if process cannot be started', async(() => {
+        it('should indicate an error to the user if process cannot be started', async () => {
             getDefinitionsSpy.and.returnValue(of(fakeProcessDefinitions));
             const change = new SimpleChange('myApp', 'myApp1', true);
             component.currentCreatedProcess = fakeProcessInstance;
             component.ngOnChanges({ appName: change });
             startProcessSpy = startProcessSpy.and.returnValue(throwError({}));
             component.startProcess();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const errorEl = fixture.nativeElement.querySelector('#error-message');
             expect(errorEl.innerText.trim()).toBe('ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.START');
         });
-        }));
 
         it('should emit start event when start select a process and add a name', (done) => {
             const disposableStart = component.success.subscribe(() => {
@@ -761,17 +765,23 @@ describe('StartProcessCloudComponent', () => {
             expect(processInstanceName.valid).toBeTruthy();
         });
 
-        it('should have start button disabled process name has a space as the first or last character.', async(() => {
+        it('should have start button disabled process name has a space as the first or last character.', async () => {
             component.appName = 'myApp';
             component.processDefinitionName = ' Space in the beginning';
             component.ngOnChanges({ appName: firstChange });
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const startBtn = fixture.nativeElement.querySelector('#button-start');
             expect(startBtn.disabled).toBe(true);
             component.processDefinitionName = 'Space in the end ';
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(startBtn.disabled).toBe(true);
-        }));
+        });
 
         it('should emit processDefinitionSelection event when a process definition is selected', (done) => {
             component.appName = 'myApp';

lib/process-services-cloud/src/lib/task/services/task-cloud.service.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { setupTestBed, IdentityUserService, TranslationService, AlfrescoApiService } from '@alfresco/adf-core';
 import { TaskCloudService } from './task-cloud.service';
 import { taskCompleteCloudMock } from '../task-header/mocks/fake-complete-task.mock';
@@ -34,6 +34,7 @@ describe('Task Cloud Service', () => {
 
     function returnFakeTaskCompleteResults(): any {
         return {
+            reply: () => {},
             oauth2Auth: {
                 callCustomApi : () => {
                     return Promise.resolve(taskCompleteCloudMock);
@@ -47,6 +48,7 @@ describe('Task Cloud Service', () => {
 
     function returnFakeTaskCompleteResultsError(): any {
         return {
+            reply: () => {},
             oauth2Auth: {
                 callCustomApi : () => {
                     return Promise.reject(taskCompleteCloudMock);
@@ -60,6 +62,7 @@ describe('Task Cloud Service', () => {
 
     function returnFakeTaskDetailsResults(): any {
         return {
+            reply: () => {},
             oauth2Auth: {
                 callCustomApi : () => {
                     return Promise.resolve(fakeTaskDetailsCloud);
@@ -73,6 +76,7 @@ describe('Task Cloud Service', () => {
 
     function returnFakeCandidateUsersResults(): any {
         return {
+            reply: () => {},
             oauth2Auth: {
                 callCustomApi : () => {
                     return Promise.resolve(['mockuser1', 'mockuser2', 'mockuser3']);
@@ -86,6 +90,7 @@ describe('Task Cloud Service', () => {
 
     function returnFakeCandidateGroupResults(): any {
         return {
+            reply: () => {},
             oauth2Auth: {
                 callCustomApi : () => {
                     return Promise.resolve(['mockgroup1', 'mockgroup2', 'mockgroup3']);
@@ -104,15 +109,14 @@ describe('Task Cloud Service', () => {
         ]
     });
 
-    beforeEach(async(() => {
+    beforeEach(() => {
         alfrescoApiMock = TestBed.inject(AlfrescoApiService);
         identityUserService = TestBed.inject(IdentityUserService);
         translateService = TestBed.inject(TranslationService);
         service = TestBed.inject(TaskCloudService);
         spyOn(translateService, 'instant').and.callFake((key) => key ? `${key}_translated` : null);
         spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(cloudMockUser);
-
+    });
-    }));
 
     it('should complete a task', (done) => {
         const appName = 'simple-app';
@@ -132,11 +136,13 @@ describe('Task Cloud Service', () => {
         const appName = 'simple-app';
         const taskId = '68d54a8f';
 
-        service.completeTask(appName, taskId).toPromise().then(() => {
+        service.completeTask(appName, taskId).subscribe(
-        }, (error) => {
+            () => {},
-            expect(error).toBeDefined();
+            (err) => {
+                expect(err).toBeDefined();
                 done();
-        });
+            }
+        );
     });
 
     it('should canCompleteTask', () => {
@@ -159,7 +165,7 @@ describe('Task Cloud Service', () => {
         expect(isAssigneePropertyClickable).toEqual(true);
     });
 
-    it('should complete task with owner as null', async(() => {
+    it('should complete task with owner as null', (done) => {
         const appName = 'simple-app';
         const taskId = '68d54a8f';
         const canCompleteTaskResult = service.canCompleteTask(emptyOwnerTaskDetailsCloudMock);
@@ -171,8 +177,9 @@ describe('Task Cloud Service', () => {
             expect(res).not.toBeNull();
             expect(res.entry.appName).toBe('simple-app');
             expect(res.entry.id).toBe('68d54a8f');
+            done();
+        });
     });
-    }));
 
     it('should return the task details when claiming a task', (done) => {
         const appName = 'taskp-app';

lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed, IdentityUserService, AlfrescoApiService, IdentityUserModel } from '@alfresco/adf-core';
 import { StartTaskCloudComponent } from './start-task-cloud.component';
 import { of, throwError } from 'rxjs';
@@ -58,7 +58,7 @@ describe('StartTaskCloudComponent', () => {
         schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
     });
 
-    beforeEach(async (() => {
+    beforeEach(() => {
         fixture = TestBed.createComponent(StartTaskCloudComponent);
         component = fixture.componentInstance;
         element = fixture.nativeElement;
@@ -72,53 +72,62 @@ describe('StartTaskCloudComponent', () => {
         spyOn(identityService, 'getCurrentUserInfo').and.returnValue(mockUser);
         spyOn(formDefinitionSelectorCloudService, 'getForms').and.returnValue(of([]));
         fixture.detectChanges();
-    }));
+    });
 
     describe('create task', () => {
 
-        it('should create new task when start button is clicked', async(() => {
+        it('should create new task when start button is clicked', async () => {
             const successSpy = spyOn(component.success, 'emit');
             component.taskForm.controls['name'].setValue('fakeName');
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(createNewTaskSpy).toHaveBeenCalled();
             expect(successSpy).toHaveBeenCalled();
         });
-        }));
 
-        it('should send on success event when the task is started', async(() => {
+        it('should send on success event when the task is started', async () => {
             const successSpy = spyOn(component.success, 'emit');
             component.taskForm.controls['name'].setValue('fakeName');
             component.assigneeName = 'fake-assignee';
+
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            await fixture.whenStable();
+
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(successSpy).toHaveBeenCalledWith(taskDetailsMock);
         });
-        }));
 
-        it('should send on success event when only name is given', async(() => {
+        it('should send on success event when only name is given', async () => {
             const successSpy = spyOn(component.success, 'emit');
             component.taskForm.controls['name'].setValue('fakeName');
+
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            await fixture.whenStable();
+
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(successSpy).toHaveBeenCalled();
         });
-        }));
 
         it('should not emit success event when data not present', () => {
             const successSpy = spyOn(component.success, 'emit');
             component.taskForm.controls['name'].setValue('');
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
             expect(createNewTaskSpy).not.toHaveBeenCalled();
             expect(successSpy).not.toHaveBeenCalled();
@@ -128,10 +137,10 @@ describe('StartTaskCloudComponent', () => {
             component.taskForm.controls['name'].setValue('fakeName');
             component.appName = 'fakeAppName';
             fixture.detectChanges();
-            const assigneeInput = <HTMLElement> element.querySelector('input.adf-cloud-input');
+            const assigneeInput = element.querySelector<HTMLElement>('input.adf-cloud-input');
             assigneeInput.nodeValue = 'a';
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -145,7 +154,7 @@ describe('StartTaskCloudComponent', () => {
             component.taskForm.controls['name'].setValue('fakeName');
             component.appName = 'fakeAppName';
             fixture.detectChanges();
-            const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+            const createTaskButton = element.querySelector<HTMLElement>('#button-start');
             createTaskButton.click();
             fixture.detectChanges();
             fixture.whenStable().then(() => {
@@ -200,10 +209,10 @@ describe('StartTaskCloudComponent', () => {
         createNewTaskSpy.and.returnValue(throwError({}));
         component.appName = 'fakeAppName';
         fixture.detectChanges();
-        const assigneeInput = <HTMLElement> element.querySelector('input.adf-cloud-input');
+        const assigneeInput = element.querySelector<HTMLElement>('input.adf-cloud-input');
         assigneeInput.nodeValue = 'a';
         fixture.detectChanges();
-        const createTaskButton = <HTMLElement> element.querySelector('#button-start');
+        const createTaskButton = element.querySelector<HTMLElement>('#button-start');
         createTaskButton.click();
         fixture.detectChanges();
         expect(errorSpy).toHaveBeenCalled();

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-service-task-filter-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { setupTestBed } from '@alfresco/adf-core';
@@ -94,7 +94,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
         });
     });
 
-    it('should fetch process definitions when processDefinitionName filter property is set', async(() => {
+    it('should fetch process definitions when processDefinitionName filter property is set', async () => {
         const processSpy = spyOn(taskService, 'getProcessDefinitions').and.returnValue(of([
             new ProcessDefinitionCloud({ id: 'fake-id', name: 'fake-name' })
         ]));
@@ -105,62 +105,66 @@ describe('EditServiceTaskFilterCloudComponent', () => {
         component.ngOnChanges({ 'id': taskFilterIdChange });
         fixture.detectChanges();
         const controller = component.editTaskFilterForm.get('processDefinitionName');
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(processSpy).toHaveBeenCalled();
         expect(controller).toBeDefined();
     });
-    }));
 
-    it('should display filter name as title', async(() => {
+    it('should display filter name as title', async () => {
         const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
         expect(title.innerText).toEqual('FakeInvolvedTasks');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
-    }));
+    });
 
-    it('should not display filter name if showFilterName is false', async(() => {
+    it('should not display filter name if showFilterName is false', async () => {
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.showTaskFilterName = false;
         component.ngOnChanges({ 'id': taskFilterIdChange });
-        fixture.detectChanges();
-        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         expect(title).toBeNull();
     });
-    }));
 
-    it('should not display mat-spinner if isloading set to false', async(() => {
+    it('should not display mat-spinner if isloading set to false', async () => {
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
 
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeNull();
         expect(title.innerText).toEqual('FakeInvolvedTasks');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
     });
-    }));
 
-    it('should display mat-spinner if isloading set to true', async(() => {
+    it('should display mat-spinner if isloading set to true', async () => {
         component.isLoading = true;
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
-
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeDefined();
     });
-    }));
 
     describe('EditServiceTaskFilter form', () => {
 
@@ -170,13 +174,10 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should defined editTaskFilter form ', () => {
+        it('should create editTaskFilter form with default user task properties', async () => {
-            expect(component.editTaskFilterForm).toBeDefined();
-        });
-
-        it('should create editTaskFilter form with default user task properties', async(() => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const appNameController = component.editTaskFilterForm.get('appName');
             const statusController = component.editTaskFilterForm.get('status');
             const sortController = component.editTaskFilterForm.get('sort');
@@ -189,10 +190,9 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(orderController.value).toBe('ASC');
             expect(activityNameController.value).toBe('fake-activity');
         });
-        }));
 
         describe('Save & Delete buttons', () => {
-            it('should disable save and delete button for default task filters', async(() => {
+            it('should disable save and delete button for default task filters', async () => {
                 getTaskFilterSpy.and.returnValue(of({
                     name: 'ADF_CLOUD_SERVICE_TASK_FILTERS.ALL_SERVICE_TASKS',
                     id: 'filter-id',
@@ -210,16 +210,17 @@ describe('EditServiceTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
                 expect(deleteButton.disabled).toBe(true);
             });
-            }));
 
-            it('should enable delete button for custom task filters', async(() => {
+            it('should enable delete button for custom task filters', async () => {
                 const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
                 component.ngOnChanges({ 'id': taskFilterIdChange });
                 fixture.detectChanges();
@@ -227,14 +228,15 @@ describe('EditServiceTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
                 expect(deleteButton.disabled).toBe(false);
             });
-            }));
 
             it('should enable save button if the filter is changed for custom task filters', (done) => {
                 const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
@@ -263,20 +265,21 @@ describe('EditServiceTaskFilterCloudComponent', () => {
                 fixture.detectChanges();
             });
 
-            it('should disable save button if the filter is not changed for custom filter', async(() => {
+            it('should disable save button if the filter is not changed for custom filter', async () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
             });
-            }));
         });
 
         describe('SaveAs button', () => {
-            it('should disable saveAs button if the process filter is not changed for default filter', async(() => {
+            it('should disable saveAs button if the process filter is not changed for default filter', async () => {
                 getTaskFilterSpy.and.returnValue(of({
                     name: 'ADF_CLOUD_TASK_FILTERS.MY_TASKS',
                     id: 'filter-id',
@@ -294,23 +297,25 @@ describe('EditServiceTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
                 expect(saveButton.disabled).toEqual(true);
             });
-            }));
 
-            it('should disable saveAs button if the process filter is not changed for custom filter', async(() => {
+            it('should disable saveAs button if the process filter is not changed for custom filter', async () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
                 expect(saveButton.disabled).toEqual(true);
             });
-            }));
 
             it('should enable saveAs button if the filter values are changed for default filter', (done) => {
                 getTaskFilterSpy.and.returnValue(of({
@@ -375,12 +380,16 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         });
 
-        it('should display current task filter details', async(() => {
+        it('should display current task filter details', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
             const assigneeElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-assignee"]');
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
@@ -390,16 +399,19 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(sortElement.textContent.trim()).toBe('id');
             expect(orderElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.DIRECTION.ASCENDING');
         });
-        }));
 
-        it('should display all the statuses that are defined in the task filter', async(() => {
+        it('should display all the statuses that are defined in the task filter', async () => {
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
 
             const statusOptions = fixture.debugElement.queryAll(By.css('[data-automation-id="adf-cloud-edit-task-property-options-status"]'));
 
@@ -408,55 +420,71 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(statusOptions[2].nativeElement.textContent.trim()).toBe('ADF_CLOUD_SERVICE_TASK_FILTERS.STATUS.COMPLETED');
             expect(statusOptions[3].nativeElement.textContent.trim()).toBe('ADF_CLOUD_SERVICE_TASK_FILTERS.STATUS.CANCELLED');
             expect(statusOptions[4].nativeElement.textContent.trim()).toBe('ADF_CLOUD_SERVICE_TASK_FILTERS.STATUS.ERROR');
-        }));
+        });
 
-        it('should display sort drop down', async(() => {
+        it('should display sort drop down', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortOptions.length).toEqual(4);
         });
-        }));
 
-        it('should display order drop down', async(() => {
+        it('should display order drop down', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
             orderElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const orderOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(orderOptions.length).toEqual(2);
         });
-        }));
 
-        it('should have floating labels when values are present', async(() => {
+        it('should have floating labels when values are present', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const inputLabelsNodes = document.querySelectorAll('mat-form-field');
             inputLabelsNodes.forEach(labelNode => {
                 expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('auto');
             });
-        }));
+        });
 
-        it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
+        it('should able to build a editTaskFilter form with default properties if input is empty', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             component.filterProperties = [];
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateController = component.editTaskFilterForm.get('status');
             const sortController = component.editTaskFilterForm.get('sort');
             const orderController = component.editTaskFilterForm.get('order');
             const activityNameController = component.editTaskFilterForm.get('activityName');
-            fixture.whenStable().then(() => {
+
-                fixture.detectChanges();
             expect(component.taskFilterProperties.length).toBe(5);
             expect(component.editTaskFilterForm).toBeDefined();
             expect(stateController.value).toBe('COMPLETED');
@@ -464,26 +492,26 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(orderController.value).toBe('ASC');
             expect(activityNameController.value).toBe('fake-activity');
         });
-        }));
 
-        it('should able to fetch running applications when appName property defined in the input', async(() => {
+        it('should able to fetch running applications when appName property defined in the input', async () => {
             component.filterProperties = ['appName', 'processInstanceId', 'priority'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             const appController = component.editTaskFilterForm.get('appName');
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(getRunningApplicationsSpy).toHaveBeenCalled();
             expect(appController).toBeDefined();
             expect(appController.value).toBe('mock-app-name');
         });
-        }));
     });
 
     describe('sort properties', () => {
 
-        it('should display default sort properties', async(() => {
+        it('should display default sort properties', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
@@ -492,16 +520,17 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortController.value).toBe('id');
             expect(sortOptions.length).toEqual(4);
         });
-        }));
 
-        it('should display sort properties when sort properties are specified', async(() => {
+        it('should display sort properties when sort properties are specified', async () => {
             component.sortProperties = ['id', 'name', 'processInstanceId'];
             getTaskFilterSpy.and.returnValue(of({
                 sort: 'my-custom-sort',
@@ -517,17 +546,18 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(component.sortProperties.length).toBe(3);
             expect(sortController.value).toBe('my-custom-sort');
             expect(sortOptions.length).toEqual(3);
         });
-        }));
 
-        it('should display default sort properties if input is empty', async(() => {
+        it('should display default sort properties if input is empty', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
@@ -538,27 +568,30 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortController.value).toBe('id');
             expect(sortOptions.length).toEqual(4);
         });
-        }));
     });
 
     describe('filter actions', () => {
 
-        it('should display default filter actions', async(() => {
+        it('should display default filter actions', async () => {
             component.toggleFilterActions = true;
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
@@ -568,9 +601,8 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(saveAsButton.disabled).toBe(true);
             expect(deleteButton.disabled).toBe(false);
         });
-        }));
 
-        it('should display filter actions when input actions are specified', async(() => {
+        it('should display filter actions when input actions are specified', async () => {
             component.actions = ['save'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
@@ -580,8 +612,10 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             expect(component.taskFilterActions.map(action => action.actionType)).toEqual(['save']);
             expect(component.taskFilterActions.length).toBe(1);
@@ -591,7 +625,6 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             expect(saveAsButton).toBeFalsy();
             expect(deleteButton).toBeFalsy();
         });
-        }));
     });
 
     describe('edit filter actions', () => {
@@ -603,7 +636,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             spyOn(component.action, 'emit').and.callThrough();
         });
 
-        it('should emit save event and save the filter on click save button', async(() => {
+        it('should emit save event and save the filter on click save button', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'updateFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -626,7 +659,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should emit delete event and delete the filter on click of delete button', async(() => {
+        it('should emit delete event and delete the filter on click of delete button', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -646,7 +679,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should emit saveAs event and add filter on click saveAs button', async(() => {
+        it('should emit saveAs event and add filter on click saveAs button', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'addFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -670,7 +703,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should call restore default filters service on deletion of last filter', async(() => {
+        it('should call restore default filters service on deletion of last filter', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of([]));
             const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));
@@ -692,7 +725,7 @@ describe('EditServiceTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should not call restore default filters service on deletion of first filter', async(() => {
+        it('should not call restore default filters service on deletion of first filter', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of([{ name: 'mock-filter-name' }]));
             const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));

lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/edit-task-filter-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 
@@ -112,7 +112,7 @@ describe('EditTaskFilterCloudComponent', () => {
         });
     });
 
-    it('should fetch process definitions when processDefinitionName filter property is set', async(() => {
+    it('should fetch process definitions when processDefinitionName filter property is set', async () => {
         const processSpy = spyOn(taskService, 'getProcessDefinitions').and.returnValue(of([new ProcessDefinitionCloud({ id: 'fake-id', name: 'fake-name' })]));
         fixture.detectChanges();
         component.filterProperties = ['processDefinitionName'];
@@ -121,62 +121,66 @@ describe('EditTaskFilterCloudComponent', () => {
         component.ngOnChanges({ 'id': taskFilterIdChange });
         fixture.detectChanges();
         const controller = component.editTaskFilterForm.get('processDefinitionName');
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         expect(processSpy).toHaveBeenCalled();
         expect(controller).toBeDefined();
     });
-    }));
 
-    it('should display filter name as title', async(() => {
+    it('should display filter name as title', async () => {
         const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
         expect(title.innerText).toEqual('FakeInvolvedTasks');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
-    }));
+    });
 
-    it('should not display filter name if showFilterName is false', async(() => {
+    it('should not display filter name if showFilterName is false', async () => {
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.showTaskFilterName = false;
         component.ngOnChanges({ 'id': taskFilterIdChange });
-        fixture.detectChanges();
-        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
 
-        fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         expect(title).toBeNull();
     });
-    }));
 
-    it('should not display mat-spinner if isloading set to false', async(() => {
+    it('should not display mat-spinner if isloading set to false', async () => {
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
         const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
 
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeNull();
         expect(title.innerText).toEqual('FakeInvolvedTasks');
         expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_TASK_FILTER.TITLE');
     });
-    }));
 
-    it('should display mat-spinner if isloading set to true', async(() => {
+    it('should display mat-spinner if isloading set to true', async () => {
         component.isLoading = true;
         const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
         component.ngOnChanges({ 'id': taskFilterIdChange });
+
         fixture.detectChanges();
+        await fixture.whenStable();
 
         const matSpinnerElement = fixture.debugElement.nativeElement.querySelector('.adf-cloud-edit-task-filter-loading-margin');
-
-        fixture.whenStable().then(() => {
         expect(matSpinnerElement).toBeDefined();
     });
-    }));
 
     describe('EditTaskFilter form', () => {
 
@@ -186,13 +190,10 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
         });
 
-        it('should defined editTaskFilter form ', () => {
+        it('should create editTaskFilter form with default user task properties', async () => {
-            expect(component.editTaskFilterForm).toBeDefined();
-        });
-
-        it('should create editTaskFilter form with default user task properties', async(() => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const stateController = component.editTaskFilterForm.get('status');
             const sortController = component.editTaskFilterForm.get('sort');
             const orderController = component.editTaskFilterForm.get('order');
@@ -204,10 +205,9 @@ describe('EditTaskFilterCloudComponent', () => {
             expect(orderController.value).toBe('ASC');
             expect(assigneeController.value).toBe('fake-involved');
         });
-        }));
 
         describe('Save & Delete buttons', () => {
-            it('should disable save and delete button for default task filters', async(() => {
+            it('should disable save and delete button for default task filters', async () => {
                 getTaskFilterSpy.and.returnValue(of({
                     name: 'ADF_CLOUD_TASK_FILTERS.MY_TASKS',
                     id: 'filter-id',
@@ -225,16 +225,17 @@ describe('EditTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
                 expect(deleteButton.disabled).toBe(true);
             });
-            }));
 
-            it('should enable delete button for custom task filters', async(() => {
+            it('should enable delete button for custom task filters', async () => {
                 const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
                 component.ngOnChanges({ 'id': taskFilterIdChange });
                 fixture.detectChanges();
@@ -242,14 +243,15 @@ describe('EditTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
                 const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
                 expect(deleteButton.disabled).toBe(false);
             });
-            }));
 
             it('should enable save button if the filter is changed for custom task filters', (done) => {
                 const taskFilterIdChange = new SimpleChange(null, 'mock-task-filter-id', true);
@@ -278,20 +280,21 @@ describe('EditTaskFilterCloudComponent', () => {
                 fixture.detectChanges();
             });
 
-            it('should disable save button if the filter is not changed for custom filter', async(() => {
+            it('should disable save button if the filter is not changed for custom filter', async () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(true);
             });
-            }));
         });
 
         describe('SaveAs button', () => {
-            it('should disable saveAs button if the process filter is not changed for default filter', async(() => {
+            it('should disable saveAs button if the process filter is not changed for default filter', async () => {
                 getTaskFilterSpy.and.returnValue(of({
                     name: 'ADF_CLOUD_TASK_FILTERS.MY_TASKS',
                     id: 'filter-id',
@@ -309,23 +312,25 @@ describe('EditTaskFilterCloudComponent', () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
                 expect(saveButton.disabled).toEqual(true);
             });
-            }));
 
-            it('should disable saveAs button if the process filter is not changed for custom filter', async(() => {
+            it('should disable saveAs button if the process filter is not changed for custom filter', async () => {
                 component.toggleFilterActions = true;
                 const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
                 expansionPanel.click();
+
                 fixture.detectChanges();
-                fixture.whenStable().then(() => {
+                await fixture.whenStable();
+
                 const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
                 expect(saveButton.disabled).toEqual(true);
             });
-            }));
 
             it('should enable saveAs button if the filter values are changed for default filter', (done) => {
                 getTaskFilterSpy.and.returnValue(of({
@@ -390,12 +395,16 @@ describe('EditTaskFilterCloudComponent', () => {
             });
         });
 
-        it('should display current task filter details', async(() => {
+        it('should display current task filter details', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-status"]');
             const assigneeElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-assignee"]');
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
@@ -405,9 +414,8 @@ describe('EditTaskFilterCloudComponent', () => {
             expect(sortElement.textContent.trim()).toBe('id');
             expect(orderElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.DIRECTION.ASCENDING');
         });
-        }));
 
-        it('should display all the statuses that are defined in the task filter', async(() => {
+        it('should display all the statuses that are defined in the task filter', () => {
 
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
@@ -425,37 +433,39 @@ describe('EditTaskFilterCloudComponent', () => {
             expect(statusOptions[3].nativeElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.STATUS.SUSPENDED');
             expect(statusOptions[4].nativeElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.STATUS.CANCELLED');
             expect(statusOptions[5].nativeElement.textContent.trim()).toBe('ADF_CLOUD_TASK_FILTERS.STATUS.COMPLETED');
-        }));
+        });
 
-        it('should display sort drop down', async(() => {
+        it('should display sort drop down', async () => {
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortOptions.length).toEqual(4);
         });
-        }));
 
-        it('should display order drop down', async(() => {
+        it('should display order drop down', async () => {
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
             fixture.detectChanges();
             const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-order"]');
             orderElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const orderOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(orderOptions.length).toEqual(2);
         });
-        }));
 
-        it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
+        it('should able to build a editTaskFilter form with default properties if input is empty', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             component.filterProperties = [];
@@ -463,57 +473,60 @@ describe('EditTaskFilterCloudComponent', () => {
             const stateController = component.editTaskFilterForm.get('status');
             const sortController = component.editTaskFilterForm.get('sort');
             const orderController = component.editTaskFilterForm.get('order');
-            fixture.whenStable().then(() => {
+
-                fixture.detectChanges();
+            await fixture.whenStable();
+
             expect(component.taskFilterProperties.length).toBe(4);
             expect(component.editTaskFilterForm).toBeDefined();
             expect(stateController.value).toBe('CREATED');
             expect(sortController.value).toBe('id');
             expect(orderController.value).toBe('ASC');
         });
-        }));
 
-        it('should able to fetch running applications when appName property defined in the input', async(() => {
+        it('should able to fetch running applications when appName property defined in the input', async () => {
             component.filterProperties = ['appName', 'processInstanceId', 'priority'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             const appController = component.editTaskFilterForm.get('appName');
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(getRunningApplicationsSpy).toHaveBeenCalled();
             expect(appController).toBeDefined();
             expect(appController.value).toBe('mock-app-name');
         });
-        }));
 
-        it('should fetch data in completedBy filter', async(() => {
+        it('should fetch data in completedBy filter', async () => {
             component.filterProperties = ['appName', 'processInstanceId', 'priority', 'completedBy'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             const appController = component.editTaskFilterForm.get('completedBy');
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             expect(appController).toBeDefined();
             expect(JSON.stringify(appController.value)).toBe(JSON.stringify({
                 id: 'mock-id',
                 username: 'testCompletedByUser'
             }));
         });
-        }));
 
-        it('should show completedBy filter', async(() => {
+        it('should show completedBy filter', async () => {
             component.filterProperties = ['appName', 'processInstanceId', 'priority', 'completedBy'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const peopleCloudComponent = fixture.debugElement.nativeElement.querySelector('adf-cloud-people');
             expect(peopleCloudComponent).toBeTruthy();
         });
-        }));
 
         it('should update form on completed by user is updated', (done) => {
             component.appName = 'fake';
@@ -789,7 +802,7 @@ describe('EditTaskFilterCloudComponent', () => {
 
     describe('sort properties', () => {
 
-        it('should display default sort properties', async(() => {
+        it('should display default sort properties', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
@@ -798,16 +811,17 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortController.value).toBe('id');
             expect(sortOptions.length).toEqual(4);
         });
-        }));
 
-        it('should display sort properties when sort properties are specified', async(() => {
+        it('should display sort properties when sort properties are specified', async () => {
             component.sortProperties = ['id', 'name', 'processInstanceId'];
             getTaskFilterSpy.and.returnValue(of({
                 sort: 'my-custom-sort',
@@ -823,17 +837,18 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(component.sortProperties.length).toBe(3);
             expect(sortController.value).toBe('my-custom-sort');
             expect(sortOptions.length).toEqual(3);
         });
-        }));
 
-        it('should display default sort properties if input is empty', async(() => {
+        it('should display default sort properties if input is empty', async () => {
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
@@ -844,27 +859,30 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"]');
             sortElement.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const sortController = component.editTaskFilterForm.get('sort');
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             expect(sortController.value).toBe('id');
             expect(sortOptions.length).toEqual(4);
         });
-        }));
     });
 
     describe('filter actions', () => {
 
-        it('should display default filter actions', async(() => {
+        it('should display default filter actions', async () => {
             component.toggleFilterActions = true;
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
             component.ngOnChanges({ 'id': taskFilterIdChange });
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
@@ -874,9 +892,8 @@ describe('EditTaskFilterCloudComponent', () => {
             expect(saveAsButton.disabled).toBe(true);
             expect(deleteButton.disabled).toBe(false);
         });
-        }));
 
-        it('should display filter actions when input actions are specified', async(() => {
+        it('should display filter actions when input actions are specified', async () => {
             component.actions = ['save'];
             fixture.detectChanges();
             const taskFilterIdChange = new SimpleChange(undefined, 'mock-task-filter-id', true);
@@ -886,8 +903,10 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
             expansionPanel.click();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             expect(component.taskFilterActions.map(action => action.actionType)).toEqual(['save']);
             expect(component.taskFilterActions.length).toBe(1);
@@ -897,7 +916,6 @@ describe('EditTaskFilterCloudComponent', () => {
             expect(saveAsButton).toBeFalsy();
             expect(deleteButton).toBeFalsy();
         });
-        }));
 
         it('should set the correct lastModifiedTo date', (done) => {
             component.appName = 'fake';
@@ -934,7 +952,7 @@ describe('EditTaskFilterCloudComponent', () => {
             spyOn(component.action, 'emit').and.callThrough();
         });
 
-        it('should emit save event and save the filter on click save button', async(() => {
+        it('should emit save event and save the filter on click save button', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'updateFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -946,10 +964,10 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             sortOptions[3].nativeElement.click();
+
             fixture.detectChanges();
-            const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
             fixture.whenStable().then(() => {
-                fixture.detectChanges();
+                const saveButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-save"]');
                 expect(saveButton.disabled).toBe(false);
                 saveButton.click();
                 expect(service.updateFilter).toHaveBeenCalled();
@@ -957,7 +975,7 @@ describe('EditTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should emit delete event and delete the filter on click of delete button', async(() => {
+        it('should emit delete event and delete the filter on click of delete button', async () => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -966,18 +984,18 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             expect(deleteButton.disabled).toBe(false);
             deleteButton.click();
             expect(service.deleteFilter).toHaveBeenCalled();
             expect(component.action.emit).toHaveBeenCalled();
         });
-        }));
 
-        it('should emit saveAs event and add filter on click saveAs button', async(() => {
+        it('should emit saveAs event and add filter on click saveAs button', fakeAsync(() => {
             component.toggleFilterActions = true;
             spyOn(service, 'addFilter').and.returnValue(of(null));
             fixture.detectChanges();
@@ -989,10 +1007,10 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const sortOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
             sortOptions[2].nativeElement.click();
+
             fixture.detectChanges();
-            const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
             fixture.whenStable().then(() => {
-                fixture.detectChanges();
+                const saveAsButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-saveAs"]');
                 expect(saveAsButton.disabled).toBe(false);
                 saveAsButton.click();
                 expect(service.addFilter).toHaveBeenCalled();
@@ -1001,7 +1019,7 @@ describe('EditTaskFilterCloudComponent', () => {
             });
         }));
 
-        it('should call restore default filters service on deletion of last filter', async(() => {
+        it('should call restore default filters service on deletion of last filter', async () => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of([]));
             const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));
@@ -1011,19 +1029,19 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             expect(deleteButton.disabled).toBe(false);
             deleteButton.click();
             expect(service.deleteFilter).toHaveBeenCalled();
             expect(component.action.emit).toHaveBeenCalled();
             expect(restoreDefaultFiltersSpy).toHaveBeenCalled();
         });
-        }));
 
-        it('should not call restore default filters service on deletion of first filter', async(() => {
+        it('should not call restore default filters service on deletion of first filter', async () => {
             component.toggleFilterActions = true;
             spyOn(service, 'deleteFilter').and.returnValue(of([new TaskFilterCloudModel({ name: 'mock-filter-name' })]));
             const restoreDefaultFiltersSpy = spyOn(component, 'restoreDefaultTaskFilters').and.returnValue(of([]));
@@ -1033,16 +1051,16 @@ describe('EditTaskFilterCloudComponent', () => {
             fixture.detectChanges();
             const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-task-property-sort"] .mat-select-trigger');
             stateElement.click();
+
             fixture.detectChanges();
+            await fixture.whenStable();
+
             const deleteButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-filter-action-delete"]');
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
             expect(deleteButton.disabled).toBe(false);
             deleteButton.click();
             expect(service.deleteFilter).toHaveBeenCalled();
             expect(component.action.emit).toHaveBeenCalled();
             expect(restoreDefaultFiltersSpy).not.toHaveBeenCalled();
         });
-        }));
     });
 });

lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
 import { TaskFiltersCloudModule } from '../../task-filters-cloud.module';
@@ -67,46 +67,49 @@ describe('TaskFilterDialogCloudComponent', () => {
         expect(titleElement.textContent).toEqual(' ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.TITLE ');
     });
 
-    it('should enable save button if form is valid', async(() => {
+    it('should enable save button if form is valid', async () => {
         fixture.detectChanges();
         const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
         const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
         inputElement.value = 'My custom Name';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBeFalsy();
     });
-    }));
 
-    it('should disable save button if form is not valid', async(() => {
+    it('should disable save button if form is not valid', async () => {
         fixture.detectChanges();
         const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
         inputElement.value = '';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
-            const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
         fixture.detectChanges();
+        await fixture.whenStable();
+
+        const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBe(true);
     });
-    }));
 
-    it('should able to close dialog on click of save button if form is valid', async(() => {
+    it('should able to close dialog on click of save button if form is valid', async () => {
         fixture.detectChanges();
         const inputElement = fixture.debugElement.nativeElement.querySelector('#adf-filter-name-id');
         inputElement.value = 'My custom Name';
         inputElement.dispatchEvent(new Event('input'));
-        fixture.whenStable().then(() => {
+
-            const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
         fixture.detectChanges();
+        await fixture.whenStable();
+
+        const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-button-id');
         saveButton.click();
         expect(saveButton).toBeDefined();
         expect(saveButton.disabled).toBeFalsy();
         expect(component.dialogRef.close).toHaveBeenCalled();
     });
-    }));
 
     it('should able close dialog on click of cancel button', () => {
         component.data = { data: { name: '' } };

lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.spec.ts

@@ -18,7 +18,7 @@
 import { DebugElement, SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { IdentityUserService, setupTestBed } from '@alfresco/adf-core';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskFormCloudComponent } from './task-form-cloud.component';
@@ -75,170 +75,181 @@ describe('TaskFormCloudComponent', () => {
 
     describe('Complete button', () => {
 
-        it('should show complete button when status is ASSIGNED', async(() => {
+        it('should show complete button when status is ASSIGNED', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const completeBtn = debugElement.query(By.css('[adf-cloud-complete-task]'));
             expect(completeBtn.nativeElement).toBeDefined();
         });
-        }));
 
-        it('should not show complete button when status is ASSIGNED but assigned to a different person', async(() => {
+        it('should not show complete button when status is ASSIGNED but assigned to a different person', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
 
             getCurrentUserSpy.and.returnValue({});
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const completeBtn = debugElement.query(By.css('[adf-cloud-complete-task]'));
             expect(completeBtn).toBeNull();
         });
-        }));
 
-        it('should not show complete button when showCompleteButton=false', async(() => {
+        it('should not show complete button when showCompleteButton=false', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             component.showCompleteButton = false;
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const completeBtn = debugElement.query(By.css('[adf-cloud-complete-task]'));
             expect(completeBtn).toBeNull();
         });
-        }));
     });
 
     describe('Claim/Unclaim buttons', () => {
 
-        it('should not show release button for standalone task', async(() => {
+        it('should not show release button for standalone task', async () => {
             component.taskId = 'task1';
             component.loadTask();
-            fixture.detectChanges();
             getTaskSpy.and.returnValue(of(taskDetails));
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const unclaimBtn = debugElement.query(By.css('[adf-cloud-unclaim-task]'));
             expect(unclaimBtn).toBeNull();
         });
-        }));
 
-        it('should show release button when task has candidate users and is assigned to one of these users', async(() => {
+        it('should show release button when task has candidate users and is assigned to one of these users', async () => {
             spyOn(component, 'hasCandidateUsers').and.returnValue(true);
 
             component.appName = 'app1';
             component.taskId = 'task1';
 
             component.loadTask();
-            fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+
             const unclaimBtn = debugElement.query(By.css('[adf-cloud-unclaim-task]'));
             expect(unclaimBtn).not.toBeNull();
         });
-        }));
 
-        it('should not show unclaim button when status is ASSIGNED but assigned to different person', async(() => {
+        it('should not show unclaim button when status is ASSIGNED but assigned to different person', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
 
             getCurrentUserSpy.and.returnValue({});
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const unclaimBtn = debugElement.query(By.css('[adf-cloud-unclaim-task]'));
             expect(unclaimBtn).toBeNull();
         });
-        }));
 
-        it('should not show unclaim button when status is not ASSIGNED', async(() => {
+        it('should not show unclaim button when status is not ASSIGNED', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             taskDetails.status = undefined;
             getTaskSpy.and.returnValue(of(taskDetails));
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const unclaimBtn = debugElement.query(By.css('[adf-cloud-unclaim-task]'));
             expect(unclaimBtn).toBeNull();
         });
-        }));
 
-        it('should show claim button when status is CREATED', async(() => {
+        it('should show claim button when status is CREATED', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             taskDetails.status = 'CREATED';
             getTaskSpy.and.returnValue(of(taskDetails));
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const claimBtn = debugElement.query(By.css('[adf-cloud-claim-task]'));
             expect(claimBtn.nativeElement).toBeDefined();
         });
-        }));
 
-        it('should not show claim button when status is not CREATED', async(() => {
+        it('should not show claim button when status is not CREATED', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             taskDetails.status = undefined;
             getTaskSpy.and.returnValue(of(taskDetails));
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const claimBtn = debugElement.query(By.css('[adf-cloud-claim-task]'));
             expect(claimBtn).toBeNull();
         });
-        }));
     });
 
     describe('Cancel button', () => {
 
-        it('should show cancel button by default', async(() => {
+        it('should show cancel button by default', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const cancelBtn = debugElement.query(By.css('#adf-cloud-cancel-task'));
             expect(cancelBtn.nativeElement).toBeDefined();
         });
-        }));
 
-        it('should not show cancel button when showCancelButton=false', async(() => {
+        it('should not show cancel button when showCancelButton=false', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             component.showCancelButton = false;
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const cancelBtn = debugElement.query(By.css('#adf-cloud-cancel-task'));
             expect(cancelBtn).toBeNull();
         });
-        }));
     });
 
     describe('Inputs', () => {
 
-        it('should not show complete/claim/unclaim buttons when readOnly=true', async(() => {
+        it('should not show complete/claim/unclaim buttons when readOnly=true', async () => {
             component.appName = 'app1';
             component.taskId = 'task1';
             component.readOnly = true;
 
             component.loadTask();
+
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+
             const completeBtn = debugElement.query(By.css('[adf-cloud-complete-task]'));
             expect(completeBtn).toBeNull();
 
@@ -251,7 +262,6 @@ describe('TaskFormCloudComponent', () => {
             const cancelBtn = debugElement.query(By.css('#adf-cloud-cancel-task'));
             expect(cancelBtn.nativeElement).toBeDefined();
         });
-        }));
 
         it('should load data when appName changes', () => {
             component.taskId = 'task1';

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts

@@ -18,7 +18,7 @@
 import { TaskHeaderCloudComponent } from './task-header-cloud.component';
 import { of, throwError } from 'rxjs';
 import { By } from '@angular/platform-browser';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { setupTestBed, AppConfigService, AlfrescoApiService, CardViewArrayItem } from '@alfresco/adf-core';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskCloudService } from '../../services/task-cloud.service';
@@ -186,23 +186,21 @@ describe('TaskHeaderCloudComponent', () => {
             done();
         });
 
-        it('should roll back task description on error', async(async () => {
+        it('should roll back task description on error', fakeAsync(() => {
             spyOn(taskCloudService, 'updateTask').and.returnValue(throwError('fake'));
             fixture.detectChanges();
 
-            await fixture.whenStable();
-            fixture.detectChanges();
             let description = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             expect(description.nativeElement.value.trim()).toEqual('This is the description');
             const inputEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             inputEl.nativeElement.value = 'updated description';
             inputEl.nativeElement.dispatchEvent(new Event('input'));
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
-            fixture.detectChanges();
                 description = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
                 expect(description.nativeElement.value.trim()).toEqual('This is the description');
                 expect(taskCloudService.updateTask).toHaveBeenCalled();
+            });
         }));
 
         it('should show spinner before loading task details', () => {
@@ -523,22 +521,23 @@ describe('TaskHeaderCloudComponent', () => {
 
     describe('Task errors', () => {
 
-        it('should emit an error when task can not be found', async(() => {
+        it('should emit an error when task can not be found', (done) => {
             getTaskByIdSpy.and.returnValue(throwError('Task not found'));
 
             component.error.subscribe((error) => {
                 expect(error).toEqual('Task not found');
+                done();
             });
 
             component.appName = 'appName';
             component.taskId = 'taskId';
             component.ngOnChanges();
-        }));
+        });
-
-        it('should emit an error when app name and/or task id are not provided', async(() => {
 
+        it('should emit an error when app name and/or task id are not provided', (done) => {
             component.error.subscribe((error) => {
                 expect(error).toEqual('App Name and Task Id are mandatory');
+                done();
             });
 
             component.appName = '';
@@ -551,7 +550,7 @@ describe('TaskHeaderCloudComponent', () => {
             component.appName = '';
             component.taskId = 'taskId';
             component.ngOnChanges();
-        }));
+        });
 
         it('should call the loadTaskDetailsById when both app name and task id are provided', () => {
             spyOn(component, 'loadTaskDetailsById');

lib/process-services-cloud/src/lib/task/task-list/components/service-task-list-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, SimpleChange, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppConfigService, setupTestBed, DataRowEvent, ObjectDataRow, EcmUserModel } from '@alfresco/adf-core';
 import { ServiceTaskListCloudComponent } from './service-task-list-cloud.component';
@@ -362,7 +362,7 @@ describe('ServiceTaskListCloudComponent', () => {
         let fixtureCustom: ComponentFixture<CustomTaskListComponent>;
         let componentCustom: CustomTaskListComponent;
         let customCopyComponent: CustomCopyContentTaskListComponent;
-        let element: any;
+        let element: HTMLElement;
         let copyFixture: ComponentFixture<CustomCopyContentTaskListComponent>;
 
         setupTestBed({
@@ -399,12 +399,12 @@ describe('ServiceTaskListCloudComponent', () => {
             expect(componentCustom.taskList.columns.length).toEqual(2);
         });
 
-        it('it should show copy tooltip when key is present in data-colunn', async(() => {
+        it('it should show copy tooltip when key is present in data-colunn', fakeAsync(() => {
             copyFixture.detectChanges();
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
             copyFixture.whenStable().then(() => {
                 copyFixture.detectChanges();
-                const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="04fdf69f-4ddd-48ab-9563-da776c9b163c"]');
+                const spanHTMLElement = <HTMLInputElement> element.querySelector('span[title="04fdf69f-4ddd-48ab-9563-da776c9b163c"]');
                 spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                 copyFixture.detectChanges();
                 expect(copyFixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
@@ -434,7 +434,7 @@ describe('ServiceTaskListCloudComponent', () => {
 
     describe('Copy cell content directive from app.config specifications', () => {
 
-        let element: any;
+        let element: HTMLElement;
         let taskSpy: jasmine.Spy;
 
         setupTestBed({
@@ -478,14 +478,14 @@ describe('ServiceTaskListCloudComponent', () => {
             fixture.destroy();
         });
 
-        it('shoud show tooltip if config copyContent flag is true', async(() => {
+        it('shoud show tooltip if config copyContent flag is true', fakeAsync(() => {
             taskSpy.and.returnValue(of(fakeServiceTask));
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
 
             component.success.subscribe(() => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="04fdf69f-4ddd-48ab-9563-da776c9b163c"]');
+                    const spanHTMLElement = element.querySelector<HTMLInputElement>('span[title="04fdf69f-4ddd-48ab-9563-da776c9b163c"]');
                     spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                     fixture.detectChanges();
                     expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).not.toBeNull();
@@ -498,13 +498,13 @@ describe('ServiceTaskListCloudComponent', () => {
             component.ngAfterContentInit();
         }));
 
-        it('shoud not show tooltip if config copyContent flag is true', async(() => {
+        it('shoud not show tooltip if config copyContent flag is true', fakeAsync(() => {
             taskSpy.and.returnValue(of(fakeServiceTask));
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
             component.success.subscribe(() => {
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span[title="serviceTaskName"]');
+                    const spanHTMLElement = element.querySelector<HTMLInputElement>('span[title="serviceTaskName"]');
                     spanHTMLElement.dispatchEvent(new Event('mouseenter'));
                     fixture.detectChanges();
                     expect(fixture.debugElement.nativeElement.querySelector('.adf-copy-tooltip')).toBeNull();

lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { Component, SimpleChange, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppConfigService, setupTestBed, DataRowEvent, ObjectDataRow, EcmUserModel } from '@alfresco/adf-core';
 import { TaskListCloudService } from '../services/task-list-cloud.service';
@@ -420,7 +420,7 @@ describe('TaskListCloudComponent', () => {
             expect(componentCustom.taskList.columns.length).toEqual(3);
         });
 
-        it('it should show copy tooltip when key is present in data-colunn', async(() => {
+        it('it should show copy tooltip when key is present in data-colunn', fakeAsync(() => {
             copyFixture.detectChanges();
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
             copyFixture.whenStable().then(() => {
@@ -535,7 +535,7 @@ describe('TaskListCloudComponent', () => {
 
         // TODO: highly unstable test
         // tslint:disable-next-line:ban
-        xit('should show tooltip if config copyContent flag is true', async(() => {
+        xit('should show tooltip if config copyContent flag is true', fakeAsync(() => {
             taskSpy.and.returnValue(of(fakeGlobalTask));
             const appName = new SimpleChange(null, 'FAKE-APP-NAME', true);
 

lib/process-services/src/lib/app-list/apps-list.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { DebugElement, Component } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppsProcessService, setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
@@ -78,14 +78,15 @@ describe('AppsListComponent', () => {
         expect(component.loading).toBeFalsy();
     });
 
-    it('should show the loading spinner when the apps are loading', async(() => {
+    it('should show the loading spinner when the apps are loading', async () => {
         component.loading = true;
+
         fixture.detectChanges();
-        fixture.whenStable().then(() => {
+        await fixture.whenStable();
+
         const loadingSpinner = fixture.nativeElement.querySelector('mat-progress-spinner');
         expect(loadingSpinner).toBeDefined();
     });
-    }));
 
     it('should show the apps filtered by defaultAppId', () => {
         component.filtersAppId = [{defaultAppId: 'fake-app-1'}];
@@ -267,13 +268,13 @@ describe('AppsListComponent', () => {
             customFixture.destroy();
         });
 
-        it('should render the custom no-apps template', async(() => {
+        it('should render the custom no-apps template', async () => {
             customFixture.detectChanges();
-            customFixture.whenStable().then(() => {
+            await customFixture.whenStable();
+
             const title: any = customFixture.debugElement.queryAll(By.css('#custom-id'));
             expect(title.length).toBe(1);
             expect(title[0].nativeElement.innerText).toBe('No Apps');
         });
-        }));
     });
 });

lib/process-services/src/lib/attachment/create-process-attachment.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { setupTestBed } from '@alfresco/adf-core';
 import { CreateProcessAttachmentComponent } from './create-process-attachment.component';
 import { ProcessTestingModule } from '../testing/process.testing.module';
@@ -81,11 +81,12 @@ describe('CreateProcessAttachmentComponent', () => {
         expect(component.processInstanceId).toBe('123');
     });
 
-    it('should emit content created event when the file is uploaded', async(() => {
+    it('should emit content created event when the file is uploaded', (done) => {
         component.success.subscribe((res) => {
             expect(res).toBeDefined();
             expect(res).not.toBeNull();
             expect(res.id).toBe(9999);
+            done();
         });
 
         component.onFileUpload(customEvent);
@@ -95,9 +96,9 @@ describe('CreateProcessAttachmentComponent', () => {
             contentType: 'application/json',
             responseText: JSON.stringify(fakeUploadResponse)
         });
-    }));
+    });
 
-    it('should allow user to upload files via button', async(() => {
+    it('should allow user to upload files via button', (done) => {
         const buttonUpload: HTMLElement = <HTMLElement> element.querySelector('#add_new_process_content_button');
         expect(buttonUpload).toBeDefined();
         expect(buttonUpload).not.toBeNull();
@@ -106,6 +107,7 @@ describe('CreateProcessAttachmentComponent', () => {
             expect(res).toBeDefined();
             expect(res).not.toBeNull();
             expect(res.id).toBe(9999);
+            done();
         });
 
         const dropEvent = new CustomEvent('upload-files', customEvent);
@@ -117,5 +119,5 @@ describe('CreateProcessAttachmentComponent', () => {
             contentType: 'application/json',
             responseText: JSON.stringify(fakeUploadResponse)
         });
-    }));
+    });
 });

lib/process-services/src/lib/attachment/process-attachment-list.component.spec.ts

@@ -16,7 +16,7 @@
  */
 
 import { SimpleChange, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ProcessContentService, setupTestBed } from '@alfresco/adf-core';
 import { of, throwError } from 'rxjs';
@@ -136,52 +136,55 @@ describe('ProcessAttachmentListComponent', () => {
         expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();
     });
 
-    it('should display attachments when the process has attachments', async(() => {
+    it('should display attachments when the process has attachments', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
         fixture.detectChanges();
-
+        await fixture.whenStable();
-        fixture.whenStable().then(() => {
         expect(fixture.debugElement.queryAll(By.css('.adf-datatable-body > .adf-datatable-row')).length).toBe(2);
     });
-    }));
 
-    it('should display all actions if attachments are not read only', async(() => {
+    it('should display all actions if attachments are not read only', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]');
         actionButton.click();
-        fixture.whenStable().then(() => {
+
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const actionMenu = window.document.querySelectorAll('button.mat-menu-item').length;
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.VIEW_CONTENT"]')).not.toBeNull();
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.REMOVE_CONTENT"]')).not.toBeNull();
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.DOWNLOAD_CONTENT"]')).not.toBeNull();
         expect(actionMenu).toBe(3);
     });
-    }));
 
-    it('should not display remove action if attachments are read only', async(() => {
+    it('should not display remove action if attachments are read only', async () => {
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({ 'processInstanceId': change });
         component.disabled = true;
 
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const actionButton = fixture.debugElement.nativeElement.querySelector('[data-automation-id="action_menu_0"]');
         actionButton.click();
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const actionMenu = window.document.querySelectorAll('button.mat-menu-item').length;
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.VIEW_CONTENT"]')).not.toBeNull();
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.DOWNLOAD_CONTENT"]')).not.toBeNull();
         expect(window.document.querySelector('[data-automation-id="ADF_PROCESS_LIST.MENU_ACTIONS.REMOVE_CONTENT"]')).toBeNull();
         expect(actionMenu).toBe(2);
     });
-    }));
 
-    it('should show the empty list component when the attachments list is empty', async(() => {
+    it('should show the empty list component when the attachments list is empty', async () => {
         getProcessRelatedContentSpy.and.returnValue(of({
             'size': 0,
             'total': 0,
@@ -190,13 +193,12 @@ describe('ProcessAttachmentListComponent', () => {
         }));
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({'processInstanceId': change});
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
         expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER');
     });
-    }));
 
-    it('should not show the empty list drag and drop component when is disabled', async(() => {
+    it('should not show the empty list drag and drop component when is disabled', async () => {
         getProcessRelatedContentSpy.and.returnValue(of({
             'size': 0,
             'total': 0,
@@ -207,14 +209,13 @@ describe('ProcessAttachmentListComponent', () => {
         component.ngOnChanges({'processInstanceId': change});
         component.disabled = true;
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
         expect(fixture.nativeElement.querySelector('adf-empty-list .adf-empty-list-drag_drop')).toBeNull();
         expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim()).toEqual('ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER');
     });
-    }));
 
-    it('should show the empty list component when the attachments list is empty for completed process', async(() => {
+    it('should show the empty list component when the attachments list is empty for completed process', async () => {
         getProcessRelatedContentSpy.and.returnValue(of({
             'size': 0,
             'total': 0,
@@ -225,24 +226,23 @@ describe('ProcessAttachmentListComponent', () => {
         component.ngOnChanges({'processInstanceId': change});
         component.disabled = true;
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]').innerText.trim())
         .toEqual('ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER');
     });
-    }));
 
-    it('should not show the empty list component when the attachments list is not empty for completed process', async(() => {
+    it('should not show the empty list component when the attachments list is not empty for completed process', async () => {
         getProcessRelatedContentSpy.and.returnValue(of(mockAttachment));
         const change = new SimpleChange(null, '123', true);
         component.ngOnChanges({'processInstanceId': change});
         component.disabled = true;
 
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
         expect(fixture.nativeElement.querySelector('div[adf-empty-list-header]')).toBeNull();
     });
-    }));
 
     it('should call getProcessRelatedContent with opt isRelatedContent=true', () => {
         getProcessRelatedContentSpy.and.returnValue(of(mockAttachment));
@@ -258,12 +258,11 @@ describe('ProcessAttachmentListComponent', () => {
         const change = new SimpleChange('123', '456', true);
         const nullChange = new SimpleChange('123', null, true);
 
-        beforeEach(async(() => {
+        beforeEach(async () => {
             component.processInstanceId = '123';
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
             getProcessRelatedContentSpy.calls.reset();
         });
-        }));
 
         it('should fetch new attachments when processInstanceId changed', () => {
             component.ngOnChanges({ 'processInstanceId': change });
@@ -280,18 +279,6 @@ describe('ProcessAttachmentListComponent', () => {
             expect(getProcessRelatedContentSpy).not.toHaveBeenCalled();
         });
     });
-
-    describe('Delete attachments', () => {
-
-        beforeEach(async(() => {
-            component.processInstanceId = '123';
-            fixture.whenStable();
-        }));
-
-        it('should display a dialog to the user when the Add button clicked', () => {
-            expect(true).toBe(true);
-        });
-   });
 });
 
 @Component({
@@ -327,12 +314,12 @@ describe('Custom CustomEmptyTemplateComponent', () => {
         fixture.destroy();
     });
 
-    it('should render the custom template', async(() => {
+    it('should render the custom template', async () => {
-        fixture.whenStable().then(() => {
         fixture.detectChanges();
+        await fixture.whenStable();
+
         const title: any = fixture.debugElement.queryAll(By.css('[adf-empty-list-header]'));
         expect(title.length).toBe(1);
         expect(title[0].nativeElement.innerText).toBe('Custom header');
     });
-    }));
 });