title: How to Access Property of Directive in a Test Host in Angular 5?
body: <p>I am trying to write a <code>it('should toggle menu', () =&gt; {})</code> unit test but have a hard time accessing properties on the directive that contains toggle method..</p>
  
  <p>I have a reusable component that consists of several components/directives</p>
  
  <pre><code>ToggleComponent    
  ToggleDirective
  ToggleMenuDirective
  </code></pre>
  
  <p>This is my ToggleDirective:</p>
  
  <pre><code>export class ToggleDirective implements OnInit {
    @HostBinding('class.toggler-toggle') toggleClass = true;
    toggle: boolean;
    visible = false;
  
    constructor(private toggler: ToggleService, private el: ElementRef) { }
      ngOnInit(): void {
      this.toggler.nowToggle.subscribe(toggle =&gt; this.toggle = toggle);
    }
    @HostListener('document:click', ['$event'])
    onVoidClick(): void {
      this.visible = this.el.nativeElement.contains(event.target) ? !this.visible : false;
      this.toggler.setToggleState(this.visible);
    }
  }
  </code></pre>
  
  <p>When writing a <strong>unit test</strong> I am using the mock template. </p>
  
  <p>How would I access/test methods in ToggleDirective when using a mock template like this:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { TestBed } from '@angular/core/testing';
  import { By } from '@angular/platform-browser';
  
  import { TogglerModule } from './toggler.module';
  
  @Component({
    template: `
      &lt;toggler&gt;
        &lt;toggler-toggle&gt;Toggle&lt;/toggler-toggle&gt;
        &lt;toggler-menu&gt;
          &lt;toggler-item&gt;Sample Item 1&lt;/toggler-item&gt;
        &lt;/toggler-menu&gt;
      &lt;/toggler&gt;`,
      })
  class TestComponent {}
  
  describe('TogglerComponent', () =&gt; {
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        imports: [TogglerModule],
        declarations: [TestComponent],
      })
      .compileComponents();
    });
  
    it('should create toggler', () =&gt; {
      expect(TestBed.createComponent(TestComponent).componentInstance).toBeTruthy();
    });
  
    it('should toggle menu', () =&gt; {
      const fixture = TestBed.createComponent(TestComponent);
      const component = fixture.componentInstance;
      expect(component.visible).toBeFalsy();
      component.onVoidClick();
      expect(component.visible).toBeTruthy();
    });
  
  });
  </code></pre>