Repository: h2oai/wave
File: ui/src/chatbot.test.tsx (TypeScript)

Code before:
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'stop', true)
  })

  it('Fires a scroll_up event when scrolled to top', () => {
    const { container } = render(<XChatbot {...{ ...model, events: ['scroll_up'] }} />)
    fireEvent.scroll(container.querySelector('[class*=msgContainer]')!, { target: { scrollY: 0 } })
    expect(emitMock).toHaveBeenCalled()
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'scroll_up', true)
  })

  it('Renders thumbs up/down buttons', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement
    const dislikeButton = container.querySelector("i[data-icon-name='Dislike']") as HTMLLIElement
    expect(likeButton).toBeInTheDocument()
    expect(dislikeButton).toBeInTheDocument()
  })

  it('Fires a like feedback event when clicked on the thumbs up button', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement

    fireEvent.click(likeButton)
    expect(emitMock).toHaveBeenCalled()
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'feedback', { message: data[1].content, positive: true })

    const likeSolidButton = container.querySelector("i[data-icon-name='LikeSolid']") as HTMLLIElement
    expect(likeSolidButton).toBeInTheDocument()
  })

  it('Fires a dislike feedback event when clicked on the thumbs down button', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const dislikeButton = container.querySelector("i[data-icon-name='Dislike']") as HTMLLIElement

    fireEvent.click(dislikeButton)
    expect(emitMock).toHaveBeenCalled()
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'feedback', { message: data[1].content, positive: false })

    const dislikeSolidButton = container.querySelector("i[data-icon-name='DislikeSolid']") as HTMLLIElement
    expect(dislikeSolidButton).toBeInTheDocument()
  })

  it('Fires a no feedback event when clicked on the thumbs up button twice', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement

    fireEvent.click(likeButton)

Review comment (suggestion):
Nit, no need for explicit check.

```suggestion
    expect(emitMock).toHaveBeenCalledTimes(1)
```

Code after:
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'stop', true)
  })

  it('Fires a scroll_up event when scrolled to top', () => {
    const { container } = render(<XChatbot {...{ ...model, events: ['scroll_up'] }} />)
    fireEvent.scroll(container.querySelector('[class*=msgContainer]')!, { target: { scrollY: 0 } })
    expect(emitMock).toHaveBeenCalled()
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'scroll_up', true)
  })

  it('Renders thumbs up/down buttons', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement
    const dislikeButton = container.querySelector("i[data-icon-name='Dislike']") as HTMLLIElement
    expect(likeButton).toBeInTheDocument()
    expect(dislikeButton).toBeInTheDocument()
  })

  it('Fires a like feedback event when clicked on the thumbs up button', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement

    fireEvent.click(likeButton)
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'feedback', { message: data[1].content, positive: true })

    const likeSolidButton = container.querySelector("i[data-icon-name='LikeSolid']") as HTMLLIElement
    expect(likeSolidButton).toBeInTheDocument()
  })

  it('Fires a dislike feedback event when clicked on the thumbs down button', () => {
    const { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />)
    const dislikeButton = container.querySelector("i[data-icon-name='Dislike']") as HTMLLIElement

    fireEvent.click(dislikeButton)
    expect(emitMock).toHaveBeenCalledTimes(1)
    expect(emitMock).toHaveBeenCalledWith(model.name, 'feedback', { message: data[1].content, positive: false })

    const dislikeSolidButton = container.querySelector("i[data-icon-name='DislikeSolid']") as HTMLLIElement
    expect(dislikeSolidButton).toBeInTheDocument()
  })

  it('Fires a dislike feedback event when changing from thumbs up to thumbs down', () => {
    const
      { container } = render(<XChatbot {...{ ...model, data, events: ['feedback'] }} />),
      likeButton = container.querySelector("i[data-icon-name='Like']") as HTMLLIElement,
      dislikeButton = container.querySelector("i[data-icon-name='Dislike']") as HTMLLIElement

    fireEvent.click(likeButton)