import React from 'react';
import { render } from '@testing-library/react';
import { NavIcon, NavIconProps } from '../navIcon';

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

    test('renders a nav icon', () => {
        const { getByTestId } = renderComponent({ name: 'CatalogNavIcon' });

        const svgElement = getByTestId('CatalogNavIcon');

        expect(svgElement).toHaveClass('NavIcon');
        expect(svgElement).toHaveClass('CatalogNavIcon');

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

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

        const svgElement = getByTestId('AboutNavIcon');

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

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

        const svgElement = getByTestId(testId);

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

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

        const svgElement = getByTestId('BankingNavIcon');

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