// @vitest-environment jsdom
import { render, screen, cleanup } from '@testing-library/react';
import { describe, it, expect, afterEach } from 'vitest';
import { Input, Textarea } from '../Input';

describe('Input', () => {
  afterEach(() => {
    cleanup();
  });

  it('renders with correct accessibility attributes when error is present', () => {
    render(<Input label="Test Input" error="Invalid input" />);

    const input = screen.getByLabelText('Test Input');
    const error = screen.getByText('Invalid input');

    expect(input.getAttribute('aria-invalid')).toBe('true');
    expect(input.hasAttribute('aria-describedby')).toBe(true);

    const describedBy = input.getAttribute('aria-describedby');
    expect(describedBy).toBe(error.id);
    expect(error.id).toBeDefined();
    expect(error.id).not.toBe('');
  });

  it('renders without accessibility error attributes when valid', () => {
    render(<Input label="Test Input" />);

    const input = screen.getByLabelText('Test Input');

    // In React 19, aria-invalid={false} renders aria-invalid="false"
    expect(input.getAttribute('aria-invalid')).toBe('false');
    expect(input.hasAttribute('aria-describedby')).toBe(false);
  });
});

describe('Textarea', () => {
  it('renders with correct accessibility attributes when error is present', () => {
    render(<Textarea label="Test Textarea" error="Invalid textarea" />);

    const textarea = screen.getByLabelText('Test Textarea');
    const error = screen.getByText('Invalid textarea');

    expect(textarea.getAttribute('aria-invalid')).toBe('true');
    expect(textarea.hasAttribute('aria-describedby')).toBe(true);

    const describedBy = textarea.getAttribute('aria-describedby');
    expect(describedBy).toBe(error.id);
    expect(error.id).toBeDefined();
    expect(error.id).not.toBe('');
  });
});