import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CustomPasswordField from './CustomPasswordField';

describe('CustomPasswordField', () => {
  it('renders a password input with label', () => {
    render(
      <ThemeProvider theme={createTheme()}>
        <CustomPasswordField label="Password" name="password" changeHandler={jest.fn()} />
      </ThemeProvider>
    );

    const input = screen.getByLabelText('Password');
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute('type', 'password');
  });

  it('calls changeHandler when user types', async () => {
    const user = userEvent.setup();
    const changeHandler = jest.fn();

    render(
      <ThemeProvider theme={createTheme()}>
        <CustomPasswordField label="Password" name="password" changeHandler={changeHandler} />
      </ThemeProvider>
    );

    await user.type(screen.getByLabelText('Password'), 'secret');
    expect(changeHandler).toHaveBeenCalled();
  });
});
