Question

我在组件中有一个表单字段（用户名），更新后会调用服务来检查数据库中值的可用性。一切都很好，但我似乎无法触发该领域的更新功能。

以下是组件代码的摘录：

 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}});
      });
    });
 }

此处是组件模板中的字段：

<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>

这是我的测试：

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();
}));

最后expect(service.chkUser).toHaveBeenCalled()导致我的测试失败。我在应用程序中运行此组件，它按预期工作我只是试图让测试通过。我已经尝试了很多设置输入值和调度事件的组合，等待fixture检测更改或使用whenStable（），使用fakeAsync而不是使用fakeAsync来投入一个promise。似乎没什么用。

使用已撤消的更新值调用表单字段调用服务

0 个答案: