refactor(components): [popover] use JSX in Unit test (#8337)

packages/components/popover/__tests__/directive.test.tsx

@@ -0,0 +1,73 @@
+import { nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it } from 'vitest'
+import { rAF } from '@element-plus/test-utils/tick'
+import Popover from '../src/popover.vue'
+import PopoverDirective, { VPopover } from '../src/directive'
+import type { PopoverInstance } from '../src/popover'
+
+const AXIOM = 'Rem is the best boy'
+
+const _mount = () => {
+  const popoverRef = ref<PopoverInstance>()
+  return mount(
+    () => (
+      <>
+        <Popover
+          ref={popoverRef}
+          title="title"
+          content={AXIOM}
+          virtual-triggering
+          trigger="click"
+        />
+        <div v-popover={popoverRef.value} id="reference-node">
+          trigger
+        </div>
+      </>
+    ),
+    {
+      global: {
+        directives: {
+          [VPopover]: PopoverDirective,
+        },
+      },
+    }
+  )
+}
+
+describe('v-popover', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render correctly', async () => {
+    const wrapper = _mount()
+
+    await nextTick()
+    expect(document.body.querySelector('.el-popover')?.innerHTML).toContain(
+      AXIOM
+    )
+    wrapper.unmount()
+  })
+
+  it('should show popover when reference is mounted', async () => {
+    const wrapper = _mount()
+
+    await nextTick()
+    const refNode = '#reference-node'
+    expect(wrapper.find(refNode).exists()).toBe(true)
+    expect(
+      document.body.querySelector('.el-popover')?.getAttribute('style')
+    ).toContain('display: none')
+
+    await wrapper.find(refNode).trigger('click', {
+      button: 0,
+    })
+    await nextTick()
+    await rAF()
+    expect(
+      document.body.querySelector('.el-popover')?.getAttribute('style')
+    ).not.toContain('display: none')
+    wrapper.unmount()
+  })
+})

packages/components/popover/__tests__/popover.test.tsx

