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

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。

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

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

---

更新

根据下面的评论，上面的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);
});

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

我很高兴这工作！