import React from 'react';
import { render } from '@testing-library/react';

interface Props {
    className?: string;
    testId?: string;
}

export function testComponent<T>(Component: React.FC<Props & T>, defaultProps?: T, name?: string) {
    const componentClassName = name ?? Component.displayName ?? Component.name;
    if (!componentClassName) throw new Error('Please specify the component class name');

    const renderComponent = (props?: Props) =>
        render(<Component {...defaultProps} {...(props as Props & T)} />);

    test('has className', () => {
        const { container } = renderComponent();
        const root = container.querySelector(`.${componentClassName}`);

        expect(root).toBeVisible();
    });

    test('has testId', () => {
        const { getByTestId } = renderComponent();
        const root = getByTestId(componentClassName);

        expect(root).toBeVisible();
    });

    test('accepts "className"', () => {
        const className = 'my-class';
        const { container } = renderComponent({ className });
        const root = container.querySelector(`.${componentClassName}`);

        expect(root).toBeVisible();
        expect(root).toHaveClass(className);
    });

    test('accepts "testId"', () => {
        const testId = 'test';
        const { getByTestId } = renderComponent({ testId });
        const root = getByTestId(testId);

        expect(root).toBeVisible();
    });
}