@@ -1,27 +1,33 @@
-// @ts-nocheck
+import { nextTick, ref } from 'vue'
-import { h, nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
-import { mount as _mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
-import { afterEach, describe, expect, it, test, vi } from 'vitest'
 import { POPPER_CONTAINER_SELECTOR, useZIndex } from '@element-plus/hooks'
-import makeMount from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElPopperTrigger } from '@element-plus/components/popper'
 import Popover from '../src/popover.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import type { PopoverProps } from '../src/popover'
 
 const AXIOM = 'Rem is the best girl'
 
-const mount = makeMount(Popover, {
+const _mount = (props?: Partial<PopoverProps>) =>
-  slots: {
+  mount(
+    {
+      setup() {
+        const slots = {
           default: () => AXIOM,
-    reference: () => h('button', 'click me'),
+          reference: () => <button>click me</button>,
+        }
+        return () => <Popover {...props} v-slots={slots} />
       },
-  props: {},
+    },
-  global: {
+    {
       attachTo: document.body,
-  },
+    }
-})
+  )
+
 describe('Popover.vue', () => {
-  let wrapper: ReturnType<typeof mount>
+  let wrapper: VueWrapper<any>
   const findContentComp = () =>
     wrapper.findComponent({
       name: 'ElPopperContent',
@@ -32,67 +38,54 @@ describe('Popover.vue', () => {
     document.body.innerHTML = ''
   })
 
-  test('render test', () => {
+  it('render test', () => {
-    wrapper = mount()
+    wrapper = _mount()
 
     expect(findContentComp().text()).toEqual(AXIOM)
   })
 
-  test('should render with title', () => {
+  it('should render with title', () => {
     const title = 'test title'
-    wrapper = mount({
+    wrapper = _mount({ title })
-      props: {
-        title,
-      },
-    })
 
     expect(findContentComp().text()).toContain(title)
   })
 
-  test("should modify popover's style with width", async () => {
+  it(`should modify popover's style with width`, async () => {
-    wrapper = mount({
+    wrapper = _mount({ width: 200 })
-      props: {
-        width: 200,
-      },
-    })
 
     const popperContent = findContentComp()
     expect(getComputedStyle(popperContent.element).width).toBe('200px')
 
-    await wrapper.setProps({
+    await wrapper.setProps({ width: '100vw' })
-      width: '100vw',
-    })
 
     expect(getComputedStyle(popperContent.element).width).toBe('100vw')
   })
 
-  test('the content should be overrode by slots', () => {
+  it('the content should be overrode by slots', () => {
     const content = 'test content'
-    wrapper = mount({
+    wrapper = _mount({ content })
-      props: {
+
-        content,
-      },
-    })
     expect(findContentComp().text()).toContain(AXIOM)
   })
 
-  test('should render content when no slots were passed', () => {
+  it('should render content when no slots were passed', () => {
     const content = 'test content'
     const virtualRef = document.createElement('button')
-    wrapper = makeMount(Popover, {
+    wrapper = mount(() => (
-      props: {
+      <Popover
-        content,
+        content={content}
-        teleported: false,
+        teleported={false}
-        virtualRef,
+        virtualRef={virtualRef}
-        virtualTriggering: true,
+        virtualTriggering
-      },
+      />
-    })()
+    ))
 
     expect(findContentComp().text()).toBe(content)
   })
 
-  test('popper z-index should be dynamical', () => {
+  it('popper z-index should be dynamical', () => {
-    wrapper = mount()
+    wrapper = _mount()
 
     const { currentZIndex } = useZIndex()
     expect(
@@ -100,18 +93,16 @@ describe('Popover.vue', () => {
     ).toBeLessThanOrEqual(currentZIndex.value)
   })
 
-  test('defind hide method', async () => {
+  it('defind hide method', async () => {
-    wrapper = mount()
+    wrapper = _mount()
-    const vm = wrapper.vm as any
+    const vm = wrapper.findComponent(Popover).vm
+
     expect(vm.hide).toBeDefined()
   })
 
-  test('should be able to emit after-enter and after-leave', async () => {
+  it('should be able to emit after-enter and after-leave', async () => {
-    const wrapper = mount({
+    const wrapper = _mount({ trigger: 'click' })
-      attrs: {
+
-        trigger: 'click',
-      },
-    })
     await nextTick()
     const trigger$ = wrapper.findComponent(ElPopperTrigger)
     const triggerEl = trigger$.find('.el-tooltip__trigger')
@@ -120,48 +111,26 @@ describe('Popover.vue', () => {
     vi.runAllTimers()
     vi.useRealTimers()
     await rAF()
-    expect(wrapper.emitted()).toHaveProperty('after-enter')
+    expect(wrapper.findComponent(Popover).emitted()).toHaveProperty(
-
+      'after-enter'
-    vi.useFakeTimers()
-    await triggerEl.trigger('click')
-    vi.runAllTimers()
-    vi.useRealTimers()
-    await rAF()
-    expect(wrapper.emitted()).toHaveProperty('after-leave')
-  })
-
-  test('test visible controlled mode trigger invalid', async () => {
-    const wrapper = _mount(
-      {
-        components: {
-          Popover,
-        },
-        template: `
-          <Popover
-            :visible="visible"
-            trigger="click"
-            :content="content"
-          >
-          <template #reference>
-            <button>click me</button>
-          </template>
-          </Popover>
-        `,
-        data() {
-          return {
-            visible: false,
-            content: AXIOM,
-          }
-        },
-      },
-      {
-        attachTo: 'body',
-      }
     )
+
+    vi.useFakeTimers()
+    await triggerEl.trigger('click')
+    vi.runAllTimers()
+    vi.useRealTimers()
+    await rAF()
+    expect(wrapper.findComponent(Popover).emitted()).toHaveProperty(
+      'after-leave'
+    )
+  })
+
+  it('test visible controlled mode trigger invalid', async () => {
+    const wrapper = _mount({ visible: false, trigger: 'click' })
     await nextTick()
     const trigger$ = wrapper.findComponent(ElPopperTrigger)
     const triggerEl = trigger$.find('.el-tooltip__trigger')
-    const popoverDom = document.querySelector('.el-popper')
+    const popoverDom: HTMLElement = document.querySelector('.el-popper')!
 
     vi.useFakeTimers()
     await triggerEl.trigger('click')
@@ -171,52 +140,43 @@ describe('Popover.vue', () => {
     expect(popoverDom.style.display).toBe('none')
 
     vi.useFakeTimers()
-    wrapper.vm.visible = true
+    await wrapper.setProps({ visible: true })
     vi.runAllTimers()
     vi.useRealTimers()
     await rAF()
     expect(popoverDom.style.display).not.toBe('none')
 
     vi.useFakeTimers()
-    wrapper.vm.visible = false
+    await wrapper.setProps({ visible: false })
     vi.runAllTimers()
     vi.useRealTimers()
     await rAF()
     expect(popoverDom.style.display).toBe('none')
   })
 
-  test('test v-model:visible', async () => {
+  it('test v-model:visible', async () => {
-    const wrapper = _mount(
+    const wrapper = mount(
       {
-        components: {
+        setup() {
-          Popover,
+          const visible = ref(false)
-        },
+          return () => (
-        template: `
+            <Popover v-model={[visible.value, 'visible']} trigger="click">
-          <Popover
+              {{
-            v-model:visible="visible"
+                default: () => AXIOM,
-            trigger="click"
+                reference: () => <button>click me</button>,
-            :content="content"
+              }}
-          >
-          <template #reference>
-            <button>click me</button>
-          </template>
             </Popover>
-        `,
+          )
-        data() {
-          return {
-            visible: false,
-            content: AXIOM,
-          }
         },
       },
       {
-        attachTo: 'body',
+        attachTo: document.body,
       }
     )
     await nextTick()
     const trigger$ = wrapper.findComponent(ElPopperTrigger)
     const triggerEl = trigger$.find('.el-tooltip__trigger')
-    const popoverDom = document.querySelector('.el-popper')
+    const popoverDom: HTMLElement = document.querySelector('.el-popper')!
 
     vi.useFakeTimers()
     await triggerEl.trigger('click')
@@ -236,23 +196,21 @@ describe('Popover.vue', () => {
   describe('teleported API', () => {
     it('should mount on popper container', async () => {
       expect(document.body.innerHTML).toBe('')
-      mount()
+      _mount()
 
       await nextTick()
       expect(
-        document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
+        document.body.querySelector(POPPER_CONTAINER_SELECTOR)?.innerHTML
       ).not.toBe('')
     })
 
     it('should not mount on the popper container', async () => {
       expect(document.body.innerHTML).toBe('')
-      mount({
+      _mount({ teleported: false })
-        props: { teleported: false },
-      })
 
       await nextTick()
       expect(
-        document.body.querySelector(POPPER_CONTAINER_SELECTOR).innerHTML
+        document.body.querySelector(POPPER_CONTAINER_SELECTOR)?.innerHTML
       ).toBe('')
     })
   })