flnxi-Wu/components/ui/__tests__/UpgradeModal.test.tsx

/**
 * UpgradeModal 组件单元测试
 *
 * 测试 UpgradeModal 组件的功能名称显示和交互行为
 *
 * **Feature: free-version-ui-restrictions**
 * **Property 5: UpgradeModal 功能名称显示**
 * **Validates: Requirements 1.2, 3.2, 3.3, 3.4**
 *
 * @jest-environment jsdom
 */

import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import UpgradeModal from '../UpgradeModal'
import type { FeatureKey } from '@/lib/license/types'
import { FEATURE_DESCRIPTIONS } from '@/lib/license/feature-descriptions'

// Mock useThemeStyles hook
jest.mock('@/lib/ui-styles', () => ({
  useThemeStyles: jest.fn(() => ({
    buttonStyles: {
      secondary: 'mock-secondary-button',
    },
    modalStyles: {
      overlay: 'mock-overlay',
      container: 'mock-container',
      content: 'mock-content',
      header: 'mock-header',
      title: 'mock-title',
      closeButton: 'mock-close-button',
      body: 'mock-body',
      footer: 'mock-footer',
      sizes: {
        small: 'mock-small',
      },
    },
  })),
  cn: (...classes: (string | boolean | undefined)[]) =>
    classes.filter(Boolean).join(' '),
}))

// Mock createPortal
jest.mock('react-dom', () => ({
  ...jest.requireActual('react-dom'),
  createPortal: (node: React.ReactNode) => node,
}))

describe('UpgradeModal 组件', () => {
  const mockOnClose = jest.fn()

  beforeEach(() => {
    mockOnClose.mockClear()
  })

  describe('基础渲染', () => {
    it('当 isOpen 为 true 时应该渲染弹窗', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      expect(screen.getByTestId('upgrade-modal')).toBeInTheDocument()
    })

    it('当 isOpen 为 false 时不应该渲染弹窗', () => {
      render(
        <UpgradeModal
          isOpen={false}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      expect(screen.queryByTestId('upgrade-modal')).not.toBeInTheDocument()
    })
  })

  /**
   * Property 5: UpgradeModal 功能名称显示
   * *For any* 传递给 UpgradeModal 的功能名称，弹窗必须在其内容中显示该功能名称
   * **Feature: free-version-ui-restrictions, Property 5: UpgradeModal Feature Name Display**
   * **Validates: Requirements 1.2, 3.2**
   */
  describe('Property 5: UpgradeModal 功能名称显示', () => {
    const featureKeys: FeatureKey[] = [
      'customTemplates',
      'systemSettings',
      'departmentIsolation',
      'apiAccess',
      'intranetPenetration',
    ]

    featureKeys.forEach((featureKey) => {
      it(`应该显示 ${featureKey} 的功能名称`, () => {
        render(
          <UpgradeModal
            isOpen={true}
            onClose={mockOnClose}
            featureKey={featureKey}
          />
        )
        const expectedName = FEATURE_DESCRIPTIONS[featureKey].name
        expect(screen.getByTestId('upgrade-modal-feature-name')).toHaveTextContent(expectedName)
      })
    })

    it('应该允许自定义功能名称覆盖默认值', () => {
      const customName = '自定义功能名称'
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
          featureName={customName}
        />
      )
      expect(screen.getByTestId('upgrade-modal-feature-name')).toHaveTextContent(customName)
    })

    it('应该显示功能描述', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      const expectedDescription = FEATURE_DESCRIPTIONS.customTemplates.description
      expect(screen.getByText(expectedDescription)).toBeInTheDocument()
    })

    it('应该允许自定义功能描述覆盖默认值', () => {
      const customDescription = '自定义功能描述'
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
          featureDescription={customDescription}
        />
      )
      expect(screen.getByText(customDescription)).toBeInTheDocument()
    })
  })

  describe('限制提示显示', () => {
    it('应该显示当前许可证限制提示', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      expect(screen.getByText('当前许可证未包含此功能，请联系管理员处理授权')).toBeInTheDocument()
    })
  })

  describe('按钮交互', () => {
    it('点击"关闭"按钮应该调用 onClose', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      fireEvent.click(screen.getByText('关闭'))
      expect(mockOnClose).toHaveBeenCalledTimes(1)
    })

    it('点击"联系管理员"按钮应该调用 onClose', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      fireEvent.click(screen.getByText('联系管理员'))
      expect(mockOnClose).toHaveBeenCalledTimes(1)
    })

    it('应该显示两个按钮', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      expect(screen.getByText('关闭')).toBeInTheDocument()
      expect(screen.getByText('联系管理员')).toBeInTheDocument()
    })
  })

  describe('视觉元素', () => {
    it('应该显示锁图标', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      // 检查 SVG 图标存在
      const modal = screen.getByTestId('upgrade-modal')
      const svgElements = modal.querySelectorAll('svg')
      expect(svgElements.length).toBeGreaterThan(0)
    })

    it('应该显示限制说明文字', () => {
      render(
        <UpgradeModal
          isOpen={true}
          onClose={mockOnClose}
          featureKey="customTemplates"
        />
      )
      expect(screen.getByText('当前许可证未包含此功能，请联系管理员处理授权')).toBeInTheDocument()
    })
  })
})