kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-27 22:54:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(image): add testcase for image scale

Browse Source
This commit is contained in:
unix
2020-04-23 15:24:28 +08:00
parent 313dd1f1a1
commit 36a0c9a903
1 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/image/__tests__/index.test.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react'
import { mount } from 'enzyme'
import { Image } from 'components'
import { updateWrapper } from 'tests/utils'
import { act } from 'react-dom/test-utils'
const url = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +
'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
@@ -12,44 +13,44 @@ describe('Image', () => {
let wrapper = mount(<Image src={url} />)
expect(wrapper).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
wrapper = mount(<Image src={url} width={20} height={20} />)
wrapper.find('img').at(0).simulate('load')
expect(wrapper).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
wrapper = mount(<Image src={url} width={20} height={20} animation={false} />)
wrapper = mount(<Image src={url} width={20} height={20} disableSkeleton />)
wrapper.find('img').at(0).simulate('load')
expect(wrapper).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with skeleton', async () => {
let wrapper = mount(<Image src={url} width={20} height={20} />)
expect(wrapper.find('.skeleton').length).not.toBe(0)
wrapper = mount(<Image src={url} width={20} height={20} />)
wrapper.find('img').at(0).simulate('load')
await updateWrapper(wrapper)
expect(wrapper.find('.skeleton').length).not.toBe(0)
wrapper = mount(<Image src={url} width={20} />)
expect(wrapper.find('.skeleton').length).toBe(0)
mount(<Image src={url} width={20} height={20} animation={false} />)
mount(<Image src={url} width={20} height={20} disableSkeleton />)
expect(wrapper.find('.skeleton').length).toBe(0)
})
it('should remove skeleton when timeout', async () => {
const animation = mount(<Image src={url} width={20} height={20} maxDelay={100} />)
const NoAnimation = mount(<Image src={url} width={20} height={20} maxDelay={100} animation={false} />)
const NoAnimation = mount(<Image src={url} width={20} height={20} maxDelay={100} disableSkeleton />)
expect(animation.find('.skeleton').length).not.toBe(0)
await updateWrapper(animation, 300)
await updateWrapper(NoAnimation, 300)
expect(animation.find('.skeleton').length).toBe(0)
expect(NoAnimation.find('.skeleton').length).toBe(0)
})
it('should remove skeleton when image completed', async () => {
Object.defineProperty((global as any).Image.prototype, 'complete', {
get() {
@@ -63,4 +64,28 @@ describe('Image', () => {
expect((img.getDOMNode() as HTMLImageElement).complete).toEqual(true)
expect(wrapper.find('.skeleton').length).toBe(0)
})
it('should zooming image when width so small', async () => {
window.getComputedStyle = jest.fn()
.mockImplementation(() => ({
width: '10px',
}))
const wrapper = mount(
<div style={{ width: '10px' }}><Image src={url} width={100} height={100} /></div>
)
expect(wrapper.find('.image').html()).toContain('height: auto;')
;(window.getComputedStyle as jest.Mock).mockRestore()
window.getComputedStyle = jest.fn()
.mockImplementation(() => ({
width: '110px',
}))
act(() => {
window.dispatchEvent(new Event('resize'))
})
await updateWrapper(wrapper)
expect(wrapper.find('.image').html()).not.toContain('height: auto;')
;(window.getComputedStyle as jest.Mock).mockRestore()
})
})