test: 优化单元测试 🌦️🌦️🌦️

packages/fighting-design/alert/__test__/alert.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FAlert } from '../index'
 import { FIGHTING_TYPE } from '../../_tokens'
+import type { FightingType } from '../../_interface'
 
 describe('FAlert', () => {
   test('class', () => {
@@ -10,7 +11,7 @@ describe('FAlert', () => {
   })
 
   test('type', () => {
-    FIGHTING_TYPE.forEach(item => {
+    FIGHTING_TYPE.forEach((item: FightingType): void => {
       const wrapper = mount(FAlert, {
         props: { type: item }
       })

packages/fighting-design/avatar/__test__/avatar.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FAvatar } from '../index'
 import { FIGHTING_SIZE, FIGHTING_FIT } from '../../_tokens'
+import type { FightingFit, FightingSize } from '../../_interface'
 
 describe('FAvatar', () => {
   test('class', () => {
@@ -25,7 +26,7 @@ describe('FAvatar', () => {
   })
 
   test('fit', () => {
-    FIGHTING_FIT.forEach(item => {
+    FIGHTING_FIT.forEach((item: FightingFit): void => {
       const wrapper = mount(FAvatar, {
         props: { fit: item }
       })
@@ -34,7 +35,7 @@ describe('FAvatar', () => {
   })
 
   test('size', () => {
-    FIGHTING_SIZE.forEach(item => {
+    FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FAvatar, {
         props: { size: item }
       })

packages/fighting-design/badge/__test__/badge.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FBadge } from '../index'
 import { FIGHTING_TYPE } from '../../_tokens'
+import type { FightingType } from '../../_interface'
 
 describe('FBadge', () => {
   test('class', () => {
@@ -12,7 +13,7 @@ describe('FBadge', () => {
   })
 
   test('type', () => {
-    FIGHTING_TYPE.forEach(item => {
+    FIGHTING_TYPE.forEach((item: FightingType): void => {
       const wrapper = mount(FBadge, {
         props: { type: item }
       })

packages/fighting-design/button/__test__/button.spec.ts

@@ -3,6 +3,8 @@ import { describe, expect, test } from 'vitest'
 import { FButton } from '../index'
 import { useColor } from '../../_hooks'
 import { FIGHTING_SIZE, FIGHTING_TYPE, FIGHTING_TARGET } from '../../_tokens'
+import type { ButtonNative, ButtonTarget } from '../index'
+import type { FightingType, FightingSize } from '../../_interface'
 
 describe('FButton', () => {
   test('class', () => {
@@ -55,7 +57,7 @@ describe('FButton', () => {
   })
 
   test('size', () => {
-    FIGHTING_SIZE.forEach(item => {
+    FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FButton, {
         props: { size: item }
       })
@@ -78,7 +80,7 @@ describe('FButton', () => {
   })
 
   test('target', () => {
-    FIGHTING_TARGET.forEach(item => {
+    FIGHTING_TARGET.forEach((item: ButtonTarget): void => {
       const wrapper = mount(FButton, {
         props: { href: 'https://tianyuhao.cn', target: item }
       })
@@ -101,7 +103,7 @@ describe('FButton', () => {
   })
 
   test('type', () => {
-    FIGHTING_TYPE.forEach(item => {
+    FIGHTING_TYPE.forEach((item: FightingType): void => {
       const wrapper = mount(FButton, {
         props: { type: item }
       })
@@ -145,8 +147,8 @@ describe('FButton', () => {
   })
 
   test('native-type', () => {
-    const nativeType = ['button', 'submit', 'reset'] as const
-    nativeType.forEach(item => {
+    const nativeTypes: ButtonNative[] = ['button', 'submit', 'reset']
+    nativeTypes.forEach((item: ButtonNative): void => {
       const wrapper = mount(FButton, {
         props: { nativeType: item }
       })

packages/fighting-design/card/__test__/card.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FCard } from '../index'
+import type { CardShadow } from '../index'
 
 describe('FCard', () => {
   test('class', () => {
@@ -32,8 +33,8 @@ describe('FCard', () => {
   })
 
   test('shadow', () => {
-    const shadow = ['hover', 'always'] as const
-    shadow.forEach(item => {
+    const shadows: CardShadow[] = ['hover', 'always']
+    shadows.forEach((item: CardShadow): void => {
       const wrapper = mount(FCard, {
         props: { shadow: item }
       })

packages/fighting-design/collapse-animation/__test__/collapse-animation.spec.ts

@@ -10,26 +10,17 @@ describe('CollapseAnimation', () => {
 
   test('opened', () => {
     const wrapper = mount(FCollapseAnimation, {
-      props: {
-        opened: false
-      },
-      slots: {
-        default: 'collapse-animation'
-      }
+      props: { opened: false },
+      slots: { default: 'collapse-animation' }
     })
     wrapper.get('.f-collapse-animation')
     expect(wrapper.attributes().style).toContain('height: 0px;')
   })
 
   test('disabled', async () => {
     const wrapper = mount(FCollapseAnimation, {
-      props: {
-        opened: false,
-        disabled: true
-      },
-      slots: {
-        default: 'collapse-animation'
-      }
+      props: { opened: false, disabled: true },
+      slots: { default: 'collapse-animation' }
     })
     await wrapper.setProps({ opened: true })
     expect(wrapper.attributes().style).toContain('height: 0px;')

packages/fighting-design/dialog/__test__/dialog.spec.ts

@@ -6,19 +6,14 @@ import { EMIT_VISIBLE } from '../../_tokens'
 describe('FDialog', () => {
   test('class', () => {
     const wrapper = mount(FDialog, {
-      props: {
-        visible: true
-      }
+      props: { visible: true }
     })
     expect(wrapper.find('div').classes()).toContain('f-popup')
   })
 
   test('title', () => {
     const wrapper = mount(FDialog, {
-      props: {
-        visible: true,
-        title: '标题'
-      }
+      props: { visible: true, title: '标题' }
     })
     expect(wrapper.find('.f-dialog__header-title').text()).toContain('标题')
   })
@@ -37,10 +32,7 @@ describe('FDialog', () => {
 
   test('width', () => {
     const wrapper = mount(FDialog, {
-      props: {
-        visible: true,
-        width: '200px'
-      }
+      props: { visible: true, width: '200px' }
     })
     expect(wrapper.find('.f-dialog').attributes('style')).toContain('width: 200px')
   })
@@ -85,8 +77,6 @@ describe('FDialog', () => {
     await wrapper.get('.f-popup__container').trigger('click.self')
     expect(wrapper.emitted(EMIT_VISIBLE)?.[0][0]).toBe(false)
     await wrapper.setProps({ visible: false })
-    // 应该使用 js-dom。如果使用 happy-dom，下面的测试就会失败。
-    // 查看这个 issue https://github.com/vuejs/test-utils/issues/1704
     expect(wrapper.find('.f-dialog').isVisible()).toBe(false)
   })
 

packages/fighting-design/divider/__test__/divider.spec.ts

@@ -3,8 +3,6 @@ import { describe, expect, test } from 'vitest'
 import { FDivider } from '../index'
 import type { DividerType, DividerPosition } from '../index'
 
-const text = '分割线'
-
 describe('FDivider', () => {
 
   test('class', () => {
@@ -26,7 +24,6 @@ describe('FDivider', () => {
       props: { vertical: true }
     })
     expect(wrapper.classes()).toContain('f-divider__vertical')
-    // expect(wrapper.find('span').exists()).toBe(false)
   })
 
   test('position', () => {
@@ -41,7 +38,7 @@ describe('FDivider', () => {
 
   test('fontColor', () => {
     const wrapper = mount(FDivider, {
-      slots: { default: text },
+      slots: { default: '分割线' },
       props: { fontColor: 'green' }
     })
     expect(wrapper.attributes('style')).toContain('--divider-font-color: green')

packages/fighting-design/drawer/__test__/drawer.spec.ts

@@ -10,9 +10,7 @@ describe('FDrawer', () => {
 
   test('title', () => {
     const wrapper = mount(FDrawer, {
-      props: {
-        title: '标题'
-      }
+      props: { title: '标题' }
     })
     expect(wrapper.find('.f-drawer__header-title').text()).toContain('标题')
   })

packages/fighting-design/dropdown-item/__test__/dropdown-item.spec.ts

@@ -11,9 +11,7 @@ describe('DropdownItem', () => {
 
   test('disabled', () => {
     const wrapper = mount(FDropdownItem, {
-      props: {
-        disabled: true
-      }
+      props: { disabled: true }
     })
     expect(wrapper.classes()).toContain('f-dropdown-item__disabled')
   })

packages/fighting-design/empty/__test__/empty.spec.ts

@@ -10,9 +10,7 @@ describe('FEmpty', () => {
 
   test('content', () => {
     const wrapper = mount(FEmpty, {
-      props: {
-        content: '内容啊'
-      }
+      props: { content: '内容啊' }
     })
     expect(wrapper.find('.f-empty__content').text()).toContain('内容啊')
   })

packages/fighting-design/image/__test__/image.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FImage } from '../index'
 import { FIGHTING_FIT } from '../../_tokens'
+import type { ImageFit } from '../index'
 
 describe('FImage', () => {
   test('class', () => {
@@ -32,7 +33,7 @@ describe('FImage', () => {
   })
 
   test('fit', () => {
-    FIGHTING_FIT.forEach(item => {
+    FIGHTING_FIT.forEach((item: ImageFit): void => {
       const wrapper = mount(FImage, {
         props: { fit: item }
       })

packages/fighting-design/input/__test__/input.spec.ts

@@ -2,6 +2,8 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FInput } from '../index'
 import { FIGHTING_SIZE } from '../../_tokens'
+import type { InputType } from '../index'
+import type { FightingSize } from '../../_interface'
 
 describe('Input', () => {
   test('class', () => {
@@ -11,8 +13,8 @@ describe('Input', () => {
   })
 
   test('type', () => {
-    const size = ['text', 'password', 'number'] as const
-    size.forEach(item => {
+    const types: InputType[] = ['text', 'password', 'number']
+    types.forEach((item: InputType): void => {
       const wrapper = mount(FInput, {
         props: { type: item }
       })
@@ -21,7 +23,7 @@ describe('Input', () => {
   })
 
   test('size', () => {
-    FIGHTING_SIZE.forEach(item => {
+    FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FInput, {
         props: { size: item }
       })

packages/fighting-design/list/__test__/list.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FList } from '../index'
 import { FIGHTING_SIZE } from '../../_tokens'
+import type { FightingSize } from '../../_interface'
 
 describe('FList', () => {
   test('class', () => {
@@ -32,7 +33,7 @@ describe('FList', () => {
   })
 
   test('size', () => {
-    FIGHTING_SIZE.forEach(item => {
+    FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FList, {
         props: { size: item }
       })

packages/fighting-design/loading/__test__/loading.spec.ts

@@ -5,9 +5,7 @@ import FLoadingVue from '../src/loading.vue'
 describe('FLoading', () => {
   test('class', () => {
     const wrapper = mount(FLoadingVue, {
-      props: {
-        visible: true
-      }
+      props: { visible: true }
     })
     expect(wrapper.classes()).toContain('f-loading')
   })

packages/fighting-design/switch/__test__/switch.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FSwitch } from '../index'
 import { FIGHTING_SIZE } from '../../_tokens'
+import type { FightingSize } from '../../_interface'
 
 describe('FSwitch', () => {
   test('class', () => {
@@ -10,7 +11,7 @@ describe('FSwitch', () => {
   })
 
   test('size', () => {
-    FIGHTING_SIZE.forEach(item => {
+    FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FSwitch, {
         props: { size: item }
       })

packages/fighting-design/tag/__test__/tag.spec.ts

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { FTag } from '../index'
 import { FIGHTING_SIZE, FIGHTING_TYPE } from '../../_tokens'
+import type { FightingType } from '../../_interface'
 
 describe('FTag', () => {
   test('class', () => {
@@ -10,7 +11,7 @@ describe('FTag', () => {
   })
 
   test('type', () => {
-    FIGHTING_TYPE.forEach(item => {
+    FIGHTING_TYPE.forEach((item: FightingType): void => {
       const wrapper = mount(FTag, {
         props: { type: item }
       })

packages/fighting-design/watermark/__test__/watermark.spec.ts

@@ -1,9 +1,10 @@
-// import { mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-// import { FWatermark } from '../index'
+import { FWatermark } from '../index'
 
 describe('FWatermark', () => {
-  test('test', () => {
-    expect(1 + 1).toBe(2)
+  test('class', () => {
+    const wrapper = mount(FWatermark)
+    expect(wrapper.classes()).toContain('f-watermark')
   })
 })