novalon-manage-system/novalon-manage-web/src/__tests__/components/Dashboard.test.ts

import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import Dashboard from '@/views/system/Dashboard.vue'

vi.mock('vue-router')
vi.mock('@/api/user.api.ts', () => ({
  getUserStats: vi.fn(),
  getRecentLogins: vi.fn(),
}))

describe('Dashboard Component', () => {
  let router: any
  let wrapper: any

  beforeEach(() => {
    router = createRouter({
      history: createMemoryHistory(),
      routes: [
        { path: '/', component: { template: '<div>Dashboard</div>' } },
      ],
    })

    vi.clearAllMocks()
  })

  afterEach(() => {
    if (wrapper) {
      wrapper.unmount()
    }
  })

  describe('component initialization', () => {
    it('should render dashboard container', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.find('.dashboard').exists()).toBe(true)
    })

    it('should initialize with loading state', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.loading).toBe(true)
    })

    it('should initialize with empty stats', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.stats).toEqual({
        userCount: 0,
        roleCount: 0,
        todayLogin: 0,
        operationLog: 0,
      })
    })
  })

  describe('statistics cards', () => {
    it('should render user count card', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.stats.userCount).toBeDefined()
    })

    it('should render role count card', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.stats.roleCount).toBeDefined()
    })

    it('should render today login card', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.stats.todayLogin).toBeDefined()
    })

    it('should render operation log card', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.stats.operationLog).toBeDefined()
    })
  })

  describe('recent logins', () => {
    it('should initialize with empty recent logins', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.recentLogins).toEqual([])
    })

    it('should display empty state when no recent logins', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.recentLogins.length).toBe(0)
    })
  })

  describe('data loading', () => {
    it('should set loading to false after data loaded', async () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.vm.loading).toBe(true)

      wrapper.vm.loading = false
      await wrapper.vm.$nextTick()

      expect(wrapper.vm.loading).toBe(false)
    })
  })

  describe('document title', () => {
    it('should have dashboard component mounted', () => {
      wrapper = mount(Dashboard, {
        global: {
          plugins: [router],
          stubs: {
            'el-row': true,
            'el-col': true,
            'el-card': true,
            'el-statistic': true,
            'el-icon': true,
            'el-timeline': true,
            'el-timeline-item': true,
          },
        },
      })

      expect(wrapper.exists()).toBe(true)
    })
  })
})