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