import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '../Button';

describe('<Button>', () => {
    it('renders a native button with the label and fires onClick', async () => {
        const onClick = jest.fn();
        render(<Button onClick={onClick}>Save</Button>);
        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
        expect(onClick).toHaveBeenCalledTimes(1);
    });

    it('does not fire onClick when disabled', async () => {
        const onClick = jest.fn();
        render(
            <Button onClick={onClick} disabled>
                Save
            </Button>,
        );
        await userEvent.click(screen.getByRole('button', { name: 'Save' }));
        expect(onClick).not.toHaveBeenCalled();
    });

    it('exposes an accessible name from aria-label for icon-only buttons', () => {
        render(<Button aria-label="Delete" />);
        expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
    });

    it('defaults to type="button" (never an accidental form submit)', () => {
        render(<Button>Go</Button>);
        expect(screen.getByRole('button', { name: 'Go' })).toHaveAttribute('type', 'button');
    });
});