import React from 'react';
import { render } from '@testing-library/react';
import { AppConfigContext, SuiteAppConfig } from '@theorchard/suite-config';
import { CdnIcon, CdnIconProps } from '../cdnIcon';

describe('<CdnIcon>', () => {
    const renderComponent = (props: CdnIconProps) =>
        render(<CdnIcon {...props} />, {
            wrapper: ({ children }) => (
                <AppConfigContext.Provider
                    value={{
                        config: {
                            cdnUrl: 'https//cdn.test.com/',
                        } as SuiteAppConfig,
                    }}
                >
                    {children}
                </AppConfigContext.Provider>
            ),
        });

    test('renders img element with correct class names', () => {
        const testId = 'testIcon';
        const className = 'testClass';
        const filePath = 'test.svg';

        const { getByTestId } = renderComponent({
            filePath,
            testId,
            className,
        });

        const imgElement = getByTestId(testId);

        expect(imgElement).toHaveClass('Icon');
        expect(imgElement).toHaveClass('CdnIcon');
        expect(imgElement).toHaveClass(className);
    });

    test('renders img element with correct src url', () => {
        const filePath = 'logos/test.jpg';

        const { getByTestId } = renderComponent({
            filePath,
        });

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('src', `https//cdn.test.com/assets/icons/${filePath}`);
    });

    test('renders img element with correct alt name', () => {
        const filePath = 'test';

        const { getByTestId } = renderComponent({
            filePath,
        });

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('alt', filePath);
    });

    test('width and height are applied', () => {
        const { getByTestId } = renderComponent({
            filePath: 'test.bmp',
            width: 100,
            height: 200,
        });

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('height', '200');
        expect(imgElement).toHaveAttribute('width', '100');
    });

    test('provided "cdnUrl" is used"', () => {
        const filePath = 'logos/test.jpg';

        const { getByTestId } = renderComponent({
            filePath,
            cdnUrl: 'somewhere',
        });

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('src', `somewhere/assets/icons/${filePath}`);
    });

    test('no "cdnUrl" renders relative url', () => {
        const filePath = 'logos/test.jpg';

        const { getByTestId } = render(<CdnIcon filePath={filePath} />);

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('src', `/assets/icons/${filePath}`);
    });

    test('provided "folder" is used"', () => {
        const filePath = 'test.jpg';

        const { getByTestId } = renderComponent({
            filePath,
            folder: 'logos',
        });

        const imgElement = getByTestId('CdnIcon');

        expect(imgElement).toHaveAttribute('src', `https//cdn.test.com/assets/logos/${filePath}`);
    });
});