From 6ef48386885b0a4cd06d8c3e638edf8102ce9123 Mon Sep 17 00:00:00 2001 From: siva kumar Date: Wed, 2 Feb 2022 16:02:50 +0530 Subject: [PATCH] [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 --- .../process-filters-cloud.component.spec.ts | 71 +++++++++++++++++ .../task-filters-cloud.component.spec.ts | 76 ++++++++++++++++++- .../mock/task-filters-cloud.mock.ts | 33 ++++++++ 3 files changed, 179 insertions(+), 1 deletion(-) diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts index 1315de324f..e70deefd0c 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts +++ b/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(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts index b48d890871..e0e72975d9 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts +++ b/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(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts b/lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts index 44e59eefc1..6824aa33c1 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/mock/task-filters-cloud.mock.ts +++ b/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' + } +];