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

Author: xidedix

projects/coreui-angular/src/lib/nav/nav-link.directive.spec.ts

@@ -1,8 +1,85 @@
 import { NavLinkDirective } from './nav-link.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ComponentRef, DebugElement, input } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: '<a cNavLink [active]="active()" [disabled]="disabled()">test</a>',
+  imports: [NavLinkDirective]
+})
+class TestComponent {
+  readonly active = input(false);
+  readonly disabled = input(false);
+}
 
 describe('NavLinkDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let component: TestComponent;
+  let componentRef: ComponentRef<TestComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    debugElement = fixture.debugElement.query(By.directive(NavLinkDirective));
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
-    const directive = new NavLinkDirective();
-    expect(directive).toBeTruthy();
+    TestBed.runInInjectionContext(() => {
+      const directive = new NavLinkDirective();
+      expect(directive).toBeTruthy();
+    });
+  });
+
+  it('should have css classes', () => {
+    expect(debugElement.nativeElement).toHaveClass('nav-link');
+  });
+
+  it('should have css classes for active', () => {
+    expect(debugElement.nativeElement).not.toHaveClass('active');
+    componentRef.setInput('active', true);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).toHaveClass('active');
+    componentRef.setInput('active', false);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).not.toHaveClass('active');
+  });
+
+  it('should have css classes for disabled', () => {
+    expect(debugElement.nativeElement).not.toHaveClass('disabled');
+    componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).toHaveClass('disabled');
+    componentRef.setInput('disabled', false);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement).not.toHaveClass('disabled');
+  });
+
+  it('should have aria-* attr for active', () => {
+    expect(debugElement.nativeElement.getAttribute('aria-current')).not.toBe('page');
+    componentRef.setInput('active', true);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('aria-current')).toBe('page');
+  });
+
+  it('should have attributes for disabled', () => {
+    expect(debugElement.nativeElement.getAttribute('disabled')).toBeNull();
+    expect(debugElement.nativeElement.getAttribute('aria-disabled')).not.toBeTruthy();
+    expect(debugElement.nativeElement.getAttribute('tabindex')).not.toBe('-1');
+    expect(debugElement.nativeElement.style.cursor).toBe('pointer');
+    componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+    expect(debugElement.nativeElement.getAttribute('disabled')).not.toBeNull();
+    expect(debugElement.nativeElement.getAttribute('aria-disabled')).toBeTruthy();
+    expect(debugElement.nativeElement.getAttribute('tabindex')).toBe('-1');
+    expect(debugElement.nativeElement.style.cursor).not.toBe('pointer');
+    componentRef.setInput('disabled', false);
+    fixture.detectChanges();
   });
 });

projects/coreui-angular/src/lib/nav/nav-link.directive.ts

@@ -1,58 +1,57 @@
-import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, computed, Directive, effect, input } from '@angular/core';
 
 @Directive({
-  selector: '[cNavLink]'
+  selector: '[cNavLink]',
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.aria-current]': 'ariaCurrent()',
+    '[attr.aria-disabled]': 'ariaDisabled',
+    '[attr.disabled]': 'attrDisabled',
+    '[attr.tabindex]': 'attrTabindex',
+    '[style.cursor]': 'styleCursor'
+  }
 })
 export class NavLinkDirective {
   /**
    * Sets .nav-link class to the host. [docs]
-   * @type boolean
    * @default true
    */
-  @Input({ transform: booleanAttribute }) cNavLink: string | boolean = true;
+  readonly cNavLink = input(true, { transform: booleanAttribute });
 
   /**
    * Toggle the active state for the component. [docs]
-   * @type boolean
+   * @default undefined
    */
-  @Input() active?: boolean;
+  readonly active = input<boolean>();
+
   /**
    * Set disabled attr for the host element. [docs]
-   * @type boolean
+   * @default false
    */
-  @Input({ transform: booleanAttribute }) disabled: string | boolean = false;
-
-  @HostBinding('attr.aria-current')
-  get ariaCurrent(): string | null {
-    return this.active ? 'page' : null;
-  }
-
-  @HostBinding('attr.aria-disabled')
-  get isDisabled(): boolean | null {
-    return <boolean>this.disabled || null;
-  }
-
-  @HostBinding('attr.disabled')
-  get attrDisabled() {
-    return this.disabled ? '' : null;
-  }
-
-  @HostBinding('attr.tabindex')
-  get getTabindex(): string | null {
-    return this.disabled ? '-1' : null;
-  }
-
-  @HostBinding('style.cursor')
-  get getCursorStyle(): string | null {
-    return this.disabled ? null : 'pointer';
-  }
-
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly disabled = input(false, { transform: booleanAttribute });
+
+  readonly ariaCurrent = computed(() => {
+    return this.active() ? 'page' : null;
+  });
+
+  ariaDisabled: boolean | null = null;
+  attrDisabled: boolean | string | null = null;
+  attrTabindex: '-1' | null = null;
+  styleCursor: 'pointer' | null = null;
+
+  readonly disabledEffect = effect(() => {
+    const disabled = this.disabled();
+    this.ariaDisabled = disabled || null;
+    this.attrDisabled = disabled ? '' : null;
+    this.attrTabindex = disabled ? '-1' : null;
+    this.styleCursor = disabled ? null : 'pointer';
+  });
+
+  readonly hostClasses = computed(() => {
     return {
-      'nav-link': this.cNavLink,
-      disabled: this.disabled,
-      active: this.active
-    };
-  }
+      'nav-link': this.cNavLink(),
+      disabled: this.disabled(),
+      active: this.active()
+    } as Record<string, boolean>;
+  });
 }

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

