feat: add test case and update IntersectionObserver use

Author: zWingz

.gitignore

@@ -55,3 +55,4 @@ website
 .docz
 lib/**
 es
+coverage/

package.json

@@ -23,7 +23,8 @@
     "dev": "cross-env NODE_ENV=development webpack-serve --config=./build/dev.conf.js --host 0.0.0.0 --port 2222",
     "pub": "npm run lint && npm run build:rollup && npm publish --registry http://registry.npmjs.org --access=public",
     "test": "cross-env NODE_ENV=test jest",
-    "test-watch": "cross-env NODE_ENV=test jest --watchAll"
+    "test-watch": "cross-env NODE_ENV=test jest --watchAll",
+    "test-coverage": "cross-env NODE_ENV=test jest --coverage"
   },
   "author": "zhengzwing@gmail.com",
   "license": "MIT",

src/lib/Image/__test__/Image-with-observer.test.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import ImageComponent from '..'
+import { shallow, mount } from 'enzyme'
+
+function getComp(prop) {
+  return <ImageComponent src="test.png" {...prop} />
+}
+
+describe('test when IntersectionObserver is true', () => {
+  const observe = jest.fn()
+  const unobserve = jest.fn()
+  beforeAll(() => {
+    window.IntersectionObserver = jest.fn(function() {
+      this.observe = observe
+      this.unobserve = unobserve
+    })
+  })
+  it('observe img', () => {
+    const wrapper = shallow(getComp())
+    expect(observe).toBeCalledTimes(1)
+    expect(wrapper.instance().state.loadObserve).toBeFalsy()
+    expect(wrapper.find('img').length).toEqual(0)
+    const observerCallback = window.IntersectionObserver.mock.calls[0][0]
+    observerCallback([
+      { target: wrapper.instance().refDom.current, intersectionRatio: 100 }
+    ])
+    expect(unobserve).toBeCalledTimes(1)
+    expect(wrapper.instance().state.loadObserve).toBeTruthy()
+    expect(wrapper.find('img').length).toEqual(1)
+    wrapper.instance().componentWillUnmount()
+    expect(unobserve).toBeCalledTimes(1)
+  })
+})

src/lib/Image/__test__/Image.test.js

@@ -1,10 +1,117 @@
-import React from 'react'
-import Image from '..'
-import { shallow } from 'enzyme'
 
-describe('Image', () => {
-  it('Image Mounted', () => {
-    const result = shallow(<Image src='test.png'/>)
-    expect(result.instance().props.src).toEqual('test.png')
+import React from 'react'
+import ImageComponent from '..'
+import { shallow, mount } from 'enzyme'
+import ErrorIcon from '../../ErrorIcon'
+function getComp(prop) {
+  return <ImageComponent src="test.png" {...prop}/>
+}
+describe('test when IntersectionObserver is false', () => {
+  it('Image set src prop', () => {
+    const result = mount(getComp())
+    expect(result.props().src).toEqual('test.png')
+    result.setProps({ src: 'test2.png' })
+    expect(result.props().src).toEqual('test2.png')
+  })
+  it('test onClick', () => {
+    const onClick = jest.fn().mockReturnValue(null)
+    const result = shallow(getComp({onClick}))
+    result.find('img').simulate('click')
+    expect(onClick).toBeCalledTimes(1)
+  })
+  it('test onLoad, and LoadingIcon should hide', () => {
+    const onLoad = jest.fn().mockReturnValue(null)
+    const result = mount(getComp({onLoad}))
+    expect(result.instance().state.isLoading).toBe(true)
+    result.find('img').simulate('load')
+    expect(onLoad).toBeCalledTimes(1)
+    expect(result.instance().state.isLoading).toBe(false)
+    expect(result.find('.mask-loading').length).toEqual(0)
+  })
+  it('test onError, and ErrorIcon should show', () => {
+    const onError = jest.fn().mockReturnValue(null)
+    const result = mount(getComp({onError}))
+    expect(result.instance().state.isError).toBe(false)
+    result.find('img').simulate('error')
+    expect(onError).toBeCalledTimes(1)
+    expect(result.instance().state.isError).toBe(true)
+    expect(result.find(ErrorIcon).length).toEqual(1)
+  })
+  it('test delete', () => {
+    const onDelete = jest.fn().mockReturnValue(null)
+    const result = mount(getComp({onDelete}))
+    result.find('.react-image-icon').simulate('click')
+    expect(onDelete).toBeCalledTimes(1)
+  })
+  it('test group & preview prop', () => {
+    const group = '100'
+    const result = mount(getComp({group}))
+    expect(result.find('.mask-img').prop('data-img-group')).toEqual('100')
+  })
+  it('data-index-group is "null" when preview is false', () => {
+    const result = mount(
+      getComp({group: '100', preview: false})
+    )
+    expect(result.find('.mask-img').prop('data-img-group')).toEqual(null)
+  })
+  it('test className prop', () => {
+    const className = 'test'
+    const result = shallow(
+      getComp({className})
+    )
+    expect(result.find('.mask-img').hasClass('test')).toBe(true)
+  })
+  it('test "style", "width" and "height" props', () => {
+    const style = { background: 'red', testStyle: '1' }
+    let result = shallow(
+      getComp({width: 120, style})
+    )
+    expect(result.instance().style).toEqual({
+      width: '120px',
+      height: 'initial',
+      background: 'red',
+      testStyle: '1'
+    })
+    result = shallow(getComp({height: 100}))
+    expect(result.instance().style).toEqual({
+      width: '100px',
+      height: '100px'
+    })
+  })
+  it('test img style, style.display is "none" when "isLoading" or "isError" is true', () => {
+    const imgStyle = { testImgStyle: 'test' }
+    const result = shallow(
+      getComp({
+        imgProps: {style: imgStyle},
+        objectFit: 'scale-down'
+      })
+    )
+    const commonExpect = {
+      objectFit: 'scale-down',
+      testImgStyle: 'test'
+    }
+    expect(result.instance().imgStyle).toEqual({
+      display: 'none',
+      ...commonExpect
+    })
+    result.find('img').simulate('load')
+    expect(result.instance().imgStyle).toEqual({
+      display: '',
+      ...commonExpect
+    })
+  })
+  it('test img prop', () => {
+    const imgProps = { 'data-index': 10 }
+    const result = shallow(getComp({imgProps}))
+    expect(result.find('img').prop('data-index')).toEqual(10)
+  })
+  it('test mask prop', () => {
+    const mask = false
+    const result = shallow(getComp({mask}))
+    expect(result.find('.mask-img').hasClass('mask')).toBeFalsy()
+  })
+  it('test refDom', () => {
+    const result = mount(<ImageComponent src="test.png" />)
+    expect(result.instance().refDom.current).toBeTruthy()
   })
 })

src/lib/Image/__test__/observer-with-ovserver.test.js

@@ -0,0 +1,40 @@
+import {
+  CanUseIntersecion, createObserver, observe, unobserve
+} from '../observer'
+
+describe('test when IntersectionObserver is false', () => {
+  const observeFn = jest.fn()
+  const unobserveFn = jest.fn()
+  beforeAll(() => {
+    window.IntersectionObserver = jest.fn(function(excute, opt) {
+      this.observe = observeFn
+      this.unobserve = unobserveFn
+      this.root = opt.root
+    })
+  })
+  it('CanUseIntersecion return true', () => {
+    expect(CanUseIntersecion()).toBeTruthy()
+  })
+  it('createObserver', () => {
+    const observer1 = createObserver()
+    expect(observer1).toBeTruthy()
+    const observer2 = createObserver(document.body)
+    expect(observer2.root).toBe(document.body)
+  })
+  it('observe callback', () => {
+    const observeCb = jest.fn()
+    const dom = document.body
+    observe(dom, observeCb)
+    const observerCallback = window.IntersectionObserver.mock.calls[0][0]
+    observerCallback([
+      { target: dom, intersectionRatio: 100 }
+    ])
+    expect(observeCb).toBeCalledTimes(1)
+    expect(unobserveFn).toBeCalledTimes(1)
+    observerCallback([
+      { target: dom, intersectionRatio: 100 }
+    ])
+    expect(observeCb).toBeCalledTimes(1)
+    expect(unobserveFn).toBeCalledTimes(1)
+  })
+})

src/lib/Image/__test__/observer.test.js

@@ -0,0 +1,16 @@
+import {
+  CanUseIntersecion, createObserver, observe, unobserve
+} from '../observer'
+
+describe('test when IntersectionObserver is false', () => {
+  it('CanUseIntersecion return Falsy', () => {
+    expect(CanUseIntersecion()).toBeFalsy()
+  })
+  it('createObserver return null', () => {
+    expect(createObserver()).toBeNull()
+  })
+  it('observe and unobserve return undefined', () => {
+    expect(observe()).toBeUndefined()
+    expect(unobserve()).toBeUndefined()
+  })
+})

src/lib/Image/index.jsx

@@ -53,7 +53,7 @@ export default class ReactImage extends React.PureComponent {
   state = {
     isError: false,
     isLoading: true,
-    loadObserve: !CanUseIntersecion // InterseciontObserver, 监听图片是否出现在viewport
+    loadObserve: !CanUseIntersecion() // InterseciontObserver, 监听图片是否出现在viewport
   }
 
   get style() {
@@ -123,7 +123,9 @@ export default class ReactImage extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    unobserve(this.refDom.current, this.props.observer)
+    if(!this.state.loadObserve) {
+      unobserve(this.refDom.current, this.props.observer)
+    }
   }
 
   render() {

src/lib/Image/observer.js

@@ -4,12 +4,19 @@
  * 出现才进行加载
  * 如果浏览器不支持InterseciontObserver, 则不作操作
  */
