title: How to unit test an angular @Output
body: <p>The problem from the coverage report:
  <a href="https://i.stack.imgur.com/sD0u4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sD0u4.png" alt="enter image description here"></a></p>
  
  <p>I have this code inside the components.ts</p>
  
  <pre><code>export class TimelinePlotComponent implements OnInit, OnChanges, OnDestroy {
  
  form: FormGroup;
  @Output() onchange: EventEmitter&lt;any&gt; = new EventEmitter&lt;any&gt;();
  
  constructor() {}
  
  initForm() {
      this.form = new FormGroup({
        timeRange: new FormControl(this.time_range_options_active, []),
        metric: new FormControl(this.metric_options_active, []),
        groupBy: new FormControl(this.group_by_options_active, []),
      });
  
      // How to unit test this part of the code
      this.form.valueChanges.subscribe( res =&gt; {
        console.log('form-changed');
        this.onchange.emit(res);
      });
    }
  
  }
  </code></pre>
  
  <h2>component.spec.ts</h2>
  
  <pre><code>  fit('should listen for form changes', async() =&gt; {
      component.form.controls['groupBy'].setValue('color');
      fixture.detectChanges();
      fixture.whenStable().then(() =&gt; {
        // your expectations.
        expect(component.form.valid).toBeTruthy();
        component.onchange.subscribe( res =&gt; {
          console.log('res: ', res);
        });
  
      });
    });
  </code></pre>
  
  <blockquote>
    <p>error: nothing is happening, I dont know how to unit test a form that triggers an output event emitter.</p>
  </blockquote>
  
  <p>As you can see this does not work, any help on how to unit test form changes?</p>