import React from 'react';
import { render } from '@testing-library/react';
import { Illustration, IllustrationProps } from '../illustration';

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

    test('renders an illustration svg image', () => {
        const { getByTestId } = renderComponent({ name: 'error' });

        const svgElement = getByTestId('ErrorIllustration');

        expect(svgElement).toHaveClass('Illustration');
        expect(svgElement).toHaveClass('ErrorIllustration');

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

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

        const svgElement = getByTestId('NotFoundIllustration');

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

    test('accepts "testId"', () => {
        const testId = 'custom-class';
        const { getByTestId } = renderComponent({ name: 'notFound', testId });

        const svgElement = getByTestId(testId);

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