gym-manage/gym-manage-web/src/__tests__/components/NoticeManagement.test.ts

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

vi.mock('vue-router')
vi.mock('element-plus', () => ({
  ElMessage: {
    success: vi.fn(),
    error: vi.fn(),
  },
  ElMessageBox: {
    confirm: vi.fn(),
  },
}))

vi.mock('@/utils/request', () => {
  const mockRequest = {
    get: vi.fn().mockResolvedValue([
      { id: 1, noticeTitle: '系统维护通知', noticeType: '1', noticeContent: '系统将于今晚维护', status: '0', createdAt: '2026-01-01T10:00:00' },
      { id: 2, noticeTitle: '新功能上线', noticeType: '2', noticeContent: '新功能已上线', status: '0', createdAt: '2026-01-02T11:00:00' },
    ]),
    post: vi.fn().mockResolvedValue({}),
    put: vi.fn().mockResolvedValue({}),
    delete: vi.fn().mockResolvedValue({}),
  }
  
  return {
    default: mockRequest,
  }
})

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

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

    vi.clearAllMocks()
  })

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

  describe('component initialization', () => {
    it('should render notice management container', () => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })

      expect(wrapper.find('.notice-management').exists()).toBe(true)
    })

    it('should initialize with hidden modal', () => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })

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

    it('should initialize with empty form state', () => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })

      expect(wrapper.vm.formState.noticeTitle).toBe('')
      expect(wrapper.vm.formState.noticeType).toBe('1')
      expect(wrapper.vm.formState.status).toBe('0')
    })
  })

  describe('add notice', () => {
    beforeEach(() => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })
    })

    it('should show modal with add title', () => {
      wrapper.vm.handleAdd()
      expect(wrapper.vm.modalTitle).toBe('新增公告')
      expect(wrapper.vm.modalVisible).toBe(true)
    })

    it('should reset form state when adding', () => {
      wrapper.vm.formState.noticeTitle = 'existing title'
      wrapper.vm.handleAdd()
      expect(wrapper.vm.formState.noticeTitle).toBe('')
      expect(wrapper.vm.formState.id).toBe(null)
    })
  })

  describe('edit notice', () => {
    beforeEach(() => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })
    })

    it('should show modal with edit title', () => {
      const notice = { id: 1, noticeTitle: 'Test', noticeType: '1', noticeContent: 'Content', status: '0' }
      wrapper.vm.handleEdit(notice)
      expect(wrapper.vm.modalTitle).toBe('编辑公告')
      expect(wrapper.vm.modalVisible).toBe(true)
    })

    it('should populate form with notice data', () => {
      const notice = { id: 1, noticeTitle: 'Test Notice', noticeType: '2', noticeContent: 'Test Content', status: '1' }
      wrapper.vm.handleEdit(notice)
      expect(wrapper.vm.formState.id).toBe(1)
      expect(wrapper.vm.formState.noticeTitle).toBe('Test Notice')
      expect(wrapper.vm.formState.noticeType).toBe('2')
    })
  })

  describe('form state', () => {
    beforeEach(() => {
      wrapper = mount(NoticeManagement, {
        global: {
          plugins: [router],
          stubs: {
            'el-card': true,
            'el-button': true,
            'el-table': true,
            'el-table-column': true,
            'el-input': true,
            'el-tag': true,
            'el-dialog': true,
            'el-form': true,
            'el-form-item': true,
            'el-select': true,
            'el-option': true,
          },
        },
      })
    })

    it('should have default notice type as notification', () => {
      expect(wrapper.vm.formState.noticeType).toBe('1')
    })

    it('should have default status as normal', () => {
      expect(wrapper.vm.formState.status).toBe('0')
    })
  })
})