import { fireEvent, render, screen } from '@testing-library/react';
import { type ButtonHTMLAttributes, type ReactNode } from 'react';
import { Button } from './index';
type MockButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size'> & {
label?: ReactNode;
size?: string;
};
jest.mock('exchange-elements/v2', () => ({
Button: ({ label, size, ...props }: MockButtonProps) => (
<button
{...props}
type="button"
data-size={size}
>
{label}
</button>
),
}));
describe('Button', () => {
it('должен использовать размер sm по умолчанию', () => {
render(<Button label="Кнопка" />);
expect(screen.getByRole('button')).toHaveAttribute('data-size', 'sm');
});
it('должен использовать переданный размер', () => {
render(
<Button
size="lg"
label="Кнопка"
/>,
);
expect(screen.getByRole('button')).toHaveAttribute('data-size', 'lg');
});
it('должен добавлять класс pressed при активном состоянии', () => {
render(
<Button
pressed
label="Кнопка"
/>,
);
expect(screen.getByRole('button')).toHaveClass('button', 'pressed');
});
it('не должен добавлять классы состояний по умолчанию', () => {
render(<Button label="Кнопка" />);
const button = screen.getByRole('button');
expect(button).not.toHaveClass('pressed');
expect(button).not.toHaveClass('selected');
});
it('должен добавлять класс selected при выбранном состоянии', () => {
render(
<Button
selected
label="Кнопка"
/>,
);
expect(screen.getByRole('button')).toHaveClass('button', 'selected');
});
it('должен объединять переданный className с базовым классом', () => {
render(
<Button
className="custom-class"
label="Кнопка"
/>,
);
expect(screen.getByRole('button')).toHaveClass('button', 'custom-class');
});
it('должен передавать остальные свойства в базовый компонент кнопки', () => {
const handleClick = jest.fn();
render(
<Button
onClick={handleClick}
label="Кнопка"
/>,
);
fireEvent.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
});