import React from 'react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import { MenuItem } from '../../src/components/MenuItem'

describe('MenuItem', () => {
  const mockProps = {
    title: '修改个人信息',
    icon: 'i-heroicons-user-20-solid',
    bgColor: 'bg-blue-100',
    iconColor: 'text-blue-500',
    onPress: jest.fn()
  }

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('应该渲染菜单项标题', () => {
    render(<MenuItem {...mockProps} />)
    expect(screen.getByText('修改个人信息')).toBeInTheDocument()
  })

  it('应该渲染图标', () => {
    const { container } = render(<MenuItem {...mockProps} />)
    const icon = container.querySelector('.i-heroicons-user-20-solid')
    expect(icon).toBeInTheDocument()
  })

  it('应该应用正确的背景颜色类', () => {
    const { container } = render(<MenuItem {...mockProps} />)
    const bgElement = container.querySelector('.bg-blue-100')
    expect(bgElement).toBeInTheDocument()
  })

  it('应该渲染右箭头', () => {
    const { container } = render(<MenuItem {...mockProps} />)
    const arrow = container.querySelector('.i-heroicons-chevron-right-20-solid')
    expect(arrow).toBeInTheDocument()
  })

  it('点击时应该调用onPress', () => {
    render(<MenuItem {...mockProps} />)

    const menuItem = screen.getByText('修改个人信息').closest('.flex')
    if (menuItem) {
      fireEvent.click(menuItem)
    }

    expect(mockProps.onPress).toHaveBeenCalledTimes(1)
  })

  it('应该使用不同的图标颜色', () => {
    const greenProps = { ...mockProps, bgColor: 'bg-green-100', iconColor: 'text-green-500' }
    const { container } = render(<MenuItem {...greenProps} />)
    const greenElement = container.querySelector('.text-green-500')
    expect(greenElement).toBeInTheDocument()
  })
})