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

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Input, SearchInput } from './input';
import { Search } from 'lucide-react';

describe('Input Component', () => {
  it('renders with default props', () => {
    render(<Input placeholder="Enter text" />);

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

  it('renders with label', () => {
    render(<Input label="Username" id="username" />);

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

    const input = screen.getByRole('textbox');
    expect(input).toBeInTheDocument();
  });

  it('renders with icon', () => {
    const icon = <Search className="w-4 h-4" />;
    render(<Input icon={icon} placeholder="Search" />);

    const input = screen.getByPlaceholderText('Search');
    expect(input).toBeInTheDocument();
    expect(input).toHaveClass('pl-10');
  });

  it('handles onChange event', () => {
    const handleChange = vi.fn();
    render(<Input onChange={handleChange} />);

    const input = screen.getByRole('textbox');
    fireEvent.change(input, { target: { value: 'test' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(input).toHaveValue('test');
  });

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

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

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

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

  it('handles different input types', () => {
    const { rerender } = render(<Input type="email" />);
    let input = screen.getByRole('textbox');
    expect(input).toHaveAttribute('type', 'email');

    rerender(<Input type="password" />);
    input = screen.getByDisplayValue('');
    expect(input).toHaveAttribute('type', 'password');
  });
});

describe('SearchInput Component', () => {
  it('renders search input', () => {
    render(<SearchInput placeholder="Search platform..." />);

    const input = screen.getByPlaceholderText('Search platform...');
    expect(input).toBeInTheDocument();
    // SearchInput wraps Input with a search icon
    expect(input).toHaveClass('rounded-xl');
  });

  it('handles onChange event', () => {
    const handleChange = vi.fn();
    render(<SearchInput onChange={handleChange} />);

    const input = screen.getByRole('textbox');
    fireEvent.change(input, { target: { value: 'test query' } });

    expect(handleChange).toHaveBeenCalledTimes(1);
    expect(input).toHaveValue('test query');
  });

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

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