title: Writing Unit test for Angular6 directive
body: <p>I have a simple directive written in Angular6</p>
  
  <pre><code>import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
      @Directive({
        selector: '[appClickOutside]'
      })
      export class ClickOutsideDirective {
        @Output('clickOutside') _clickOutside = new EventEmitter()
  
        constructor(private _elementRef : ElementRef) { 
        }
  
        @HostListener('document:click', ['$event.target'])
          public onClick(targetElement) {
              const clickedInside = this._elementRef.nativeElement.contains(targetElement);
              if (!clickedInside) {
                  this._clickOutside.emit();
  
              }
          }
  
      }
  </code></pre>
  
  <p>This directive basically listen for click event outside the component and react accordingly.</p>
  
  <p>i want to write Unit test for this directive. </p>
  
  <p>I am trying but no idea how to do that. Can anyone please help.</p>
  
  <p>This is the default spec.ts, with some addition:</p>
  
  <pre><code>import { ClickOutsideDirective } from './click-outside.directive';
  import { ElementRef } from '@angular/core';
  
  describe('ClickOutsideDirective', () =&gt; {
    it('should create an instance', () =&gt; {
      //TODO: Just passing null as event to make this file compilable
      const directive = new ClickOutsideDirective(null);
      expect(directive).toBeTruthy();
    });
  });
  
  
  export class MockElementRef extends ElementRef {}
  </code></pre>