import React from 'react';
import { render, screen } from '@testing-library/react';
import { testComponent } from 'lib/test-utils/common';
import { SegmentedInput } from '../segmentedInput';

describe('<SegmentedInput>', () => {
    testComponent(SegmentedInput);

    test('applies style', () => {
        render(<SegmentedInput style={{ marginTop: 10 }}>x</SegmentedInput>);
        expect(screen.getByTestId('SegmentedInput')).toHaveStyle({ marginTop: '10px' });
    });

    test('renders content', () => {
        const content = <div>NESTED CONTENT</div>;
        render(<SegmentedInput>{content}</SegmentedInput>);

        expect(screen.getByText('NESTED CONTENT')).toBeInTheDocument();
    });

    describe('dividers', () => {
        test('are inserted between elements when using fragments', () => {
            const content1 = (
                <>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </>
            );
            const content2 = <div>4</div>;
            render(
                <SegmentedInput>
                    {content1}
                    {content2}
                </SegmentedInput>
            );

            expect(screen.getAllByRole('separator').length).toBe(3);
            expect(screen.getByTestId('SegmentedInput').children).toMatchSnapshot();
        });

        test('are inserted between elements when not using fragments', () => {
            render(
                <SegmentedInput>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                </SegmentedInput>
            );

            expect(screen.getAllByRole('separator').length).toBe(3);
            expect(screen.getByTestId('SegmentedInput').children).toMatchSnapshot();
        });

        test('are not inserted before empty elements', () => {
            render(
                <SegmentedInput>
                    {null}
                    <div>2</div>
                    {undefined}
                    {false}
                    <></>
                </SegmentedInput>
            );

            expect(screen.queryAllByRole('divider').length).toBe(0);
        });
    });

    describe('compact', () => {
        test('sets correct class when true', () => {
            const content = <div>NESTED CONTENT</div>;
            render(<SegmentedInput compact>{content}</SegmentedInput>);

            expect(screen.getByTestId('SegmentedInput')).toHaveClass('SegmentedInput-compact');
        });

        test('sets `applied` class when prop is set', () => {
            const content = <div>NESTED CONTENT</div>;
            render(
                <SegmentedInput compact applied>
                    {content}
                </SegmentedInput>
            );

            expect(screen.getByTestId('SegmentedInput')).toHaveClass(
                'SegmentedInput-compact-applied'
            );
        });
    });
});