@@ -1,21 +1,23 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { NavComponent } from './nav.component';
+import { ComponentRef } from '@angular/core';
 
 describe('NavComponent', () => {
   let component: NavComponent;
   let fixture: ComponentFixture<NavComponent>;
+  let componentRef: ComponentRef<NavComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [NavComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NavComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
     fixture.detectChanges();
   });
 
@@ -26,4 +28,60 @@ describe('NavComponent', () => {
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('nav');
   });
+
+  it('should have css classes for layout', () => {
+    componentRef.setInput('layout', 'fill');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('nav-fill');
+    componentRef.setInput('layout', 'justified');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-fill');
+    expect(fixture.nativeElement).toHaveClass('nav-justified');
+    componentRef.setInput('layout', undefined);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-fill');
+    expect(fixture.nativeElement).not.toHaveClass('nav-justified');
+  });
+
+  it('should have css classes for variant', () => {
+    expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+    componentRef.setInput('variant', 'tabs');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+    componentRef.setInput('variant', 'pills');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).toHaveClass('nav-pills');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+    componentRef.setInput('variant', 'underline');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+    expect(fixture.nativeElement).toHaveClass('nav-underline');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+
+    componentRef.setInput('variant', 'underline-border');
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+    expect(fixture.nativeElement).toHaveClass('nav-underline-border');
+
+    componentRef.setInput('variant', undefined);
+    fixture.detectChanges();
+    expect(fixture.nativeElement).not.toHaveClass('nav-tabs');
+    expect(fixture.nativeElement).not.toHaveClass('nav-pills');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline');
+    expect(fixture.nativeElement).not.toHaveClass('nav-underline-border');
+  });
 });

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

@@ -1,29 +1,31 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'c-nav',
   template: '<ng-content />',
   styleUrls: ['./nav.component.scss'],
-  host: { class: 'nav' }
+  host: { class: 'nav', '[class]': 'hostClasses()' }
 })
 export class NavComponent {
   /**
    * Specify a layout type for component.
-   * @type {'fill' | 'justified'}
+   * @default undefined
    */
-  @Input() layout?: 'fill' | 'justified';
+  readonly layout = input<'fill' | 'justified'>();
+
   /**
    * Set the nav variant to tabs or pills.
-   * @type 'tabs' | 'pills' | 'underline' | 'underline-border'
+   * @default undefined
    */
-  @Input() variant?: '' | 'tabs' | 'pills' | 'underline' | 'underline-border';
+  readonly variant = input<'tabs' | 'pills' | 'underline' | 'underline-border' | ''>();
 
-  @HostBinding('class')
-  get hostClasses(): any {
+  readonly hostClasses = computed(() => {
+    const layout = this.layout();
+    const variant = this.variant();
     return {
       nav: true,
-      [`nav-${this.layout}`]: !!this.layout,
-      [`nav-${this.variant}`]: !!this.variant
+      [`nav-${layout}`]: !!layout,
+      [`nav-${variant}`]: !!variant
     };
-  }
+  });
 }