0
292
ViewsEnsure that ngrx store is populated in test
I have a function
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', '')
})
}
I very almost have 100% coverage of this function, the only thing missing is the data.filter callback
Does anyone know how to test this? The testing library used is Jasmine, the app at large is built with Angular. Here is the test I currently have which has gotten me to the current level of coverage (any other comments on this are also welcome):
it('should click the CSV link', () => {
spyOn(comp.csvDownloadLink.nativeElement, 'click')
comp.ngOnInit()
comp.handleCSV()
expect(comp.csvDownloadLink.nativeElement.click).toHaveBeenCalledTimes(1)
})
Edit
Okay, so I have discovered that the cause of the problem is not that the data.filter callback isn't called, it's that the data array itself is empty! For example, by always ensuring that the data array has something in it, the callback is covered:
Now obviously I don't want this if statement in my code, so I guess my question becomes this - how can I, for the purpose of testing, always ensure that storeData$ has something in it. Now this has changed the scope of the question, it is now an ngrx testing question. The ngOnInit() function fires an action that asynchronously populates the storeData$, but obviously this isn't happening in the test. So how can I fire the ngOnInit() function, and ensure that the reducer has returned and that storeData$ will be populated when I call handleCSV()?
1 answers
Answer question0
storeData$ does not 'contain' data. storeData$ will emit values over time, and by subscribing to it you have a way of handling those values as they arrive. In your case you only handle the first value that arrive (with the take(1) function).
Your arrow function that handles each new value does a fair bit of logic. In my opinion you should extract this arrow function to a named function that can be tested separately. This way you can test the logic without having to worry about the 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', '')
}