-1

コンポーネントにフォーム フィールド (ユーザー名) があり、更新時にサービスを呼び出してデータベース内の値の可用性を確認します。すべてが正常にチェックアウトされますが、フィールドの更新機能をトリガーできないようです。

コンポーネントコードからの抜粋は次のとおりです。

 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()が、私のテストが失敗する原因です。このコンポーネントをアプリケーションで実行しましたが、期待どおりに動作します。テストに合格しようとしているだけです。入力値の設定とイベントのディスパッチ、フィクスチャを検出するのを待つ、または whenStable() を使用する、promise をスローする、fakeAsync を使用しない、fakeAsync を使用するなど、非常に多くの組み合わせを試しました。何も機能していないようです。

4

1 に答える 1