import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import ContentPanel, { Props, TEST_ID, EMPTY_MESSAGE } from '../ContentPanel';

describe('<ContentPanel>', () => {
    const testContent = 'TestContent';
    const defaultProps: Props = {
        className: 'TestClass',
        isEmpty: false,
    };

    const renderMocked = (props?: Partial<Props>) => render(
        <ContentPanel {...defaultProps} {...props}>
            {testContent}
        </ContentPanel>
    );

    test('renders TopPlaylistHeader', () => {
        const component = renderMocked();
        const { container } = component;
        const content = component.getByText(testContent);
        const emptyPlaceholder = container.getElementsByClassName(`${TEST_ID}-empty-content`);

        expect(content).toBeVisible();
        expect(emptyPlaceholder.length).toBe(0);
    });

    test('renders empty placeholder', () => {
        const component = renderMocked({ isEmpty: true });
        const emptyPlaceholder = component.getByText(EMPTY_MESSAGE);
        expect(emptyPlaceholder).toBeVisible();
    });
});