Testing a form field with a debounced updated value call to a service

Question

I have a form field (username) in a component that when updated calls a service to check for the value's availability in a database. Everything checks out fine but I can't seem to trigger the field's update function.

Here's the excerpt from the component code:

 ngAfterViewInit() {
   this.username.update
    .debounceTime(500) // wait 1/2 second before emitting last event
    .distinctUntilChanged() // only emit value if different from last value
    .subscribe((username: string) => {

      console.log('IN SUBSCRIBE'); // <==== This is not being reached in the tests

      let data = { type: 'username', val: username };
      this._loginSrvc.chkUser(data).subscribe((response: IChkUserResponse)=>{
        if(response.isAvailable === false)
          this.username.control.setErrors({'taken': {value: this.username.value}});
      });
    });
 }

Here's the field in the component's template:

<mat-form-field fxFlex>
  <input matInput placeholder="Username" aria-label="Username" forbiddenCharacters=';"\\\/\[\]\{\}\(\)' required [(ngModel)]="model.username" #username="ngModel" id="username" name="username">
  <mat-error *ngIf="newUserFrm.hasError('required','username')">Username is required</mat-error>
  <mat-error *ngIf="newUserFrm.hasError('forbiddenCharacters','username')">{{forbiddenChars.error}}</mat-error>
  <mat-error *ngIf="newUserFrm.hasError('taken','username')">The username <em>{{model.username}}</em> is taken</mat-error>
</mat-form-field>

Here's my test:

it('should check for username availability',fakeAsync(()=>{
  spyOn(service,'chkUser');

  let input = fixture.debugElement.query(By.css('#username')).nativeElement;
  expect(input.value).toBe('');
  expect(component.username.value).toBe(null);

  input.value = user.username;
  input.dispatchEvent(new Event('input'));

  tick(500);

  expect(service.chkUser).toHaveBeenCalled();
}));

That last expect(service.chkUser).toHaveBeenCalled() is what is causing my test to fail. I've run this component in an application and it works as expected I'm just trying to get the test to pass. I've tried so many combinations of setting the input value and dispatching the event, waiting on the fixture to detectChanges or using whenStable(), throwing in a promise, using fakeAsync not using fakeAsync. Nothing seems to work.

Answer 1

So I figured out my problem after too many hours of frustration. It was thanks to those that were commenting that got me thinking in the right direction so thank you @jonrsharpe and @BorisLobanov.

So apparently the update EventEmitter wasn't firing and input.dispatchEvent(new Event('input')); wasn't making it so. That was the first clue. I had to make sure that the event fires in order for the call to the service to be reached.

In order to do this I was already grabbing the `componentInstance' of the component from the TestBed.

 beforeEach(() => {
   fixture = TestBed.createComponent(NewUserComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 }

In order to get the event to fire, I needed to access the field's underlying ngModel grab its update EventEmitter and emit something.

So in my test I've added this line:

 component.username.update.emit(null);

This got my field to run the debounced subscribe function attached to the event.

This however did not fix the entire problem, running the test gave me a cannot execute subscribe on undefined. The subscribe causing the error was the one attached to the service call this._loginSrvc.chkUser(data).subscribe((...)=>{...}).

After hours of fiddling with Observables and recreating my mocked services I finally stumbled upon a stackoverflow answer in another question that stated simple to remember to add .and.callThrough() when spying on a service's method. OMG! How could I have forgotten that (slaps hand against forehead). The subscribe wasn't functioning because the spyOn(service,'chkUser') was stopping the execution of the actual method, so there was no Observable to subscribe too. In every example I saw that was attempting to do something similar never did they add the .and.callThrough() to their spy so it never occurred to me even the countless times I've used this before.

Anyway here's the working test:

it('should check for username availability',fakeAsync(()=>{
  spyOn(service,'chkUser').and.callThrough();

  let input = fixture.debugElement.query(By.css('#username')).nativeElement;
  expect(input.value).toBe('');
  expect(component.username.value).toBe(null);

  input.value = user.username;

  component.username.update.emit(null);

  tick(500);

  expect(service.chkUser).toHaveBeenCalled();
}));