title: Unable to invoke @HostListener method in the Unit Test case
body: <p>I have created a custom Directive using <code>@Directive</code> in which I am using <code>@HostListener</code> and the code works fine.<br>
  Now, when writing the test case I need to invoke the <code>@HostListener</code> method from the unit test case. Also I can see that in the code coverage the code is not covered.<br>
  Following is the code:  </p>
  
  <p><strong>focus-encapsulation.directive.ts</strong>  </p>
  
  <pre><code>import { Directive, ElementRef, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[appFocusEncapsulation]'
  })
  export class FocusEncapsulationDirective {
  
    constructor(private el: ElementRef) { }
  
    @HostListener('keydown', ['$event'])
    keyDown(event: Event) {
      console.log('event : ', event);
      event.preventDefault();
    }
  
  }
  </code></pre>
  
  <p><strong>focus-encapsulation.directive.spec.ts</strong></p>
  
  <pre><code>import { FocusEncapsulationDirective } from './focus-encapsulation.directive';
  import { Component, ElementRef, DebugElement } from '@angular/core';
  import { ComponentFixture, TestBed } from '@angular/core/testing';
  import { By } from "@angular/platform-browser";
  
  @Component({
    template: `&lt;div appFocusEncapsulation&gt;&lt;button type="button" (click)="add()"&gt;ADD&lt;/button&gt;&lt;/div&gt;`
  })
  class TestHoverFocusComponent {
    constructor(private el: ElementRef) { 
      console.log('in constructor')
    }
  }
  
  fdescribe('FocusEncapsulationDirective', () =&gt; {
  
    let component: TestHoverFocusComponent;
    let fixture: ComponentFixture&lt;TestHoverFocusComponent&gt;;
    let inputEl: DebugElement;
    let elementRef: ElementRef
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [TestHoverFocusComponent, FocusEncapsulationDirective]
      });
      fixture = TestBed.createComponent(TestHoverFocusComponent);
      component = fixture.componentInstance;
      elementRef = fixture.nativeElement;
      inputEl = fixture.debugElement.query(By.css('button'));
    });
  
    it('should create an instance', () =&gt; {
      const directive = new FocusEncapsulationDirective(elementRef)
      expect(directive).toBeTruthy();
    });
  
    it('Focus over elements', () =&gt; {
      fixture.detectChanges();
      const event = {
        which : 9,
        keyCode : 9,
        srcElement :{
          innerText : 'ADD'
        },
        preventDefault: function() {
          console.log('preventDefault() method called');
        }
      }
      spyOn(event, 'preventDefault');
      inputEl.triggerEventHandler('keydown', event);
      expect(event.preventDefault()).toHaveBeenCalled();
    });
  
  });
  </code></pre>
  
  <p>Below you can also see the code coverage report:<br>
  <a href="https://i.stack.imgur.com/kJAcW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kJAcW.png" alt="enter image description here"></a></p>
  
  <p>Here I need to cover the code and get the proper test case executed required for this method. Thanks.</p>