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获取数据。我可以在规范文件中创建模拟和setValue，但仍然无法正常工作。

Answer 1

好吧，为尝试帮助您进行此操作，我继续进行了到目前为止所提供数据的Stackblitz设置。这是link。

我做了一些事情来使测试正常工作。

我将getAPIData()类中StaticDataMock的方法类型更改为public，因此您可以从类外部调用它。
我让该方法返回of()，将返回值转换为您的数据的Observable。
我猜到了您对DataServiceService模拟的实现，以及Stackblitz中的详细信息。
我创建了一个Jasmine spyObject来拦截对服务中对getDataFromURL()的调用，并返回您使用StaticDataMock创建的可观察对象。
我重新排列了规范中调用方式的顺序，并进行了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);
});

此操作的关键是首先设置订阅，然后以表单的形式发出新值，该值将更新combineLatest()并执行subscribe()中的代码。

我很高兴能成功！

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

1 个答案:

更新