test: adjust relevant test files

src/components/__tests__/comp.test.ts → src/components/button-animation/ButtonAnimation.test.ts

@@ -1,8 +1,13 @@
 import { mount } from '@vue/test-utils'
 import { describe, it, expect } from 'vitest'
-import { nextTick } from 'vue'
 
-import { ButtonAnimation, CollapseTransition, EmptyPlaceholder } from '../index'
+import { ButtonAnimation } from '../index'
+
+async function sleep(delay: number): Promise<void> {
+  await new Promise((resolve) => {
+    setTimeout(resolve, delay)
+  })
+}
 
 describe('ButtonAnimation Component', () => {
   it('render component', () => {
@@ -33,7 +38,7 @@ describe('ButtonAnimation Component', () => {
 
     expect(wrapper.find('.animate-beat').exists()).toBe(true)
 
-    await new Promise((resolve) => setTimeout(resolve, 150))
+    await sleep(150)
 
     expect(wrapper.find('.animate-beat').exists()).toBe(false)
   })
@@ -51,35 +56,3 @@ describe('ButtonAnimation Component', () => {
     expect(wrapper.find('.animate-pulse').exists()).toBe(false)
   })
 })
-
-describe('EmptyPlaceholder Component', () => {
-  it('render component', () => {
-    const wrapper = mount(EmptyPlaceholder, {
-      props: {
-        show: true,
-      },
-    })
-
-    expect(wrapper.exists()).toBe(true)
-    expect(wrapper.find('.n-empty').exists()).toBe(true)
-  })
-})
-
-describe('CollapseTransition Component', () => {
-  it('toggle by v-if when display=false', async () => {
-    const wrapper = mount(CollapseTransition, {
-      props: {
-        display: true,
-        direction: 'vertical',
-      },
-      slots: { default: '<div class="context">context</div>' },
-    })
-
-    expect(wrapper.find('.context').exists()).toBe(true)
-
-    await wrapper.setProps({ display: false })
-    await nextTick()
-
-    expect(wrapper.find('.context').exists()).toBe(false)
-  })
-})

src/components/collapse-transition/CollapseTransition.test.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import { nextTick } from 'vue'
+
+import { CollapseTransition } from '../index'
+
+describe('CollapseTransition Component', () => {
+  it('toggle by v-if when display=false', async () => {
+    const wrapper = mount(CollapseTransition, {
+      props: {
+        display: true,
+        direction: 'vertical',
+        duration: 300,
+      },
+      slots: { default: '<div class="context">context</div>' },
+    })
+
+    expect(wrapper.find('.context').exists()).toBe(true)
+
+    await wrapper.setProps({ display: false })
+    await nextTick()
+    expect(wrapper.find('.context').exists()).toBe(false)
+  })
+})

src/components/content-wrapper/ContentWrapper.test.ts

@@ -0,0 +1,29 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import { ContentWrapper } from '../index'
+;(window as any).matchMedia ||= (q: string) => ({
+  matches: false,
+  media: q,
+  onchange: null,
+  addListener() {},
+  removeListener() {},
+  addEventListener() {},
+  removeEventListener() {},
+  dispatchEvent() {
+    return false
+  },
+})
+
+describe('ContentWrapper Component', () => {
+  it('render component', () => {
+    const wrapper = mount(ContentWrapper, {
+      slots: {
+        default: '<div class="context">context</div>',
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.n-scrollbar').exists()).toBe(true)
+  })
+})

src/components/empty-placeholder/EmptyPlaceholder.test.ts

@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import { EmptyPlaceholder } from '../index'
+
+describe('EmptyPlaceholder Component', () => {
+  it('render component', () => {
+    const wrapper = mount(EmptyPlaceholder, {
+      props: {
+        show: true,
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.n-empty').exists()).toBe(true)
+  })
+})

src/components/hint-help/HintHelp.test.ts

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+import { HintHelp } from '../index'
+
+async function sleep(delay: number): Promise<void> {
+  await new Promise((resolve) => {
+    setTimeout(resolve, delay)
+  })
+}
+
+describe('HintHelp Component', () => {
+  it('render label and trigger', async () => {
+    const wrapper = mount(HintHelp, {
+      attachTo: document.body,
+      props: {
+        label: 'help',
+        content: 'this is help content',
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toContain('help')
+    expect(wrapper.find('.iconify.ph--question').exists()).toBe(true)
+
+    const btn = wrapper.find('.n-button')
+    await btn.trigger('mouseenter')
+    await sleep(300)
+
+    const pop = document.body.querySelector('.n-popover') as HTMLElement | null
+    expect(pop).not.toBeNull()
+    expect(pop?.textContent || '').toContain('this is help content')
+  })
+})

src/components/index.ts

@@ -1,13 +1,13 @@
 export * from './button-animation'
-export { default as CollapseTransition } from './CollapseTransition.vue'
+export { default as CollapseTransition } from './collapse-transition/CollapseTransition.vue'
 
-export * from './CollapseTransition.vue'
-export { default as ContentWrapper } from './ContentWrapper.vue'
+export * from './collapse-transition/CollapseTransition.vue'
+export { default as ContentWrapper } from './content-wrapper/ContentWrapper.vue'
 
-export * from './ContentWrapper.vue'
-export { default as EmptyPlaceholder } from './EmptyPlaceholder.vue'
+export * from './content-wrapper/ContentWrapper.vue'
+export { default as EmptyPlaceholder } from './empty-placeholder/EmptyPlaceholder.vue'
 
-export * from './EmptyPlaceholder.vue'
-export { default as HintHelp } from './HintHelp.vue'
+export * from './empty-placeholder/EmptyPlaceholder.vue'
+export { default as HintHelp } from './hint-help/HintHelp.vue'
 
-export * from './HintHelp.vue'
+export * from './hint-help/HintHelp.vue'

src/layout/aside/component/UserCard.vue

@@ -3,9 +3,10 @@ import { useMessage, NDropdown, NAvatar } from 'naive-ui'
 import { h } from 'vue'
 
 import { ButtonAnimation } from '@/components'
-import DefaultAvatar from '@/components/Avatar.vue'
 import { usePreferencesStore, useUserStore } from '@/stores'
 
+import DefaultAvatar from './Avatar.vue'
+
 const preferencesStore = usePreferencesStore()
 const userStore = useUserStore()
 const message = useMessage()

src/layout/header/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CollapseTransition from '@/components/CollapseTransition.vue'
+import CollapseTransition from '@/components/collapse-transition/CollapseTransition.vue'
 import { usePreferencesStore } from '@/stores'
 
 import Actions from './actions/index.vue'