开发者问题收集

单元测试角度11服务存根问题

2021-01-01
1073
angular unit-testing karma-jasmine angular-test

我正在尝试运行组件的单元测试。

component.ts: 

async ngOnInit(): Promise<void> {
  await this.dataProviderService.getCurrencyCodesList().then(data => {
    this.currencyList = data;
  });
  this.currencyList.sort((a, b) => {
    return a.code > b.code ? 1 : -1;
  });
// ...
}

使用的服务方法： 

async getCurrencyCodesList(): Promise<any[]> {
    // ...
    const currencyCodes = currencyList.map(data => {
      return {code: data.code, currency: data.currency, table: data.table};
    });

    return currencyCodes;
  }

在 spec.ts 文件中，我尝试创建一个存根 

//...
it('should have currencies in the list', () => {
    expect(component.currencyList.length).toBeGreaterThan(1);
});
});
class DataProviderServiceStub {
  async getCurrencyCodesList(): Promise<Observable<any[]>> {
    return of ([{code: 'PLN', table: 'A'},
                {code: 'EUR', table: 'A'}]);
  }
}

// then this:
class DataProviderServiceStub {
  async getCurrencyCodesList(): Promise<any[]> {
    return ([{code: 'PLN', table: 'none'},
             {code: 'EUR', table: 'A'}]);
  }
} 
//also tried return (of)([]), ([{}]) etc.

问题是我在数组上使用 .sort 时收到这样的 Karma 错误，我从存根中获取： 

Error: Uncaught (in promise): TypeError: this.currencyList.sort is not a function
TypeError: this.currencyList.sort is not a function

它有时会显示为错误，其他时间显示为 AfterAll 错误，有时它显示一切正常。我做错了什么？

测试结果失败：“TypeError：无法读取未定义的属性‘length’”

2个回答

一旦调用 OnInit，就会执行此块： this.dataProviderService.getCurrencyCodesList()

接下来， then 块被推送到微任务队列并安排调用： 

.then(data => {
    this.currencyList = data;
  });

然后它继续执行 this.currencyList.sort 由于 then 块仍在排队并且承诺仍未解决，因此没有为 currencyList 分配任何内容，因此它包含 undefined 或在启动时分配给它的任何内容。它在 undefined 上调用 sort 方法。由于 undefined 没有 sort 方法，它会引发错误。

如果您使用 async/await，为什么要调用 then ？这就是应该如何以 async/await 方式实现它。 

async ngOnInit(): Promise<void> {
  this.currencyList = await this.dataProviderService.getCurrencyCodesList();
  this.currencyList.sort((a, b) => {
    return a.code > b.code ? 1 : -1;
  });
// ...
}

它基本上会等待 getCurrencyCodesList() 承诺得到解决并将响应写入 currencyList 字段。然后它继续执行常规同步流程。

由于您使用的是承诺，您的存根也应该返回承诺而不是可观察对象。在您的例子中，我会使用 jasmine 间谍而不是存根进行测试，例如： 

const localizationProviderSpy = jasmine.createSpyObj<LocalizationProviderService>('LocalizationProviderService', ['getCurrencyCodesList']);

将间谍添加到您的提供商列表中，您最有可能使用 TestBed，然后在您的测试用例中使用它，如下所示： 

it('should have currencies in the list', async () => {
   const expected = [{code: 'PLN', table: 'A'}, {code: 'EUR', table: 'A'}];

   localizationProviderSpy
     .getCurrencyCodesList
     .and
     .returnValue(Promise.resolve(expected));

   await component.ngOnInit();

   expect(component.currencyList.length).toBeGreaterThan(1);
   expect(component.currencyList).toEqual(expected);
});
Dodge
2021-01-01

getCurrencyCodesList() 方法是异步的，当您运行 this.currencyList.sort 时， this.currencyList 尚未收到 data ，并且它还不是数组，因此没有 sort() 函数

您可以做的是将 Array 类型设置为 currencyList 

private currencyList: any []
Henrique Viana
2021-01-01