import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ResetButton, ResetButtonProps } from './ResetButton';

describe('ResetButton', () => {
  const onClickMock = jest.fn();

  const defaultProps: ResetButtonProps = {
    onClick: onClickMock,
  };

  it('renders button with correct attributes', () => {
    const { getByLabelText } = render(<ResetButton {...defaultProps} />);

    const buttonElement = getByLabelText('Remove selection');
    expect(buttonElement).toBeInTheDocument();
    expect(buttonElement).toHaveAttribute('title', 'Remove selection');
    expect(buttonElement).toHaveClass(
      'text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed',
    );
    expect(buttonElement).not.toBeDisabled();
  });

  it('calls onClick function when clicked', () => {
    const { getByLabelText } = render(<ResetButton {...defaultProps} />);

    const buttonElement = getByLabelText('Remove selection');
    fireEvent.click(buttonElement);

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

  it('disables the button when isDisabled is true', () => {
    const { getByLabelText } = render(<ResetButton {...defaultProps} isDisabled={true} />);

    const buttonElement = getByLabelText('Remove selection');
    expect(buttonElement).toBeDisabled();
    fireEvent.click(buttonElement);

    expect(onClickMock).toHaveBeenCalledTimes(0);
  });
});