mini-starter/mini/tests/unit/components/ui/label.test.tsx

import { render } from '@testing-library/react'
import { Label } from '@/components/ui/label'

describe('Label', () => {
  it('应该渲染标签', () => {
    const { getByText } = render(<Label>测试标签</Label>)

    expect(getByText('测试标签')).toBeTruthy()
  })

  it('应该应用默认变体样式', () => {
    const { container } = render(<Label>默认标签</Label>)

    const textElement = container.querySelector('span')
    expect(textElement?.className).toContain('text-sm')
    expect(textElement?.className).toContain('font-medium')
    expect(textElement?.className).toContain('text-gray-900')
  })

  it('应该应用不同的变体样式', () => {
    const { container: defaultContainer } = render(<Label variant="default">默认</Label>)
    const { container: secondaryContainer } = render(<Label variant="secondary">次要</Label>)
    const { container: destructiveContainer } = render(<Label variant="destructive">危险</Label>)

    const defaultLabel = defaultContainer.querySelector('span')
    const secondaryLabel = secondaryContainer.querySelector('span')
    const destructiveLabel = destructiveContainer.querySelector('span')

    expect(defaultLabel?.className).toContain('text-gray-900')
    expect(secondaryLabel?.className).toContain('text-gray-600')
    expect(destructiveLabel?.className).toContain('text-red-600')
  })

  it('应该应用不同的大小样式', () => {
    const { container: defaultContainer } = render(<Label size="default">默认</Label>)
    const { container: smContainer } = render(<Label size="sm">小</Label>)
    const { container: lgContainer } = render(<Label size="lg">大</Label>)

    const defaultLabel = defaultContainer.querySelector('span')
    const smLabel = smContainer.querySelector('span')
    const lgLabel = lgContainer.querySelector('span')

    expect(defaultLabel?.className).toContain('text-sm')
    expect(smLabel?.className).toContain('text-xs')
    expect(lgLabel?.className).toContain('text-base')
  })

  it('应该显示必填标记', () => {
    const { getByText } = render(
      <Label required>必填字段</Label>
    )

    expect(getByText('必填字段')).toBeTruthy()
    expect(getByText('*')).toBeTruthy()
  })

  it('不应该显示必填标记当required为false时', () => {
    const { queryByText } = render(
      <Label required={false}>非必填字段</Label>
    )

    expect(queryByText('*')).toBeNull()
  })

  it('应该应用自定义类名', () => {
    const { container } = render(
      <Label className="custom-class">自定义样式</Label>
    )

    const label = container.querySelector('span')
    expect(label?.className).toContain('custom-class')
  })

  it('应该渲染子元素', () => {
    const { getByText } = render(
      <Label>
        <span>图标</span>
        带图标的标签
      </Label>
    )

    expect(getByText('带图标的标签')).toBeTruthy()
    expect(getByText('图标')).toBeTruthy()
  })

  it('应该传递htmlFor属性', () => {
    const { container } = render(
      <Label htmlFor="input-field">关联标签</Label>
    )

    const textElement = container.querySelector('span')
    expect(textElement).toBeTruthy()
  })

  it('应该应用mb-2样式', () => {
    const { container } = render(<Label>有边距的标签</Label>)

    const viewElement = container.querySelector('div')
    expect(viewElement?.className).toContain('mb-2')
  })

  it('应该组合变体样式和大小样式', () => {
    const { container } = render(
      <Label variant="destructive" size="sm">组合样式</Label>
    )

    const label = container.querySelector('span')
    expect(label?.className).toContain('text-red-600') // destructive变体
    expect(label?.className).toContain('text-xs') // sm大小
  })

  it('应该渲染复杂的子元素结构', () => {
    const { getByText } = render(
      <Label>
        <span className="icon">📝</span>
        带图标的复杂标签
        <span className="hint">（可选）</span>
      </Label>
    )

    expect(getByText('📝')).toBeTruthy()
    expect(getByText('带图标的复杂标签')).toBeTruthy()
    expect(getByText('（可选）')).toBeTruthy()
  })

  it('应该正确处理空子元素', () => {
    const { container } = render(<Label></Label>)

    const label = container.querySelector('span')
    expect(label).toBeTruthy()
  })
})