-export const CanUseIntersecion = 'IntersectionObserver' in window
+let canUse = null
+export const CanUseIntersecion = function() {
+  if(canUse !== null) {
+    return canUse
+  }
+  canUse = 'IntersectionObserver' in window
+  return canUse
+}
 // const targets = []
 const targets = new Map()
 /* eslint-disable */
 export function createObserver(container) {
-  if(!CanUseIntersecion) {
+  if(!CanUseIntersecion()) {
     return null
   }
   const opt = {}
@@ -19,24 +26,37 @@ export function createObserver(container) {
   return new IntersectionObserver(excute, opt)
 }
 // const ins = CanUseIntersecion ? new IntersectionObserver(excute) : null
-const ins = createObserver()
+let ins = null
+
+function getObserve(observer) {
+  if(observer) {
+    return observer
+  }
+  if(!ins) {
+    ins = createObserver()
+  }
+  return ins
+}
+
 /* eslint-enable */
 
-export function observe(element, cb, observer = ins) {
-  if(!CanUseIntersecion) {
+export function observe(element, cb, obs) {
+  if(!CanUseIntersecion()) {
     return
   }
+  const observer = getObserve(obs)
   observer.observe(element)
   targets.set(element, {
     cb,
     observer
   })
 }
 
-export function unobserve(element, observer = ins) {
-  if(!CanUseIntersecion) {
+export function unobserve(element, obs) {
+  if(!CanUseIntersecion()) {
     return
   }
+  const observer = getObserve(obs)
   targets.delete(element)
   observer.unobserve(element)
 }
@@ -46,8 +66,10 @@ function excute(entries) {
     const { target, intersectionRatio } = each
     if(intersectionRatio > 0) {
       const tar = targets.get(target)
-      tar.cb(each)
-      unobserve(target, tar.observer)
+      if(tar) {
+        tar.cb(each)
+        unobserve(target, tar.observer)
+      }
     }
   })
 }