import { render, screen, fireEvent, waitFor } from '@testing-library/react';

import MessageInput from '../MessageInput';

test('Gives immediate focus on to textarea on load', async () => {
    let draft = 'draft';
    render(<MessageInput text={draft} onSend={async () => { return true; }} />);
    expect(screen.getByText(draft)).toHaveFocus();
});


test('Submits on ctrl-enter and pass validation', async () => {
    let result = false;
    const onSend = jest.fn(async ({ body }) => { result = body === 'YO'; return result; });
    let draft = 'draft';
    render(<MessageInput onSend={onSend} text={draft} />);
    let textarea = screen.getByText(draft);
    fireEvent.change(textarea, { target: { value: 'HI' } });
    // this event should not submit
    fireEvent.keyPress(textarea, {
        charCode: 13,
        which: 13,
        keyCode: 13
    });
    // this event should submit
    fireEvent.keyPress(textarea, {
        charCode: 13,
        which: 13,
        keyCode: 13,
        ctrlKey: true
    });
    expect(onSend).toHaveBeenCalledTimes(1);
    expect(result).toBe(false);
    fireEvent.change(textarea, { target: { value: 'YO' } });
    fireEvent.keyPress(textarea, {
        charCode: 13,
        which: 13,
        keyCode: 13,
        ctrlKey: true
    });
    expect(onSend).toHaveBeenCalledTimes(2);
    expect(result).toBe(true);
    await waitFor(() => expect(textarea).toHaveTextContent(''));
    textarea.focus();
    expect(textarea).toHaveFocus();
});