Merge pull request #465 from w2xi/test-components/switch

test(components): [switch] cover remaining props
FightingDesign · Apr 14, 2024 · c25fd70 · c25fd70
2 parents 45e34b9 + 90c368c
commit c25fd70
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 6 deletions.
diff --git a/packages/fighting-design/switch/__test__/switch.spec.ts b/packages/fighting-design/switch/__test__/switch.spec.ts
@@ -1,6 +1,9 @@
+import { markRaw } from 'vue'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
+import { vi, describe, expect, test } from 'vitest'
+import { FIconSnowflake  } from '@fighting-design/fighting-icon'
 import { FSwitch } from '../index'
+import { FSvgIcon } from '../../svg-icon'
 import { FIGHTING_SIZE } from '../../_tokens'
 import type { FightingSize } from '../../_interface'
 
@@ -10,6 +13,17 @@ describe('FSwitch', () => {
     expect(wrapper.classes()).toContain('f-switch')
   })
 
+  test('modelValue', async () => {
+    const wrapper = mount(FSwitch, {
+      props: { 
+        modelValue: true,
+        'onUpdate:modelValue': (val: boolean) => wrapper.setProps({ modelValue: val })
+      }
+    })
+    await wrapper.find('.f-switch__input').trigger('click')
+    expect(wrapper.props('modelValue')).toBe(false)
+  })
+
   test('size', () => {
     FIGHTING_SIZE.forEach((item: FightingSize): void => {
       const wrapper = mount(FSwitch, {
@@ -24,13 +38,84 @@ describe('FSwitch', () => {
       props: { disabled: true }
     })
     expect(wrapper.classes()).toContain('f-switch__disabled')
+    // click is disabled
+    wrapper.find('.f-switch__input').trigger('click')
+    expect(wrapper.emitted()).not.toHaveProperty('click')
+  })
+
+  test('loading', () => {
+    const wrapper = mount(FSwitch, {
+      props: { loading: true }
+    })
+    expect(wrapper.classes()).toContain('f-switch__disabled')
+    expect(wrapper.findComponent(FSvgIcon).classes()).toContain('f-switch__loading-animation')
+    // click is disabled
+    wrapper.find('.f-switch__input').trigger('click')
+    expect(wrapper.emitted()).not.toHaveProperty('click')
+  })
+
+  test('icon', () => {
+    const wrapper = mount(FSwitch, {
+      props: { icon: markRaw(FIconSnowflake) }
+    })
+    expect(wrapper.findComponent(FIconSnowflake).exists()).toBeTruthy()
+  })
+
+  test('closeColor', () => {
+    const wrapper = mount(FSwitch, {
+      props: { closeColor: 'red' }
+    })
+    expect(wrapper.attributes('style')).toContain('--switch-close-color: red')
+  })
+
+  test('activeColor', () => {
+    const wrapper = mount(FSwitch, {
+      props: { activeColor: 'skyblue' }
+    })
+    expect(wrapper.attributes('style')).toContain('--switch-active-color: skyblue')
+  })
+
+  test('activeText', () => {
+    const wrapper = mount(FSwitch, {
+      props: { activeText: '开启' }
+    })
+    expect(wrapper.find('.f-switch__left-text').text()).toContain('开启')
+  })
+
+  test('closeText', () => {
+    const wrapper = mount(FSwitch, {
+      props: { closeText: '关闭' }
+    })
+    expect(wrapper.find('.f-switch__right-text').text()).toContain('关闭')
+  })
+
+  test('square', () => {
+    const wrapper = mount(FSwitch, {
+      props: { square: true }
+    })
+    expect(wrapper.find('.f-switch__input').classes()).toContain('f-switch__square')
+  })
+
+  test('iconSize', () => {
+    const wrapper = mount(FSwitch, {
+      props: {
+        icon: markRaw(FIconSnowflake),
+        iconSize: '20px'
+      }
+    })
+    expect(wrapper.findComponent(FSvgIcon).attributes('style')).toContain('--svg-icon-size: 20px')
   })
 
-  test('click', () => {
+  test('onChange', () => {
+    const onChange = vi.fn((val: boolean) => val)
     const wrapper = mount(FSwitch, {
-      props: { modelValue: true }
+      props: { 
+        onChange,
+        modelValue: true
+      }
     })
-    wrapper.trigger('click')
-    expect(wrapper.emitted('click')).toBeTruthy()
+    wrapper.find('.f-switch__input').trigger('click')
+    expect(onChange).toHaveBeenCalled()
+    expect(onChange).toHaveReturnedWith(false)
   })
 })
diff --git a/packages/fighting-design/switch/src/switch.vue b/packages/fighting-design/switch/src/switch.vue
@@ -42,7 +42,7 @@
     </span>
 
     <!-- 主要内容 -->
-    <div :class="[classList, { 'f-switch__active': modelValue }]" @click="handleClick">
+    <div :class="[classList, { 'f-switch__active': modelValue }]" @click.stop="handleClick">
       <span :class="['f-switch__roll', { 'f-switch__roll-active': modelValue }]">
         <f-svg-icon v-if="icon && !loading" :icon="icon" :size="iconSize" />