import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import InputField from '../src/components/reg/InputField.jsx';

describe('InputField Component', () => {
  it('should render with the correct title and placeholder', () => {
    const title = 'Username';
    const placeholder = 'Enter your username';

    render(<InputField title={title} placeholder={placeholder} value="" setValue={() => {}} />);

    const titleElement = screen.getByText(title);
    const inputElement = screen.getByPlaceholderText(placeholder);

    expect(titleElement).toBeInTheDocument();
    expect(inputElement).toBeInTheDocument();
  });

  it('should call setValue on input change', () => {
    const mockSetValue = jest.fn();
    const newValue = 'testUser';

    render(<InputField title="Username" value="" setValue={mockSetValue} />);

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

    expect(mockSetValue).toHaveBeenCalledWith(newValue);
  });

  it('should call submit function when Enter key is pressed', () => {
    const mockSubmit = jest.fn();

    render(<InputField title="Username" value="" setValue={() => {}} submit={mockSubmit} />);

    const inputElement = screen.getByRole('textbox');
    fireEvent.keyDown(inputElement, { key: 'Enter', code: 'Enter' });

    expect(mockSubmit).toHaveBeenCalledTimes(1);
  });
});