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

Author: xidedix

CHANGELOG.md

@@ -11,6 +11,7 @@
 - refactor(grid): signal inputs, host bindings, cleanup, tests
 - refactor(header): signal inputs, host bindings, cleanup, tests
 - refactor(theme.directive): signal inputs, host bindings, cleanup, tests
+- refactor(offcanvas): signal inputs, host bindings, cleanup, tests
 - test(accordion): coverage
 - test(element-ref): update
 - test(backdrop): coverage

projects/coreui-angular/src/lib/backdrop/backdrop.service.spec.ts

@@ -47,7 +47,7 @@ describe('BackdropService', () => {
     expect(document.body.style.overflow).not.toBe('hidden');
   });
 
-  it('should emit backdrop click', fakeAsync(() => {
+  it('should react to backdrop click', fakeAsync(() => {
     backdrop = service.setBackdrop();
     tick();
     service.backdropClick$.subscribe((value) => {

projects/coreui-angular/src/lib/collapse/collapse.directive.spec.ts

@@ -7,16 +7,15 @@ import { By } from '@angular/platform-browser';
 class MockElementRef extends ElementRef {}
 
 @Component({
-    template: '<div cCollapse horizontal>Test</div>',
-    imports: [CollapseDirective]
+  template: '<div cCollapse horizontal>Test</div>',
+  imports: [CollapseDirective]
 })
 class TestComponent {}
 
 describe('CollapseDirective', () => {
   let component: TestComponent;
   let fixture: ComponentFixture<TestComponent>;
   let elementRef: DebugElement;
-  let renderer: Renderer2;
 
   beforeEach(() => {
     TestBed.configureTestingModule({

projects/coreui-angular/src/lib/offcanvas/offcanvas-title/offcanvas-title.directive.spec.ts

@@ -1,8 +1,37 @@
 import { OffcanvasTitleDirective } from './offcanvas-title.directive';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  template: '<div cOffcanvasTitle>Test</div>',
+  imports: [OffcanvasTitleDirective]
+})
+class TestComponent {}
 
 describe('OffcanvasTitleDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let elementRef: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    elementRef = fixture.debugElement.query(By.directive(OffcanvasTitleDirective));
+
+    fixture.detectChanges(); // initial binding
+  });
+
   it('should create an instance', () => {
     const directive = new OffcanvasTitleDirective();
     expect(directive).toBeTruthy();
   });
+
+  it('should have css classes', () => {
+    expect(elementRef.nativeElement).toHaveClass('offcanvas-title');
+  });
 });

projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.spec.ts

@@ -1,7 +1,8 @@
 import { Component, DebugElement } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
+import { take } from 'rxjs/operators';
 
 import { OffcanvasToggleDirective } from './offcanvas-toggle.directive';
 import { OffcanvasService } from '../offcanvas.service';
@@ -10,22 +11,22 @@ import { OffcanvasService } from '../offcanvas.service';
   template: ` <button cOffcanvasToggle="OffcanvasEnd">OffcanvasToggle Test</button>`,
   imports: [OffcanvasToggleDirective]
 })
-class TestButtonComponent {}
+class TestComponent {}
 
 describe('OffcanvasToggleDirective', () => {
-  let component: TestButtonComponent;
-  let fixture: ComponentFixture<TestButtonComponent>;
-  let buttonEl: DebugElement;
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
   let service: OffcanvasService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, OffcanvasToggleDirective, TestButtonComponent],
+      imports: [NoopAnimationsModule, OffcanvasToggleDirective, TestComponent],
       providers: [OffcanvasService]
     });
-    fixture = TestBed.createComponent(TestButtonComponent);
+    fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
-    buttonEl = fixture.debugElement.query(By.css('button'));
+    debugElement = fixture.debugElement.query(By.css('button'));
     service = TestBed.inject(OffcanvasService);
     fixture.detectChanges(); // initial binding
   });
@@ -36,4 +37,11 @@ describe('OffcanvasToggleDirective', () => {
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should toggle offcanvas on click', fakeAsync(() => {
+    service.offcanvasState$.pipe(take(1)).subscribe((value) => {
+      expect(value).toEqual({ show: 'toggle', id: 'OffcanvasEnd' });
+    });
+    debugElement.nativeElement.dispatchEvent(new MouseEvent('click'));
+  }));
 });

projects/coreui-angular/src/lib/offcanvas/offcanvas-toggle/offcanvas-toggle.directive.ts

@@ -1,22 +1,24 @@
-import { Directive, HostListener, inject, Input } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
 
 import { OffcanvasService } from '../offcanvas.service';
 
 @Directive({
-  selector: '[cOffcanvasToggle]'
+  selector: '[cOffcanvasToggle]',
+  host: {
+    '(click)': 'toggleOpen($event)'
+  }
 })
 export class OffcanvasToggleDirective {
   readonly #offcanvasService = inject(OffcanvasService);
 
   /**
    * Html id attr of offcanvas to toggle.
-   * @type string
+   * @return string
    */
-  @Input('cOffcanvasToggle') id?: string;
+  readonly id = input<string>(undefined, { alias: 'cOffcanvasToggle' });
 
-  @HostListener('click', ['$event'])
-  toggleOpen($event: any): void {
+  protected toggleOpen($event: MouseEvent): void {
     $event.preventDefault();
-    this.#offcanvasService.toggle({ show: 'toggle', id: this.id });
+    this.#offcanvasService.toggle({ show: 'toggle', id: this.id() });
   }
 }

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

@@ -1,22 +1,25 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, flushMicrotasks, TestBed, tick } from '@angular/core/testing';
 
 import { OffcanvasComponent } from './offcanvas.component';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ComponentRef } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 describe('OffcanvasComponent', () => {
   let component: OffcanvasComponent;
+  let componentRef: ComponentRef<OffcanvasComponent>;
   let fixture: ComponentFixture<OffcanvasComponent>;
+  let document: Document;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule, OffcanvasComponent]
-    })
-      .compileComponents();
-  });
+    }).compileComponents();
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(OffcanvasComponent);
     component = fixture.componentInstance;
