import React from 'react';
import { fireEvent, render as renderDom } from '@testing-library/react';
import { formatMessage } from '@theorchard/suite-i18n';
import { testComponent } from 'lib/test-utils/common';
import { SearchDropdownCreatable } from '../searchDropdownCreatable';
import { SearchDropdownCreatableProps } from '../types';

describe('<SearchDropdownCreatable>', () => {
    const render = (props?: Partial<SearchDropdownCreatableProps>) =>
        renderDom(
            <SearchDropdownCreatable
                onLoadOptions={async () => await Promise.resolve([])}
                {...props}
            />
        );

    testComponent(SearchDropdownCreatable);

    test('renders "create new" option on no match', async () => {
        const { container, findByText } = render();
        const input = container.getElementsByTagName('input').item(0);
        const value = 'xxx';

        fireEvent.change(input!, { target: { value } });

        const newOptionElement = await findByText(formatMessage('create_new', { value }));

        expect(newOptionElement).toBeInTheDocument();
    });
});