title: Angular Testing: FormControl valueChanges Observable
body: <p>I have a text input and I'm listening for the changes.</p>
  
  <p><strong>component</strong></p>
  
  <pre><code>name = new FormControl('',Validators.required);
  
  ngOnInit() {
    this.data = 'oldvalue';
    this.checkName();
  }
  
  checkName() {
    this.name.valueChanges.subscribe(val=&gt;{
       console.log(val);
       this.data= "newvalue"; // updating Value
    });
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input name="name" formControlName="name"&gt;
  </code></pre>
  
  <p>My Attempt so far:</p>
  
  <p><strong>component.spec.ts</strong></p>
  
  <pre><code>it('should test data field ', () =&gt; {
      const fixture = TestBed.createComponent(UserComponent);
      const app=fixture.debugElement.componentInstance;
      const el = fixture.nativeElement.querySelector('input');
      el.value ='something';
      dispatchEvent(new Event(el));
      fixture.detectChanges();
      fixture.whenStable().then(()=&gt;{expect(app.data).toBe('newvalue');
  });
  </code></pre>
  
  <p><strong>Problem:</strong>
  Even though input field is populated the code inside subscribe callback is never executed.</p>
  
  <p>It always shows:</p>
  
  <blockquote>
    <p>Expected 'oldvalue' to be 'newvalue'.</p>
  </blockquote>
  
  <p>I tried <code>setValue()</code> method too but it did not work. it never goes inside subscribe callback </p>
  
  <pre><code>app.name.setValue('vikas');
  fixture.detectChanges();
  fixture.whenStable().then(()=&gt;{expect(app.data).toBe('newvalue');
  </code></pre>
  
  <p>I referred <a href="https://stackoverflow.com/questions/39582707/updating-input-html-field-from-within-an-angular-2-test">Updating input html field from within an Angular 2 test
  </a> and <a href="https://stackoverflow.com/questions/37352337/angular2-component-testing-form-input-value-change">Angular2 Component: Testing form input value change</a> but no luck :(</p>
  
  <p>What am I missing?</p>