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()
})