test(image): add testcase

components/image/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image should render correctly 1`] = `ReactWrapper {}`;
+
+exports[`Image should render correctly 2`] = `ReactWrapper {}`;
+
+exports[`Image should render correctly 3`] = `ReactWrapper {}`;

components/image/__tests__/browser.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { Image } from 'components'
+
+const link = 'https://react.zeit-ui.co/en-us/guide/introduction'
+const url = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +
+  'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
+  '9TXL0Y4OHwAAAABJRU5ErkJggg=='
+
+describe('Image Browser', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <Image.Browser url={link}>
+        <Image src={url} />
+      </Image.Browser>
+    )
+    expect(() => wrapper.unmount()).not.toThrow()
+    
+    const browser = render(
+      <Image.Browser url={link}>
+        <Image src={url} />
+      </Image.Browser>
+    )
+    expect(browser).toMatchSnapshot()
+  })
+  
+  it('show title when url missing', () => {
+    const wrapper = mount(
+      <Image.Browser title="test-title">
+        <Image src={url} />
+      </Image.Browser>
+    )
+    expect(wrapper.find('header').text()).toContain('test-title')
+  })
+  
+  it('should work correctly with full link', () => {
+    const wrapper = mount(
+      <Image.Browser url={link}>
+        <Image src={url} />
+      </Image.Browser>
+    )
+    expect(wrapper.find('.link').text()).not.toContain('http')
+    wrapper.setProps({ showFullLink: true })
+    expect(wrapper.find('.link').text()).toContain('http')
+  })
+  
+  it('show full link when url parse error', () => {
+    const errorLink = 'httpsw/com'
+    const wrapper = mount(
+      <Image.Browser url={errorLink}>
+        <Image src={url} />
+      </Image.Browser>
+    )
+    expect(wrapper.find('.link').text()).toContain(errorLink)
+  })
+  
+  it('should work correctly when props missing', () => {
+    const wrapper = mount(<Image.Browser />)
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+})

components/image/__tests__/index.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { Image } from 'components'
+import { updateWrapper } from 'tests/utils'
+
+const url = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA' +
+  'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO' +
+  '9TXL0Y4OHwAAAABJRU5ErkJggg=='
+
+describe('Image', () => {
+  it('should render correctly', async () => {
+    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.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} />)
+    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} />)
+    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() {
+        return true
+      }
+    })
+    const wrapper = mount(<Image src={url} width={20} height={20} />)
+    const img = wrapper.find('img').at(0)
+    img.simulate('load')
+    await updateWrapper(wrapper)
+    expect((img.getDOMNode() as HTMLImageElement).complete).toEqual(true)
+    expect(wrapper.find('.skeleton').length).toBe(0)
+  })
+})