refactor(components): [progress] use JSX in Unit test (#8022)

packages/components/progress/__tests__/progress.test.tsx

@@ -1,14 +1,14 @@
+import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import { CircleClose } from '@element-plus/icons-vue'
+
 import Progress from '../src/progress.vue'
+
 describe('Progress.vue', () => {
   test('percent', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        percentage: 66,
-      },
-    })
+    const wrapper = mount(() => <Progress percentage={66} />)
+
     expect(wrapper.find('.el-progress__text').text()).toBe('66%')
     expect(wrapper.find('.el-progress-bar__inner').attributes('style')).toBe(
       'width: 66%; animation-duration: 3s;'
@@ -16,143 +16,135 @@ describe('Progress.vue', () => {
   })
 
   test('status', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        status: 'exception',
-      },
-    })
+    const wrapper = mount(() => <Progress status="exception" />)
+
     expect(wrapper.classes()).toContain('is-exception')
     expect(wrapper.findComponent(CircleClose).exists()).toBe(true)
   })
 
   test('text inside', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        textInside: true,
-      },
-    })
+    const wrapper = mount(() => <Progress textInside />)
+
     expect(wrapper.classes()).toContain('el-progress--text-inside')
   })
 
   test('stroke width', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        strokeWidth: 7,
-      },
-    })
+    const wrapper = mount(() => <Progress strokeWidth={7} />)
+
     expect(wrapper.find('.el-progress-bar__outer').attributes('style')).toBe(
       'height: 7px;'
     )
   })
 
   test('show text', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        showText: false,
-      },
-    })
+    const wrapper = mount(() => <Progress showText={false} />)
+
     expect(wrapper.find('.el-progress__text').exists()).toBe(false)
   })
 
   test('circle', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        type: 'circle',
-      },
-    })
+    const wrapper = mount(() => <Progress type="circle" />)
+
     expect(wrapper.classes()).toContain('el-progress--circle')
   })
 
   test('dashboard', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        type: 'dashboard',
-      },
-    })
+    const wrapper = mount(() => <Progress type="dashboard" />)
+
     expect(wrapper.classes()).toContain('el-progress--dashboard')
   })
 
   test('width', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        type: 'circle',
-        width: 120,
-      },
-    })
+    const wrapper = mount(() => <Progress type="circle" width={120} />)
+
     expect(wrapper.find('.el-progress-circle').attributes('style')).toBe(
       'height: 120px; width: 120px;'
     )
   })
 
   test('color', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        color: 'rgb(255, 255, 255)',
-      },
-    })
+    const wrapper = mount(() => <Progress color="rgb(255, 255, 255)" />)
+
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
     ).toContain('background-color: rgb(255, 255, 255);')
   })
 
   test('color is function', async () => {
-    const wrapper = mount(Progress, {
-      props: {
-        percentage: 0,
-        color: (percentage: number) => {
+    const percentage = ref(0)
+
+    const wrapper = mount(() => (
+      <Progress
+        percentage={percentage.value}
+        color={(percentage: number) => {
           if (percentage > 50) {
             return 'rgb(4, 5, 6)'
           } else {
             return 'rgb(1, 2, 3)'
           }
-        },
-      },
-    })
+        }}
+      />
+    ))
+
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
     ).toContain('background-color: rgb(1, 2, 3);')
-    await wrapper.setProps({ percentage: 60 })
+
+    percentage.value = 60
+
+    await nextTick()
+
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
     ).toContain('background-color: rgb(4, 5, 6);')
   })
 
   test('color is array', async () => {
-    const wrapper = mount(Progress, {
-      props: {
-        percentage: 0,
-        color: [
+    const percentage = ref(0)
+    const wrapper = mount(() => (
+      <Progress
+        percentage={percentage.value}
+        color={[
           { color: 'rgb(1, 1, 1)', percentage: 10 },
           { color: 'rgb(9, 9, 9)', percentage: 90 },
-        ],
-      },
-    })
-    await wrapper.setProps({ percentage: 9 })
+        ]}
+      />
+    ))
+
+    percentage.value = 9
+    await nextTick()
+
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
     ).toContain('background-color: rgb(1, 1, 1);')
-    await wrapper.setProps({ percentage: 89 })
+
+    percentage.value = 89
+    await nextTick()
+
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
     ).toContain('background-color: rgb(9, 9, 9);')
   })
 
   test('format', () => {
-    const wrapper = mount(Progress, {
-      props: {
-        percentage: 100,
-        format: (percent: number) => `占比${percent}%`,
-      },
-    })
+    const wrapper = mount(() => (
+      <Progress
+        percentage={100}
+        format={(percent: number) => `占比${percent}%`}
+      />
+    ))
     expect(wrapper.find('.el-progress__text').text()).toBe('占比100%')
   })
 
   test('slot', () => {
-    const wrapper = mount(Progress, {
-      slots: {
-        default: '自定义内容',
-      },
-    })
+    const wrapper = mount(() => (
+      <Progress
+        v-slots={{
+          default: () => '自定义内容',
+        }}
+      />
+    ))
+
     expect(wrapper.find('.el-progress__text').text()).toBe('自定义内容')
   })
 })