refactor(breadcrumb): signal inputs, host bindings, cleanup, tests

Author: xidedix

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html

@@ -1,19 +1,19 @@
-@if (!active) {
-  <a [routerLink]="url"
-     [cHtmlAttr]="attributes ?? {}"
-     [target]="attributes?.['target']"
-     [queryParams]="linkProps?.queryParams ?? null"
-     [fragment]="linkProps?.fragment"
-     [queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
-     [preserveFragment]="linkProps?.preserveFragment ?? false"
-     [skipLocationChange]="linkProps?.skipLocationChange ?? false"
-     [replaceUrl]="linkProps?.replaceUrl ?? false"
-     [state]="linkProps?.state ?? {}"
+@if (!active()) {
+  <a [routerLink]="url()"
+     [cHtmlAttr]="attributes() ?? {}"
+     [target]="attributes()?.['target']"
+     [queryParams]="linkProps()?.queryParams ?? null"
+     [fragment]="linkProps()?.fragment"
+     [queryParamsHandling]="linkProps()?.queryParamsHandling ?? null"
+     [preserveFragment]="linkProps()?.preserveFragment ?? false"
+     [skipLocationChange]="linkProps()?.skipLocationChange ?? false"
+     [replaceUrl]="linkProps()?.replaceUrl ?? false"
+     [state]="linkProps()?.state ?? {}"
   >
     <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
   </a>
 } @else {
-  <span [cHtmlAttr]="attributes ?? {}">
+  <span [cHtmlAttr]="attributes() ?? {}">
       <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
   </span>
 }

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.spec.ts

@@ -1,21 +1,24 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { BreadcrumbItemComponent } from './breadcrumb-item.component';
+import { provideRouter } from '@angular/router';
+import { ComponentRef } from '@angular/core';
 
 describe('BreadcrumbItemComponent', () => {
   let component: BreadcrumbItemComponent;
+  let componentRef: ComponentRef<BreadcrumbItemComponent>;
   let fixture: ComponentFixture<BreadcrumbItemComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule, BreadcrumbItemComponent]
-    })
-      .compileComponents();
+      imports: [BreadcrumbItemComponent],
+      providers: [provideRouter([])]
+    }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(BreadcrumbItemComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     fixture.detectChanges();
   });
 
@@ -25,5 +28,22 @@ describe('BreadcrumbItemComponent', () => {
 
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('breadcrumb-item');
+    expect(fixture.nativeElement).not.toHaveClass('active');
+  });
+
+  it('should have active class', () => {
+    componentRef.setInput('active', true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('active');
+  });
+
+  it('should have aria-current attribute', () => {
+    expect(fixture.nativeElement.getAttribute('aria-current')).toBeNull();
+    componentRef.setInput('active', true);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.getAttribute('aria-current')).toBe('page');
+    componentRef.setInput('active', false);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.getAttribute('aria-current')).toBeNull();
   });
 });

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

@@ -1,48 +1,54 @@
-import { booleanAttribute, Component, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, computed, input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 import { HtmlAttributesDirective } from '../../shared';
 import { INavAttributes, INavLinkProps } from './breadcrumb-item';
 
 @Component({
-    selector: 'c-breadcrumb-item',
-    templateUrl: './breadcrumb-item.component.html',
-    styleUrls: ['./breadcrumb-item.component.scss'],
-    imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
+  selector: 'c-breadcrumb-item',
+  templateUrl: './breadcrumb-item.component.html',
+  styleUrls: ['./breadcrumb-item.component.scss'],
+  imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective],
+  exportAs: 'breadcrumbItem',
+  host: {
+    '[attr.aria-current]': 'ariaCurrent()',
+    '[class]': 'hostClasses()'
+  }
 })
 export class BreadcrumbItemComponent {
-
   /**
    * Toggle the active state for the component. [docs]
-   * @type boolean
+   * @return boolean
    */
-  @Input({ transform: booleanAttribute }) active?: boolean;
+  readonly active = input<boolean, unknown>(undefined, { transform: booleanAttribute });
+
   /**
    * The `url` prop for the inner `[routerLink]` directive. [docs]
    * @type string
    */
-  @Input() url?: string | any[];
+  readonly url = input<string | any[]>();
+
   /**
    * Additional html attributes for link. [docs]
    * @type INavAttributes
    */
-  @Input() attributes?: INavAttributes;
+  readonly attributes = input<INavAttributes>();
+
   /**
    * Some `NavigationExtras` props for the inner `[routerLink]` directive and `routerLinkActiveOptions`. [docs]
    * @type INavLinkProps
    */
-  @Input() linkProps?: INavLinkProps;
+  readonly linkProps = input<INavLinkProps>();
 
-  @HostBinding('attr.aria-current') get ariaCurrent(): string | null {
-    return this.active ? 'page' : null;
-  }
+  readonly ariaCurrent = computed((): string | null => {
+    return this.active() ? 'page' : null;
+  });
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
     return {
       'breadcrumb-item': true,
-      active: this.active
-    };
-  }
+      active: this.active()
+    } as Record<string, boolean>;
+  });
 }

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.ts

@@ -6,6 +6,7 @@ interface IBreadcrumbItem {
   attributes?: INavAttributes;
   linkProps?: INavLinkProps;
   class?: string;
+  queryParams?: { [key: string]: any };
 }
 
 export { INavAttributes, INavLinkProps, IBreadcrumbItem };

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.spec.ts

