Angular 7 测试 - 模拟具有去抖时间的输入事件

Question

在开始这个问题之前。我知道，有很多像我这样的类似问题。但没有任何解决方案能够帮助我。

我使用 rxjs 创建了一个自定义自动完成功能，并想测试是否在输入事件上调用了一个方法。但是错误说该方法从未被调用过，例如:

 Expected spy CityService.getLocation to have been called with [ 'mun' ] but it was never called.

html

我通过 async 管道在 HTML 中订阅我的 observable。

      <input type="text" [(ngModel)]="location" class="form-control" id="locationSearchInput"/>
      <div class="spacer">
        <p class="invalid-feedBack" *ngIf="searchFailed && location.length > 0">Nothing found.</p>
        <ul id="search" *ngFor="let item of (search | async)">
          <li class="resultItem" type="radio" (click)="location = item">{{item}}</li>
      </ul>
    </div>

组件

      ngOnInit(): void {
        this.search = fromEvent(document.getElementById('locationSearchInput'), 'input').pipe(
          debounceTime(750),
          distinctUntilChanged(),
          map((eventObj: Event) => (<HTMLInputElement>eventObj.target).value),
          switchMap((term: string) => this.cityService.getLocation(term)) <== should get called
        );
      }

测试

      const cityServiceStub: CityService = jasmine.createSpyObj('CityService', ['getLocation']);
      ...
      it('should search for location on init', async(() => {
        const spy = (<jasmine.Spy>cityServiceStub.getLocation).and.returnValue(['Munich', 'Münster']);

        fixture.detectChanges();

        const rendered: DebugElement = fixture.debugElement.query(By.css('#locationSearchInput'));

        rendered.nativeElement.value = 'mun';
        rendered.nativeElement.dispatchEvent(new Event('input'));

        fixture.detectChanges();

        fixture.whenStable().then(() => {
          console.log(rendered.nativeElement.value);
          expect(spy).toHaveBeenCalledWith('mun');
        });
      }));

我还尝试将 fakeAsync 与 tick(750) 一起使用。但没有任何帮助。测试中的 console.log 还显示一个空字符串作为输入值。所以也许我模拟了一个错误的事件。

Answer 1

我的测试使用以下配置:

  it('should search for location on init', fakeAsync(() => {
    const spy = (<jasmine.Spy>cityServiceStub.getLocation).and.returnValue(of(['Munich', 'Münster']));

    fixture.detectChanges();

    const rendered: DebugElement = fixture.debugElement.query(By.css('#locationSearchInput'));

    rendered.nativeElement.value = 'mun';
    rendered.nativeElement.dispatchEvent(new Event('input'));

    tick(750);
    fixture.detectChanges();

    expect(spy).toHaveBeenCalledWith('mun');
  }));

我错过了用 of() 运算符将 ['Munich', 'Münster'] 作为 Observable 返回。我应该使用 tick(750) 来等待事件更改的特定去抖时间。