import '@testing-library/jest-dom/extend-expect';
import React from 'react';
import { render } from '@testing-library/react';
import { EMPTY_CHAR } from 'src/components/metric';
import { TopCountry } from 'src/selectors';
import TopCountryItem, { TEST_ID, Props } from '../TopCountryItem';

describe('<TopPlaylistItem>', () => {
    const country: TopCountry = {
        code: 'US',
        name: 'United States of America',
        alpha3: 'USA',
        position: 1,
        value: 4321,
        highlight: false
    };
    const defaultProps: Props = {
        index: 0,
        totalStreams: 7216,
        country,
        songCount: 2
    };
    const renderMocked = (props?: Partial<Props>) =>
        render(<TopCountryItem {...defaultProps} {...props} />);

    test('renders TopCountryItem', () => {
        const component = renderMocked();
        const topCountryItem = component.getByTestId(TEST_ID);
        const name = component.getByText(country.name);
        const percentage = component.getByText('59.9%');
        const position = component.getByText('1');

        expect(topCountryItem).toBeVisible();
        expect(name).toBeVisible();
        expect(percentage).toBeVisible();
        expect(position).toBeVisible();
    });

    test('renders abbreviated country name for 4 column layout', () => {
        const component = renderMocked({ songCount: 4 });
        const abbr = component.getByText('USA');

        expect(abbr).toBeVisible();
        expect(abbr.getAttribute('title')).toBe(country.name);
    });

    test('renders dash if value/position are 0', () => {
        const emptyCountry: TopCountry = {
            code: 'US',
            name: 'United States of America',
            alpha3: 'USA',
            position: 0,
            value: 0,
            highlight: false
        };
        const component = renderMocked({ country: emptyCountry });
        const dashes = component.getAllByText(EMPTY_CHAR);

        expect(dashes.length).toBe(2);
    });
});