import '@testing-library/jest-dom';
import renderer from 'react-test-renderer';
import {render, screen} from '@testing-library/react';
import {DotComponent} from './dot.component';
import {AppProviderComponent} from '../../../providers';
import React from 'react';

describe('Dot Component', () => {
    describe('Render without crash and correctly', () => {
        it('Check', () => {
            render(
                <AppProviderComponent>
                    <DotComponent />
                </AppProviderComponent>,
            );
        });

        it('Snapshot', () => {
            const tree = renderer.create(
                <AppProviderComponent>
                    <DotComponent />
                </AppProviderComponent>,
            );
            expect(tree).toMatchSnapshot();
        });
    });

    describe('Sizes', () => {
        describe('sm', () => {
            it('Check', () => {
                const size = 'sm';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' size={size} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('height: 6px');
                expect(dot).toHaveStyle('width: 6px');
            });
            it('Snapshot', () => {
                const size = 'sm';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent size={size} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('md', () => {
            it('Check', () => {
                const size = 'md';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' size={size} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('height: 8px');
                expect(dot).toHaveStyle('width: 8px');
            });

            it('Snapshot', () => {
                const size = 'md';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent size={size} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('lg', () => {
            it('Check', () => {
                const size = 'lg';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' size={size} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('height: 10px');
                expect(dot).toHaveStyle('width: 10px');
            });

            it('Snapshot', () => {
                const size = 'lg';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent size={size} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });
    });

    describe('Variants', () => {
        describe('fill', () => {
            it('Check', () => {
                const variant = 'fill';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' variant={variant} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('background-color: #2E90FA');
                expect(dot).toHaveStyle('border-width: 0px');
            });
            it('Snapshot', () => {
                const variant = 'fill';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent variant={variant} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('outline', () => {
            it('Check', () => {
                const variant = 'outline';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' variant={variant} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('border-style: solid');
                expect(dot).toHaveStyle('border-color: #53b1fd');
            });

            it('Snapshot', () => {
                const variant = 'outline';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent variant={variant} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });

        describe('radiate', () => {
            it('Check', () => {
                const variant = 'radiate';

                render(
                    <AppProviderComponent>
                        <DotComponent role='span' variant={variant} />
                    </AppProviderComponent>,
                );

                const dot = screen.getByRole('span');
                expect(dot).toHaveStyle('border-style: solid');
                expect(dot).toHaveStyle('background-color: #2E90FA');
                expect(dot).toHaveStyle('border-width: 4px');
            });

            it('Snapshot', () => {
                const variant = 'radiate';

                const tree = renderer.create(
                    <AppProviderComponent>
                        <DotComponent variant={variant} />
                    </AppProviderComponent>,
                );

                expect(tree).toMatchSnapshot();
            });
        });
    });
});