在 Angular 中进行单元测试时使用模拟服务返回 2 个不同的值

Question

问题总结：

如何在同一个测试规范中使用同一个服务调用多个值并检查它是否与组件中的完全一样？

我正在使用 Angular7+。

假设有一个组件（比如 A ），其中注入了服务。

假设，在同一个 service 中有一个 getNumber 函数，它有 2 个参数，即 ( "Key" , "Value" ) 其中 " Key”只能是num1或num2，而“Value”可以是任何整数。

此函数以这种格式返回一个对象：{ "Key" : num1 or num2 , "Value" : number } 并且该对象存储在另一个对象中（比如 Total ) 作为它的元素。示例：

export class A implements OnInit{
 Total={"sum":["num1","num2"],"amount":0};

 constructor(private service: SomeService) {}
    ngOnInit(){
        this.loadFunc();
    }

    private loadFunc(){
        this.service.getNumber("num1",12).subscribe(res =>{
                Total[res.Key] = res.Value;
        },err=>{
            console.log(err);
        });

        this.service.getNumber("num2",13).subscribe(res =>{
                Total[res.Key] = res.Value;
        },err=>{
            console.log(err);
        });

        this.calculate();
    }

    private calculate(){
        //For elements in Total.sum array iterate over them and store the value in any other key say amount.
        for(const keys of Total["sum"]){
            if(Total[keys]){
                Total["amount"] += Total[keys];
            }
        }
        console.log(Total["amount"]);      // Outputs to 25
    }
}

So Total would become : 
Total = { "num1":12 , "num2":13 ,"sum":["num1","num2"],"amount":25};

现在在 单元测试 服务组件中，我有一个带有 getNumber 函数的 mockService 存根，我正在做这样的事情：

mockServiceStub = jasmine.createSpyObj(['getNumber']); // done before testbed.createComponent()

// Inside Test
mockServiceStub.getNumber.and.returnValue(of({"Key":"num1", "Value":12}));
fixture.ngOnInit();
console.log(component.Total.amount); // outputs 12

mockServiceStub.getNumber.and.returnValue(of({"Key":"num2", "Value":13}));
fixture.ngOnInit();
console.log(component.Total.amount); // outputs 13
expect(component.Total.sum).toEqual(25); // throws error 'Expected 13 to equal 25'

我实际上希望将这两个值结合起来，即在我的测试中， 我首先以“num1”为键返回值 12，然后以“num2”为键返回 13，我预计输出为 25（12 + 13）。

Answer 1

这有效.. returnValues 有 2 个不同的值：

mockServiceStub.getNumber.and.returnValues(of({"Key":"num1", "Value":12}, {"Key":"num2", "Value":13}));
fixture.detectChanges();     
expect(component.Total.sum).toEqual(25);

Answer 2

试试这个代码。

mockServiceStub.getNumber.and.returnValues( of ({
  "Key": "num1",
  "Value": 12
},{
  "Key": "num2",
  "Value": 13
}));
fixture.detectChanges();
expect(component.Total.sum).toEqual(25);

//update

async ngOnInit() {
  await this.loadFunc();
}

private async loadFunc() {
  await this.service.getNumber("num1", 12).subscribe(res => {
    Total[res.Key] = res.Value;
  }, err => {
    console.log(err);
  });

  await this.service.getNumber("num2", 13).subscribe(res => {
    Total[res.Key] = res.Value;
  }, err => {
    console.log(err);
  });

  this.calculate();
}