import React from 'react';
import { fireEvent } from '@testing-library/react';
import { renderInAppContext } from '@theorchard/suite-testing';
import EditableLinkInput from 'src/pages/songPage/components/editableLinkInput';

describe('<EditableLinkInput>', () => {
    const onChange = jest.fn();
    const renderComponent = (value?: string) =>
        renderInAppContext(
            <EditableLinkInput
                value={value}
                isDisabled={false}
                onChange={onChange}
            />
        );

    test('renders input component if there is no value', () => {
        const { container } = renderComponent();
        const anchor = container.querySelector('a');
        const input = container.querySelector('input');
        expect(input).toBeTruthy();
        expect(anchor).toBeFalsy();
    });

    test('successfully updates the value', () => {
        const link = 'https://evidence.com';
        const link2 = 'https://some-evidence.com';
        const { container } = renderComponent(link);

        let anchor = container.querySelector('a');
        expect(anchor?.textContent).toEqual('Link');
        expect(anchor?.getAttribute('href')).toEqual(link);

        const wrapper = container.querySelector('.EditableLinkInput');
        if (!wrapper)
            throw new Error('Could not find .EditableLinkInput element');
        fireEvent.click(wrapper);

        let input = container.querySelector('input');
        if (!input) throw new Error('Could not find input');

        anchor = container.querySelector('a');
        expect(anchor).toBeFalsy();

        onChange.mockImplementation(e => expect(e.target.value).toEqual(link2));

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

        fireEvent.blur(input);
        input = container.querySelector('input');
        anchor = container.querySelector('a');

        expect(input).toBeFalsy();
        expect(anchor).toBeTruthy();

        expect(onChange).toHaveBeenCalled();
    });
});