Merge pull request #477 from w2xi/test-components/close-btn

test(components): [close-btn] cover remaining props

packages/fighting-design/close-btn/__test__/close-btn.spec.ts

@@ -1,72 +1,80 @@
+import { h, markRaw } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
+import { vi, describe, expect, test } from 'vitest'
+import { FIconCross } from '@fighting-design/fighting-icon'
 import { FCloseBtn } from '../index'
 
-describe('CloseBtn', () => {
-  test('class', () => {
-    const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' }
-    })
+describe('CloseBtn', () => { 
+  test('create', () => {
+    const wrapper = mount(FCloseBtn)
     expect(wrapper.classes()).toContain('f-close-btn')
   })
 
-  test('size', () => {
-    const wrapper = mount(FCloseBtn, {
-      props: {
-        size: 100
-      }
+  test('size prop supports both number and string types', () => {
+    const size = 100
+    const sizeList = [size, `${size}px`]
+    sizeList.forEach((item) => {
+      const wrapper = mount(FCloseBtn, {
+        props: { size: item }
+      })
+      expect(wrapper.find('.f-svg-icon').attributes('style')).toContain(`--svg-icon-size: ${size}px`)
     })
-    expect(wrapper.getComponent('.f-svg-icon').attributes().style).toContain(
-      '--svg-icon-size: 100px;'
-    )
   })
 
   test('round', () => {
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
       props: { round: true }
     })
     expect(wrapper.classes()).toContain('f-close-btn__round')
   })
 
-  test('slots', () => {
+  test('color', () => {
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
-      props: { disabled: true }
+      props: { color: 'red' }
     })
-    expect(wrapper.classes()).toContain('f-close-btn__disabled')
+    expect(wrapper.attributes('style')).toContain('--close-btn-color: red')
   })
 
-  test('disabled', () => {
+  test('hoverColor', () => {
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
-      props: { disabled: true }
+      props: { hoverColor: 'red' }
     })
-    expect(wrapper.classes()).toContain('f-close-btn__disabled')
+    expect(wrapper.attributes('style')).toContain('--close-btn-hover-color: red')
   })
 
-  test('color', () => {
+  test('icon', () => {
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
-      props: { color: 'red' }
+      props: { icon: markRaw(FIconCross) }
     })
-    expect(wrapper.attributes('style')).toContain('--close-btn-color: red')
+    expect(wrapper.findComponent(FIconCross).exists()).toBeTruthy()
   })
 
-  test('hoverColor', () => {
+  test('should render slot', () => {
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
-      props: { hoverColor: 'red' }
+      slots: { default: h(FIconCross) }
     })
-    expect(wrapper.attributes('style')).toContain('--close-btn-hover-color: red')
+    expect(wrapper.findComponent(FIconCross).exists()).toBeTruthy()
   })
 
-  test('click', async () => {
+  test('should not trigger `onClick` callback when the `disabled` prop is set to true', () => {
+    const onClick = vi.fn()
     const wrapper = mount(FCloseBtn, {
-      slots: { default: '123' },
-      props: { hoverColor: 'red' }
+      props: {
+        onClick,
+        disabled: true
+      }
+    })
+    expect(wrapper.classes()).toContain('f-close-btn__disabled')
+    wrapper.trigger('click')
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  test('onClick', async () => {
+    const onClick = vi.fn()
+    const wrapper = mount(FCloseBtn, {
+      props: { onClick }
     })
-    await wrapper.get('.f-close-btn').trigger('click')
-    expect(wrapper.emitted()).toHaveProperty('click')
+    wrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
   })
 })