From 2f5137975664372682c28fb9a43846d6bde029d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Mon, 13 Jun 2022 15:58:41 +0900
Subject: [PATCH] refactor(components): [overlay] use JSX in Unit test (#8227)

---
 .../{overlay.test.ts => overlay.test.tsx}     | 36 ++++++++-----------
 1 file changed, 15 insertions(+), 21 deletions(-)
 rename packages/components/overlay/__tests__/{overlay.test.ts => overlay.test.tsx} (68%)

diff --git a/packages/components/overlay/__tests__/overlay.test.ts b/packages/components/overlay/__tests__/overlay.test.tsx
similarity index 68%
rename from packages/components/overlay/__tests__/overlay.test.ts
rename to packages/components/overlay/__tests__/overlay.test.tsx
index 6c0f05e40a..9297593a79 100644
--- a/packages/components/overlay/__tests__/overlay.test.ts
+++ b/packages/components/overlay/__tests__/overlay.test.tsx
@@ -1,3 +1,4 @@
+import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
 import Overlay from '../src/overlay'
@@ -6,11 +7,7 @@ const AXIOM = 'Rem is the best girl'
 
 describe('Overlay.vue', () => {
   test('render test', async () => {
-    const wrapper = mount(Overlay, {
-      slots: {
-        default: AXIOM,
-      },
-    })
+    const wrapper = mount(() => <Overlay>{AXIOM}</Overlay>)
     expect(wrapper.text()).toEqual(AXIOM)
     const testClass = 'test-class'
     await wrapper.setProps({
@@ -21,31 +18,28 @@ describe('Overlay.vue', () => {
   })
 
   test('should emit click event', async () => {
-    const wrapper = mount(Overlay, {
-      slots: {
-        default: AXIOM,
-      },
-    })
+    const wrapper = mount(() => <Overlay>{AXIOM}</Overlay>)
     await wrapper.find('.el-overlay').trigger('click')
     expect(wrapper.emitted()).toBeTruthy()
   })
 
   test('no mask', async () => {
-    const wrapper = mount(Overlay, {
-      slots: {
-        default: AXIOM,
-      },
-    })
+    const mask = ref(true)
+    const wrapper = mount(() => <Overlay mask={mask.value}>{AXIOM}</Overlay>)
+
     const selector = '.el-overlay'
     expect(wrapper.find(selector).exists()).toBe(true)
 
-    await wrapper.setProps({
-      mask: false,
-    })
+    mask.value = false
+
+    await nextTick()
+
     expect(wrapper.find(selector).exists()).toBe(false)
-    await wrapper.setProps({
-      mask: true,
-    })
+
+    mask.value = true
+
+    await nextTick()
+
     expect(wrapper.find(selector).exists()).toBe(true)
   })
 })