AAE-41496 Deprecate icon component (#11550)

* AAE-41496 Deprecate icon component

* AAE-41496 Improve template

* AAE-41496 Fix tests
This commit is contained in:
Diogo Bastos
2026-01-21 11:34:54 +00:00
committed by GitHub
parent 69b73c8490
commit d838d93abc
39 changed files with 211 additions and 255 deletions
@@ -5,8 +5,9 @@
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width">
<adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)" />
class="adf-filter-action-button adf-full-width"
>
<mat-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" aria-hidden="true">{{ getFilterIcon(filter.icon) }}</mat-icon>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
</div>
@@ -21,10 +21,12 @@ import { AppsProcessService } from '../../../services/apps-process.service';
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 { NavigationStart, Router } from '@angular/router';
import { ProcessInstanceFilterRepresentation, UserProcessInstanceFilterRepresentation } from '@alfresco/js-api';
import { AlfrescoApiService, AlfrescoApiServiceMock } from '@alfresco/adf-content-services';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatIconHarness } from '@angular/material/icon/testing';
const fakeProcessFilters: UserProcessInstanceFilterRepresentation[] = [
{
@@ -55,6 +57,7 @@ describe('ProcessFiltersComponent', () => {
let router: Router;
let getProcessFiltersSpy: jasmine.Spy;
let getDeployedApplicationsByNameSpy: jasmine.Spy;
let loader: HarnessLoader;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -73,6 +76,7 @@ describe('ProcessFiltersComponent', () => {
router = TestBed.inject(Router);
fixture = TestBed.createComponent(ProcessFiltersComponent);
loader = TestbedHarnessEnvironment.loader(fixture);
filterList = fixture.componentInstance;
});
@@ -278,11 +282,11 @@ describe('ProcessFiltersComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(filterList.filters.length).toBe(3);
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');
expect(filters[2].nativeElement.innerText).toContain('check_circle');
const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
expect(filterIcons.length).toBe(3);
expect(await filterIcons[0].getName()).toContain('dashboard');
expect(await filterIcons[1].getName()).toContain('shuffle');
expect(await filterIcons[2].getName()).toContain('check_circle');
});
it('should not attach icons for each filter if hasIcon is false', async () => {
@@ -291,8 +295,8 @@ describe('ProcessFiltersComponent', () => {
filterList.ngOnChanges({ appId: change });
fixture.detectChanges();
await fixture.whenStable();
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
expect(filters.length).toBe(0);
const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
expect(filterIcons.length).toBe(0);
});
it('should set isProcessActive to true when activeRoute includes "processes"', () => {
@@ -25,12 +25,12 @@ import { filter } from 'rxjs/operators';
import { CommonModule, Location } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { IconComponent } from '@alfresco/adf-core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'adf-process-instance-filters',
imports: [CommonModule, TranslatePipe, MatButtonModule, IconComponent],
imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule],
templateUrl: './process-filters.component.html',
styleUrls: ['./process-filters.component.scss'],
encapsulation: ViewEncapsulation.None
@@ -5,9 +5,10 @@
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width">
class="adf-filter-action-button adf-full-width"
>
<ng-container *ngIf="showIcon">
<adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)" />
<mat-icon data-automation-id="adf-filter-icon" aria-hidden="true">{{ getFilterIcon(filter.icon) }}</mat-icon>
</ng-container>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
@@ -23,9 +23,11 @@ import { of, throwError } from 'rxjs';
import { TaskListService } from '../../services/tasklist.service';
import { TaskFilterService } from '../../services/task-filter.service';
import { TaskFiltersComponent } from './task-filters.component';
import { By } from '@angular/platform-browser';
import { NavigationStart, provideRouter, Router } from '@angular/router';
import { UserTaskFilterRepresentation } from '@alfresco/js-api';
import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { MatIconHarness } from '@angular/material/icon/testing';
const fakeTaskFilters = [
new UserTaskFilterRepresentation({
@@ -55,6 +57,7 @@ describe('TaskFiltersComponent', () => {
let component: TaskFiltersComponent;
let fixture: ComponentFixture<TaskFiltersComponent>;
let router: Router;
let loader: HarnessLoader;
beforeEach(() => {
TestBed.configureTestingModule({
@@ -65,6 +68,7 @@ describe('TaskFiltersComponent', () => {
appConfig.config.bpmHost = 'http://localhost:9876/bpm';
fixture = TestBed.createComponent(TaskFiltersComponent);
loader = TestbedHarnessEnvironment.loader(fixture);
component = fixture.componentInstance;
taskListService = TestBed.inject(TaskListService);
@@ -341,11 +345,11 @@ describe('TaskFiltersComponent', () => {
await fixture.whenStable();
expect(component.filters.length).toBe(3);
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');
expect(filters[2].nativeElement.innerText).toContain('inbox');
const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
expect(filterIcons.length).toBe(3);
expect(await filterIcons[0].getName()).toContain('format_align_left');
expect(await filterIcons[1].getName()).toContain('check_circle');
expect(await filterIcons[2].getName()).toContain('inbox');
});
it('should not attach icons for each filter if showIcon is false', async () => {
@@ -356,8 +360,8 @@ describe('TaskFiltersComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
expect(filters.length).toBe(0);
const filterIcons = await loader.getAllHarnesses(MatIconHarness.with({ selector: '[data-automation-id="adf-filter-icon"]' }));
expect(filterIcons.length).toBe(0);
});
it('should reset selection when filterParam is a filter that does not exist', async () => {
@@ -26,13 +26,13 @@ import { UserTaskFilterRepresentation } from '@alfresco/js-api';
import { CommonModule } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { IconComponent } from '@alfresco/adf-core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { forkJoin, Observable } from 'rxjs';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'adf-task-filters',
imports: [CommonModule, TranslatePipe, MatButtonModule, IconComponent],
imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule],
templateUrl: './task-filters.component.html',
styleUrls: ['./task-filters.component.scss'],
encapsulation: ViewEncapsulation.None