test(element3): refactor Avatar unit test

hug-sun · Jan 6, 2021 · e8fd1b9 · e8fd1b9
1 parent 33e8615
commit e8fd1b9
Showing 1 changed file with 26 additions and 27 deletions.
diff --git a/packages/element3/src/components/Avatar/tests/Avatar.spec.js b/packages/element3/src/components/Avatar/tests/Avatar.spec.js
@@ -16,7 +16,7 @@ describe('Avatar.props', () => {
         }
       })
 
-      expect(wrapper.find('i').classes()).toContain('el-icon-eleme')
+      expect(wrapper.get('i')).toHaveClass('el-icon-eleme')
     })
   })
 
@@ -28,9 +28,11 @@ describe('Avatar.props', () => {
         }
       })
 
-      expect(wrapper.find('span').element.style.width).toBe('100px')
-      expect(wrapper.find('span').element.style.height).toBe('100px')
-      expect(wrapper.find('span').element.style.lineHeight).toBe('100px')
+      expect(wrapper.get('span')).toHaveStyle({
+        width: '100px',
+        height: '100px',
+        lineHeight: '100px'
+      })
     })
 
     it('size is string', () => {
@@ -39,7 +41,7 @@ describe('Avatar.props', () => {
           size: 'large'
         }
       })
-      expect(wrapper.find('.el-avatar--large').exists()).toBe(true)
+      expect(wrapper.find('.el-avatar--large')).toBeExist()
     })
   })
   describe('shape', () => {
@@ -49,7 +51,7 @@ describe('Avatar.props', () => {
           shape: 'circle'
         }
       })
-      expect(wrapper.find('.el-avatar--circle').exists()).toBe(true)
+      expect(wrapper.find('.el-avatar--circle')).toBeExist()
     })
   })
 
@@ -60,7 +62,7 @@ describe('Avatar.props', () => {
           src: IMAGE_SUCCESS
         }
       })
-      expect(wrapper.find('img').attributes('src')).toEqual(IMAGE_SUCCESS)
+      expect(wrapper.get('img')).toHaveAttribute('src', IMAGE_SUCCESS)
     })
   })
   describe('altSet', () => {
@@ -72,7 +74,9 @@ describe('Avatar.props', () => {
           srcSet: 'big.jpg 1440w,middle.jpg 800w'
         }
       })
-      expect(wrapper.find('img').attributes('srcset')).toEqual(
+
+      expect(wrapper.get('img')).toHaveAttribute(
+        'srcset',
         'big.jpg 1440w,middle.jpg 800w'
       )
     })
@@ -85,7 +89,7 @@ describe('Avatar.props', () => {
           alt: 'girl'
         }
       })
-      expect(wrapper.find('img').attributes('alt')).toEqual('girl')
+      expect(wrapper.get('img')).toHaveAttribute('alt', 'girl')
     })
   })
 
@@ -97,19 +101,16 @@ describe('Avatar.props', () => {
           fit: 'contain'
         }
       })
-      expect(wrapper.find('img').attributes('style')).toContain(
-        `object-fit: contain`
-      )
+
+      expect(wrapper.get('img')).toHaveStyle({
+        objectFit: 'contain'
+      })
     })
   })
 
   describe('error', () => {
     it('image load faild should call customer callback', async () => {
-      let called = false
-      const callback = () => {
-        called = true
-        return false
-      }
+      const callback = jest.fn(() => false)
       const wrapper = await mount(Avatar, {
         props: {
           src: IMAGE_SUCCESS,
@@ -119,16 +120,12 @@ describe('Avatar.props', () => {
 
       wrapper.find('img').trigger('error')
       await nextTick()
-      expect(wrapper.find('img').exists()).toBe(true)
-      expect(called).toBe(true)
+      expect(wrapper.find('img')).toBeExist()
+      expect(callback).toHaveBeenCalled()
     })
 
     it('image load faild should call customer callback and hidden image', async () => {
-      let called = false
-      const callback = () => {
-        called = true
-        return true
-      }
+      const callback = jest.fn(() => true)
       const wrapper = await mount(Avatar, {
         props: {
           src: IMAGE_SUCCESS,
@@ -138,8 +135,8 @@ describe('Avatar.props', () => {
 
       wrapper.find('img').trigger('error')
       await nextTick()
-      expect(wrapper.find('img').exists()).toBe(false)
-      expect(called).toBe(true)
+      expect(wrapper.find('img')).not.toBeExist()
+      expect(callback).toHaveBeenCalled()
     })
   })
   describe('solt', () => {
@@ -151,7 +148,9 @@ describe('Avatar.props', () => {
           }
         }
       })
-      expect(wrapper.find('span').text()).toEqual(`<span>default slot</span>`)
+      expect(wrapper.find('span')).toHaveTextContent(
+        `<span>default slot</span>`
+      )
     })
   })
 })