import React from 'react';
import { fireEvent, render as renderDom } from '@testing-library/react';
import Dropdown, { DropdownProps } from '../dropdown';

describe('<Dropdown>', () => {
    const name = 'country';
    const item = { label: 'Option1', value: '1' };
    const options = [
        item,
        { label: 'Option2', value: '2' },
    ];
    const render = (props?: Partial<DropdownProps<object>>) =>
        renderDom(<Dropdown name={ name } options={ options } { ...props } />);

    test('renders dropdown with items', () => {
        const { container, getByText } = render();
        const input = container.getElementsByTagName('input').item(0);

        if (input)
            fireEvent.mouseDown(input);

        options.forEach(option => expect(getByText(option.label)).toBeVisible());
    });

    test('renders placeholder', () => {
        const placeholder = 'PLACEHOLDER TEXT';
        const { getByText } = render({ placeholder, options: [] });

        expect(getByText(placeholder)).toBeVisible();
    });

    test('renders classname', () => {
        const className = 'CUSTOM';
        const { container } = render({ className, options: [] });

        expect(container.getElementsByClassName(className).item(0)).toBeVisible();
    });

    test('renders "alignRight" classname', () => {
        const { container } = render({ alignRight: true, options: [] });
        expect(container.getElementsByClassName('alignRight').item(0)).toBeVisible();
    });

    test('renders "separateFirstOption" classname', () => {
        const { container } = render({ separateFirstOption: true, options: [] });
        expect(container.getElementsByClassName('separateFirstOption').item(0)).toBeVisible();
    });

    test('renders dropdown with value set', () => {
        const { getByText } = render({ value: item });

        expect(getByText(item.label)).toBeVisible();
    });

    test('invokes callback when item selected', () => {
        const onChange = jest.fn();

        const { container, getByText } = render({ onChange, options: [item] });
        const input = container.getElementsByTagName('input').item(0);

        if (input)
            fireEvent.mouseDown(input);
        getByText(item.label).click();

        expect(onChange).toHaveBeenCalledWith(name, item.value);
    });

    test('cannot select item if DropdownOption.disabled is true', () => {
        const onChange = jest.fn();
        const itemNoIsrc = {
            label: 'Option1', value: '1', disabled: true
        };

        const { container, getByText } = render({ onChange, options: [itemNoIsrc] });
        const input = container.getElementsByTagName('input').item(0);

        if (input)
            fireEvent.mouseDown(input);
        getByText(item.label).click();

        expect(getByText('Option1')).toBeVisible();
        expect(onChange).not.toHaveBeenCalledWith(name, item.value);
    });
});