如何戏弄测试DPI

huangapple
go评论93阅读模式
英文:

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.

  1. const wrapper = mount(myComponent, {
  2.     propsData: {
  3.       size: {
  4.         height: 500,
  5.         width: 500,
  6.       },
  7.       format: 'jpeg',
  8.       filename: 'path/to/image.jpg',
  9.       dpi: 1,
  10.     },
  11.   })
  13. it('check if higher dpi generates double-sized images', () => {
  14.  wrapper.setProps({ size: { height: 600, width: 400 }, format: 'jpeg', filename: 'www.path/to/image.jpg', quality: 80, dpi: 2 })
  15.   expect(imgWrapper.attributes('height')).toBe('600')
  16.   expect(imgWrapper.attributes('width')).toBe('400')
  17.   expect(imgWrapper.attributes('src')).toBe('www.yoursUrl.com/w=800,h=1200,f=jpeg,q=80/www.path/to/image.jpg')
  18. })

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:

  1. props: {
  2.  dpi: {
  3.       type: Number,
  4.       default: 1,
  5.  },
  6. }

Methods:

  1. isHigherDPI() {
  2.   return window.devicePixelRatio > this.dpi
  3. }
  5. imageRouteFinalImage() {
  6.       if (this.isHigherDPI()) {
  7.         width = this.size.width * 2
  8.         height = this.size.height * 2
  9.       }
  11.       return `www.yoursUrl.com/w=${width},h=${height},/www.path/to/image.jpg`
  12. }
英文:

I have function that change size of image depending on window.devicePixelRatio

and now i want to proper test it.

  1. const wrapper = mount(myComponent, {
  2.     propsData: {
  3.       size: {
  4.         height: 500,
  5.         width: 500,
  6.       },
  7.       format: 'jpeg',
  8.       filename: 'path/to/image.jpg',
  9.       dpi: 1,
  10.     },
  11.   })
  13. it('check if higer dpi generate double sized images', () => {
  14.  wrapper.setProps({ size: { height: 600, width: 400 }, format: 'jpeg', filename: 'www.path/to/image.jpg', quality: 80, dpi: 2 })
  15.   expect(imgWrapper.attributes('height')).toBe('600')
  16.   expect(imgWrapper.attributes('width')).toBe('400')
  17.   expect(imgWrapper.attributes('src')).toBe('www.yoursUrl.com/w=800,h=1200,f=jpeg,q=80/www.path/to/image.jpg')
  18. })

and that what test show

  1. Expected: "www.yoursUrl.com/w=800,h=1200,f=jpeg,q=80/www.path/to/image.jpg"
  2. Received: "www.yoursUrl.com/w=400,h=600,f=jpeg,q=80/www.path/to/image.jpg"

thx for ideas

Code in compoonent

Props

  1. props: {
  2.  dpi: {
  3.       type: Number,
  4.       default: 1,
  5.  },
  6. }

Methods

  1. isHigherDPI() {
  2.   return window.devicePixelRatio > this.dpi
  3. }
  5. imageRouteFinalImage() {
  6.       if (this.isHigherDPI()) {
  7.         width = this.size.width * 2
  8.         height = this.size.height * 2
  9.       }
  11.       return `${www.yoursUrl.com/w=${width},h=${height},/www.path/to/image.jpg`
  12. },
  14. </details>
  17. # 答案1
  18. **得分**: 3
  20. `window.devicePixelRatio`已经可写，所以你可以在运行测试之前简单地设置它：
  22. ```js
  23. describe('MyComponent.vue', () => {
  24.   it('检查是否为高dpi...', () => {
  25.     window.devicePixelRatio = 3
  26.     const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
  27.     expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
  28.   })
  29. })

另一方面，如果你需要验证已读取window.devicePixelRatio，你可以监听window对象，并模拟目标属性：

  1. describe('MyComponent.vue', () => {
  2.   it('检查是否为高dpi...', () => {
  3.     const devicePixelRatioGetter = jest.fn().mockReturnValue(3)
  5.     jest.spyOn(global, 'window', 'get').mockImplementation(() => Object.defineProperty({}, 'devicePixelRatio', {
  6.       get: devicePixelRatioGetter
  7.     }))
  9.     const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
  10.     expect(wrapper.vm.imgSrc).toEqual('foo.jpg?dpi=high')
  11.     expect(devicePixelRatioGetter).toHaveBeenCalled()
  12.   })
  13. })
英文:

window.devicePixelRatio is already writable, so you could simply set it before you run your test:

  1. describe(&#39;MyComponent.vue&#39;, () =&gt; {
  2.   it(&#39;check if higher dpi...&#39;, () =&gt; {
  3.     window.devicePixelRatio = 3
  4.     const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
  5.     expect(wrapper.vm.imgSrc).toEqual(&#39;foo.jpg?dpi=high&#39;)
  6.   })
  7. })

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:

  1. describe(&#39;MyComponent.vue&#39;, () =&gt; {
  2.   it(&#39;check if higher dpi...&#39;, () =&gt; {
  3.     const devicePixelRatioGetter = jest.fn().mockReturnValue(3)
  5.     jest.spyOn(global, &#39;window&#39;, &#39;get&#39;).mockImplementation(() =&gt; Object.defineProperty({}, &#39;devicePixelRatio&#39;, {
  6.       get: devicePixelRatioGetter
  7.     }))
  9.     const wrapper = shallowMount(MyComponent, { propsData: {/*...*/} })
  10.     expect(wrapper.vm.imgSrc).toEqual(&#39;foo.jpg?dpi=high&#39;)
  11.     expect(devicePixelRatioGetter).toHaveBeenCalled()
  12.   })
  13. })

huangapple
  • 本文由 发表于 2020年1月3日 23:09:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/59580920.html
  • javascript
  • jestjs
  • unit-testing
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定