@@ -1,31 +1,72 @@
+import { ComponentRef } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { provideRouter, Router } from '@angular/router';
+import { provideRouter, Route } from '@angular/router';
+import { RouterTestingHarness } from '@angular/router/testing';
+import { take } from 'rxjs';
 
 import { BreadcrumbRouterComponent } from './breadcrumb-router.component';
 import { BreadcrumbRouterService } from './breadcrumb-router.service';
 
 describe('BreadcrumbComponent', () => {
   let component: BreadcrumbRouterComponent;
+  let componentRef: ComponentRef<BreadcrumbRouterComponent>;
   let fixture: ComponentFixture<BreadcrumbRouterComponent>;
-  let router: Router;
+  let harness: RouterTestingHarness;
+
+  const routes: Route[] = [
+    { path: 'home', component: BreadcrumbRouterComponent, data: { title: 'Home' } },
+    { path: 'color', component: BreadcrumbRouterComponent, title: 'Color' },
+    { path: '', component: BreadcrumbRouterComponent }
+  ];
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [
-        BreadcrumbRouterComponent
-      ],
-      providers: [BreadcrumbRouterService, provideRouter([])]
+      imports: [BreadcrumbRouterComponent],
+      providers: [BreadcrumbRouterService, provideRouter(routes)]
     }).compileComponents();
   }));
 
-  beforeEach(() => {
+  beforeEach(async () => {
     fixture = TestBed.createComponent(BreadcrumbRouterComponent);
-    router = TestBed.inject(Router);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+
+    harness = await RouterTestingHarness.create();
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have breadcrumbs', () => {
+    expect(component.breadcrumbs).toBeDefined();
+  });
+
+  it('should get breadcrumbs from service', async () => {
+    const comp = await harness.navigateByUrl('/home');
+    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
+      expect(breadcrumbs).toEqual([{ label: 'Home', url: '/home', queryParams: {} }]);
+    });
+  });
+  it('should get breadcrumbs from service', async () => {
+    const comp = await harness.navigateByUrl('/color?id=1&test=2');
+    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
+      expect(breadcrumbs).toEqual([{ label: 'Color', url: '/color', queryParams: { id: '1', test: '2' } }]);
+    });
+  });
+  it('should get breadcrumbs from service', async () => {
+    const comp = await harness.navigateByUrl('/');
+    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
+      expect(breadcrumbs).toEqual([{ label: '', url: '/', queryParams: {} }]);
+    });
+  });
+
+  it('should emit breadcrumbs on items change', () => {
+    componentRef.setInput('items', [{ label: 'test' }]);
+    fixture.detectChanges();
+    component.breadcrumbs?.pipe(take(1)).subscribe((breadcrumbs) => {
+      expect(breadcrumbs).toEqual([{ label: 'test' }]);
+    });
+  });
 });

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, effect, inject, input, OnDestroy, OnInit } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 
@@ -12,35 +12,31 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
   templateUrl: './breadcrumb-router.component.html',
   imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
 })
-export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
+export class BreadcrumbRouterComponent implements OnDestroy, OnInit {
   readonly service = inject(BreadcrumbRouterService);
 
   /**
    * Optional array of IBreadcrumbItem to override default BreadcrumbRouter behavior. [docs]
-   * @type IBreadcrumbItem[]
+   * @return IBreadcrumbItem[]
    */
-  @Input() items?: IBreadcrumbItem[];
+  readonly items = input<IBreadcrumbItem[]>();
   public breadcrumbs: Observable<IBreadcrumbItem[]> | undefined;
 
   ngOnInit(): void {
     this.breadcrumbs = this.service.breadcrumbs$;
   }
 
-  public ngOnChanges(changes: SimpleChanges): void {
-    if (changes['items']) {
-      this.setup();
-    }
-  }
-
-  setup(): void {
-    if (this.items && this.items.length > 0) {
+  readonly setup = effect(() => {
+    const items = this.items();
+    if (items && items.length > 0) {
       this.breadcrumbs = new Observable<IBreadcrumbItem[]>((observer: Observer<IBreadcrumbItem[]>) => {
-        if (this.items) {
-          observer.next(this.items);
+        const itemsValue = this.items();
+        if (itemsValue) {
+          observer.next(itemsValue);
         }
       });
     }
-  }
+  });
 
   ngOnDestroy(): void {
     this.breadcrumbs = undefined;

projects/coreui-angular/src/lib/breadcrumb/breadcrumb/breadcrumb.component.spec.ts

@@ -9,8 +9,7 @@ describe('BreadcrumbComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [BreadcrumbComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -26,4 +25,12 @@ describe('BreadcrumbComponent', () => {
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('breadcrumb');
   });
+
+  it('should have aria-label attribute', () => {
+    expect(fixture.nativeElement.getAttribute('aria-label')).toBe('breadcrumb');
+  });
+
+  it('should have role attribute', () => {
+    expect(fixture.nativeElement.getAttribute('role')).toBe('navigation');
+  });
 });

projects/coreui-angular/src/lib/breadcrumb/breadcrumb/breadcrumb.component.ts

@@ -1,26 +1,26 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'c-breadcrumb',
   template: '<ng-content />',
-  host: { class: 'breadcrumb' }
+  host: {
+    class: 'breadcrumb',
+    '[attr.aria-label]': 'ariaLabel()',
+    '[attr.role]': 'role()'
+  }
 })
 export class BreadcrumbComponent {
   /**
    * Default aria-label for breadcrumb. [docs]
-   * @type string
+   * @return string
    * @default 'breadcrumb'
    */
-  @HostBinding('attr.aria-label')
-  @Input()
-  ariaLabel = 'breadcrumb';
+  readonly ariaLabel = input('breadcrumb');
 
   /**
    * Default role for breadcrumb. [docs]
-   * @type string
+   * @return string
    * @default 'navigation'
    */
-  @HostBinding('attr.role')
-  @Input()
-  role = 'navigation';
+  readonly role = input('navigation');
 }