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

Author: xidedix

projects/coreui-angular/src/lib/header/header-brand/header-brand.component.spec.ts

@@ -1,23 +1,19 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
 
 import { HeaderBrandComponent } from './header-brand.component';
 
 describe('HeaderBrandComponent', () => {
   let component: HeaderBrandComponent;
   let fixture: ComponentFixture<HeaderBrandComponent>;
-  let router: Router;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule.withRoutes([]), HeaderBrandComponent]
+      imports: [HeaderBrandComponent]
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderBrandComponent);
-    router = TestBed.inject(Router);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -29,4 +25,8 @@ describe('HeaderBrandComponent', () => {
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('header-brand');
   });
+
+  it('should have role', () => {
+    expect(fixture.nativeElement.getAttribute('role')).toBe('button');
+  });
 });

projects/coreui-angular/src/lib/header/header-brand/header-brand.component.ts

@@ -1,18 +1,19 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'c-header-brand',
-  template: '<ng-content />'
+  template: '<ng-content />',
+  exportAs: 'cHeaderBrand',
+  host: {
+    '[attr.role]': 'role()',
+    class: 'header-brand'
+  }
 })
 export class HeaderBrandComponent {
   /**
    * Default role for header-brand. [docs]
-   * @type string
+   * @return string
    * @default 'button'
    */
-  @HostBinding('attr.role')
-  @Input()
-  role = 'button';
-
-  @HostBinding('class.header-brand') headerBrandClass = true;
+  readonly role = input('button');
 }

projects/coreui-angular/src/lib/header/header-divider/header-divider.component.ts

@@ -1,9 +1,10 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-header-divider, [cHeaderDivider]',
-  template: ``
+  template: ``,
+  host: {
+    class: 'header-divider'
+  }
 })
-export class HeaderDividerComponent {
-  @HostBinding('class.header-divider') headerDividerClass = true;
-}
+export class HeaderDividerComponent {}

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

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

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

@@ -1,19 +1,20 @@
-import { Component, HostBinding, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'c-header-nav',
   template: '<ng-content />',
-  styleUrls: ['./header-nav.component.scss']
+  styleUrls: ['./header-nav.component.scss'],
+  exportAs: 'cHeaderNav',
+  host: {
+    '[attr.role]': 'role()',
+    class: 'header-nav'
+  }
 })
 export class HeaderNavComponent {
   /**
    * Default role for header-nav. [docs]
-   * @type string
+   * @return string
    * @default 'navigation'
    */
-  @HostBinding('attr.role')
-  @Input()
-  role = 'navigation';
-
-  @HostBinding('class.header-nav') headerNavClass = true;
+  readonly role = input('navigation');
 }

projects/coreui-angular/src/lib/header/header-text/header-text.component.ts

@@ -1,9 +1,10 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'c-header-text, [cHeaderText]',
-  template: '<ng-content />'
+  template: '<ng-content />',
+  host: {
+    class: 'header-text'
+  }
 })
-export class HeaderTextComponent {
-  @HostBinding('class.header-text') headerTextClass = true;
-}
+export class HeaderTextComponent {}

projects/coreui-angular/src/lib/header/header-toggler/header-toggler.directive.spec.ts

@@ -1,15 +1,31 @@
-import { TestBed } from '@angular/core/testing';
-import { ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 import { HeaderTogglerDirective } from './header-toggler.directive';
 
+@Component({
+  imports: [HeaderTogglerDirective],
+  template: '<div cHeaderToggler></div>'
+})
+export class TestComponent {
+  theme!: 'dark' | 'light' | undefined;
+}
+
 class MockElementRef extends ElementRef {}
 
 describe('HeaderTogglerDirective', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [TestComponent],
       providers: [Renderer2, { provide: ElementRef, useClass: MockElementRef }]
     });
+    fixture = TestBed.createComponent(TestComponent);
+    debugElement = fixture.debugElement.query(By.directive(HeaderTogglerDirective));
+    fixture.detectChanges();
   });
 
   it('should create an instance', () => {
@@ -18,4 +34,13 @@ describe('HeaderTogglerDirective', () => {
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css class', () => {
+    expect(debugElement.nativeElement).toHaveClass('header-toggler');
+  });
+
+  it('should set attributes', () => {
+    expect(debugElement.nativeElement.getAttribute('type')).toBe('button');
+    expect(debugElement.nativeElement.getAttribute('aria-label')).toBe('Toggle navigation');
+  });
 });

projects/coreui-angular/src/lib/header/header-toggler/header-toggler.directive.ts

@@ -1,31 +1,31 @@
-import { AfterContentInit, Directive, ElementRef, HostBinding, inject, Input, Renderer2 } from '@angular/core';
+import { AfterContentInit, Directive, ElementRef, inject, input, Renderer2 } from '@angular/core';
 
 @Directive({
-  selector: '[cHeaderToggler]'
+  selector: '[cHeaderToggler]',
+  exportAs: 'cHeaderToggler',
+  host: {
+    '[attr.type]': 'type()',
+    '[attr.aria-label]': 'ariaLabel()',
+    class: 'header-toggler'
+  }
 })
 export class HeaderTogglerDirective implements AfterContentInit {
   readonly #renderer = inject(Renderer2);
   readonly #hostElement = inject(ElementRef);
 
-  @HostBinding('class.header-toggler') headerToggler = true;
   /**
-   * Default role for header-toggler. [docs]
-   * @type string
+   * Default type for header-toggler button. [docs]
+   * @return string
    * @default 'button'
    */
-  @HostBinding('attr.type')
-  @Input()
-  type = 'button';
+  readonly type = input('button');
+
   /**
    * Default aria-label attr for header-toggler. [docs]
    * @type string
    * @default 'Toggle navigation'
    */
-  @HostBinding('attr.aria-label')
-  @Input()
-  ariaLabel = 'Toggle navigation';
-
-  #hasContent!: boolean;
+  readonly ariaLabel = input('Toggle navigation');
 
   addDefaultIcon(): void {
     const span = this.#renderer.createElement('span');
@@ -34,8 +34,8 @@ export class HeaderTogglerDirective implements AfterContentInit {
   }
 
   ngAfterContentInit(): void {
-    this.#hasContent = this.#hostElement.nativeElement.childNodes.length > 0;
-    if (!this.#hasContent) {
+    const hasContent = this.#hostElement.nativeElement.childNodes.length > 0;
+    if (!hasContent) {
       this.addDefaultIcon();
     }
   }

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

@@ -6,10 +6,11 @@ import { Positions } from '../../coreui.types';
 type Container = boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fluid';
 
 @Component({
-    selector: 'c-header, [c-header]',
-    templateUrl: './header.component.html',
-    imports: [NgClass],
-    host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
+  selector: 'c-header, [c-header]',
+  templateUrl: './header.component.html',
+  imports: [NgClass],
+  exportAs: 'cHeader',
+  host: { '[attr.role]': 'role()', '[class]': 'hostClasses()' }
 })
 export class HeaderComponent {
   /**