refactor(navbar-toggler): host binding, cleanup, tests

Author: xidedix

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

@@ -1,12 +1,38 @@
-import { ElementRef, Renderer2 } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { Component, DebugElement, ElementRef, Renderer2 } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { NavbarTogglerDirective } from './navbar-toggler.directive';
+import { By } from '@angular/platform-browser';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { CollapseDirective } from '../../collapse';
+
+class MockElementRef extends ElementRef {}
+
+@Component({
+  imports: [NavbarTogglerDirective, CollapseDirective],
+  template: `
+    <button [cNavbarToggler]="collapseRef"></button>
+    <div #collapseRef="cCollapse" navbar cCollapse></div>
+  `
+})
+class TestComponent {}
 
 describe('NavbarTogglerDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+  let debugElementCollapse: DebugElement;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [Renderer2, { provide: ElementRef, useValue: { nativeElement: document.createElement('button') } }]
-    });
+      imports: [TestComponent],
+      providers: [Renderer2, { provide: ElementRef, useValue: MockElementRef }, provideAnimationsAsync()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.query(By.directive(NavbarTogglerDirective));
+    debugElementCollapse = fixture.debugElement.query(By.directive(CollapseDirective));
+    fixture.detectChanges();
   });
 
   it('should create an instance', () => {
@@ -15,4 +41,35 @@ describe('NavbarTogglerDirective', () => {
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should have css classes', () => {
+    expect(debugElement.nativeElement).toHaveClass('navbar-toggler');
+  });
+
+  it('should have default aria-label', () => {
+    expect(debugElement.nativeElement.getAttribute('aria-label')).toBe('Toggle navigation');
+  });
+
+  it('should have default type', () => {
+    expect(debugElement.nativeElement.getAttribute('type')).toBe('button');
+  });
+
+  it('should toggle collapse on click', fakeAsync(() => {
+    const collapseRef = debugElementCollapse.injector.get(CollapseDirective);
+    expect(collapseRef.visible()).toBeFalse();
+    fixture.autoDetectChanges();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    expect(collapseRef.visible()).toBeTrue();
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    expect(collapseRef.visible()).toBeFalse();
+  }));
+
+  it('should add default icon', () => {
+    const directive = debugElement.injector.get(NavbarTogglerDirective);
+    directive.addDefaultIcon();
+    const renderer = debugElement.injector.get(Renderer2);
+    const span = debugElement.nativeElement.querySelector('span');
+    expect(span).toBeTruthy();
+    expect(span.classList.contains('navbar-toggler-icon')).toBeTrue();
+  });
 });

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

@@ -1,12 +1,13 @@
-import { afterNextRender, Directive, ElementRef, HostListener, inject, input, Renderer2 } from '@angular/core';
+import { afterNextRender, Directive, ElementRef, inject, input, Renderer2 } from '@angular/core';
 import { CollapseDirective } from '../../collapse';
 
 @Directive({
   selector: '[cNavbarToggler]',
   host: {
     '[attr.aria-label]': 'ariaLabel()',
     '[attr.type]': 'type()',
-    class: 'navbar-toggler'
+    class: 'navbar-toggler',
+    '(click)': 'handleClick($event)'
   }
 })
 export class NavbarTogglerDirective {
@@ -45,8 +46,7 @@ export class NavbarTogglerDirective {
    */
   readonly ariaLabel = input('Toggle navigation');
 
-  @HostListener('click', ['$event'])
-  handleClick() {
+  handleClick($event: MouseEvent): void {
     const collapseRef = this.collapseRef();
     collapseRef?.toggle(!collapseRef?.visible());
   }

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

@@ -9,8 +9,7 @@ describe('NavbarComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [NavbarComponent]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -26,4 +25,12 @@ describe('NavbarComponent', () => {
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('navbar');
   });
+
+  it('should have container class', () => {
+    fixture.componentRef.setInput('expand', 'xl');
+    fixture.componentRef.setInput('container', 'sm');
+    fixture.detectChanges();
+    expect(fixture.componentInstance.containerClass()).toBe('container-sm');
+    expect(fixture.componentInstance.breakpoint()).toBe('');
+  });
 });