import React from 'react';
import { render } from '@testing-library/react';
import { GlyphIcon, GlyphIconProps } from '../glyphIcon';

describe('<GlyphIcon>', () => {
    function renderComponent(props: GlyphIconProps) {
        return render(<GlyphIcon {...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('accepts "className"', () => {
        const className = 'custom-class';
        const { getByTestId } = renderComponent({ name: 'arrowUp', size: 12, className });

        const svgElement = getByTestId('ArrowUpGlyphIcon');

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

    test('accepts "style"', () => {
        const { getByTestId } = renderComponent({
            name: 'arrowUp',
            size: 12,
            style: { marginTop: 10 },
        });

        const svgElement = getByTestId('ArrowUpGlyphIcon');

        expect(svgElement).toHaveStyle({ marginTop: '10px' });
    });

    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');
    });
});