From 474ddb10219c7068e4f1d12090e9981c8c56ba0a Mon Sep 17 00:00:00 2001
From: ryuhangyeong <hangyeong.ryu@gmail.com>
Date: Sun, 19 Jun 2022 12:19:42 +0900
Subject: [PATCH] refactor(components): [descriptions] use JSX in Unit test

---
 .../__tests__/descriptions.test.ts            | 204 ------------------
 .../__tests__/descriptions.test.tsx           | 193 +++++++++++++++++
 2 files changed, 193 insertions(+), 204 deletions(-)
 delete mode 100644 packages/components/descriptions/__tests__/descriptions.test.ts
 create mode 100644 packages/components/descriptions/__tests__/descriptions.test.tsx

diff --git a/packages/components/descriptions/__tests__/descriptions.test.ts b/packages/components/descriptions/__tests__/descriptions.test.ts
deleted file mode 100644
index 12db89e3bf3ed..0000000000000
--- a/packages/components/descriptions/__tests__/descriptions.test.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import { nextTick } from 'vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import ElTag from '@element-plus/components/tag'
-import Descriptions from '../src/index.vue'
-import DescriptionsItem from '../src/description-item'
-
-const _mount = (template: string, data?: () => void, methods?: any) =>
-  mount({
-    components: {
-      'el-descriptions': Descriptions,
-      'el-descriptions-item': DescriptionsItem,
-      'el-tag': ElTag,
-    },
-    template,
-    data,
-    methods,
-  })
-
-describe('Descriptions.vue', () => {
-  test('render test', () => {
-    const wrapper = _mount(`
-      <el-descriptions title="title" extra="extra">
-        <el-descriptions-item v-for="item in 4"></el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
-    expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
-    expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
-  })
-
-  test('should render border props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('table').classes()).toContain('is-bordered')
-  })
-
-  test('should render align props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" align="right" label-align="center">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
-      'is-center'
-    )
-    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
-      'is-right'
-    )
-  })
-
-  test('should render width props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(
-      wrapper.find('.el-descriptions__label').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-    expect(
-      wrapper.find('.el-descriptions__content').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-  })
-
-  test('should render class props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" class-name="class-name" label-class-name="label-class-name">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
-      'label-class-name'
-    )
-    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
-      'class-name'
-    )
-  })
-
-  test('should render width props', () => {
-    const wrapper = _mount(`
-      <el-descriptions border>
-        <el-descriptions-item v-for="item in 3" :label="item" width="50px" min-width="60px">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(
-      wrapper.find('.el-descriptions__label').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-    expect(
-      wrapper.find('.el-descriptions__content').attributes('style')
-    ).toContain('width: 50px; min-width: 60px;')
-  })
-
-  test('should render column props', async () => {
-    const wrapper = _mount(
-      `
-      <el-descriptions :column="5" :border="border">
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `,
-      () => {
-        return {
-          border: false,
-        }
-      }
-    )
-
-    expect(wrapper.find('tr').element.children.length).toEqual(5)
-    wrapper.vm.border = true
-    await nextTick()
-    expect(wrapper.find('tr').element.children.length).toEqual(10)
-  })
-
-  test('should render direction props', async () => {
-    const wrapper = _mount(
-      `
-      <el-descriptions :column="5" :direction="direction" border>
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `,
-      () => {
-        return {
-          direction: 'horizontal',
-        }
-      }
-    )
-
-    expect(wrapper.find('tr').element.children.length).toEqual(10)
-    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
-      wrapper.findAll('tr')[0].element.children[1].innerHTML
-    )
-    wrapper.vm.direction = 'vertical'
-    await nextTick()
-    expect(wrapper.find('tr').element.children.length).toEqual(5)
-    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
-      wrapper.findAll('tr')[1].element.children[0].innerHTML
-    )
-  })
-
-  test('should render title slots', async () => {
-    const wrapper = _mount(`
-      <el-descriptions>
-        <template #title>title</template>
-        <el-descriptions-item v-for="item in 10" :label="item">{{ item }}</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
-  })
-
-  test('should render span props', async () => {
-    const wrapper = _mount(`
-      <el-descriptions :column="3">
-        <el-descriptions-item label="1">1</el-descriptions-item>
-        <el-descriptions-item label="2" :span="2">2</el-descriptions-item>
-        <el-descriptions-item label="3">3</el-descriptions-item>
-        <el-descriptions-item label="4">4</el-descriptions-item>
-      </el-descriptions>
-    `)
-
-    expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
-      '2'
-    )
-    expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
-      '2'
-    )
-  })
-
-  test('re-rendered when slots is updated', async () => {
-    const CHANGE_VALUE = 'company'
-    const wrapper = _mount(
-      `
-      <el-descriptions v-for="(remark,index) in remarks" :key="index" :title="remark">
-        <el-descriptions-item label="remark">
-          <el-tag size="small">{{remark}}</el-tag>
-        </el-descriptions-item>
-      </el-descriptions>
-      <button @click="onClick">click</button>
-    `,
-      () => {
-        return {
-          remarks: ['school', 'hospital'],
-        }
-      },
-      {
-        onClick() {
-          this.remarks[0] = CHANGE_VALUE
-        },
-      }
-    )
-    wrapper.find('button').trigger('click')
-    await nextTick()
-    expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
-  })
-})
diff --git a/packages/components/descriptions/__tests__/descriptions.test.tsx b/packages/components/descriptions/__tests__/descriptions.test.tsx
new file mode 100644
index 0000000000000..9232b12b8b622
--- /dev/null
+++ b/packages/components/descriptions/__tests__/descriptions.test.tsx
@@ -0,0 +1,193 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, test } from 'vitest'
+import ElTag from '@element-plus/components/tag'
+import ElDescriptions from '../src/index.vue'
+import ElDescriptionsItem from '../src/description-item'
+
+describe('Descriptions.vue', () => {
+  test('render test', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions title="title" extra="extra">
+        {Array.from({ length: 4 }).map(() => (
+          <ElDescriptionsItem />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+    expect(wrapper.find('.el-descriptions__extra').text()).toEqual('extra')
+    expect(wrapper.findAll('.el-descriptions__label').length).toEqual(4)
+  })
+
+  test('should render border props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        <ElDescriptionsItem />
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('table').classes()).toContain('is-bordered')
+  })
+
+  test('should render align props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem align="right" labelAlign="center" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+      'is-center'
+    )
+    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+      'is-right'
+    )
+  })
+
+  test('should render width props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem width="50px" min-width="60px" />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(
+      wrapper.find('.el-descriptions__label').attributes('style')
+    ).toContain('width: 50px; min-width: 60px;')
+    expect(
+      wrapper.find('.el-descriptions__content').attributes('style')
+    ).toContain('width: 50px; min-width: 60px;')
+  })
+
+  test('should render class props', () => {
+    const wrapper = mount(() => (
+      <ElDescriptions border>
+        {Array.from({ length: 3 }).map(() => (
+          <ElDescriptionsItem
+            class-name="class-name"
+            label-class-name="label-class-name"
+          />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__label').classes()).toContain(
+      'label-class-name'
+    )
+    expect(wrapper.find('.el-descriptions__content').classes()).toContain(
+      'class-name'
+    )
+  })
+
+  test('should render column props', async () => {
+    const border = ref(false)
+
+    const wrapper = mount(() => (
+      <ElDescriptions column={5} border={border.value}>
+        {Array.from({ length: 10 }).map(() => (
+          <ElDescriptionsItem />
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+
+    border.value = true
+
+    await nextTick()
+
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+  })
+
+  test('should render direction props', async () => {
+    const direction = ref('horizontal')
+
+    const wrapper = mount(() => (
+      <ElDescriptions column={5} direction={direction.value} border>
+        {Array.from({ length: 10 }).map((item) => (
+          <ElDescriptionsItem label={String(item)}>
+            {String(item)}
+          </ElDescriptionsItem>
+        ))}
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.find('tr').element.children.length).toEqual(10)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+      wrapper.findAll('tr')[0].element.children[1].innerHTML
+    )
+
+    direction.value = 'vertical'
+    await nextTick()
+
+    expect(wrapper.find('tr').element.children.length).toEqual(5)
+    expect(wrapper.findAll('tr')[0].element.children[0].innerHTML).toEqual(
+      wrapper.findAll('tr')[1].element.children[0].innerHTML
+    )
+  })
+
+  test('should render title slots', async () => {
+    const wrapper = mount(() => (
+      <ElDescriptions
+        v-slots={{
+          title: () => 'title',
+          default: () =>
+            Array.from({ length: 10 }).map(() => <ElDescriptionsItem />),
+        }}
+      ></ElDescriptions>
+    ))
+
+    expect(wrapper.find('.el-descriptions__title').text()).toEqual('title')
+  })
+
+  test('should render span props', async () => {
+    const wrapper = mount(() => (
+      <ElDescriptions>
+        <ElDescriptionsItem label="1">1</ElDescriptionsItem>
+        <ElDescriptionsItem label="2" span={2}>
+          2
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="3">3</ElDescriptionsItem>
+        <ElDescriptionsItem label="4">4</ElDescriptionsItem>
+      </ElDescriptions>
+    ))
+
+    expect(wrapper.findAll('td')[1].element.getAttribute('colSpan')).toEqual(
+      '2'
+    )
+    expect(wrapper.findAll('td')[3].element.getAttribute('colSpan')).toEqual(
+      '2'
+    )
+  })
+
+  test('re-rendered when slots is updated', async () => {
+    const CHANGE_VALUE = 'company'
+    const remarks = ref(['school', 'hospital'])
+
+    const onClick = () => {
+      remarks.value[0] = CHANGE_VALUE
+    }
+
+    const wrapper = mount(() => (
+      <>
+        {remarks.value.map((remark, index) => (
+          <ElDescriptions key={index} title={remark}>
+            <ElDescriptionsItem label={remark}>
+              <ElTag size="small">{remark}</ElTag>
+            </ElDescriptionsItem>
+          </ElDescriptions>
+        ))}
+        <button onClick={onClick}>click</button>
+      </>
+    ))
+
+    wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.findComponent(ElTag).text()).toBe(CHANGE_VALUE)
+  })
+})