import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { ChatMessageInput } from './ChatMessageInput'

test('renders a text area with the current message', () => {
  render(<ChatMessageInput currentChatMessage='current message' onChatMessageChanged={jest.fn()} />)

  const chatMessageTextArea = screen.getByRole('textbox')
  expect(chatMessageTextArea).toBeInTheDocument()
  expect(chatMessageTextArea).toHaveTextContent('current message')
})

test('when the text area is changed, onChatMessageChanged is called with the new contents', () => {
  const mockMessageChangedHandler = jest.fn()
  render(<ChatMessageInput currentChatMessage='' onChatMessageChanged={mockMessageChangedHandler} />)

  userEvent.type(screen.getByRole('textbox'), 'a')

  expect(mockMessageChangedHandler).toHaveBeenCalledTimes(1)
  expect(mockMessageChangedHandler).toHaveBeenCalledWith('a')
})

test('when pressing the Enter button, the message is immediately sent', () => {
  const mockSendMessage = jest.fn()
  render(
    <ChatMessageInput
      currentChatMessage='current message'
      onChatMessageChanged={jest.fn}
      sendMessage={mockSendMessage}
    />
  )

  userEvent.type(screen.getByRole('textbox'), '{enter}')

  expect(mockSendMessage).toHaveBeenCalledTimes(1)
})

test('when pressing both the Enter and Shift buttons, the message is not sent', () => {
  const mockSendMessage = jest.fn()
  render(
    <ChatMessageInput
      currentChatMessage='current message'
      onChatMessageChanged={jest.fn}
      sendMessage={mockSendMessage}
    />
  )

  userEvent.type(screen.getByRole('textbox'), '{shift}{enter}')

  expect(mockSendMessage).not.toHaveBeenCalled()
})
