inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-42804 Adding adf active class to activated link (#11698)

Browse Source 
* AAE-42804 Adding adf active class to activated link

* AAE-42804 Adding unit tests

* AAE-42804 Adding aria current attribute
This commit is contained in:
Ehsan Rezaei
2026-02-27 13:23:48 +00:00
committed by GitHub
parent ec312d49ab
commit 294e6254c2
4 changed files with 71 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html
+2
View File
@@ -7,6 +7,8 @@
[queryParams]="{ filterId: filter.id }"
[attr.data-automation-id]="filter.key + '_filter'"
class="adf-process-filters__entry"
[class.adf-active]="filter.id === currentRouteFilterId()"
[attr.aria-current]="filter.id === currentRouteFilterId() ? 'page' : null"
[id]="filter.id"
[title]="filter.name ?? '' | translate"
[attr.aria-label]="filter.name ?? '' | translate"
lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts
+34 -4
View File
@@ -72,7 +72,7 @@ describe('ProcessFiltersCloudComponent', () => {
queryParamMap: of({
get: (param: string) => {
if (param === 'filterId') {
return 'fake-process-filter-id';
return mockProcessFilters[0].id;
}
return null;
}
@@ -205,6 +205,7 @@ describe('ProcessFiltersCloudComponent', () => {
describe('Highlight Selected Filter', () => {
const allProcessesFilterKey = mockProcessFilters[0].key;
const allProcessesFilterId = mockProcessFilters[0].id;
it('should apply active CSS class on filter click', async () => {
component.enableNotifications = true;
@@ -214,13 +215,42 @@ describe('ProcessFiltersCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement;
expect(link.getAttribute('href')).toBe('/process-list-cloud?filterId=10');
let link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement;
expect(link.getAttribute('href')).toBe(`/process-list-cloud?filterId=${allProcessesFilterId}`);
link.click();
fixture.detectChanges();
await fixture.whenStable();
expect(router.url).toBe('/process-list-cloud?filterId=10');
expect(router.url).toBe(`/process-list-cloud?filterId=${allProcessesFilterId}`);
link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement;
expect(link.classList).toContain('adf-active');
});
it('should add aria-current attribute with value "page" to the active filter', async () => {
component.enableNotifications = true;
component.appName = 'mock-app-name';
const appNameChange = new SimpleChange(null, 'mock-app-name', true);
component.ngOnChanges({ appName: appNameChange });
fixture.detectChanges();
await fixture.whenStable();
const link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement;
expect(link.getAttribute('aria-current')).toBe('page');
});
it('should not have aria-current attribute when filter is not active', async () => {
component.enableNotifications = true;
component.appName = 'mock-app-name';
const appNameChange = new SimpleChange(null, 'mock-app-name', true);
component.ngOnChanges({ appName: appNameChange });
fixture.detectChanges();
await fixture.whenStable();
const link = fixture.debugElement.query(By.css(`[data-automation-id="${mockProcessFilters[1].key}_filter"]`)).nativeElement;
expect(link.getAttribute('aria-current')).toBeNull();
});
});
});
lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html
+2
View File
@@ -7,6 +7,8 @@
[queryParams]="{ filter: filter.id }"
[attr.data-automation-id]="filter.key + '_filter'"
class="adf-task-filters__entry"
[class.adf-active]="filter.id === currentRouteFilterId()"
[attr.aria-current]="filter.id === currentRouteFilterId() ? 'page' : null"
[id]="filter.id"
[title]="filter.name | translate"
[attr.aria-label]="filter.name | translate"
lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts
+33 -4
View File
@@ -64,7 +64,7 @@ describe('TaskFiltersCloudComponent', () => {
queryParamMap: of({
get: (param: string) => {
if (param === 'filter') {
return 'fake-task-filter-id';
return defaultTaskFiltersMock[0].id;
}
return null;
}
@@ -601,7 +601,7 @@ describe('TaskFiltersCloudComponent', () => {
});
describe('Highlight Selected Filter', () => {
const assignedTasksFilterKey = defaultTaskFiltersMock[1].key;
const assignedTasksFilterKey = defaultTaskFiltersMock[0].key;
it('Should highlight task filter on filter click', async () => {
getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock));
@@ -611,12 +611,41 @@ describe('TaskFiltersCloudComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`));
let filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`));
filterLink.nativeElement.click();
fixture.detectChanges();
await fixture.whenStable();
expect(router.url).toBe('/task-list-cloud?filter=2');
expect(router.url).toBe(`/task-list-cloud?filter=${defaultTaskFiltersMock[0].id}`);
filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`));
expect(filterLink.nativeElement.classList).toContain('adf-active');
});
it('should add aria-current attribute with value "page" to the active filter', 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();
const filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`));
expect(filterLink.nativeElement.getAttribute('aria-current')).toBe('page');
});
it('should not have aria-current attribute when filter is not active', 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();
const otherFilterLink = fixture.debugElement.query(By.css(`[data-automation-id="${defaultTaskFiltersMock[1].key}_filter"]`));
expect(otherFilterLink.nativeElement.getAttribute('aria-current')).toBeNull();
});
});
});