[AAE-1695] reduce manual tests (#5455)

* tests cleanup

* cleanup search control tests

* EmptyContentComponent tests

* fix names

* search filter category test

* task list test and code polish

* process list tests and cleanup

* extra task-list tests

* extra start-task tests

* code cleanup

lib/content-services/src/lib/content-node-selector/content-node-dialog.service.spec.ts

@@ -100,10 +100,6 @@ describe('ContentNodeDialogService', () => {
         });
     });
 
-    it('should be able to create the service', () => {
-        expect(service).not.toBeNull();
-    });
-
     it('should be able to open the dialog when node has permission', () => {
         service.openCopyMoveDialog('fake-action', fakeNode, '!update');
         expect(spyOnDialogOpen).toHaveBeenCalled();
@@ -111,8 +107,7 @@ describe('ContentNodeDialogService', () => {
 
     it('should NOT be able to open the dialog when node has NOT permission', () => {
         service.openCopyMoveDialog('fake-action', fakeNode, 'noperm').subscribe(
-            () => {
+            () => {},
-            },
             (error) => {
                 expect(spyOnDialogOpen).not.toHaveBeenCalled();
                 expect(JSON.parse(error.message).error.statusCode).toBe(403);
@@ -121,8 +116,7 @@ describe('ContentNodeDialogService', () => {
 
     it('should be able to open the dialog using a folder id', fakeAsync(() => {
         spyOn(documentListService, 'getFolderNode').and.returnValue(of(fakeNodeEntry));
-        service.openFileBrowseDialogByFolderId('fake-folder-id').subscribe(() => {
+        service.openFileBrowseDialogByFolderId('fake-folder-id').subscribe(() => {});
-        });
         tick();
         expect(spyOnDialogOpen).toHaveBeenCalled();
     }));
@@ -130,8 +124,7 @@ describe('ContentNodeDialogService', () => {
     it('should be able to open the dialog for files using the first user site', fakeAsync(() => {
         spyOn(sitesService, 'getSites').and.returnValue(of(fakeSiteList));
         spyOn(documentListService, 'getFolderNode').and.returnValue(of(fakeNodeEntry));
-        service.openFileBrowseDialogBySite().subscribe(() => {
+        service.openFileBrowseDialogBySite().subscribe(() => {});
-        });
         tick();
         expect(spyOnDialogOpen).toHaveBeenCalled();
     }));
@@ -139,8 +132,7 @@ describe('ContentNodeDialogService', () => {
     it('should be able to open the dialog for folder using the first user site', fakeAsync(() => {
         spyOn(sitesService, 'getSites').and.returnValue(of(fakeSiteList));
         spyOn(documentListService, 'getFolderNode').and.returnValue(of(fakeNodeEntry));
-        service.openFolderBrowseDialogBySite().subscribe(() => {
+        service.openFolderBrowseDialogBySite().subscribe(() => {});
-        });
         tick();
         expect(spyOnDialogOpen).toHaveBeenCalled();
     }));

lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.spec.ts

@@ -97,12 +97,13 @@ describe('ContentNodeSelectorComponent', () => {
 
         describe('Parameters', () => {
 
-            let documentListService,
+            let documentListService: DocumentListService;
-                sitesService;
+            let sitesService: SitesService;
 
             beforeEach(() => {
                 documentListService = TestBed.get(DocumentListService);
                 sitesService = TestBed.get(SitesService);
+
                 spyOn(documentListService, 'getFolderNode').and.returnValue(of(<NodeEntry> { entry: { path: { elements: [] } } }));
                 spyOn(documentListService, 'getFolder').and.returnValue(throwError('No results for test'));
                 spyOn(sitesService, 'getSites').and.returnValue(of({
@@ -111,6 +112,7 @@ describe('ContentNodeSelectorComponent', () => {
                             <SiteEntry> { entry: { guid: 'blog', id: 'blog' } }]
                     }
                 }));
+
                 component.currentFolderId = 'cat-girl-nuku-nuku';
                 fixture.detectChanges();
             });
@@ -202,14 +204,17 @@ describe('ContentNodeSelectorComponent', () => {
 
         describe('Breadcrumbs', () => {
 
-            let documentListService, sitesService;
+            let documentListService: DocumentListService;
+            let sitesService: SitesService;
 
             beforeEach(() => {
                 documentListService = TestBed.get(DocumentListService);
                 sitesService = TestBed.get(SitesService);
+
                 spyOn(documentListService, 'getFolderNode').and.returnValue(of(<NodeEntry> { entry: { path: { elements: [] } } }));
                 spyOn(documentListService, 'getFolder').and.returnValue(throwError('No results for test'));
                 spyOn(sitesService, 'getSites').and.returnValue(of({ list: { entries: [] } }));
+
                 component.currentFolderId = 'cat-girl-nuku-nuku';
                 fixture.detectChanges();
             });
@@ -309,7 +314,7 @@ describe('ContentNodeSelectorComponent', () => {
                 expect(breadcrumb.componentInstance.folderNode).toEqual(undefined);
             }));
 
-            it('should keep breadcrumb\'s folderNode unchanged if breadcrumbTransform is NOT defined', (done) => {
+            it('should keep breadcrumb folderNode unchanged if breadcrumbTransform is NOT defined', (done) => {
                 fixture.detectChanges();
 
                 fixture.whenStable().then(() => {
@@ -322,7 +327,7 @@ describe('ContentNodeSelectorComponent', () => {
                 });
             });
 
-            it('should make changes to breadcrumb\'s folderNode if breadcrumbTransform is defined', (done) => {
+            it('should make changes to breadcrumb folderNode if breadcrumbTransform is defined', (done) => {
                 const transformedFolderNode = <Node> {
                     id: 'trans-node',
                     name: 'trans-node-name',

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

@@ -136,7 +136,7 @@ describe('DocumentList', () => {
         expect(columns[5]).toBe(column);
     });
 
-    it('should call action\'s handler with node', () => {
+    it('should call action handler with node', () => {
         const node = new FileNode();
         const action = new ContentActionModel();
         action.handler = () => {
@@ -149,7 +149,7 @@ describe('DocumentList', () => {
 
     });
 
-    it('should call action\'s handler with node and permission', () => {
+    it('should call action handler with node and permission', () => {
         const node = new FileNode();
         const action = new ContentActionModel();
         action.handler = () => {
@@ -162,7 +162,7 @@ describe('DocumentList', () => {
         expect(action.handler).toHaveBeenCalledWith(node, documentList, 'fake-permission');
     });
 
-    it('should call action\'s execute with node if it is defined', () => {
+    it('should call action execute with node if it is defined', () => {
         const node = new FileNode();
         const action = new ContentActionModel();
         action.execute = () => {
@@ -174,7 +174,7 @@ describe('DocumentList', () => {
         expect(action.execute).toHaveBeenCalledWith(node);
     });
 
-    it('should call action\'s execute only after the handler has been executed', () => {
+    it('should call action execute only after the handler has been executed', () => {
         const deleteObservable: Subject<any> = new Subject<any>();
         const node = new FileNode();
         const action = new ContentActionModel();

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

@@ -24,8 +24,7 @@ import {
     setupTestBed,
     CoreModule,
     UserPreferencesService,
-    SearchTextInputComponent,
+    SearchTextInputComponent
-    ThumbnailService
 } from '@alfresco/adf-core';
 import { noResult, results } from '../../mock';
 import { SearchControlComponent } from './search-control.component';
@@ -43,24 +42,14 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
         </adf-search-control>
     `
 })
-
 export class SimpleSearchTestCustomEmptyComponent {
-
+    customMessage = '';
-    customMessage: string = '';
 
     @ViewChild(SearchControlComponent)
     searchComponent: SearchControlComponent;
 
     @ViewChild(SearchTextInputComponent)
     searchTextInputComponent: SearchTextInputComponent;
-
-    constructor() {
-    }
-
-    setCustomMessageForNoResult(message: string) {
-        this.customMessage = message;
-    }
-
 }
 
 describe('SearchControlComponent', () => {
@@ -74,7 +63,7 @@ describe('SearchControlComponent', () => {
     let fixtureCustom: ComponentFixture<SimpleSearchTestCustomEmptyComponent>;
     let elementCustom: HTMLElement;
     let componentCustom: SimpleSearchTestCustomEmptyComponent;
-    let searchServiceSpy: any;
+    let searchServiceSpy: jasmine.Spy;
     let userPreferencesService: UserPreferencesService;
 
     setupTestBed({
@@ -87,11 +76,6 @@ describe('SearchControlComponent', () => {
             SearchComponent,
             EmptySearchResultComponent,
             SimpleSearchTestCustomEmptyComponent
-        ],
-        providers: [
-            ThumbnailService,
-            SearchService,
-            UserPreferencesService
         ]
     });
 
@@ -190,7 +174,6 @@ describe('SearchControlComponent', () => {
     describe('autocomplete list', () => {
 
         it('should make autocomplete list control hidden initially', (done) => {
-
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 expect(element.querySelector('#autocomplete-search-result-list')).toBeNull();
@@ -204,10 +187,11 @@ describe('SearchControlComponent', () => {
             fixture.detectChanges();
 
             typeWordIntoSearchInput('TEST');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                const resultElement: Element = element.querySelector('#autocomplete-search-result-list');
+                const resultElement = element.querySelector('#autocomplete-search-result-list');
                 expect(resultElement).not.toBe(null);
                 done();
             });
@@ -222,7 +206,7 @@ describe('SearchControlComponent', () => {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                const noResultElement: Element = element.querySelector('#search_no_result');
+                const noResultElement = element.querySelector('#search_no_result');
                 expect(noResultElement).not.toBe(null);
                 done();
             });
@@ -235,10 +219,11 @@ describe('SearchControlComponent', () => {
 
             const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
             typeWordIntoSearchInput('NO RES');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
-                let resultElement: Element = element.querySelector('#autocomplete-search-result-list');
+                let resultElement = element.querySelector('#autocomplete-search-result-list');
                 expect(resultElement).not.toBe(null);
                 inputDebugElement.nativeElement.dispatchEvent(new Event('blur'));
 
@@ -256,6 +241,7 @@ describe('SearchControlComponent', () => {
 
             const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
             typeWordIntoSearchInput('TEST');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -277,6 +263,7 @@ describe('SearchControlComponent', () => {
 
             const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
             typeWordIntoSearchInput('TEST');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -301,6 +288,7 @@ describe('SearchControlComponent', () => {
 
             const inputDebugElement = debugElement.query(By.css('#adf-control-input'));
             typeWordIntoSearchInput('TEST');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -319,7 +307,6 @@ describe('SearchControlComponent', () => {
         });
 
         it('should focus input element when autocomplete list is cancelled', (done) => {
-
             searchServiceSpy.and.returnValue(of(JSON.parse(JSON.stringify(results))));
             fixture.detectChanges();
 
@@ -328,6 +315,7 @@ describe('SearchControlComponent', () => {
             escapeEvent.keyCode = 27;
             inputDebugElement.nativeElement.focus();
             inputDebugElement.nativeElement.dispatchEvent(escapeEvent);
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 expect(element.querySelector('#result_name_0')).toBeNull();
@@ -363,6 +351,7 @@ describe('SearchControlComponent', () => {
             });
             fixture.detectChanges();
             typeWordIntoSearchInput('TEST');
+
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 fixture.detectChanges();
@@ -426,13 +415,13 @@ describe('SearchControlComponent', () => {
             fixtureCustom.detectChanges();
             spyOn(componentCustom.searchComponent.searchTextInput, 'isSearchBarActive').and.returnValue(true);
             searchServiceSpy.and.returnValue(of(noResult));
-            componentCustom.setCustomMessageForNoResult(noResultCustomMessage);
+            componentCustom.customMessage = noResultCustomMessage;
             fixtureCustom.detectChanges();
 
-            const inputDebugElement = fixtureCustom.debugElement.query(By.css('#adf-control-input'));
+            const input: HTMLInputElement = fixtureCustom.debugElement.query(By.css('#adf-control-input')).nativeElement;
-            inputDebugElement.nativeElement.value = 'SOMETHING';
+            input.value = 'SOMETHING';
-            inputDebugElement.nativeElement.focus();
+            input.focus();
-            inputDebugElement.nativeElement.dispatchEvent(new Event('input'));
+            input.dispatchEvent(new Event('input'));
 
             fixtureCustom.detectChanges();
             fixtureCustom.whenStable().then(() => {

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

@@ -17,11 +17,16 @@
 
 import { SearchFilterComponent } from './search-filter.component';
 import { SearchQueryBuilderService } from '../../search-query-builder.service';
-import { AppConfigService, TranslationMock } from '@alfresco/adf-core';
+import { AppConfigService, TranslationMock, CoreModule, TranslationService, SearchService } from '@alfresco/adf-core';
 import { Subject } from 'rxjs';
 import { FacetFieldBucket } from '../../facet-field-bucket.interface';
 import { FacetField } from '../../facet-field.interface';
 import { SearchFilterList } from './models/search-filter-list.model';
+import { TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
 
 describe('SearchFilterComponent', () => {
 
@@ -31,18 +36,66 @@ describe('SearchFilterComponent', () => {
     const translationMock = new TranslationMock();
 
     beforeEach(() => {
-        appConfig = new AppConfigService(null);
-        appConfig.config.search = {};
-
-        queryBuilder = new SearchQueryBuilderService(appConfig, null);
         const searchMock: any = {
             dataLoaded: new Subject()
         };
         translationMock.instant = (key) => `${key}_translated`;
+
+        TestBed.configureTestingModule({
+            imports: [
+                CoreModule.forRoot(),
+                HttpClientModule,
+                NoopAnimationsModule
+            ],
+            declarations: [SearchFilterComponent],
+            providers: [
+                { provide: SearchService, useValue: searchMock },
+                { provide: TranslationService, useValue: translationMock }
+            ],
+            schemas: [ NO_ERRORS_SCHEMA ]
+        });
+
+        appConfig = TestBed.get(AppConfigService);
+        appConfig.config.search = {};
+
+        queryBuilder = TestBed.get(SearchQueryBuilderService);
+
         component = new SearchFilterComponent(queryBuilder, searchMock, translationMock);
         component.ngOnInit();
     });
 
+    it('should have expandable categories', async(() => {
+        queryBuilder.categories = [
+            {
+                id: 'cat-1',
+                name: 'category-1',
+                expanded: false,
+                enabled: false,
+                component: {
+                    selector: 'cat-1-component',
+                    settings: null
+                }
+            }
+        ];
+
+        const fixture = TestBed.createComponent(SearchFilterComponent);
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            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();
+            expect(element.classList.contains('mat-expanded')).toBeTruthy();
+
+            (element.childNodes[0] as HTMLElement).click();
+            fixture.detectChanges();
+            expect(element.classList.contains('mat-expanded')).toBeFalsy();
+        });
+    }));
+
     it('should subscribe to query builder executed event', () => {
         spyOn(component, 'onDataLoaded').and.stub();
         const data = {};

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts

@@ -42,10 +42,6 @@ describe('SidebarActionMenuComponent', () => {
         fixture.destroy();
     });
 
-    it('should create instance of SidebarActionMenuComponent', () => {
-        expect(fixture.componentInstance instanceof SidebarActionMenuComponent).toBe(true, 'should create SidebarActionMenuComponent');
-    });
-
     it('should display title', () => {
         component.title = 'Fake-Title';
         component.expanded = true;
@@ -104,10 +100,6 @@ describe('Custom SidebarActionMenuComponent', () => {
         element = fixture.nativeElement;
     });
 
-    it('should create instance of CustomSidebarActionMenuComponent', () => {
-        expect(component instanceof CustomSidebarActionMenuComponent).toBe(true, 'should create CustomSidebarActionMenuComponent');
-    });
-
     it('should defined adf-sidebar-action-menu', () => {
         fixture.detectChanges();
         element = fixture.nativeElement.querySelector('adf-sidebar-action-menu');

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

@@ -25,168 +25,155 @@ import { LogService } from './log.service';
 import { setupTestBed } from '../testing/setupTestBed';
 
 @Component({
-   template: '',
+    template: '',
-   providers: [LogService]
+    providers: [LogService]
 })
 class ProvidesLogComponent {
-   constructor(public logService: LogService) {
+    constructor(public logService: LogService) {}
 
-   }
+    error() {
+        this.logService.error('Test message');
+    }
 
-   error() {
+    info() {
-       this.logService.error('Test message');
+        this.logService.info('Test message');
-   }
+    }
 
-   info() {
+    warn() {
-       this.logService.info('Test message');
+        this.logService.warn('Test message');
-   }
+    }
 
-   warn() {
+    log() {
-       this.logService.warn('Test message');
+        this.logService.log('Test message');
-   }
+    }
 
-   log() {
+    debug() {
-       this.logService.log('Test message');
+        this.logService.debug('Test message');
-   }
+    }
-
-   debug() {
-       this.logService.debug('Test message');
-   }
-
-   trace() {
-       this.logService.trace('Test message');
-   }
 
+    trace() {
+        this.logService.trace('Test message');
+    }
 }
 
-describe('Log Service', () => {
+describe('LogService', () => {
+    let providesLogComponent: ComponentFixture<ProvidesLogComponent>;
+    let appConfigService: AppConfigService;
 
-   let providesLogComponent: ComponentFixture<ProvidesLogComponent>;
+    setupTestBed({
-   let appConfigService: AppConfigService;
+        imports: [HttpClientModule],
+        declarations: [ProvidesLogComponent],
+        providers: [LogService, AppConfigService]
+    });
 
-   setupTestBed({
+    beforeEach(() => {
-       imports: [
+        appConfigService = TestBed.get(AppConfigService);
-           HttpClientModule
+        providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
-       ],
+    });
-       declarations: [ProvidesLogComponent],
-       providers: [
-           LogService,
-           AppConfigService
-       ]
-   });
 
-   beforeEach(() => {
+    it('should not log anything if is silent', () => {
-       appConfigService = TestBed.get(AppConfigService);
+        appConfigService.config['logLevel'] = 'silent';
-   });
 
-   it('should not log anything if is silent', () => {
+        spyOn(console, 'log');
-       appConfigService.config['logLevel'] = 'silent';
+        spyOn(console, 'trace');
-       providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
+        spyOn(console, 'debug');
+        spyOn(console, 'info');
+        spyOn(console, 'warn');
+        spyOn(console, 'error');
 
-       spyOn(console, 'log');
+        providesLogComponent.componentInstance.log();
-       spyOn(console, 'trace');
+        providesLogComponent.componentInstance.trace();
-       spyOn(console, 'debug');
+        providesLogComponent.componentInstance.debug();
-       spyOn(console, 'info');
+        providesLogComponent.componentInstance.info();
-       spyOn(console, 'warn');
+        providesLogComponent.componentInstance.warn();
-       spyOn(console, 'error');
+        providesLogComponent.componentInstance.error();
 
-       providesLogComponent.componentInstance.log();
+        expect(console.log).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.trace();
+        expect(console.trace).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.debug();
+        expect(console.debug).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.info();
+        expect(console.info).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.warn();
+        expect(console.warn).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.error();
+        expect(console.error).not.toHaveBeenCalled();
+    });
 
-       expect(console.log).not.toHaveBeenCalled();
+    it('should log only warning and errors if is warning level', () => {
-       expect(console.trace).not.toHaveBeenCalled();
+        appConfigService.config['logLevel'] = 'WARN';
-       expect(console.debug).not.toHaveBeenCalled();
-       expect(console.info).not.toHaveBeenCalled();
-       expect(console.warn).not.toHaveBeenCalled();
-       expect(console.error).not.toHaveBeenCalled();
-   });
 
-   it('should log only warning and errors if is warning level', () => {
+        spyOn(console, 'log');
-       appConfigService.config['logLevel'] = 'WARN';
+        spyOn(console, 'error');
-       providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
+        spyOn(console, 'trace');
+        spyOn(console, 'warn');
 
-       spyOn(console, 'log');
+        providesLogComponent.componentInstance.log();
-       spyOn(console, 'error');
+        providesLogComponent.componentInstance.error();
-       spyOn(console, 'trace');
+        providesLogComponent.componentInstance.trace();
-       spyOn(console, 'warn');
+        providesLogComponent.componentInstance.warn();
 
-       providesLogComponent.componentInstance.log();
+        expect(console.log).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.error();
+        expect(console.error).toHaveBeenCalled();
-       providesLogComponent.componentInstance.trace();
+        expect(console.warn).toHaveBeenCalled();
-       providesLogComponent.componentInstance.warn();
+        expect(console.trace).not.toHaveBeenCalled();
+    });
 
-       expect(console.log).not.toHaveBeenCalled();
+    it('should debug level not log trace and log', () => {
-       expect(console.error).toHaveBeenCalled();
+        appConfigService.config['logLevel'] = 'debug';
-       expect(console.warn).toHaveBeenCalled();
-       expect(console.trace).not.toHaveBeenCalled();
-   });
 
-   it('should debug level not log trace and log', () => {
+        spyOn(console, 'log');
-       appConfigService.config['logLevel'] = 'debug';
+        spyOn(console, 'trace');
-       providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
+        spyOn(console, 'debug');
+        spyOn(console, 'info');
+        spyOn(console, 'warn');
+        spyOn(console, 'error');
 
-       spyOn(console, 'log');
+        providesLogComponent.componentInstance.log();
-       spyOn(console, 'trace');
+        providesLogComponent.componentInstance.trace();
-       spyOn(console, 'debug');
+        providesLogComponent.componentInstance.debug();
-       spyOn(console, 'info');
+        providesLogComponent.componentInstance.info();
-       spyOn(console, 'warn');
+        providesLogComponent.componentInstance.warn();
-       spyOn(console, 'error');
+        providesLogComponent.componentInstance.error();
 
-       providesLogComponent.componentInstance.log();
+        expect(console.log).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.trace();
+        expect(console.trace).not.toHaveBeenCalled();
-       providesLogComponent.componentInstance.debug();
+        expect(console.debug).toHaveBeenCalled();
-       providesLogComponent.componentInstance.info();
+        expect(console.info).toHaveBeenCalled();
-       providesLogComponent.componentInstance.warn();
+        expect(console.warn).toHaveBeenCalled();
-       providesLogComponent.componentInstance.error();
+        expect(console.error).toHaveBeenCalled();
+    });
 
-       expect(console.log).not.toHaveBeenCalled();
+    it('should trace level log all', () => {
-       expect(console.trace).not.toHaveBeenCalled();
+        appConfigService.config['logLevel'] = 'trace';
-       expect(console.debug).toHaveBeenCalled();
-       expect(console.info).toHaveBeenCalled();
-       expect(console.warn).toHaveBeenCalled();
-       expect(console.error).toHaveBeenCalled();
-   });
 
-   it('should trace level log all', () => {
+        spyOn(console, 'log');
-       appConfigService.config['logLevel'] = 'trace';
+        spyOn(console, 'trace');
-       providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
+        spyOn(console, 'debug');
+        spyOn(console, 'info');
+        spyOn(console, 'warn');
+        spyOn(console, 'error');
 
-       spyOn(console, 'log');
+        providesLogComponent.componentInstance.log();
-       spyOn(console, 'trace');
+        providesLogComponent.componentInstance.trace();
-       spyOn(console, 'debug');
+        providesLogComponent.componentInstance.debug();
-       spyOn(console, 'info');
+        providesLogComponent.componentInstance.info();
-       spyOn(console, 'warn');
+        providesLogComponent.componentInstance.warn();
-       spyOn(console, 'error');
+        providesLogComponent.componentInstance.error();
 
-       providesLogComponent.componentInstance.log();
+        expect(console.log).toHaveBeenCalled();
-       providesLogComponent.componentInstance.trace();
+        expect(console.trace).toHaveBeenCalled();
-       providesLogComponent.componentInstance.debug();
+        expect(console.debug).toHaveBeenCalled();
-       providesLogComponent.componentInstance.info();
+        expect(console.info).toHaveBeenCalled();
-       providesLogComponent.componentInstance.warn();
+        expect(console.warn).toHaveBeenCalled();
-       providesLogComponent.componentInstance.error();
+        expect(console.error).toHaveBeenCalled();
+    });
 
-       expect(console.log).toHaveBeenCalled();
+    it('message Observable', done => {
-       expect(console.trace).toHaveBeenCalled();
+        appConfigService.config['logLevel'] = 'trace';
-       expect(console.debug).toHaveBeenCalled();
-       expect(console.info).toHaveBeenCalled();
-       expect(console.warn).toHaveBeenCalled();
-       expect(console.error).toHaveBeenCalled();
-   });
 
-   it('message Observable', (done) => {
+        providesLogComponent.componentInstance.logService.onMessage.subscribe(
-       appConfigService.config['logLevel'] = 'trace';
+            () => {
-       providesLogComponent = TestBed.createComponent(ProvidesLogComponent);
+                done();
-
+            }
-       providesLogComponent.componentInstance.logService.onMessage.subscribe(() => {
+        );
-           done();
-       });
-
-       providesLogComponent.componentInstance.log();
-
-   });
 
+        providesLogComponent.componentInstance.log();
+    });
 });

lib/core/services/page-title.service.spec.ts

@@ -23,13 +23,13 @@ import { PageTitleService } from './page-title.service';
 import { TranslationService } from './translation.service';
 import { Title } from '@angular/platform-browser';
 
-describe('AppTitle service', () => {
+describe('PageTitleService', () => {
 
-    let titleService: any;
+    let titleService: Title;
-    let translationService: any;
+    let translationService: TranslationService;
-    let pageTitleService: any;
+    let pageTitleService: PageTitleService;
-    let appConfigService: any;
+    let appConfigService: AppConfigService;
-    let titleServiceSpy: any;
+    let titleServiceSpy: jasmine.Spy;
 
     setupTestBed({
         imports: [

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

@@ -69,11 +69,6 @@ describe('TranslationService', () => {
         jasmine.Ajax.uninstall();
     });
 
-    it('is defined', () => {
-        expect(translationService).toBeDefined();
-        expect(translationService instanceof TranslationService).toBeTruthy();
-    });
-
     it('should be able to get translations of the KEY: TEST', () => {
         translationService.get('TEST').subscribe((res: string) => {
             expect(res).toEqual('This is a test');

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

@@ -0,0 +1,109 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { setupTestBed, CoreModule, TranslationService } from '@alfresco/adf-core';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { TemplateModule } from '../template.module';
+import { TranslationMock } from '../../mock/translation.service.mock';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+@Component({
+    selector: 'adf-test-component',
+    template: `
+        <adf-empty-content
+            icon="delete"
+            [title]="'CUSTOM_TITLE'"
+            [subtitle]="'CUSTOM_SUBTITLE'">
+            <div class="adf-empty-content__text">SUBTITLE-1</div>
+            <div class="adf-empty-content__text">SUBTITLE-2</div>
+            <div class="adf-empty-content__text">SUBTITLE-3</div>
+        </adf-empty-content>
+    `
+})
+class TestComponent {}
+
+describe('EmptyContentComponent', () => {
+
+    let fixture: ComponentFixture<TestComponent>;
+    let translateService: TranslateService;
+
+    setupTestBed({
+        imports: [
+            NoopAnimationsModule,
+            CoreModule.forRoot(),
+            TemplateModule
+        ],
+        declarations: [
+            TestComponent
+        ],
+        providers: [
+            { provide: TranslationService, useClass: TranslationMock }
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestComponent);
+        translateService = TestBed.get(TranslateService);
+    });
+
+    it('should render custom title', async(() => {
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            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(() => {
+        spyOn(translateService, 'get').and.callFake((key: string) => {
+            switch (key) {
+                case 'CUSTOM_TITLE':
+                    return of('ENG_CUSTOM_TITLE');
+                case 'CUSTOM_SUBTITLE':
+                    return of('ENG_CUSTOM_SUBTITLE');
+                default:
+                    return of(key);
+            }
+        });
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            const title = fixture.debugElement.query(By.css('.adf-empty-content__title'));
+            const subtitle = fixture.debugElement.query(By.css('.adf-empty-content__subtitle'));
+
+            expect(title).toBeDefined('title element not found');
+            expect(title.nativeElement.textContent).toContain('ENG_CUSTOM_TITLE', 'incorrect title value');
+
+            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'));
+
+        expect(subTitles.length).toBe(3);
+        expect(subTitles[0].nativeElement.textContent).toContain('SUBTITLE-1', 'missing SUBTITLE-1');
+        expect(subTitles[1].nativeElement.textContent).toContain('SUBTITLE-2', 'missing SUBTITLE-2');
+        expect(subTitles[2].nativeElement.textContent).toContain('SUBTITLE-3', 'missing SUBTITLE-3');
+    });
+});

lib/process-services/src/lib/process-list/components/process-list.component.html

@@ -11,12 +11,11 @@
     (row-keyup)="onRowKeyUp($event)">
     <adf-loading-content-template>
         <ng-template>
-            <!--Add your custom loading template here-->
             <mat-progress-spinner
                 *ngIf="!customLoadingContent"
                 class="adf-process-list-loading-margin"
-                [color]="'primary'"
+                color="primary"
-                [mode]="'indeterminate'">
+                mode="indeterminate">
             </mat-progress-spinner>
             <ng-content select="adf-custom-loading-content-template"></ng-content>
         </ng-template>
@@ -25,7 +24,7 @@
         <ng-template>
                 <adf-empty-content *ngIf="!customEmptyContent"
                     icon="assessment"
-                    [title]="(requestNode ? 'ADF_PROCESS_LIST.LIST.TITLE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate "
+                    [title]="(requestNode ? 'ADF_PROCESS_LIST.LIST.TITLE' : 'ADF_PROCESS_LIST.FILTERS.MESSAGES.NONE') | translate"
                     [subtitle]="'ADF_PROCESS_LIST.LIST.SUBTITLE'| translate">
                 </adf-empty-content>
             <ng-content select="adf-custom-empty-content-template"></ng-content>

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

@@ -36,6 +36,7 @@ describe('ProcessInstanceListComponent', () => {
     let service: ProcessService;
     let getProcessInstancesSpy: jasmine.Spy;
     let appConfig: AppConfigService;
+
     const resolverfn = (row: DataRow, col: DataColumn) => {
         const value = row.getValue(col.key);
         if (col.key === 'variables') {
@@ -77,6 +78,13 @@ describe('ProcessInstanceListComponent', () => {
         };
     }));
 
+    it('should display loading spinner', () => {
+        component.isLoading = true;
+
+        const spinner = fixture.debugElement.query(By.css('.mat-progress-spinner'));
+        expect(spinner).toBeDefined();
+    });
+
     it('should use the default schemaColumn as default', () => {
         component.ngAfterContentInit();
         expect(component.columns).toBeDefined();

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

@@ -29,7 +29,6 @@ import {
     PaginationModel,
     UserPreferencesService
 } from '@alfresco/adf-core';
-import { DatePipe } from '@angular/common';
 import {
     AfterContentInit,
     Component,
@@ -45,7 +44,7 @@ import { processPresetsDefaultModel } from '../models/process-preset.model';
 import { ProcessService } from '../services/process.service';
 import { BehaviorSubject } from 'rxjs';
 import { ProcessListModel } from '../models/process-list.model';
-import { ProcessInstanceRepresentation } from '@alfresco/js-api';
+import { finalize } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-process-instance-list',
@@ -120,22 +119,21 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
 
     /** Emitted when a row in the process list is clicked. */
     @Output()
-    rowClick: EventEmitter<string> = new EventEmitter<string>();
+    rowClick = new EventEmitter<string>();
 
     /** Emitted when the list of process instances has been loaded successfully from the server. */
     @Output()
-    success: EventEmitter<ProcessListModel> = new EventEmitter<ProcessListModel>();
+    success = new EventEmitter<ProcessListModel>();
 
     /** Emitted when an error occurs while loading the list of process instances from the server. */
     @Output()
-    error: EventEmitter<any> = new EventEmitter<any>();
+    error = new EventEmitter<any>();
 
     requestNode: ProcessFilterParamRepresentationModel;
     currentInstanceId: string;
     isLoading: boolean = true;
     rows: any[] = [];
     sorting: any[] = ['created', 'desc'];
-
     pagination: BehaviorSubject<PaginationModel>;
 
     constructor(private processService: ProcessService,
@@ -153,6 +151,7 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
 
     ngAfterContentInit() {
         this.createDatatableSchema();
+
         if (this.data && this.data.getColumns().length === 0) {
             this.data.setColumns(this.columns);
         }
@@ -213,12 +212,12 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
     private load(requestNode: ProcessFilterParamRepresentationModel) {
         this.isLoading = true;
         this.processService.getProcesses(requestNode)
+            .pipe(finalize(() => this.isLoading = false))
             .subscribe(
-                (response) => {
+                response => {
-                    this.rows = this.optimizeProcessDetails(response.data);
+                    this.rows = response.data;
                     this.selectFirst();
                     this.success.emit(response);
-                    this.isLoading = false;
                     this.pagination.next({
                         count: response.data.length,
                         maxItems: this.size,
@@ -226,10 +225,10 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
                         totalItems: response.total
                     });
                 },
-                (error) => {
+                error => {
                     this.error.emit(error);
-                    this.isLoading = false;
+                }
-                });
+            );
     }
 
     /**
@@ -267,6 +266,7 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
      */
     onRowClick(event: DataRowEvent) {
         const item = event;
+
         this.currentInstanceId = item.value.getValue('id');
         this.rowClick.emit(this.currentInstanceId);
     }
@@ -278,43 +278,14 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
     onRowKeyUp(event: CustomEvent) {
         if (event.detail.keyboardEvent.key === 'Enter') {
             event.preventDefault();
+
             this.currentInstanceId = event.detail.row.getValue('id');
             this.rowClick.emit(this.currentInstanceId);
         }
     }
 
-    /**
-     * Optimize name field
-     * @param instances
-     */
-    private optimizeProcessDetails(instances: ProcessInstanceRepresentation[]): ProcessInstanceRepresentation[] {
-        instances = instances.map((instance) => {
-            instance.name = this.getProcessNameOrDescription(instance, 'medium');
-            return instance;
-        });
-        return instances;
-    }
-
-    getProcessNameOrDescription(processInstance: ProcessInstanceRepresentation, dateFormat: string): string {
-        let name = '';
-        if (processInstance) {
-            name = processInstance.name ||
-                processInstance.processDefinitionName + ' - ' + this.getFormatDate(processInstance.started, dateFormat);
-        }
-        return name;
-    }
-
-    getFormatDate(value: Date, format: string) {
-        const datePipe = new DatePipe('en-US');
-        try {
-            return datePipe.transform(value, format);
-        } catch (err) {
-            return '';
-        }
-    }
-
     private createRequestNode(): ProcessFilterParamRepresentationModel {
-        const requestNode = {
+        return new ProcessFilterParamRepresentationModel({
             appDefinitionId: this.appId,
             processDefinitionId: this.processDefinitionId,
             processInstanceId: this.processInstanceId,
@@ -323,14 +294,15 @@ export class ProcessInstanceListComponent extends DataTableSchema implements OnC
             page: this.page,
             size: this.size,
             start: 0
-        };
+        });
-        return new ProcessFilterParamRepresentationModel(requestNode);
     }
 
     updatePagination(params: PaginationModel) {
         const needsReload = params.maxItems || params.skipCount;
+
         this.size = params.maxItems;
         this.page = this.currentPage(params.skipCount, params.maxItems);
+
         if (needsReload) {
             this.reload();
         }

lib/process-services/src/lib/process-list/services/process.service.ts

@@ -17,7 +17,7 @@
 
 import { AlfrescoApiService, FormValues } from '@alfresco/adf-core';
 import { Injectable } from '@angular/core';
-import { RestVariable } from '@alfresco/js-api';
+import { RestVariable, ProcessInstanceRepresentation } from '@alfresco/js-api';
 import { Observable, from, throwError, of } from 'rxjs';
 import { TaskDetailsModel } from '../../task-list';
 import { ProcessFilterParamRepresentationModel } from '../models/filter-process.model';
@@ -26,6 +26,7 @@ import { ProcessInstanceVariable } from '../models/process-instance-variable.mod
 import { ProcessInstance } from '../models/process-instance.model';
 import { ProcessListModel } from '../models/process-list.model';
 import { map, catchError } from 'rxjs/operators';
+import { DatePipe } from '@angular/common';
 
 declare let moment: any;
 
@@ -67,9 +68,39 @@ export class ProcessService {
      */
     getProcesses(requestNode: ProcessFilterParamRepresentationModel, processDefinitionKey?: string): Observable<ProcessListModel> {
         return this.getProcessInstances(requestNode, processDefinitionKey)
-            .pipe(catchError(() => {
+            .pipe(
-                return of(new ProcessListModel({}));
+                map(response => {
-            }));
+                    return {
+                        ...response,
+                        data: (response.data || []).map(instance => {
+                            instance.name = this.getProcessNameOrDescription(instance, 'medium');
+                            return instance;
+                        })
+                    };
+                }),
+                catchError(() => of(new ProcessListModel({})))
+            );
+    }
+
+    private getProcessNameOrDescription(processInstance: ProcessInstanceRepresentation, dateFormat: string): string {
+        let name = '';
+
+        if (processInstance) {
+            name = processInstance.name ||
+                processInstance.processDefinitionName + ' - ' + this.getFormatDate(processInstance.started, dateFormat);
+        }
+
+        return name;
+    }
+
+    private getFormatDate(value: Date, format: string) {
+        const datePipe = new DatePipe('en-US');
+
+        try {
+            return datePipe.transform(value, format);
+        } catch (err) {
+            return '';
+        }
     }
 
     /**

lib/process-services/src/lib/task-list/components/start-task.component.html

@@ -81,17 +81,19 @@
         <div class="adf-new-task-footer" fxLayout="row" fxLayoutAlign="end end">
             <button
                 mat-button
+                class="adf-uppercase"
                 (click)="onCancel()"
                 id="button-cancel">
-                {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL'|translate}}
+                {{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.CANCEL' | translate }}
             </button>
             <button
                 color="primary"
                 mat-button
+                class="adf-uppercase"
                 [disabled]="!isFormValid()"
                 (click)="saveTask()"
                 id="button-start">
-                {{'ADF_TASK_LIST.START_TASK.FORM.ACTION.START'|translate}}
+                {{ 'ADF_TASK_LIST.START_TASK.FORM.ACTION.START' | translate }}
             </button>
         </div>
     </mat-card-actions>

lib/process-services/src/lib/task-list/components/start-task.component.scss

@@ -34,6 +34,10 @@
 
     adf-start-task {
 
+        .mat-button.adf-uppercase {
+            text-transform: uppercase;
+        }
+
         people-widget {
             width: 100%;
             .mat-form-field-label-wrapper {
@@ -54,13 +58,6 @@
         }
 
         .adf {
-
-            &-new-task-footer {
-                .mat-button {
-                    text-transform: uppercase !important;
-                }
-            }
-
             &-start-task-input-container .mat-form-field-wrapper {
                 padding-top: 8px;
             }

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

@@ -34,6 +34,7 @@ describe('StartTaskComponent', () => {
     let getFormListSpy: jasmine.Spy;
     let createNewTaskSpy: jasmine.Spy;
     let logSpy: jasmine.Spy;
+
     const fakeForms$ = [
         {
             id: 123,
@@ -58,6 +59,7 @@ describe('StartTaskComponent', () => {
 
         service = TestBed.get(TaskListService);
         logService = TestBed.get(LogService);
+
         getFormListSpy = spyOn(service, 'getFormList').and.returnValue(new Observable((observer) => {
             observer.next(fakeForms$);
             observer.complete();
@@ -71,10 +73,6 @@ describe('StartTaskComponent', () => {
         TestBed.resetTestingModule();
     });
 
-    it('should create instance of StartTaskComponent', () => {
-        expect(component instanceof StartTaskComponent).toBe(true, 'should create StartTaskComponent');
-    });
-
     it('should fetch fake form on init', () => {
         component.ngOnInit();
         fixture.detectChanges();
@@ -309,6 +307,21 @@ describe('StartTaskComponent', () => {
         expect(element.querySelector('#button-start').textContent).toContain('ADF_TASK_LIST.START_TASK.FORM.ACTION.START');
     });
 
+    it('should render start task button with primary color', () => {
+        fixture.detectChanges();
+        expect(element.querySelector('#button-start').classList.contains('mat-primary')).toBeTruthy();
+    });
+
+    it('should render task buttons with uppercase text', () => {
+        fixture.detectChanges();
+
+        const startButton = element.querySelector<HTMLButtonElement>('#button-start');
+        expect(startButton.classList.contains('adf-uppercase')).toBeTruthy();
+
+        const cancelButton = element.querySelector<HTMLButtonElement>('#button-cancel');
+        expect(cancelButton.classList.contains('adf-uppercase')).toBeTruthy();
+    });
+
     it('should not emit TaskDetails OnCancel', () => {
         const emitSpy = spyOn(component.cancel, 'emit');
         component.onCancel();

lib/process-services/src/lib/task-list/components/task-list.component.html

@@ -18,8 +18,8 @@
                     <mat-progress-spinner
                         *ngIf="!customLoadingContent"
                         class="adf-task-list-loading-margin"
-                        [color]="'primary'"
+                        color="primary"
-                        [mode]="'indeterminate'">
+                        mode="indeterminate">
                     </mat-progress-spinner>
                     <ng-content select="adf-custom-loading-content-template"></ng-content>
                 </ng-template>

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

@@ -16,7 +16,7 @@
  */
 
 import { Component, SimpleChange, ViewChild } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AppConfigService, setupTestBed, CoreModule, DataTableModule, DataRowEvent, ObjectDataRow } from '@alfresco/adf-core';
 import { TaskListService } from '../services/tasklist.service';
@@ -79,6 +79,29 @@ describe('TaskListComponent', () => {
         fixture.destroy();
     });
 
+    it('should display loading spinner', () => {
+        component.isLoading = true;
+
+        const spinner = fixture.debugElement.query(By.css('.mat-progress-spinner'));
+        expect(spinner).toBeDefined();
+    });
+
+    it('should hide loading spinner upon loading complete', async(() => {
+        component.isLoading = true;
+        fixture.detectChanges();
+
+        let spinner = fixture.debugElement.query(By.css('.mat-progress-spinner'));
+        expect(spinner).toBeDefined();
+
+        component.isLoading = false;
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+            spinner = fixture.debugElement.query(By.css('.mat-progress-spinner'));
+            expect(spinner).toBeNull();
+        });
+    }));
+
     it('should use the default schemaColumn as default', () => {
         component.ngAfterContentInit();
         expect(component.columns).toBeDefined();

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

@@ -29,7 +29,7 @@ import { TaskListModel } from '../models/task-list.model';
 import { taskPresetsDefaultModel } from '../models/task-preset.model';
 import { TaskListService } from './../services/tasklist.service';
 import moment from 'moment-es6';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, finalize } from 'rxjs/operators';
 import { TaskDetailsModel } from '../models/task-details.model';
 
 @Component({
@@ -125,19 +125,19 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
 
     /** Emitted when a task in the list is clicked */
     @Output()
-    rowClick: EventEmitter<string> = new EventEmitter<string>();
+    rowClick = new EventEmitter<string>();
 
     /** Emitted when rows are selected/unselected */
     @Output()
-    rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
+    rowsSelected = new EventEmitter<any[]>();
 
     /** Emitted when the task list is loaded */
     @Output()
-    success: EventEmitter<any> = new EventEmitter<any>();
+    success = new EventEmitter<any>();
 
     /** Emitted when an error occurs. */
     @Output()
-    error: EventEmitter<any> = new EventEmitter<any>();
+    error = new EventEmitter<any>();
 
     currentInstanceId: string;
     selectedInstances: any[];
@@ -258,22 +258,24 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
 
     private load() {
         this.isLoading = true;
-        this.loadTasksByState().subscribe(
+
-            (tasks) => {
+        this.loadTasksByState()
-                this.rows = this.optimizeTaskDetails(tasks.data);
+            .pipe(finalize(() => this.isLoading = false))
-                this.selectTask(this.landingTaskId);
+            .subscribe(
-                this.success.emit(tasks);
+                tasks => {
-                this.isLoading = false;
+                    this.rows = this.optimizeTaskDetails(tasks.data);
-                this.pagination.next({
+                    this.selectTask(this.landingTaskId);
-                    count: tasks.data.length,
+                    this.success.emit(tasks);
-                    maxItems: this.size,
+                    this.pagination.next({
-                    skipCount: this.page * this.size,
+                        count: tasks.data.length,
-                    totalItems: tasks.total
+                        maxItems: this.size,
+                        skipCount: this.page * this.size,
+                        totalItems: tasks.total
+                    });
+                },
+                error => {
+                    this.error.emit(error);
                 });
-            }, (error) => {
-                this.error.emit(error);
-                this.isLoading = false;
-            });
     }
 
     private loadTasksByState(): Observable<TaskListModel> {
@@ -288,14 +290,17 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
     selectTask(taskIdSelected: string): void {
         if (!this.isListEmpty()) {
             let dataRow = null;
+
             if (taskIdSelected) {
                 dataRow = this.rows.find((currentRow: any) => {
                     return currentRow['id'] === taskIdSelected;
                 });
             }
+
             if (!dataRow && this.selectFirstRow) {
                 dataRow = this.rows[0];
             }
+
             if (dataRow) {
                 dataRow.isSelected = true;
                 this.currentInstanceId = dataRow['id'];
@@ -345,6 +350,7 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
     onRowKeyUp(event: CustomEvent) {
         if (event.detail.keyboardEvent.key === 'Enter') {
             event.preventDefault();
+
             this.currentInstanceId = event.detail.row.getValue('id');
             this.rowClick.emit(this.currentInstanceId);
         }
@@ -365,7 +371,6 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
     }
 
     private createRequestNode() {
-
         const requestNode = {
             appDefinitionId: this.appId,
             dueAfter: this.dueAfter ? moment(this.dueAfter).toDate() : null,
@@ -387,8 +392,10 @@ export class TaskListComponent extends DataTableSchema implements OnChanges, Aft
 
     updatePagination(params: PaginationModel) {
         const needsReload = params.maxItems || params.skipCount;
+
         this.size = params.maxItems;
         this.page = this.currentPage(params.skipCount, params.maxItems);
+
         if (needsReload) {
             this.reload();
         }