I have a function that adjusts the size of an image based on the window.devicePixelRatio.
Now, I am looking to properly test it.
const wrapper = mount(myComponent, {
propsData: {
size: {
height: 500,
width: 500,
},
format: 'jpeg',
filename: 'path/to/image.jpg',
dpi: 1,
},
})
it('checks if a higher dpi generates double-sized images', () => {
wrapper.setProps({ size: { height: 600, width: 400 }, format: 'jpeg', filename: 'www.path/to/image.jpg', quality: 80, dpi: 2 })
expect(imgWrapper.attributes('height')).toBe('600')
expect(imgWrapper.attributes('width')).toBe('400')
expect(imgWrapper.attributes('src')).toBe('www.yoursUrl.com/w=800,h=1200,f=jpeg,q=80/www.path/to/image.jpg')
})
Here is what the test shows:
Expected: "www.yoursUrl.com/w=800,h=1200,f=jpeg,q=80/www.path/to/image.jpg"
Received: "www.yoursUrl.com/w=400,h=600,f=jpeg,q=80/www.path/to/image.jpg"
Thank you for any ideas.
Code in component
Props
props: {
dpi: {
type: Number,
default: 1,
},
}
Methods
isHigherDPI() {
return window.devicePixelRatio > this.dpi
}
imageRouteFinalImage() {
if (this.isHigherDPI()) {
width = this.size.width * 2
height = this.size.height * 2
}
return `${www.yoursUrl.com/w=${width},h=${height},/www.path/to/image.jpg`
},