import { render, screen } from '@testing-library/react'
import { Audio } from './Audio'
import { mock } from 'jest-mock-extended'
import { Track } from '@zocks-communications/client-sdk-js'
import { configureStore, EnhancedStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import { zocksStoreConfig } from '../../app/store'

const renderWithState = (store: EnhancedStore, audioStream: Track | null) => {
  render(
    <Provider store={store}>
      <Audio audioStream={audioStream} />
    </Provider>
  )
}

test('renders an audio component and attaches the track to it if the track is available', () => {
  const store = configureStore(zocksStoreConfig)
  const track = mock<Track>()

  renderWithState(store, track)

  expect(screen.getByTestId('audioElement')).toBeInTheDocument()
  expect(track.attach).toHaveBeenCalledTimes(1)
  expect(track.attach.mock.calls[0][0]).toBeInstanceOf(HTMLAudioElement)
})

test('does not render anything if the track is not available', () => {
  const store = configureStore(zocksStoreConfig)
  renderWithState(store, null)

  expect(screen.queryByTestId('audioElement')).not.toBeInTheDocument()
})
