[ACA-4123] Unify APS and Cloud event emitters for filters (#6331)

* Experimental solution * Unify event emitters for aps and cloud filters * Update emitter descriptions * Fix/Add unit tests * Unit tests part 2 * Update documentation, put mock objects into separate mock files and remove them from test files * rename tests * align demo-shell with the new changes * fix aps demo shell
2025-07-24 17:32:15 +00:00 · 2020-11-16 14:37:17 +00:00
parent db1fb81c4d
commit 4dfa9b6d53
30 changed files with 561 additions and 445 deletions
--- a/lib/process-services/src/lib/mock/process/process-filters.mock.ts
+++ b/lib/process-services/src/lib/mock/process/process-filters.mock.ts
@@ -0,0 +1,51 @@
+/*!
+ * @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 { FilterProcessRepresentationModel } from '../../process-list/models/filter-process.model';
+
+export let fakeProcessFilters = [
+    new FilterProcessRepresentationModel({
+        id: 10,
+        name: 'FakeCompleted',
+        icon: 'glyphicon-th',
+        filter: { state: 'open', assignment: 'fake-involved' }
+    }),
+    new FilterProcessRepresentationModel({
+        id: 20,
+        name: 'FakeAll',
+        icon: 'glyphicon-random',
+        filter: { state: 'open', assignment: 'fake-assignee' }
+    }),
+    new FilterProcessRepresentationModel({
+        id: 30,
+        name: 'Running',
+        icon: 'glyphicon-ok-sign',
+        filter: { state: 'open', assignment: 'fake-running' }
+    })
+];
+
+export let fakeProcessFiltersResponse = {
+    size: 1, total: 1, start: 0,
+    data: [new FilterProcessRepresentationModel({
+        'name': 'Running',
+        'appId': '22',
+        'id': 333,
+        'recent': true,
+        'icon': 'glyphicon-random',
+        'filter': { 'sort': 'created-desc', 'name': '', 'state': 'running' }
+    })]
+};
--- a/lib/process-services/src/lib/mock/process/process.service.mock.ts
+++ b/lib/process-services/src/lib/mock/process/process.service.mock.ts
@@ -16,26 +16,8 @@
 */

 import { AppDefinitionRepresentationModel, TaskDetailsModel } from '../../task-list';
-import { FilterProcessRepresentationModel } from '../../process-list/models/filter-process.model';
 import { ProcessDefinitionRepresentation } from '../../process-list/models/process-definition.model';

-export let fakeProcessFilters = {
-    size: 1, total: 1, start: 0,
-    data: [new FilterProcessRepresentationModel({
-        'name': 'Running',
-        'appId': '22',
-        'id': 333,
-        'recent': true,
-        'icon': 'glyphicon-random',
-        'filter': { 'sort': 'created-desc', 'name': '', 'state': 'running' }
-    })]
-};
-
-export let fakeEmptyFilters = {
-    size: 0, total: 0, start: 0,
-    data: []
-};
-
 export let mockError = {
    message: null,
    messageKey: 'GENERAL.ERROR.FORBIDDEN'
--- a/lib/process-services/src/lib/mock/public-api.ts
+++ b/lib/process-services/src/lib/mock/public-api.ts
@@ -26,3 +26,5 @@ export * from './task/task-details.mock';
 export * from './task/task-details.component.mock';
 export * from './task/task-list.mock';
 export * from './task/tasklist-service.mock';
+export * from './process/process-filters.mock';
+export * from './task/task-filters.mock';
--- a/lib/process-services/src/lib/mock/task/task-filters.mock.ts
+++ b/lib/process-services/src/lib/mock/task/task-filters.mock.ts
@@ -0,0 +1,103 @@
+/*!
+ * @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 { AppDefinitionRepresentationModel, FilterRepresentationModel } from '../../task-list/models/filter.model';
+
+export let fakeFiltersResponse = {
+    size: 2, total: 2, start: 0,
+    data: [
+        new AppDefinitionRepresentationModel(
+            {
+                id: 1, name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
+                filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-involved' }
+            }
+        ),
+        {
+            id: 2, name: 'FakeMyTasks', recent: false, icon: 'glyphicon-align-left',
+            filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-assignee' }
+        }
+    ]
+};
+
+export let fakeTaskFilters = [
+    new FilterRepresentationModel({
+        name: 'FakeInvolvedTasks',
+        icon: 'glyphicon-align-left',
+        id: 10,
+        filter: { state: 'open', assignment: 'fake-involved' }
+    }),
+    new FilterRepresentationModel({
+        name: 'FakeMyTasks1',
+        icon: 'glyphicon-ok-sign',
+        id: 11,
+        filter: { state: 'open', assignment: 'fake-assignee' }
+    }),
+    new FilterRepresentationModel({
+        name: 'FakeMyTasks2',
+        icon: 'glyphicon-inbox',
+        id: 12,
+        filter: { state: 'open', assignment: 'fake-assignee' }
+    })
+];
+
+export let fakeAppFilter = {
+    size: 1, total: 1, start: 0,
+    data: [
+        {
+            id: 1, name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
+            filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-involved' }
+        }
+    ]
+};
+
+export let fakeFilter = {
+    sort: 'created-desc', text: '', state: 'open', assignment: 'fake-assignee'
+};
+
+export let fakeRepresentationFilter1: FilterRepresentationModel = new FilterRepresentationModel({
+    appId: 1,
+    name: 'CONTAIN FILTER',
+    recent: true,
+    icon: 'glyphicon-align-left',
+    filter: {
+        processDefinitionId: null,
+        processDefinitionKey: null,
+        name: null,
+        state: 'open',
+        sort: 'created-desc',
+        assignment: 'involved',
+        dueAfter: null,
+        dueBefore: null
+    }
+});
+
+export let fakeRepresentationFilter2: FilterRepresentationModel = new FilterRepresentationModel({
+    appId: 2,
+    name: 'NO TASK FILTER',
+    recent: false,
+    icon: 'glyphicon-inbox',
+    filter: {
+        processDefinitionId: null,
+        processDefinitionKey: null,
+        name: null,
+        state: 'open',
+        sort: 'created-desc',
+        assignment: 'assignee',
+        dueAfter: null,
+        dueBefore: null
+    }
+});
--- a/lib/process-services/src/lib/mock/task/tasklist-service.mock.ts
+++ b/lib/process-services/src/lib/mock/task/tasklist-service.mock.ts
@@ -15,36 +15,7 @@
 * limitations under the License.
 */

-import {
-    AppDefinitionRepresentationModel,
-    FilterRepresentationModel
-} from '../../task-list/models/filter.model';
-
-export let fakeFilters = {
-    size: 2, total: 2, start: 0,
-    data: [
-        new AppDefinitionRepresentationModel(
-            {
-                id: 1, name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
-                filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-involved' }
-            }
-        ),
-        {
-            id: 2, name: 'FakeMyTasks', recent: false, icon: 'glyphicon-align-left',
-            filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-assignee' }
-        }
-    ]
-};
-
-export let fakeAppFilter = {
-    size: 1, total: 1, start: 0,
-    data: [
-        {
-            id: 1, name: 'FakeInvolvedTasks', recent: false, icon: 'glyphicon-align-left',
-            filter: { sort: 'created-desc', name: '', state: 'open', assignment: 'fake-involved' }
-        }
-    ]
-};
+import { fakeAppFilter } from './task-filters.mock';

 export let fakeApps = {
    size: 2, total: 2, start: 0,
@@ -60,10 +31,6 @@ export let fakeApps = {
    ]
 };

-export let fakeFilter = {
-    sort: 'created-desc', text: '', state: 'open', assignment: 'fake-assignee'
-};
-
 export let fakeUser1 = { id: 1, email: 'fake-email@dom.com', firstName: 'firstName', lastName: 'lastName' };

 export let fakeUser2 = { id: 1001, email: 'some-one@somegroup.com', firstName: 'some', lastName: 'one' };
@@ -142,40 +109,6 @@ export let fakeTasksChecklist = {
    ]
 };

-export let fakeRepresentationFilter1: FilterRepresentationModel = new FilterRepresentationModel({
-    appId: 1,
-    name: 'CONTAIN FILTER',
-    recent: true,
-    icon: 'glyphicon-align-left',
-    filter: {
-        processDefinitionId: null,
-        processDefinitionKey: null,
-        name: null,
-        state: 'open',
-        sort: 'created-desc',
-        assignment: 'involved',
-        dueAfter: null,
-        dueBefore: null
-    }
-});
-
-export let fakeRepresentationFilter2: FilterRepresentationModel = new FilterRepresentationModel({
-    appId: 2,
-    name: 'NO TASK FILTER',
-    recent: false,
-    icon: 'glyphicon-inbox',
-    filter: {
-        processDefinitionId: null,
-        processDefinitionKey: null,
-        name: null,
-        state: 'open',
-        sort: 'created-desc',
-        assignment: 'assignee',
-        dueAfter: null,
-        dueBefore: null
-    }
-});
-
 export let fakeAppPromise = new Promise(function (resolve) {
    resolve(fakeAppFilter);
 });
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts
+++ b/lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts
@@ -23,7 +23,7 @@ import { ProcessFilterService } from '../services/process-filter.service';
 import { ProcessFiltersComponent } from './process-filters.component';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { fakeProcessFilters } from '../../mock';
+import { fakeProcessFilters } from '../../mock/process/process-filters.mock';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
 import { TranslateModule } from '@ngx-translate/core';

@@ -47,28 +47,7 @@ describe('ProcessFiltersComponent', () => {
    beforeEach(() => {
        fixture = TestBed.createComponent(ProcessFiltersComponent);
        filterList = fixture.componentInstance;
-
-        fakeGlobalFilterPromise = Promise.resolve([
-            new FilterProcessRepresentationModel({
-                id: 10,
-                name: 'FakeCompleted',
-                icon: 'glyphicon-th',
-                filter: { state: 'open', assignment: 'fake-involved' }
-            }),
-            new FilterProcessRepresentationModel({
-                id: 20,
-                name: 'FakeAll',
-                icon: 'glyphicon-random',
-                filter: { state: 'open', assignment: 'fake-assignee' }
-            }),
-            new FilterProcessRepresentationModel({
-                id: 30,
-                name: 'Running',
-                icon: 'glyphicon-ok-sign',
-                filter: { state: 'open', assignment: 'fake-running' }
-            })
-        ]);
-
+        fakeGlobalFilterPromise = Promise.resolve(fakeProcessFilters);
        processFilterService = TestBed.inject(ProcessFilterService);
        appsProcessService = TestBed.inject(AppsProcessService);
    });
@@ -113,7 +92,7 @@ describe('ProcessFiltersComponent', () => {
        fixture.detectChanges();
    });

-    it('should emit an event when a filter is selected', (done) => {
+    it('should emit the selected filter based on the filterParam input', (done) => {
        spyOn(processFilterService, 'getProcessFilters').and.returnValue(from(fakeGlobalFilterPromise));
        filterList.filterParam = new FilterProcessRepresentationModel({ id: 10 });
        const appId = '1';
@@ -130,15 +109,33 @@ describe('ProcessFiltersComponent', () => {
        fixture.detectChanges();
    });

+    it('should filterClicked emit when a filter is clicked from the UI', async  () => {
+        filterList.filters = fakeProcessFilters;
+        spyOn(filterList.filterClicked, 'emit');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeProcessFilters[0].name}_filter"]`);
+        filterButton.click();
+
+        expect(filterList.filterClicked.emit).toHaveBeenCalledWith(fakeProcessFilters[0]);
+    });
+
    it('should reset selection when filterParam is a filter that does not exist', async () => {
        spyOn(processFilterService, 'getProcessFilters').and.returnValue(from(fakeGlobalFilterPromise));
-        filterList.currentFilter = fakeProcessFilters.data[0];
-        filterList.filterParam = new FilterProcessRepresentationModel({ name: 'non-existing-filter' });
+
+        const nonExistingFilterParam = { name: 'non-existing-filter' };
        const appId = '1';
        const change = new SimpleChange(null, appId, true);
+
+        filterList.currentFilter = nonExistingFilterParam;
+        filterList.filterParam = new FilterProcessRepresentationModel(nonExistingFilterParam);
+
        filterList.ngOnChanges({ 'appId': change });
        fixture.detectChanges();
        await fixture.whenStable();
+
        expect(filterList.currentFilter).toBe(undefined);
    });

@@ -199,7 +196,7 @@ describe('ProcessFiltersComponent', () => {
            filter: { state: 'open', assignment: 'fake-involved' }
        });

-        filterList.filterClick.subscribe((filter: FilterProcessRepresentationModel) => {
+        filterList.filterClicked.subscribe((filter: FilterProcessRepresentationModel) => {
            expect(filter).toBeDefined();
            expect(filter).toEqual(currentFilter);
            expect(filterList.currentFilter).toEqual(currentFilter);
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.ts
+++ b/lib/process-services/src/lib/process-list/components/process-filters.component.ts
@@ -36,9 +36,9 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
    @Input()
    filterParam: FilterProcessRepresentationModel;

-    /** Emitted when the user selects a filter from the list. */
+    /** Emitted when a filter is being clicked from the UI. */
    @Output()
-    filterClick: EventEmitter<UserProcessInstanceFilterRepresentation> = new EventEmitter<UserProcessInstanceFilterRepresentation>();
+    filterClicked: EventEmitter<UserProcessInstanceFilterRepresentation> = new EventEmitter<UserProcessInstanceFilterRepresentation>();

    /** Emitted when the list of filters has been successfully loaded from the server. */
    @Output()
@@ -60,9 +60,9 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
    @Input()
    showIcon: boolean = true;

-    /** Emitted when a process filter is selected. */
+    /** Emitted when a filter is being selected based on the filterParam input. */
    @Output()
-    filterSelected: EventEmitter<ProcessInstanceFilterRepresentation> = new EventEmitter<ProcessInstanceFilterRepresentation>();
+    filterSelected: EventEmitter<UserProcessInstanceFilterRepresentation> = new EventEmitter<UserProcessInstanceFilterRepresentation>();

    filter$: Observable<ProcessInstanceFilterRepresentation>;

@@ -149,7 +149,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
    selectFilter(filter: ProcessInstanceFilterRepresentation) {
        this.currentFilter = filter;
        this.active = true;
-        this.filterClick.emit(filter);
+        this.filterClicked.emit(filter);
    }

    /**
--- a/lib/process-services/src/lib/process-list/services/process-filter.service.spec.ts
+++ b/lib/process-services/src/lib/process-list/services/process-filter.service.spec.ts
@@ -16,7 +16,7 @@
 */

 import { async } from '@angular/core/testing';
-import { mockError, fakeProcessFilters } from '../../mock';
+import { mockError, fakeProcessFiltersResponse } from '../../mock';
 import { FilterProcessRepresentationModel } from '../models/filter-process.model';
 import { ProcessFilterService } from './process-filter.service';
 import { AlfrescoApiServiceMock, AlfrescoApiService, AppConfigService,
@@ -50,7 +50,7 @@ describe('Process filter', () => {
        beforeEach(() => {
            getFilters = spyOn(alfrescoApi.activiti.userFiltersApi, 'getUserProcessInstanceFilters')
                .and
-                .returnValue(Promise.resolve(fakeProcessFilters));
+                .returnValue(Promise.resolve(fakeProcessFiltersResponse));

            jasmine.Ajax.install();
        });
@@ -164,7 +164,7 @@ describe('Process filter', () => {
                .callFake((processfilter: FilterProcessRepresentationModel) => Promise.resolve(processfilter));
            });

-            const filter = fakeProcessFilters.data[0];
+            const filter = fakeProcessFiltersResponse.data[0];

            it('should call the API to create the filter', () => {
                service.addProcessFilter(filter);
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.html
+++ b/lib/process-services/src/lib/task-list/components/task-filters.component.html
@@ -1,5 +1,5 @@
 <div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-    <button (click)="selectFilterAndEmit(filter)"
+    <button (click)="onFilterClick(filter)"
      [attr.aria-label]="filter.name | translate"
      [id]="filter.id"
      [attr.data-automation-id]="filter.name + '_filter'"
@@ -10,4 +10,4 @@
      </ng-container>
      <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
    </button>
-</div>
+</div>
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.spec.ts
+++ b/lib/process-services/src/lib/task-list/components/task-filters.component.spec.ts
@@ -26,6 +26,7 @@ import { TaskFiltersComponent } from './task-filters.component';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
+import { fakeTaskFilters } from '../../mock/task/task-filters.mock';

 describe('TaskFiltersComponent', () => {

@@ -33,28 +34,8 @@ describe('TaskFiltersComponent', () => {
    let taskFilterService: TaskFilterService;
    let appsProcessService: AppsProcessService;

-    const fakeGlobalFilter = [];
-    fakeGlobalFilter.push(new FilterRepresentationModel({
-        name: 'FakeInvolvedTasks',
-        icon: 'glyphicon-align-left',
-        id: 10,
-        filter: { state: 'open', assignment: 'fake-involved' }
-    }));
-    fakeGlobalFilter.push(new FilterRepresentationModel({
-        name: 'FakeMyTasks1',
-        icon: 'glyphicon-ok-sign',
-        id: 11,
-        filter: { state: 'open', assignment: 'fake-assignee' }
-    }));
-    fakeGlobalFilter.push(new FilterRepresentationModel({
-        name: 'FakeMyTasks2',
-        icon: 'glyphicon-inbox',
-        id: 12,
-        filter: { state: 'open', assignment: 'fake-assignee' }
-    }));
-
    const fakeGlobalFilterPromise = new Promise(function (resolve) {
-        resolve(fakeGlobalFilter);
+        resolve(fakeTaskFilters);
    });

    const fakeGlobalEmptyFilter = {
@@ -217,17 +198,31 @@ describe('TaskFiltersComponent', () => {
        });
   });

-    it('should emit an event when a filter is selected', (done) => {
-        const currentFilter = fakeGlobalFilter[0];
-        component.filters = fakeGlobalFilter;
-        component.filterClick.subscribe((filter: FilterRepresentationModel) => {
-            expect(filter).toBeDefined();
-            expect(filter).toEqual(currentFilter);
-            expect(component.currentFilter).toEqual(currentFilter);
-            done();
-        });
+    it('should emit the selected filter based on the filterParam input', () => {
+        spyOn(component.filterSelected, 'emit');
+        component.filters = fakeTaskFilters;

-        component.selectFilterAndEmit(currentFilter);
+        const filterParam = new FilterParamsModel({ id: 10 });
+        const change = new SimpleChange(null, filterParam, true);
+        component.filterParam = filterParam;
+
+        component.ngOnChanges({ 'filterParam': change });
+        fixture.detectChanges();
+
+        expect(component.filterSelected.emit).toHaveBeenCalledWith(fakeTaskFilters[0]);
+    });
+
+    it('should filterClicked emit when a filter is clicked from the UI', async  () => {
+        component.filters = fakeTaskFilters;
+        spyOn(component.filterClicked, 'emit');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeTaskFilters[0].name}_filter"]`);
+        filterButton.click();
+
+        expect(component.filterClicked.emit).toHaveBeenCalledWith(fakeTaskFilters[0]);
    });

    it('should reload filters by appId on binding changes', () => {
@@ -251,25 +246,25 @@ describe('TaskFiltersComponent', () => {
    });

    it('should change current filter when filterParam (id) changes', async () => {
-        component.filters = fakeGlobalFilter;
+        component.filters = fakeTaskFilters;
        component.currentFilter = null;

        fixture.whenStable().then(() => {
-            expect(component.currentFilter.id).toEqual(fakeGlobalFilter[2].id);
+            expect(component.currentFilter.id).toEqual(fakeTaskFilters[2].id);
        });
-        const change = new SimpleChange(null, { id: fakeGlobalFilter[2].id }, true);
+        const change = new SimpleChange(null, { id: fakeTaskFilters[2].id }, true);
        component.ngOnChanges({ 'filterParam': change });
    });

    it('should change current filter when filterParam (name) changes', async () => {
-        component.filters = fakeGlobalFilter;
+        component.filters = fakeTaskFilters;
        component.currentFilter = null;

        fixture.whenStable().then(() => {
-            expect(component.currentFilter.name).toEqual(fakeGlobalFilter[2].name);
+            expect(component.currentFilter.name).toEqual(fakeTaskFilters[2].name);
        });

-        const change = new SimpleChange(null, { name: fakeGlobalFilter[2].name }, true);
+        const change = new SimpleChange(null, { name: fakeTaskFilters[2].name }, true);
        component.ngOnChanges({ 'filterParam': change });
    });

@@ -284,12 +279,11 @@ describe('TaskFiltersComponent', () => {
    });

    it('should return the current filter after one is selected', () => {
-        const filter = fakeGlobalFilter[1];
-        component.filters = fakeGlobalFilter;
+        component.filters = fakeTaskFilters;

        expect(component.currentFilter).toBeUndefined();
-        component.selectFilter(filter);
-        expect(component.getCurrentFilter()).toBe(filter);
+        component.selectFilter(fakeTaskFilters[1]);
+        expect(component.getCurrentFilter()).toBe(fakeTaskFilters[1]);
    });

    it('should load default list when app id is null', () => {
@@ -306,7 +300,7 @@ describe('TaskFiltersComponent', () => {
            name: 'FakeMyTasks',
            filter: { state: 'open', assignment: 'fake-assignee' }
        });
-        component.filters = fakeGlobalFilter;
+        component.filters = fakeTaskFilters;
        component.currentFilter = filter;
        spyOn(taskListService, 'isTaskRelatedToFilter').and.returnValue(of(null));
        component.selectFilterWithTask('111');
@@ -348,7 +342,7 @@ describe('TaskFiltersComponent', () => {

    it('should reset selection when filterParam is a filter that does not exist', async () => {
        spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(from(fakeGlobalFilterPromise));
-        component.currentFilter = fakeGlobalFilter[0];
+        component.currentFilter = fakeTaskFilters[0];
        component.filterParam = new FilterRepresentationModel( {name: 'non-existing-filter'});
        const appId = '1';
        const change = new SimpleChange(null, appId, true);
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.ts
+++ b/lib/process-services/src/lib/task-list/components/task-filters.component.ts
@@ -36,9 +36,13 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
    @Input()
    filterParam: FilterParamsModel;

-    /** Emitted when a filter in the list is clicked. */
+    /** Emitted when a filter is being clicked from the UI. */
    @Output()
-    filterClick: EventEmitter<FilterRepresentationModel> = new EventEmitter<FilterRepresentationModel>();
+    filterClicked: EventEmitter<FilterRepresentationModel> = new EventEmitter<FilterRepresentationModel>();
+
+    /** Emitted when a filter is being selected based on the filterParam input. */
+    @Output()
+    filterSelected: EventEmitter<FilterRepresentationModel> = new EventEmitter<FilterRepresentationModel>();

    /** Emitted when the list is loaded. */
    @Output()
@@ -86,7 +90,7 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
        } else if (appId && appId.currentValue !== appId.previousValue) {
            this.getFiltersByAppId(appId.currentValue);
        } else if (filter && filter.currentValue !== filter.previousValue) {
-            this.selectFilter(filter.currentValue);
+            this.selectFilterAndEmit(filter.currentValue);
        }
    }

@@ -170,7 +174,15 @@ export class TaskFiltersComponent implements OnInit, OnChanges {

    public selectFilterAndEmit(newFilter: FilterParamsModel) {
        this.selectFilter(newFilter);
-        this.filterClick.emit(this.currentFilter);
+        this.filterSelected.emit(this.currentFilter);
+    }
+
+    /**
+     * Selects and emits the clicked filter.
+     */
+    onFilterClick(filter: FilterParamsModel) {
+        this.selectFilter(filter);
+        this.filterClicked.emit(this.currentFilter);
    }

    /**
@@ -189,7 +201,7 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
            () => {
                if (filteredFilterList.length > 0) {
                    this.selectFilter(filteredFilterList[0]);
-                    this.filterClick.emit(this.currentFilter);
+                    this.filterSelected.emit(this.currentFilter);
                }
            });
    }
--- a/lib/process-services/src/lib/task-list/services/task-filter.service.spec.ts
+++ b/lib/process-services/src/lib/task-list/services/task-filter.service.spec.ts
@@ -16,7 +16,8 @@
 */

 import { async } from '@angular/core/testing';
-import { fakeAppFilter, fakeAppPromise, fakeFilters } from '../../mock';
+import { fakeAppPromise } from '../../mock';
+import { fakeFiltersResponse, fakeAppFilter } from '../../mock/task/task-filters.mock';
 import { FilterRepresentationModel } from '../models/filter.model';
 import { TaskFilterService } from './task-filter.service';
 import { AlfrescoApiServiceMock, LogService, AppConfigService, setupTestBed, CoreModule, StorageService } from '@alfresco/adf-core';
@@ -58,7 +59,7 @@ describe('Activiti Task filter Service', () => {
            jasmine.Ajax.requests.mostRecent().respondWith({
                'status': 200,
                contentType: 'application/json',
-                responseText: JSON.stringify(fakeFilters)
+                responseText: JSON.stringify(fakeFiltersResponse)
            });
        });

@@ -76,7 +77,7 @@ describe('Activiti Task filter Service', () => {
            jasmine.Ajax.requests.mostRecent().respondWith({
                'status': 200,
                contentType: 'application/json',
-                responseText: JSON.stringify(fakeFilters)
+                responseText: JSON.stringify(fakeFiltersResponse)
            });
        });

@@ -95,7 +96,7 @@ describe('Activiti Task filter Service', () => {
            jasmine.Ajax.requests.mostRecent().respondWith({
                'status': 200,
                contentType: 'application/json',
-                responseText: JSON.stringify(fakeFilters)
+                responseText: JSON.stringify(fakeFiltersResponse)
            });
        });

--- a/lib/process-services/src/lib/task-list/services/tasklist.service.spec.ts
+++ b/lib/process-services/src/lib/task-list/services/tasklist.service.spec.ts
@@ -20,11 +20,8 @@ import { UserProcessModel, setupTestBed, CoreModule, StorageService, AlfrescoApi
 import { of } from 'rxjs';
 import {
    fakeCompletedTaskList,
-    fakeFilter,
    fakeFormList,
    fakeOpenTaskList,
-    fakeRepresentationFilter1,
-    fakeRepresentationFilter2,
    fakeTaskDetails,
    fakeTaskList,
    fakeTasksChecklist,
@@ -32,6 +29,7 @@ import {
    fakeUser2,
    secondFakeTaskList
 } from '../../mock';
+import { fakeRepresentationFilter1, fakeRepresentationFilter2, fakeFilter } from '../../mock/task/task-filters.mock';
 import { FilterRepresentationModel, TaskQueryRequestRepresentationModel } from '../models/filter.model';
 import { TaskDetailsModel } from '../models/task-details.model';
 import { TaskListService } from './tasklist.service';