veza/apps/web/src/components/ui/textarea.test.tsx

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

describe('Textarea Component', () => {
  it('renders textarea', () => {
    render(<Textarea placeholder="Enter text" />);

    const textarea = screen.getByPlaceholderText('Enter text');
    expect(textarea).toBeInTheDocument();
    expect(textarea).toHaveClass('bg-muted');
  });

  it('renders with label', () => {
    render(<Textarea label="Description" />);

    const label = screen.getByText('Description');
    expect(label).toBeInTheDocument();

    // The label is not associated via htmlFor/id, use getByRole instead
    const textarea = screen.getByRole('textbox');
    expect(textarea).toBeInTheDocument();
  });

  it('displays error message', () => {
    render(<Textarea error="This field is required" />);

    const error = screen.getByText('This field is required');
    expect(error).toBeInTheDocument();
    expect(error).toHaveClass('text-destructive');

    const textarea = screen.getByRole('textbox');
    expect(textarea).toHaveClass('border-destructive');
  });

  it('applies custom className', () => {
    render(<Textarea className="custom-textarea" />);

    const textarea = screen.getByRole('textbox');
    expect(textarea).toHaveClass('custom-textarea');
  });

  it('handles disabled state', () => {
    render(<Textarea disabled />);

    const textarea = screen.getByRole('textbox');
    expect(textarea).toBeDisabled();
  });

  it('handles value prop', () => {
    render(<Textarea value="Test value" readOnly />);

    const textarea = screen.getByRole('textbox');
    expect(textarea).toHaveValue('Test value');
  });
});