refactor(sidebar-nav-label): signal inputs, test

Author: xidedix

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.html

@@ -1,11 +1,12 @@
-<a [cHtmlAttr]="item.attributes"
-   [ngClass]="getItemClass()"
-   href="{{item.url}}">
-  @if (helper.hasIcon(item)) {
-    <i [ngClass]="getLabelIconClass()"></i>
+@let labelItem = item();
+<a [cHtmlAttr]="labelItem.attributes"
+   [ngClass]="itemClass()"
+   href="{{labelItem.url}}">
+  @if (helper.hasIcon(labelItem)) {
+    <i [ngClass]="labelIconClass()"></i>
   }
-  <ng-container>{{ item.name }}</ng-container>
-  @if (helper.hasBadge(item)) {
-    <span [ngClass]="item | cSidebarNavBadge">{{ item.badge.text }}</span>
+  <ng-container>{{ labelItem.name }}</ng-container>
+  @if (helper.hasBadge(labelItem)) {
+    <span [ngClass]="labelItem | cSidebarNavBadge">{{ labelItem.badge?.text ?? '' }}</span>
   }
 </a>

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 
 import { SidebarNavLabelComponent } from './sidebar-nav-label.component';
 import { SidebarNavHelper } from './sidebar-nav.service';
-// import {LayoutModule} from '../../shared/layout/index.ts_';
 
 describe('SidebarNavLabelComponent', () => {
   let component: SidebarNavLabelComponent;
@@ -13,24 +13,57 @@ describe('SidebarNavLabelComponent', () => {
     TestBed.configureTestingModule({
       providers: [SidebarNavHelper],
       imports: [SidebarNavLabelComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SidebarNavLabelComponent);
     component = fixture.componentInstance;
 
     item = {
+      name: 'Label Item',
       class: '',
-      variant: 'info'
+      variant: 'info',
+      icon: 'c-icon',
+      label: {
+        variant: 'info',
+        class: ''
+      },
+      badge: {}
     };
-    component.item = item;
+    fixture.componentRef.setInput('item', item);
 
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should set correct itemClass', () => {
+    const link = fixture.debugElement.query(By.css('a')).nativeElement;
+
+    expect(link).toHaveClass('c-nav-label');
+    expect(link).toHaveClass('c-active');
+    item.class = 'custom-class';
+    fixture.componentRef.setInput('item', { ...item });
+    fixture.detectChanges();
+    expect(link).toHaveClass('custom-class');
+  });
+
+  it('should display label name', () => {
+    const label = fixture.debugElement.query(By.css('a')).nativeElement;
+    expect(label.textContent).toBe(item.name);
+    expect(label.textContent).toBe('Label Item');
+  });
+
+  it('should set correct labelIconClass', () => {
+    const icon = fixture.debugElement.query(By.css('i')).nativeElement;
+    expect(icon).toHaveClass('text-info');
+    item.label = { variant: 'success', class: 'custom-icon-class' };
+    fixture.componentRef.setInput('item', { ...item });
+    fixture.detectChanges();
+    expect(icon).toHaveClass('text-success');
+    expect(icon).toHaveClass('custom-icon-class');
+  });
 });

projects/coreui-angular/src/lib/sidebar/sidebar-nav/sidebar-nav-label.component.ts

@@ -1,44 +1,40 @@
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { NgClass } from '@angular/common';
 
 import { HtmlAttributesDirective } from '../../shared';
 import { SidebarNavHelper } from './sidebar-nav.service';
 import { SidebarNavBadgePipe } from './sidebar-nav-badge.pipe';
+import { INavData } from './sidebar-nav';
 
 @Component({
   selector: 'c-sidebar-nav-label',
   templateUrl: './sidebar-nav-label.component.html',
   imports: [HtmlAttributesDirective, SidebarNavBadgePipe, NgClass]
 })
-export class SidebarNavLabelComponent implements OnInit {
+export class SidebarNavLabelComponent {
   readonly helper = inject(SidebarNavHelper);
 
-  @Input() item: any;
+  readonly item = input<INavData>({});
 
-  private classes = {
-    'c-nav-label': true,
-    'c-active': true
-  };
-  private iconClasses = {};
+  readonly itemClass = computed(() => {
+    const classes: Record<string, boolean> = {
+      'c-nav-label': true,
+      'c-active': true
+    };
+    const itemClass = this.item().class;
+    if (itemClass) {
+      classes[itemClass] = !!itemClass;
+    }
+    return classes;
+  });
 
-  ngOnInit() {
-    this.iconClasses = this.helper.getIconClass(this.item);
-  }
-
-  getItemClass() {
-    const itemClass = this.item.class;
-    // @ts-ignore
-    this.classes[itemClass] = !!itemClass;
-    return this.classes;
-  }
-
-  getLabelIconClass() {
-    const variant = `text-${this.item.label.variant}`;
-    // @ts-ignore
-    this.iconClasses[variant] = !!this.item.label.variant;
-    const labelClass = this.item.label.class;
-    // @ts-ignore
-    this.iconClasses[labelClass] = !!labelClass;
-    return this.iconClasses;
-  }
+  readonly labelIconClass = computed(() => {
+    const item = this.item();
+    const iconClasses: Record<string, boolean> = this.helper.getIconClass(item);
+    const variant = `text-${item.label?.variant}`;
+    iconClasses[variant] = !!item.label?.variant;
+    const labelClass = item.label?.class ?? '';
+    iconClasses[labelClass] = !!labelClass;
+    return iconClasses;
+  });
 }