diff --git a/e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts b/e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts index e2da930728..dbf87b355c 100644 --- a/e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts +++ b/e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts @@ -21,11 +21,11 @@ import { TaskFiltersPage } from '../../process-services/task-filters.page'; export class TaskFiltersDemoPage { - myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]')); - queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]')); - completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]')); - involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]')); - activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active']")); + myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]')); + queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]')); + completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]')); + involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]')); + activeFilter: ElementFinder = element(by.css('adf-task-filters .adf-active')); myTasksFilter(): TaskFiltersPage { return new TaskFiltersPage(this.myTasks); @@ -44,7 +44,7 @@ export class TaskFiltersDemoPage { } customTaskFilter(filterName): TaskFiltersPage { - return new TaskFiltersPage(element(by.css(`span[data-automation-id="${filterName}_filter"]`))); + return new TaskFiltersPage(element(by.css(`button[data-automation-id="${filterName}_filter"]`))); } async checkActiveFilterActive(): Promise { diff --git a/e2e/pages/adf/process-services/filters.page.ts b/e2e/pages/adf/process-services/filters.page.ts index 41bfadea7e..bf6565b942 100644 --- a/e2e/pages/adf/process-services/filters.page.ts +++ b/e2e/pages/adf/process-services/filters.page.ts @@ -20,7 +20,7 @@ import { by, element, ElementFinder } from 'protractor'; export class FiltersPage { - activeFilter: ElementFinder = element(by.css('mat-list-item[class*="active"]')); + activeFilter: ElementFinder = element(by.css('.adf-active')); dataTable: DataTableComponentPage = new DataTableComponentPage(); async getActiveFilter(): Promise { @@ -29,7 +29,7 @@ export class FiltersPage { async goToFilter(filterName): Promise { await BrowserActions.closeMenuAndDialogs(); - await BrowserActions.clickExecuteScript(`span[data-automation-id="${filterName}_filter"]`); + await BrowserActions.clickExecuteScript(`button[data-automation-id="${filterName}_filter"]`); } async sortByName(sortOrder: string): Promise { @@ -41,7 +41,7 @@ export class FiltersPage { } async checkFilterIsHighlighted(filterName: string): Promise { - const highlightedFilter: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`)); + const highlightedFilter: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(highlightedFilter); } } diff --git a/e2e/pages/adf/process-services/process-filters.page.ts b/e2e/pages/adf/process-services/process-filters.page.ts index d05bcbb201..1af4393630 100644 --- a/e2e/pages/adf/process-services/process-filters.page.ts +++ b/e2e/pages/adf/process-services/process-filters.page.ts @@ -21,9 +21,9 @@ import { by, element, ElementFinder, Locator } from 'protractor'; export class ProcessFiltersPage { dataTable = new DataTableComponentPage(); - runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]')); - completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]')); - allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]')); + runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]')); + completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]')); + allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]')); createProcessButton: ElementFinder = element(by.css('.app-processes-menu button[data-automation-id="create-button"] > span')); newProcessButton: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"]')); processesPage: ElementFinder = element(by.css('div[class="app-grid"] > div[class="app-grid-item app-processes-menu"]')); @@ -33,7 +33,7 @@ export class ProcessFiltersPage { rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"]'); tableBody: ElementFinder = element.all(by.css('adf-datatable div[class="adf-datatable-body"]')).first(); nameColumn: Locator = by.css('div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"] div[title="Name"] span'); - processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon'); + processIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]'); async startProcess(): Promise { await this.clickCreateProcessButton(); @@ -78,7 +78,7 @@ export class ProcessFiltersPage { } async checkFilterIsHighlighted(filterName): Promise { - const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`)); + const processNameHighlighted: ElementFinder = element(by.css(`adf-process-instance-filters .adf-active button[data-automation-id='${filterName}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted); } @@ -104,25 +104,25 @@ export class ProcessFiltersPage { } async checkFilterIsDisplayed(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(filterName); } async checkFilterHasNoIcon(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(filterName); await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon)); } async getFilterIcon(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(filterName); const icon = filterName.element(this.processIcon); return BrowserActions.getText(icon); } async checkFilterIsNotDisplayed(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsNotVisible(filterName); } diff --git a/e2e/pages/adf/process-services/task-filters.page.ts b/e2e/pages/adf/process-services/task-filters.page.ts index 4dade52c98..020c0238ca 100644 --- a/e2e/pages/adf/process-services/task-filters.page.ts +++ b/e2e/pages/adf/process-services/task-filters.page.ts @@ -15,13 +15,13 @@ * limitations under the License. */ -import { by, ElementFinder, Locator } from 'protractor'; +import { by, ElementFinder } from 'protractor'; import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing'; export class TaskFiltersPage { filter; - taskIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon"); + taskIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]'); constructor(filter: ElementFinder) { this.filter = filter; diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html index c8b81c8b5d..fac11ad834 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html @@ -1,17 +1,21 @@ -
- - - {{filter.icon}} - - {{filter.name | translate}} - - - - - - - -
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss index 4cc32bb5e4..cda90a6bf9 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss @@ -2,33 +2,31 @@ $primary: map-get($theme, primary); .adf { - &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; cursor: pointer; - font-size: 14px!important; + font-size: 14px !important; font-weight: bold; opacity: 0.54; - padding-left: 30px; - .mat-list-item-content { - height: 34px; + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; } } - - &-filters__entry-icon { - padding-right: 12px !important; - padding-left: 0 !important; - } - &-filters__entry { - &.adf-active, &:hover { + &.adf-active, + &:hover { color: mat-color($primary); opacity: 1; } } - - &-menu-list { - padding-top: 0 !important; - } } } 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 49f6064fd4..7ca3012c40 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 @@ -36,6 +36,7 @@ describe('ProcessFiltersCloudComponent', () => { const fakeGlobalFilter = [ new ProcessFilterCloudModel({ name: 'FakeAllProcesses', + key: 'FakeAllProcesses', icon: 'adjust', id: '10', status: '' @@ -99,7 +100,7 @@ describe('ProcessFiltersCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(component.filters.length).toBe(3); - const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon'); + const filters = fixture.nativeElement.querySelectorAll('.adf-icon'); expect(filters.length).toBe(3); expect(filters[0].innerText).toContain('adjust'); expect(filters[1].innerText).toContain('inbox'); @@ -117,7 +118,7 @@ describe('ProcessFiltersCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(0); done(); }); @@ -131,7 +132,7 @@ describe('ProcessFiltersCloudComponent', () => { component.showIcons = true; fixture.whenStable().then(() => { fixture.detectChanges(); - const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]')); + const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry')); expect(component.filters.length).toBe(3); expect(filters.length).toBe(3); expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses'); @@ -274,11 +275,11 @@ describe('ProcessFiltersCloudComponent', () => { component.filterClick.subscribe((res) => { expect(res).toBeDefined(); expect(component.currentFilter).toBeDefined(); - expect(component.currentFilter.name).toEqual('FakeRunningProcesses'); + expect(component.currentFilter.name).toEqual('FakeAllProcesses'); done(); }); - const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="FakeRunningProcesses_filter"]'); + const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[0].key}_filter"]`); filterButton.click(); }); diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts index 3bb5580716..53f98efb6d 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts @@ -175,4 +175,8 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro this.onDestroy$.next(true); this.onDestroy$.complete(); } + + isActiveFilter(filter: any): boolean { + return this.currentFilter.name === filter.name; + } } diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html index 8043e9d5d2..125ed957b9 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html @@ -1,17 +1,20 @@ -
- - - {{filter.icon}} - - {{filter.name | translate}} - - - - - - - -
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss index 4444febd4a..7d7ddee13e 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss @@ -2,33 +2,31 @@ $primary: map-get($theme, primary); .adf { - &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; cursor: pointer; - font-size: 14px!important; + font-size: 14px !important; font-weight: bold; opacity: 0.54; - padding-left: 30px; - .mat-list-item-content { - height: 34px; + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; } } - - &-filters__entry-icon { - padding-right: 12px !important; - padding-left: 0 !important; - } - &-filters__entry { - &.adf-active, &:hover { + &.adf-active, + &:hover { color: mat-color($primary); opacity: 1; } } - - &-menu-list { - padding-top: 0 !important; - } } } 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 e045940df3..14a33a5aa2 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 @@ -76,7 +76,7 @@ describe('TaskFiltersCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(component.filters.length).toBe(3); - const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon'); + const filters = fixture.nativeElement.querySelectorAll('.adf-icon'); expect(filters.length).toBe(3); expect(filters[0].innerText).toContain('adjust'); expect(filters[1].innerText).toContain('done'); @@ -94,7 +94,7 @@ describe('TaskFiltersCloudComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(0); done(); }); @@ -108,7 +108,7 @@ describe('TaskFiltersCloudComponent', () => { component.showIcons = true; fixture.whenStable().then(() => { fixture.detectChanges(); - const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]')); + const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry')); expect(component.filters.length).toBe(3); expect(filters.length).toBe(3); expect(filters[0].nativeElement.innerText).toContain('FakeInvolvedTasks'); @@ -262,9 +262,10 @@ describe('TaskFiltersCloudComponent', () => { fixture.detectChanges(); spyOn(component, 'selectFilterAndEmit').and.stub(); - const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="fake-my-tast1-filter"]'); + const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[1].key}_filter"]`); + filterButton.click(); - expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id}); + expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]); })); it('should reload filters by appName on binding changes', () => { diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.html b/lib/process-services/src/lib/process-list/components/process-filters.component.html index 6a7390371d..323fa49ad2 100644 --- a/lib/process-services/src/lib/process-list/components/process-filters.component.html +++ b/lib/process-services/src/lib/process-list/components/process-filters.component.html @@ -1,9 +1,11 @@ -
- - - {{getFilterIcon(filter.icon)}} - {{filter.name}} - - +
+
diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.scss b/lib/process-services/src/lib/process-list/components/process-filters.component.scss index ccc35d7822..e81f02c83f 100644 --- a/lib/process-services/src/lib/process-list/components/process-filters.component.scss +++ b/lib/process-services/src/lib/process-list/components/process-filters.component.scss @@ -2,30 +2,31 @@ $primary: map-get($theme, primary); .adf { - &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; cursor: pointer; - font-size: 14px!important; + font-size: 14px !important; font-weight: bold; opacity: 0.54; - padding-left: 30px; - .mat-list-item-content { - height: 34px; + .adf-full-width { + display: flex; + width: 100%; } - &.adf-active, &:hover { + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; + } + } + &-filters__entry { + &.adf-active, + &:hover { color: mat-color($primary); opacity: 1; } } - - &-filters__entry-icon { - padding-right: 12px !important; - padding-left: 0 !important; - } - - &-menu-list { - padding-top: 0 !important; - } } } diff --git 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 index c8c28c2cc1..ac6a1df3d4 100644 --- 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 @@ -287,7 +287,7 @@ describe('ProcessFiltersComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(filterList.filters.length).toBe(3); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(3); expect(filters[0].nativeElement.innerText).toContain('dashboard'); expect(filters[1].nativeElement.innerText).toContain('shuffle'); @@ -304,7 +304,7 @@ describe('ProcessFiltersComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(0); done(); }); diff --git 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 index 2d134635d8..5c28287b0b 100644 --- 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 @@ -69,6 +69,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges { currentFilter: ProcessInstanceFilterRepresentation; filters: UserProcessInstanceFilterRepresentation [] = []; + active = false; private iconsMDL: IconModel; @@ -147,6 +148,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges { */ selectFilter(filter: ProcessInstanceFilterRepresentation) { this.currentFilter = filter; + this.active = true; this.filterClick.emit(filter); } diff --git 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 index 56b4814392..6309dfd62c 100644 --- 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,9 +1,13 @@ -
- - - {{getFilterIcon(filter.icon)}} - {{filter.name}} - - -
+
+ +
\ No newline at end of file diff --git a/lib/process-services/src/lib/task-list/components/task-filters.component.scss b/lib/process-services/src/lib/task-list/components/task-filters.component.scss index c3b4141903..1852f0db1a 100644 --- a/lib/process-services/src/lib/task-list/components/task-filters.component.scss +++ b/lib/process-services/src/lib/task-list/components/task-filters.component.scss @@ -2,33 +2,31 @@ $primary: map-get($theme, primary); .adf { - &-filters__entry { + padding: 12px 0 !important; + height: 24px; + width: 100%; cursor: pointer; - font-size: 14px!important; + font-size: 14px !important; font-weight: bold; opacity: 0.54; - padding-left: 30px; - .mat-list-item-content { - height: 34px; + .adf-full-width { + display: flex; + width: 100%; + } + + .adf-filter-action-button .adf-filter-action-button__label { + padding-left: 20px; + margin: 0 8px !important; } } - - &-filters__entry-icon { - padding-right: 12px !important; - padding-left: 0 !important; - } - &-filters__entry { - &.adf-active, &:hover { + &.adf-active, + &:hover { color: mat-color($primary); opacity: 1; } } - - &-menu-list { - padding-top: 0 !important; - } } } diff --git 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 index 7e3d7a6080..e2473ea30b 100644 --- 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 @@ -321,7 +321,7 @@ describe('TaskFiltersComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(component.filters.length).toBe(3); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(3); expect(filters[0].nativeElement.innerText).toContain('format_align_left'); expect(filters[1].nativeElement.innerText).toContain('check_circle'); @@ -338,7 +338,7 @@ describe('TaskFiltersComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { fixture.detectChanges(); - const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon')); expect(filters.length).toBe(0); done(); }); diff --git a/lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts b/lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts index a28eac6e90..cb2d4fe9fe 100644 --- a/lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts +++ b/lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts @@ -15,18 +15,18 @@ * limitations under the License. */ -import { by, element, ElementFinder, Locator } from 'protractor'; +import { by, element, ElementFinder } from 'protractor'; import { BrowserVisibility } from '../../core/utils/browser-visibility'; import { BrowserActions } from '../../core/utils/browser-actions'; export class ProcessFiltersCloudComponentPage { filter: ElementFinder; - filterIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon"); + filterIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]'); processFilters: ElementFinder = element(by.css("mat-expansion-panel[data-automation-id='Process Filters']")); - activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span")); + activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]')); processFiltersList: ElementFinder = element(by.css('adf-cloud-process-filters')); async checkProcessFilterIsDisplayed(filterName: string): Promise { @@ -106,6 +106,6 @@ export class ProcessFiltersCloudComponentPage { } getProcessFilterLocatorByFilterName(filterName: string): ElementFinder { - return element(by.css(`span[data-automation-id="${filterName}_filter"]`)); + return element(by.css(`button[data-automation-id="${filterName}_filter"]`)); } } diff --git a/lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts b/lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts index 270deb2512..5277b9e08c 100644 --- a/lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts +++ b/lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts @@ -23,7 +23,7 @@ export class TaskFiltersCloudComponentPage { filter: ElementFinder; taskFilters: ElementFinder = element(by.css(`mat-expansion-panel[data-automation-id='Task Filters']`)); - activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span")); + activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]')); async checkTaskFilterIsDisplayed(filterName: string): Promise { this.filter = this.getTaskFilterLocatorByFilterName(filterName); @@ -51,7 +51,7 @@ export class TaskFiltersCloudComponentPage { } getTaskFilterLocatorByFilterName(filterName: string): ElementFinder { - return element(by.css(`span[data-automation-id="${filterName}-filter"]`)); + return element(by.css(`button[data-automation-id="${filterName}_filter"]`)); } } diff --git a/lib/testing/src/lib/process-services/pages/filters.page.ts b/lib/testing/src/lib/process-services/pages/filters.page.ts index e8ee8b5dd8..11df9c3068 100644 --- a/lib/testing/src/lib/process-services/pages/filters.page.ts +++ b/lib/testing/src/lib/process-services/pages/filters.page.ts @@ -17,13 +17,13 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility'; import { BrowserActions } from '../../core/utils/browser-actions'; -import { by, element, ElementFinder, Locator } from 'protractor'; +import { by, element, ElementFinder } from 'protractor'; export class FiltersPage { accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div')); - processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon'); + processIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]'); async clickFilterButton(filterElement: ElementFinder): Promise { await BrowserActions.click(filterElement); @@ -34,7 +34,7 @@ export class FiltersPage { } async isFilterHighlighted(filterName): Promise { - const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`)); + const processNameHighlighted: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`)); try { await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted); return true; @@ -44,7 +44,7 @@ export class FiltersPage { } async isFilterDisplayed(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); try { await BrowserVisibility.waitUntilElementIsVisible(filterName); return true; @@ -54,13 +54,13 @@ export class FiltersPage { } async checkFilterHasNoIcon(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(filterName); await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon)); } async getFilterIcon(name): Promise { - const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`)); + const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`)); await BrowserVisibility.waitUntilElementIsVisible(filterName); const icon = filterName.element(this.processIcon); return BrowserActions.getText(icon); diff --git a/lib/testing/src/lib/process-services/pages/process-filters.page.ts b/lib/testing/src/lib/process-services/pages/process-filters.page.ts index 52ed2ac08e..a5687cdc2c 100644 --- a/lib/testing/src/lib/process-services/pages/process-filters.page.ts +++ b/lib/testing/src/lib/process-services/pages/process-filters.page.ts @@ -22,9 +22,9 @@ export class ProcessFiltersPage { filtersPage = new FiltersPage(); - runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]')); - completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]')); - allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]')); + runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]')); + completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]')); + allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]')); accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); async clickRunningFilterButton(): Promise { diff --git a/lib/testing/src/lib/process-services/pages/task-filters.page.ts b/lib/testing/src/lib/process-services/pages/task-filters.page.ts index 09df44bf14..88edbb14bd 100644 --- a/lib/testing/src/lib/process-services/pages/task-filters.page.ts +++ b/lib/testing/src/lib/process-services/pages/task-filters.page.ts @@ -22,10 +22,10 @@ export class TaskFiltersPage { filtersPage = new FiltersPage(); - myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]')); - queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]')); - completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]')); - involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]')); + myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]')); + queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]')); + completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]')); + involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]')); accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion')); async clickMyTasksFilterButton(): Promise {