Question

在开始此问题之前。我知道，有很多类似的问题像我一样。但是没有解决办法能够帮助我。

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

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

html

我通过async管道订阅了HTML中的可观察对象。

      <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

此代码在测试之外有效吗？您尚未发布整个组件，但是在您发布的摘录中，我看不到在任何地方进行订阅。一个Observable至少要订阅一个，才会开始发出（请参阅here）。

我在副项目中实现了您的测试，并且只有在订阅了Observable之后，它才能开始工作，就像这样：

identifier

Answer 2

您应该为.subscribe()致电Observable。并且您应该在Observable内部返回一个switchMap，因此，您不能返回带有间谍的数组，但是可以观察到：const spy = (cityServiceStub.getLocation as jasmine.Spy).and.returnValue(of(['Munich', 'Münster']));

Answer 3

我的测试使用以下配置：

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

我错过了仅返回['Munich', 'Münster']作为of()运算符的Observable方法。而且我应该使用tick(750)来等待特定的去抖动时间，以便进行事件更改。

Angular 7测试-用去抖时间模拟输入事件

html

组件

测试

3 个答案: