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

import { describe, it, expect } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { FloatingInput } from './floating-input';

describe('FloatingInput', () => {
  it('renders with label', () => {
    render(<FloatingInput label="Email" />);
    expect(screen.getByLabelText('Email')).toBeInTheDocument();
  });

  it('displays error message', () => {
    render(<FloatingInput label="Email" error="Invalid email" />);
    expect(screen.getByText('Invalid email')).toBeInTheDocument();
  });

  it('renders icon when provided', () => {
    render(
      <FloatingInput
        label="Email"
        icon={<span data-testid="icon">@</span>}
      />
    );
    expect(screen.getByTestId('icon')).toBeInTheDocument();
  });

  it('toggles password visibility', () => {
    render(
      <FloatingInput label="Password" type="password" showPasswordToggle />
    );
    const input = screen.getByLabelText('Password');
    expect(input).toHaveAttribute('type', 'password');

    const toggleButton = screen.getByLabelText('Show password');
    fireEvent.click(toggleButton);
    expect(input).toHaveAttribute('type', 'text');
  });

  it('applies custom className', () => {
    render(<FloatingInput label="Test" className="custom-class" />);
    const input = screen.getByLabelText('Test');
    expect(input.className).toContain('custom-class');
  });
});