[AAE-5835] Add unit test to check is selected Process/Task filter highlighting (#7474)

* [AAE-5835] Automate the manual test: Process default filters

* My empty commit to start travis job

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

@@ -289,4 +289,75 @@ describe('ProcessFiltersCloudComponent', () => {
         component.selectFilter({ id: filter.id });
         expect(component.getCurrentFilter()).toBe(filter);
     });
+
+    describe('Highlight Selected Filter', () => {
+
+        const allProcessesFilterKey = mockProcessFilters[0].key;
+        const runningProcessesFilterKey = mockProcessFilters[1].key;
+        const completedProcessesFilterKey = mockProcessFilters[2].key;
+
+        function getActiveFilterElement(filterKey: string): Element {
+            const activeFilter = fixture.debugElement.query(By.css(`.adf-active`));
+            return activeFilter.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
+        }
+
+        async function clickOnFilter(filterKey: string) {
+            fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`).click();
+            fixture.detectChanges();
+            await fixture.whenStable();
+        }
+
+        it('should apply active CSS class on filter click', async () => {
+            component.appName = 'mock-app-name';
+            const appNameChange = new SimpleChange(null, 'mock-app-name', true);
+            component.ngOnChanges({ 'appName': appNameChange });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            await clickOnFilter(allProcessesFilterKey);
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();
+
+            await clickOnFilter(runningProcessesFilterKey);
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();
+
+            await clickOnFilter(completedProcessesFilterKey);
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeDefined();
+        });
+
+        it('Should apply active CSS class when filterParam input changed', async () => {
+            fixture.detectChanges();
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: allProcessesFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();
+
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: runningProcessesFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeNull();
+
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: completedProcessesFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(allProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(runningProcessesFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedProcessesFilterKey)).toBeDefined();
+        });
+    });
 });

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

@@ -26,7 +26,7 @@ import { TaskFiltersCloudComponent } from './task-filters-cloud.component';
 import { By } from '@angular/platform-browser';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskFiltersCloudModule } from '../task-filters-cloud.module';
-import { fakeGlobalFilter, taskNotifications } from '../mock/task-filters-cloud.mock';
+import { fakeGlobalFilter, taskNotifications, defaultTaskFiltersMock } from '../mock/task-filters-cloud.mock';
 import { TranslateModule } from '@ngx-translate/core';
 
 describe('TaskFiltersCloudComponent', () => {
@@ -356,4 +356,78 @@ describe('TaskFiltersCloudComponent', () => {
             expect(getTaskFilterCounterSpy).toHaveBeenCalledWith(fakeGlobalFilter[0]);
         });
     }));
+
+    describe('Highlight Selected Filter', () => {
+
+        const assignedTasksFilterKey = defaultTaskFiltersMock[1].key;
+        const queuedTasksFilterKey = defaultTaskFiltersMock[0].key;
+        const completedTasksFilterKey = defaultTaskFiltersMock[2].key;
+
+        function getActiveFilterElement(filterKey: string): Element {
+            const activeFilter = fixture.debugElement.query(By.css(`.adf-active`));
+            return activeFilter.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`);
+        }
+
+        async function clickOnFilter(filterKey: string) {
+            fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${filterKey}_filter"]`).click();
+            fixture.detectChanges();
+            await fixture.whenStable();
+        }
+
+        it('Should highlight task filter on filter click', async () => {
+            getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock));
+            component.appName = 'mock-app-name';
+            const appNameChange = new SimpleChange(null, 'mock-app-name', true);
+            component.ngOnChanges({ 'appName': appNameChange });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            await clickOnFilter(assignedTasksFilterKey);
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeNull();
+
+            await clickOnFilter(queuedTasksFilterKey);
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeNull();
+
+            await clickOnFilter(completedTasksFilterKey);
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeDefined();
+        });
+
+        it('Should highlight task filter when filterParam input changed', async () => {
+            getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock));
+            fixture.detectChanges();
+
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: assignedTasksFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeNull();
+
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: queuedTasksFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeDefined();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeNull();
+
+            component.ngOnChanges({ 'filterParam': new SimpleChange(null, { key: completedTasksFilterKey }, true) });
+            fixture.detectChanges();
+            await fixture.whenStable();
+
+            expect(getActiveFilterElement(assignedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(queuedTasksFilterKey)).toBeNull();
+            expect(getActiveFilterElement(completedTasksFilterKey)).toBeDefined();
+        });
+    });
 });

lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts

@@ -287,3 +287,36 @@ export const taskCloudEngineEventsMock = {
         engineEvents: taskNotifications
     }
 };
+
+export const defaultTaskFiltersMock = [
+    {
+        name: 'CREATED_TASK_FILTER',
+        id: '1',
+        key: 'created',
+        icon: 'adjust',
+        appName: 'fakeAppName',
+        sort: 'startDate',
+        status: 'CREATED',
+        order: 'DESC'
+    },
+    {
+        name: 'ASSIGNED_TASK_FILTER',
+        id: '2',
+        key: 'assigned',
+        icon: 'adjust',
+        appName: 'fakeAppName',
+        sort: 'startDate',
+        status: 'ASSIGNED',
+        order: 'DESC'
+    },
+    {
+        name: 'COMPLETED_TASK_FILTER',
+        id: '3',
+        key: 'complete-fake-task',
+        icon: 'adjust',
+        appName: 'fakeAppName',
+        sort: 'startDate',
+        status: 'COMPLETED',
+        order: 'DESC'
+    }
+];