design-system/src/design-system/primitives/StatusText/StatusText.test.tsx

import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { StatusText } from './StatusText'

describe('StatusText', () => {
  it('renders children text', () => {
    render(<StatusText variant="success">Online</StatusText>)
    expect(screen.getByText('Online')).toBeInTheDocument()
  })

  it('renders as a span element', () => {
    render(<StatusText variant="success">Status</StatusText>)
    const el = screen.getByText('Status')
    expect(el.tagName).toBe('SPAN')
  })

  it('applies variant class', () => {
    render(<StatusText variant="error">Failed</StatusText>)
    expect(screen.getByText('Failed')).toHaveClass('error')
  })

  it('applies bold class when bold=true', () => {
    render(<StatusText variant="success" bold>OK</StatusText>)
    expect(screen.getByText('OK')).toHaveClass('bold')
  })

  it('does not apply bold class by default', () => {
    render(<StatusText variant="success">OK</StatusText>)
    expect(screen.getByText('OK')).not.toHaveClass('bold')
  })

  it('accepts custom className', () => {
    render(<StatusText variant="muted" className="custom">Text</StatusText>)
    expect(screen.getByText('Text')).toHaveClass('custom')
  })

  it('renders all 5 variant classes correctly', () => {
    const variants = ['success', 'warning', 'error', 'running', 'muted'] as const
    for (const variant of variants) {
      const { unmount } = render(
        <StatusText variant={variant}>{variant}</StatusText>
      )
      expect(screen.getByText(variant)).toHaveClass(variant)
      unmount()
    }
  })
})