试图在Jasmine中测试一个返回"预期是间谍，但得到了一个函数"的函数

Question

该代码主要用于只接受SVG的缩略图上传器。问题出现在new FileReader((和new Image((上。无法理解执行时出现的错误Expected a spy but got a function。我正在尝试测试的功能。该功能适用于NgbModal，该功能用于上传缩略图的预览目的。上传的缩略图首先加载在模态上，然后加载在组件上

onFileChanged(file: File): void {
this.uploadedImageMimeType = file.type;
this.invalidImageWarningIsShown = false;
this.invalidTagsAndAttributes = {
tags: [],
attrs: []
};
if (this.isUploadedImageSvg()) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () =>{
this.imgSrc = reader.result as string;
this.updateBackgroundColor(this.tempBgColor);
this.img = new Image();
this.img.onload = () => {
//   Setting a default height of 300px and width of
//   150px since most browsers use these dimensions
//   for SVG files that do not have an explicit
//   height and width defined.
this.setImageDimensions(
this.img.naturalHeight || 150,
this.img.naturalWidth || 300);
};
this.img.src = this.imgSrc;
this.uploadedImage = this.imgSrc;
this.invalidTagsAndAttributes = (
this.svgSanitizerService.getInvalidSvgTagsAndAttrsFromDataUri(
this.imgSrc));
this.tags = this.invalidTagsAndAttributes.tags;
this.attrs = this.invalidTagsAndAttributes.attrs;
if (this.tags.length > 0 || this.attrs.length > 0) {
this.reset();
}
};
} else {
this.reset();
this.invalidImageWarningIsShown = true;
}
}

我为它写的测试

class MockImageObject {
source = null;
onload = null;
constructor() {
this.onload = () => {
return 'Fake onload executed';
};
}
set src(url) {
this.onload();
}
}
class MockReaderObject {
result = null;
onload = null;
constructor() {
this.onload = () => {
return 'Fake onload executed';
};
}
readAsDataURL(file) {
this.onload();
return 'The file is loaded';
}
}
it('should load a image file in onchange event and save it if it's a' +
' svg file', fakeAsync(() => {
// This is just a mocked base 64 in order to test the FileReader event
// and its result property.
const dataBase64Mock = 'PHN2ZyB4bWxucz0iaHR0cDo';
const arrayBuffer = Uint8Array.from(
window.atob(dataBase64Mock), c => c.charCodeAt(0));
const file = new File([arrayBuffer], 'thumbnail.png', {
type: 'image/svg+xml'
});
component.uploadedImageMimeType = file.type;
component.invalidImageWarningIsShown = false;
component.invalidTagsAndAttributes = {
tags: [],
attrs: []
};
// This throws "Argument of type 'mockReaderObject' is not assignable to
// parameter of type 'HTMLImageElement'.". This is because
// 'HTMLImageElement' has around 250 more properties. We have only defined
// the properties we need in 'mockReaderObject'.
// @ts-expect-error
spyOn(window, 'FileReader').and.returnValue(new MockReaderObject());
const image = document.createElement('img');
spyOn(window, 'Image').and.returnValue(image);
// This throws "Argument of type 'mockImageObject' is not assignable to
// parameter of type 'HTMLImageElement'.". This is because
// 'HTMLImageElement' has around 250 more properties. We have only defined
// the properties we need in 'mockImageObject'.
// @ts-expect-error
spyOn(window, 'Image').and.returnValue(new mockImageObject());
// ---- Dispatch on load event ----
image.dispatchEvent(new Event('load'));
expect(component.invalidImageWarningIsShown).toBe(false);
component.onInvalidImageLoaded();
expect(component.invalidImageWarningIsShown).toBe(true);
component.onFileChanged(file);
// ---- Dispatch on load event ----
expect(component.invalidTagsAndAttributes).toEqual({
tags: [],
attrs: []
});
expect(component.uploadedImage).toBe(null);
expect(component.invalidImageWarningIsShown).toBe(false);
// ---- Save information ----
component.confirm();
expect(component.confirm).toHaveBeenCalled();
}));

非常感谢您的帮助！

Answer 1

问题是以下语句中的component.confirm不是Spy，而是一个函数。

expect(component.confirm).toHaveBeenCalled();

请参阅Jasmine文档中的toHaveBeenCalled(expected)。

解决方案

在这行前面的某个地方，您需要创建一个Spy，如下所示：

spyOn(component, 'confirm').and.callThrough();

但是请注意，这个expect永远不会失败，因为您在前一行的测试中显式调用了component.confirm()。