title: How test directive with Renderer2?
body: <p>I have created a small directive that prevents default of event(s) passed to it.</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Directive({
      selector: '[sPreventDefault]'
  })
  export class PreventDefaultDirective {
      private events: (() =&gt; void)[] = [];
      @Input('sPreventDefault') set listenOn(events: string | string[]) {
          this.removeListeners();
  
          if (typeof events == 'string') {
              events = [events];
          }
          this.registerEventListener(
              events,
              e =&gt; {
                  if (e instanceof Event) {
                      e.stopPropagation();
                  } else {
                      e.srcEvent.stopPropagation();
                  }
              },
          );
      }
  
      constructor(private elementRef: ElementRef&lt;HTMLElement&gt;, private renderer: Renderer2) {
          super(elementRef, renderer);
      }
  
      protected registerEventListener(listenOn: string[], eventListener: (e: Event | HammerJSEvent) =&gt; void): void {
          this.events = listenOn.map(eventName =&gt; {
              return this.renderer.listen(this.elementRef.nativeElement, eventName, eventListener);
          });
      }
      protected removeListeners(): void {
          this.events.forEach(dispose =&gt; dispose());
          this.events = [];
      }
  }
  </code></pre>
  
  <p>Test suit</p>
  
  <pre class="lang-ts prettyprint-override"><code>@Component({
      selector: 'test-host',
      template: `&lt;div [sPreventDefault]="events"&gt;`,
  })
  class TestHostComponent {
      @ViewChild(PreventDefaultDirective) directive!: PreventDefaultDirective;
      @Input() events: PreventDefaultDirective['listenOn'] = [];
  }
  
  fdescribe('PreventDefaultDirective', () =&gt; {
      let host: TestHostComponent;
      let hostElement: DebugElement;
      let fixture: ComponentFixture&lt;TestHostComponent&gt;;
      let directive: PreventDefaultDirective;
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [
                  TestHostComponent,
                  PreventDefaultDirective,
              ],
          }).compileComponents();
  
          fixture = TestBed.createComponent(TestHostComponent);
          hostElement = fixture.debugElement;
          host = fixture.componentInstance;
          directive = host.directive;
      }));
  
      it('should create an instance', () =&gt; {
          host.events = ['testEvent'];
          fixture.detectChanges();
          expect(directive).toBeTruthy();
      });
  
      it('should add listener', () =&gt; {
          host.events = ['testEvent'];
          fixture.detectChanges();
  
          //  DebugElement.listeners is null
          expect(hostElement.listeners.length).toBe(1);
          expect(hostElement.listeners.map(l =&gt; l.name)).toBe(host.events);
      });
  });
  </code></pre>
  
  <p>My problem is, that <code>DebugElement</code>, does not seems to know about events registered via <code>Renderer2.listen</code> method. What is the right way to test this?</p>