英文:
How in jest test DPI
问题
I have a function that changes the size of an image depending on window.devicePixelRatio, and now I want to properly test it.
const wrapper = mount(myComponent, {
propsData: {
size: {
height: 500,
width: 500,
},
format: 'jpeg',
filename: 'path/to/image.jpg',
dpi: 1,
},
})
it('check if 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')
})
And this 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"
Thanks 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`
}
英文:
I have function that change size of image depending on window.devicePixelRatio
and now i want to proper test it.
const wrapper = mount(myComponent, {
propsData: {
size: {
height: 500,
width: 500,
},
format: 'jpeg',
filename: 'path/to/image.jpg',
dpi: 1,
},
})
it('check if higer dpi generate 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')
})
and that what test show
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"
thx for ideas
Code in compoonent
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`
},
</details>
# 答案1
**得分**: 3
`window.devicePixelRatio`已经可写，所以你可以在运行测试之前简单地设置它：
```js
describe('MyComponent.vue', () => {
it('检查是否为高dpi...', () => {
window.devicePixelRatio = 3
const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
})
})
另一方面，如果你需要验证已读取window.devicePixelRatio，你可以监听window对象，并模拟目标属性：
describe('MyComponent.vue', () => {
it('检查是否为高dpi...', () => {
const devicePixelRatioGetter = jest.fn().mockReturnValue(3)
jest.spyOn(global, 'window', 'get').mockImplementation(() => Object.defineProperty({}, 'devicePixelRatio', {
get: devicePixelRatioGetter
}))
const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
expect(devicePixelRatioGetter).toHaveBeenCalled()
})
})
英文:
window.devicePixelRatio is already writable, so you could simply set it before you run your test:
describe('MyComponent.vue', () => {
it('check if higher dpi...', () => {
window.devicePixelRatio = 3
const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
})
})
On the other hand, if you need to verify window.devicePixelRatio was read, you could spy on the window object, and mock the target property:
describe('MyComponent.vue', () => {
it('check if higher dpi...', () => {
const devicePixelRatioGetter = jest.fn().mockReturnValue(3)
jest.spyOn(global, 'window', 'get').mockImplementation(() => Object.defineProperty({}, 'devicePixelRatio', {
get: devicePixelRatioGetter
}))
const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
expect(devicePixelRatioGetter).toHaveBeenCalled()
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论