angular - 确保在测试中填充了 ngrx 存储

Question

我有一个功能

handleCSV () {
  this.storeData$.take(1).subscribe(s => {
    const data = s.data
    const fields = ['reference', 'description', 'val1', 'val2', 'difference']
    const fieldNames = ['Reference', 'Description', 'Value 1', 'Value 2', 'Difference']
    const exportData = data.filter(dataset => dataset.visible)

    const csv = json2csv({ data: exportData, fields: fields, fieldNames: fieldNames })
    const csvEnc = encodeURIComponent(csv)
    const href = `data:application/octet-stream,${csvEnc}`

    this.csvDownloadLink.nativeElement.setAttribute('href', href)
    this.csvDownloadLink.nativeElement.click()

    this.csvDownloadLink.nativeElement.setAttribute('href', '')
  })
}

我几乎 100% 覆盖了这个函数，唯一缺少的是 data.filter 回调

有谁知道如何测试这个？使用的测试库是 Jasmine，整个应用程序是用 Angular 构建的。这是我目前进行的测试，它使我达到了当前的覆盖范围（也欢迎对此发表任何其他评论）：

it('should click the CSV link', () => {
  spyOn(comp.csvDownloadLink.nativeElement, 'click')

  comp.ngOnInit()
  comp.handleCSV()

  expect(comp.csvDownloadLink.nativeElement.click).toHaveBeenCalledTimes(1)
})

编辑

好的，所以我发现问题的原因不是没有调用data.filter回调，而是数据数组本身为空！例如，通过始终确保数据数组中包含某些内容，可以覆盖回调：

现在显然我不想在我的代码中使用这个 if 语句，所以我想我的问题变成了这个 - 为了测试的目的，我怎样才能始终确保 storeData$ 中有一些东西。现在这已经改变了问题的范围，它现在是一个 ngrx 测试问题。ngOnInit() 函数触发一个异步填充 storeData$ 的操作，但显然这在测试中没有发生。那么如何触发 ngOnInit() 函数，并确保 reducer 已返回并且当我调用 handleCSV() 时将填充 storeData$？

Answer 1

storeData$不“包含”数据。storeData$将随着时间的推移发出值，并且通过订阅它，您可以在这些值到达时处理它们。在您的情况下，您只处理到达的第一个值（使用take(1)函数）。

处理每个新值的箭头函数执行了相当多的逻辑。在我看来，您应该将此箭头函数提取为可以单独测试的命名函数。这样您就可以测试逻辑，而不必担心storeData$.

handleCSV () {
  this.storeData$.take(1).subscribe(this.onNewStoreData);
}

onNewStoreData(s) {
    const data = s.data
    const fields = ['reference', 'description', 'val1', 'val2', 'difference']
    const fieldNames = ['Reference', 'Description', 'Value 1', 'Value 2', 'Difference']
    const exportData = data.filter(dataset => dataset.visible)

    const csv = json2csv({ data: exportData, fields: fields, fieldNames: fieldNames })
    const csvEnc = encodeURIComponent(csv)
    const href = `data:application/octet-stream,${csvEnc}`

    this.csvDownloadLink.nativeElement.setAttribute('href', href)
    this.csvDownloadLink.nativeElement.click()

    this.csvDownloadLink.nativeElement.setAttribute('href', '')
}