title: Unit testing Directive with arguments in Angular 2+
body: <p>I have a directive which changes background color of an element during mouse over as below.</p>
  
  <pre><code>import {Directive, ElementRef, HostListener, Input} from '@angular/core';
  
  @Directive({
    selector: '[appHighlightme]'
  })
  export class HighlightmeDirective {
  
    @Input('appHighlightme') color : string
    constructor(private el:ElementRef) { }
  
    @HostListener('mouseenter') onMouseEnter(){
      this.highlight(this.color || 'yellow');
    }
  
    @HostListener('mouseleave') onMouseLeave(){
      this.highlight('inherit');
    }
  
    highlight(color){
      this.el.nativeElement.style.backgroundColor = color;
    }
  }
  </code></pre>
  
  <p>I was trying to write a unit test case for this directive as below </p>
  
  <pre><code>import { HighlightmeDirective } from './highlightme.directive';
  import {ChangeDetectionStrategy, Component, DebugElement, ViewChild} from '@angular/core';
  import {async, ComponentFixture, TestBed} from '@angular/core/testing';
  import {By} from '@angular/platform-browser';
  
  @Component({
    selector: 'my-test-component',
    template: '&lt;a [appHighlightme]="color" &gt;test&lt;/a&gt;'
  })
  export class TestComponent {
    color:string = 'blue';
  }
  
  describe('HighlightmeDirective', () =&gt; {
  
    let component: TestComponent;
    let fixture: ComponentFixture&lt;TestComponent&gt;;
    let inputEl: DebugElement;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          TestComponent,
          HighlightmeDirective
        ]
      })
  
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      inputEl = fixture.debugElement.query(By.directive(HighlightmeDirective));
  
    });
  
    it('detect hover changes', () =&gt; {
      inputEl.triggerEventHandler('mouseenter', {});
      fixture.detectChanges();
      expect(inputEl.nativeElement.style.backgroundColor).toBe(component.color);
      inputEl.triggerEventHandler('mouseleave', {});
      fixture.detectChanges();
      expect(inputEl.nativeElement.style.backgroundColor).toBe('inherit');
    });
  
    it('should create an instance', () =&gt; {
      const directive = new HighlightmeDirective(inputEl);
      expect(directive).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>The directive is working fine in other components. it accepts a color argument variable defined in the ts file and use it as the bg color when hovering the element. But when I'm trying to unit test the same, the color argument passed form the TestComponent is not getting detected by the directive and the test case is failing with the following error message.</p>
  
  <p>Error: Expected 'yellow' to be 'blue'. - As yellow is set as the default hover color</p>