如何使用Angular 8单元测试检查给定路径中是否存在图像

Question

我在assets/logo.png中有一张图片，我想在.spec.ts内部检查这个图片是否存在，如果没有抛出错误(不管是真是假(。我怎样才能实现这样的东西？

Answer 1

您可以尝试以下代码：

it('should set image logo path as expected', () => {
const ele = fixture.debugElement.nativeElement.querySelectorAll('img');
expect(ele[0]['src']).toContain('logo.png'); // if you dont have `id` in `img` , you need to provide index as `ele[index]`
// OR use 
const ele1 = fixture.debugElement.nativeElement.querySelector("#img-id");
expect(ele1['src']).toContain('logo.png');
});

它检查以下图像是否存在于src属性中。使用.toEqual('assets/logo.png')可以更具体

Answer 2

为图像创建一个html，将图像路径分配给源，并检查图像标签是否具有指定图像的高度和宽度

it('should set image logo path as expected', () => {
let ele = document.createElement("img"); 
ele.id = 'eee'; 
ele.src = this.source; 
setTimeout(() => { 
expect(ele.height).toBeGreaterThan(0);
expect(ele.width).toBeGreaterThan(0);
}, 5000);
});

如果图像路径不正确，则CCD_ 4的宽度和高度将为0。

Answer 3

由于我还必须测试"我的image.png"是否不仅被正确引用，而且还被真正显示，我详细阐述了Shlok Nangia的答案，并得出了以下片段，对我来说很有效(其他部分实际上不需要(：

it('should display my-image.png', () => {
const fixture = TestBed.createComponent(MyComponent);
const compiled = fixture.debugElement.nativeElement;
const imgElement = compiled.querySelector('img.my-class');
if (imgElement) {
const rectangle = imgElement.getBoundingClientRect();
setTimeout(() => {
expect(rectangle.height).toBeGreaterThan(0);
expect(rectangle.width).toBeGreaterThan(0);
}, 10000);
} else {
window.alert('should display my-image.png: failed');
}
});