refactor(modal-toggle): host binding, cleanup, tests

Author: xidedix

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

@@ -1,11 +1,44 @@
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
 import { ModalToggleDirective } from './modal-toggle.directive';
-import { TestBed } from '@angular/core/testing';
+
+@Component({
+  template: '<button cModalToggle></button>',
+  imports: [ModalToggleDirective]
+})
+class TestComponent {}
 
 describe('ModalDismissDirective', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+  let debugElement: DebugElement;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    debugElement = fixture.debugElement.query(By.directive(ModalToggleDirective));
+    fixture.detectChanges();
+  });
+
   it('should create an instance', () => {
     TestBed.runInInjectionContext(() => {
       const directive = new ModalToggleDirective();
       expect(directive).toBeTruthy();
     });
   });
+
+  it('should handle click', fakeAsync(() => {
+    const directive = debugElement.injector.get(ModalToggleDirective);
+    const spy = spyOn(directive, 'dismiss');
+    debugElement.nativeElement.dispatchEvent(new Event('click'));
+    directive.dismiss(new Event('click'));
+    tick();
+    fixture.detectChanges();
+    expect(spy).toHaveBeenCalledTimes(2);
+  }));
 });

projects/coreui-angular/src/lib/modal/modal-dismiss/modal-toggle.directive.ts

@@ -1,9 +1,12 @@
-import { Directive, HostListener, inject, input } from '@angular/core';
+import { Directive, inject, input } from '@angular/core';
 
 import { ModalService } from '../modal.service';
 
 @Directive({
-  selector: '[cModalToggle]'
+  selector: '[cModalToggle]',
+  host: {
+    '(click)': 'dismiss($event)'
+  }
 })
 export class ModalToggleDirective {
   readonly #modalService = inject(ModalService);
@@ -14,8 +17,7 @@ export class ModalToggleDirective {
    */
   readonly toggle = input<string>(undefined, { alias: 'cModalToggle' });
 
-  @HostListener('click', ['$event'])
-  dismiss($event: any): void {
+  dismiss($event: Event): void {
     $event.preventDefault();
     this.#modalService.toggle({ show: 'toggle', id: this.toggle() });
   }

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

@@ -27,4 +27,14 @@ describe('ModalComponent', () => {
     expect(fixture.nativeElement).toHaveClass('modal');
     expect(fixture.nativeElement).toHaveClass('fade');
   });
+
+  // it('should be visible', fakeAsync(() => {
+  //   fixture.componentRef.setInput('visible', true);
+  //   fixture.detectChanges();
+  //   expect(fixture.nativeElement).toHaveClass('show');
+  // }));
+
+  // it('should call event handling functions', fakeAsync(() => {
+  //
+  // }));
 });