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

describe('MenuSection', () => {
  const mockSection = {
    title: undefined,
    items: [
      {
        id: 'item1',
        title: '修改个人信息',
        icon: 'i-heroicons-user-20-solid',
        bgColor: 'bg-blue-100',
        iconColor: 'text-blue-500',
        onPress: jest.fn()
      },
      {
        id: 'item2',
        title: '账号与安全',
        icon: 'i-heroicons-shield-check-20-solid',
        bgColor: 'bg-green-100',
        iconColor: 'text-green-500',
        onPress: jest.fn()
      }
    ]
  }

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

  it('应该渲染所有菜单项', () => {
    render(<MenuSection section={mockSection} />)
    expect(screen.getByText('修改个人信息')).toBeInTheDocument()
    expect(screen.getByText('账号与安全')).toBeInTheDocument()
  })

  it('应该渲染分组标题（如果存在）', () => {
    const sectionWithTitle = {
      ...mockSection,
      title: '功能设置'
    }
    render(<MenuSection section={sectionWithTitle} />)
    expect(screen.getByText('功能设置')).toBeInTheDocument()
  })

  it('点击菜单项应该调用对应的onPress', () => {
    render(<MenuSection section={mockSection} />)

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

    expect(mockSection.items[0].onPress).toHaveBeenCalledTimes(1)
  })

  it('应该渲染所有菜单项的图标', () => {
    const { container } = render(<MenuSection section={mockSection} />)
    const icons = container.querySelectorAll('.i-heroicons-user-20-solid, .i-heroicons-shield-check-20-solid')
    expect(icons.length).toBe(2)
  })

  it('应该渲染所有菜单项的右箭头', () => {
    const { container } = render(<MenuSection section={mockSection} />)
    const arrows = container.querySelectorAll('.i-heroicons-chevron-right-20-solid')
    expect(arrows.length).toBe(2)
  })
})