ElectronicBabylonianLiterature/ebl-frontend

View on GitHub
src/afo-register/ui/AfoRegisterTextSelect.test.tsx

Summary

Maintainability
A
0 mins
Test Coverage
import React from 'react'
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
import AfoRegisterTextSelect from './AfoRegisterTextSelect'
import userEvent from '@testing-library/user-event'
import { AfoRegisterRecordSuggestion } from 'afo-register/domain/Record'
import Bluebird from 'bluebird'

describe('AfoRegisterTextSelect', () => {
  const mockSearchSuggestions = jest.fn()
  const mockOnChange = jest.fn()
  const defaultProps = {
    ariaLabel: 'test-select',
    value: null,
    searchSuggestions: mockSearchSuggestions,
    onChange: mockOnChange,
    isClearable: true,
  }

  it('renders without crashing', () => {
    render(<AfoRegisterTextSelect {...defaultProps} />)
    expect(screen.getByLabelText('test-select')).toBeInTheDocument()
  })

  it('updates selection when props change', async () => {
    const newValue = new AfoRegisterRecordSuggestion({
      text: 'Some text option',
      textNumbers: ['4', '5', '6'],
    })
    await act(async () => {
      const { rerender } = render(<AfoRegisterTextSelect {...defaultProps} />)
      rerender(<AfoRegisterTextSelect {...defaultProps} value={newValue} />)
    })
    await waitFor(() => {
      expect(screen.getByText(newValue.text)).toBeInTheDocument()
    })
  })

  it('calls onChange when an option is selected', async () => {
    const options = [
      { text: 'Text option 1', textNumbers: ['1'] },
      { text: 'Text option 2', textNumbers: ['2'] },
    ]
    mockSearchSuggestions.mockReturnValue(Bluebird.resolve(options))
    await act(async () => {
      render(<AfoRegisterTextSelect {...defaultProps} />)
      userEvent.type(screen.getByLabelText('test-select'), 'Option')
      await waitFor(() => {
        const option = screen.getByText(options[0].text)
        fireEvent.click(option)
      })
    })
    await waitFor(() => {
      expect(mockOnChange).toHaveBeenCalledWith({
        text: options[0].text,
        textNumbers: options[0].textNumbers,
      })
    })
  })
})