import React from 'react';
import { render } from '@testing-library/react';
import { Icon, IconProps } from '../icon';

describe('<Icon>', () => {
    function renderComponent(props: IconProps) {
        return render(<Icon {...props} />);
    }

    test('renders a glyph icon', () => {
        const { getByTestId } = renderComponent({ name: 'arrowDown', size: 12 });

        const svgElement = getByTestId('ArrowDownGlyphIcon');

        expect(svgElement).toHaveClass('GlyphIcon');
        expect(svgElement).toHaveClass('ArrowDownGlyphIcon');

        expect(svgElement).toHaveAttribute('width', '12');
        expect(svgElement).toHaveAttribute('height', '12');
    });

    test('renders a brand svg image', () => {
        const { getByTestId } = renderComponent({ name: 'awal' });

        const imgElement = getByTestId('AwalBrandIcon');

        expect(imgElement).toHaveClass('BrandIcon');
        expect(imgElement).toHaveClass('AwalBrandIcon');

        expect(imgElement).toHaveAttribute('width', '16');
        expect(imgElement).toHaveAttribute('height', '16');
        expect(imgElement.getAttribute('src')).toMatch('/assets/brands/awal-16-color');
    });

    test('renders a store svg icon', () => {
        const { getByTestId } = renderComponent({ name: 'amazon' });

        const imgElement = getByTestId('AmazonStoreIcon');

        expect(imgElement).toHaveClass('StoreIcon');
        expect(imgElement).toHaveClass('AmazonStoreIcon');

        expect(imgElement).toHaveAttribute('width', '16');
        expect(imgElement).toHaveAttribute('height', '16');
        expect(imgElement.getAttribute('src')).toMatch('/assets/stores/amazon-16-primary');
    });

    test('renders an app icon', () => {
        const { getByTestId } = renderComponent({ name: 'solfege' });

        const svgElement = getByTestId('SolfegeAppIcon');

        expect(svgElement).toHaveClass('AppIcon');
        expect(svgElement).toHaveClass('SolfegeAppIcon');

        expect(svgElement).toHaveAttribute('width', '16');
        expect(svgElement).toHaveAttribute('height', '16');
    });

    test('accepts "className"', () => {
        const className = 'custom-class';
        const { getByTestId } = renderComponent({ name: 'arrowUp', size: 12, className });

        const svgElement = getByTestId('ArrowUpGlyphIcon');

        expect(svgElement).toHaveClass(className);
    });

    test('accepts "testId"', () => {
        const testId = 'custom-id';
        const { getByTestId } = renderComponent({ name: 'arrowLeft', size: 12, testId });

        const svgElement = getByTestId(testId);

        expect(svgElement).toBeInTheDocument();
    });

    test('accepts "size"', () => {
        const { getByTestId } = renderComponent({ name: 'arrowLeft', size: 16 });

        const svgElement = getByTestId('ArrowLeftGlyphIcon');

        expect(svgElement).toHaveAttribute('width', '16');
        expect(svgElement).toHaveAttribute('height', '16');
    });
});