如何为 combineLatest rxjs Angular 编写 Jasmine 单元测试用例

Question

mycomponent.ts

import { Component, OnInit } from '@angular/core';
import {FormGroup,FormControl} from '@angular/forms'
import { DataServiceService } from './data-service.service';
import {combineLatest,Observable,pipe} from 'rxjs';
import {map,tap} from 'rxjs/operators';
import {Model} from './mode';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private dataService: DataServiceService){}
  name = 'Angular';
  myForm: FormGroup;
  observableResult$: Observable<any>;

  ngOnInit(){
    this.myForm = new FormGroup({
      localId: new FormControl()
    })

  this.observableResult$ = combineLatest(
    this.myForm.get('localId').valueChanges,
    this.dataService.getDataFromURL(),
    (localIdSelected, dataFromAPI) => ({localIdSelected,dataFromAPI})).
    pipe(map(each => this.filterData(each.dataFromAPI,each.localIdSelected)));

    this.observableResult$.subscribe(value => {
      debugger
    })

  }
  filterData(dataFromAPI,localIDSelected){
    debugger
     return dataFromAPI.filter(item => item.userId > Number(localIDSelected));
    }

}

data.service.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {Model} from './mode';
import {Observable} from 'rxjs';
@Injectable()
export class DataServiceService {

  constructor(private http:HttpClient) { }

  getDataFromURL():Observable<Model>{
    return this.http.get<Model>('https://jsonplaceholder.typicode.com/todos');
  }

}

app.component.html

<form [formGroup]="myForm" >

<select formControlName="localId">
  <option>1</option>
  <option>2</option>
</select>

</form>

app.spec.ts

const spyFilter = spyOn(component as any, filterData).and.callThrough();

const constAPIData$ = staticDataServiceMock.getAPIData();
                    spyOn(staticDataServiceMock, 'getAPIData').and.returnValue(
                        observableOf(countryStaticData$)
                    );
component.myForm.get('localId').setValue(1);

component.observableResult$.subscribe(value => {
expect(value[0].id==21).toBeTrue();
});

staticDatamock.ts

export class StaticDataMock{

static getAPIData(): Observable<StaticDataElements[]> {
    return [
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  {
    "userId": 1,
    "id": 3,
    "title": "fugiat veniam minus",
    "completed": false
  },
  {
    "userId": 1,
    "id": 4,
    "title": "et porro tempora",
    "completed": true
  }];
  }
}

我已经添加了我的测试用例来覆盖 app.spec.ts 中的 combineLatest 运算符 anf filterData，但是所需的代码失败了。我期望调用 filterData 失败了。 combineLatest 将在 valueChange 上触发事件并从 API 获取数据。我可以在 spec 文件中创建 mock 和 setValue，但它仍然无法正常工作。

Answer 1

好的，为了帮助您继续这项工作，我继续使用您迄今为止提供的数据设置了 Stackblitz。这是link。

我做了一些事情来让测试工作（有点）。

• 我将StaticDataMock 类中getAPIData() 的方法类型更改为public，以便您可以从类外调用它。
• 我让该方法返回一个 of()，将返回值转换为您的数据的 Observable。
• 我猜到了您对 DataServiceService 模拟的实现，Stackblitz 中有详细信息。
• 我创建了一个 Jasmine spyObject 来拦截服务中对 getDataFromURL() 的调用，并返回您使用 StaticDataMock 创建的 observable。
• 我重新安排了规范中事物的调用顺序，并执行了 console.log() 以表明 component.observableResult$ 永远不会发出。

---

更新

根据下面的 cmets，上面的 Stackblitz 链接已经更新，现在可以使用。来自 Stackblitz 的工作规范如下：

it('should change return of service.function1() only', () => {
    fixture.detectChanges(); 
    component.observableResult$.subscribe(value => {
        console.log('observable Emitted, value is ', value);
        expect(value[0].id==1).toBe(true); 
    });
    component.myForm.get('localId').setValue(1);
});

关键是先设置订阅，然后在表单中发出一个新值，这将更新combineLatest()并执行subscribe()内的代码。

我很高兴这成功了！