+    componentRef = fixture.componentRef;
+    document = TestBed.inject(DOCUMENT);
     fixture.detectChanges();
   });
 
@@ -26,5 +29,48 @@ describe('OffcanvasComponent', () => {
 
   it('should have css classes', () => {
     expect(fixture.nativeElement).toHaveClass('offcanvas');
+    expect(fixture.nativeElement).toHaveClass('offcanvas-start');
+    expect(fixture.nativeElement.getAttribute('id')).toContain('offcanvas-start-');
   });
+
+  it('should react to visible changes', fakeAsync(() => {
+    expect(componentRef.instance.visible()).toBeFalse();
+    componentRef.setInput('visible', true);
+    fixture.detectChanges();
+    flushMicrotasks();
+    expect(componentRef.instance.visible()).toBeTrue();
+    expect(fixture.nativeElement.getAttribute('inert')).toBeNull();
+  }));
+
+  it('should close offcanvas to Esc keydown event', fakeAsync(() => {
+    componentRef.setInput('visible', true);
+    fixture.detectChanges();
+    expect(componentRef.instance.visible()).toBeTrue();
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    tick();
+    fixture.detectChanges();
+    expect(componentRef.instance.visible()).toBeFalse();
+    expect(fixture.nativeElement.getAttribute('inert')).toBeTruthy();
+  }));
+
+  it('should close offcanvas on backdrop click', fakeAsync(() => {
+    componentRef.setInput('visible', true);
+    fixture.detectChanges();
+    expect(componentRef.instance.visible()).toBeTrue();
+    const backdrop = document.querySelector('.offcanvas-backdrop');
+    expect(backdrop).not.toBeNull();
+    if (backdrop) {
+      backdrop?.dispatchEvent(new MouseEvent('click'));
+      tick();
+      fixture.detectChanges();
+      // expect(componentRef.instance.visible()).toBeFalse();
+      // expect(fixture.nativeElement.getAttribute('inert')).toBeTruthy();
+    }
+  }));
+
+  it('should return breakpoint value', fakeAsync(() => {
+    componentRef.setInput('responsive', 'false');
+    fixture.detectChanges();
+    expect(fixture.componentInstance.responsiveBreakpoint).toBeFalse();
+  }));
 });