我有一个函数
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() 函数,并确保在我调用 handleCSV() 时 reducer 已返回并且 storeData$ 将被填充?
最佳答案
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', '')
}
关于angular - 确保在测试中填充了 ngrx 存储,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43733192/