import { fireEvent, render, screen } from '@testing-library/react';
import { CheckBox } from './CheckBox';

describe('<CheckBox>', () => {
    it('should render checkbox input', () => {
        render(
            <CheckBox id="test-id" name="test-name">
                Label
            </CheckBox>
        );

        const input = screen.getByRole('checkbox');
        expect(input).toBeVisible();
        expect(input).toHaveAttribute('id', 'test-id');
        expect(input).toHaveAttribute('name', 'test-name');
    });

    it('should render label', () => {
        render(
            <CheckBox id="test-id" name="test-name">
                Label
            </CheckBox>
        );

        const label = screen.getByText('Label');
        expect(label).toBeVisible();
        expect(label).toHaveAttribute('for', 'test-id');
    });

    describe('when user clicks', () => {
        it('should call "onChange" callback', () => {
            const onChangeMock = vi.fn();

            render(
                <CheckBox id="test-id" name="test-name" onChange={onChangeMock}>
                    Label
                </CheckBox>
            );

            const label = screen.getByText('Label');

            fireEvent.click(label);

            expect(onChangeMock).toHaveBeenCalledWith(
                expect.objectContaining({
                    target: expect.objectContaining({
                        id: 'test-id',
                        name: 'test-name',
                    }),
                })
            );
        });
    });
});