valueChanges in unit tests

[pfosser]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[X ] Support request
[ ] Other... Please describe:

Current behavior

Unable to make a valueChanges reaction to work in a unit test

Expected behavior

A subscription to valueChanges should work in unit tests too (but maybe I'm missing something).

Minimal reproduction of the problem with instructions

The only other non-default dependency is Specator. Simply run npm test to see it failing.

// ### app.component.ts
interface AppForms {
  myForm: {
    theInput: string;
  };
}
@Component({
  selector: 'app-root',
  template: `<form [formGroup]="form"><input type="text" formControlName="theInput" /></form> `,
  styles: [],
})
export class AppComponent implements OnInit, OnDestroy {
  private formKey: 'myForm';

  form: FormGroup;

  constructor(
    private formsManager: NgFormsManager<AppForms>,
    private fb: FormBuilder
  ) {}
  ngOnInit(): void {
    this.form = this.fb.group({
      theInput: [null],
    });
    this.formsManager.upsert(this.formKey, this.form);

    // This makes the test go green
    // this.form
    //   .get('theInput')
    //   .valueChanges.pipe(filter((value) => value != null))
    //   .subscribe(this.valueSetter);

    this.formsManager
      .valueChanges(this.formKey, 'theInput')
      .pipe(filter((value) => value != null))
      .subscribe(this.valueSetter);
  }

  private valueSetter = (value) =>
    this.form.get('theInput').setValue(value + 'Append', { emitEvent: false });

  ngOnDestroy(): void {
    this.formsManager.destroy(this.formKey);
  }
}

// ### app.component.spec.ts
describe('AppComponent', () => {
  let spectator: Spectator<AppComponent>;
  const createComponent = createComponentFactory({
    component: AppComponent,
    imports: [ReactiveFormsModule]
  });

  beforeEach(() => (spectator = createComponent()));

  it(`should update the value of the input field`, () => {
    const value = 'someText';
    spectator.typeInElement(value, 'input');

    const actual = spectator.component.form.controls.theInput.value;

    expect(actual).toEqual(value + 'Append');
  });
});

What is the motivation / use case for changing the behavior?

Environment

Angular version: 9.1.11
and it fails with version 10.0.2 too

Browser:
- [x ] Chrome (desktop) version 83.0.4103.116
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.16.0
- Platform:  Linux

Others:

[Netanel Basal]

We use debounce. Try to use spectator.tick(301)

[pfosser]

Great, that's what I missed! Thank you very much.