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

describe('<FormField>', () => {
    it('should render label', () => {
        render(
            <FormField label="Text label">
                <input type="text" />
            </FormField>
        );

        expect(screen.getByText('Text label')).toBeVisible();
    });

    it('should render "required" sign', () => {
        render(
            <FormField label="Text label" isRequired>
                <input type="text" />
            </FormField>
        );

        expect(screen.getByText('*')).toBeVisible();
    });

    it('should render "error" message', () => {
        render(
            <FormField label="Text label" error="Error message">
                <input type="text" />
            </FormField>
        );

        expect(screen.getByText('Error message')).toBeVisible();
    });

    it('should get "for" attribute from children', () => {
        render(
            <FormField label="Text label">
                <input id="name" type="text" />
            </FormField>
        );

        expect(screen.getByText('Text label').parentElement).toHaveAttribute(
            'for',
            'name'
        );
    });

    it('should set "for" attribute from "labelFor" prop', () => {
        render(
            <FormField label="Text label" labelFor="element-id">
                <input id="name" type="text" />
            </FormField>
        );

        expect(screen.getByText('Text label').parentElement).toHaveAttribute(
            'for',
            'element-id'
        );
    });
});