import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { Label, LabelProps, CLASS_NAME } from '../label';

describe('<Label>', () => {
    const defaultProps: LabelProps = {
        text: 'hello',
    };

    testComponent(Label, defaultProps, CLASS_NAME);

    const renderComponent = (props?: Partial<LabelProps>) =>
        render(<Label {...defaultProps} {...props} />);

    test('does not show help', () => {
        const { container } = renderComponent({ help: undefined });

        expect(container.querySelector('.HelpTooltip')).toBeNull();
    });

    test('does not have the error class', () => {
        const { container } = renderComponent();

        const labelElement = container.querySelector('.FormLabel-error');

        expect(labelElement).toBeNull();
    });

    test('applies given "labelClassName"', () => {
        const labelClassName = 'label-class';
        const { container } = renderComponent({ labelClassName });

        const labelElement = container.querySelector(`label.${labelClassName}`);

        expect(labelElement).toBeInTheDocument();
    });

    describe('with "hasError" property enabled', () => {
        test('applies error class', () => {
            const { container } = renderComponent({ hasError: true });

            const labelElement = container.querySelector('.FormLabel-error');

            expect(labelElement).toBeInTheDocument();
        });
    });

    describe('with "help" property', () => {
        test('shows help tooltip', () => {
            const help = { message: 'Here is your help', id: 'id' };

            const { container } = renderComponent({ help });

            const tooltipElement = container.querySelector('.HelpTooltip');

            expect(tooltipElement).toBeInTheDocument();
        });
    });

    describe('with "optional" property enabled', () => {
        test('shows the optional text', () => {
            const { getByText } = renderComponent({ isOptional: true });

            const labelElement = getByText('(Optional)');

            expect(labelElement).toHaveTextContent('(Optional)');
        });
    });

    describe('with "icons" property', () => {
        test('shows icons', () => {
            render(<Label {...defaultProps} icons={['dot', 'dot', 'dot']} />);

            expect(screen.getAllByTestId('DotGlyphIcon')).toHaveLength(3);
        });
    });
});