import React from 'react'
import { render, waitFor } from '@testing-library/react'
import { RecordContextProvider } from 'react-admin'
import { ThemeProvider, createTheme } from '@material-ui/core/styles'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { ArtistDetails } from './ArtistShow'
import subsonic from '../subsonic'
vi.mock('../subsonic', () => ({
default: { getArtistInfo: vi.fn(), getCoverArtUrl: vi.fn() },
}))
vi.mock('./DesktopArtistDetails', () => ({ default: () => null }))
vi.mock('./MobileArtistDetails', () => ({ default: () => null }))
const mockGetArtistInfo = subsonic.getArtistInfo
describe('ArtistDetails', () => {
beforeEach(() => {
vi.clearAllMocks()
mockGetArtistInfo.mockResolvedValue({
json: {
'subsonic-response': {
status: 'ok',
artistInfo: { biography: 'fetched' },
},
},
})
})
const theme = createTheme()
const wrap = (record) => (
<ThemeProvider theme={theme}>
<RecordContextProvider value={record}>
<ArtistDetails />
</RecordContextProvider>
</ThemeProvider>
)
const renderDetails = (record) => render(wrap(record))
it('re-fetches the artist info when the record object changes', async () => {
const record = { id: 'ar1', name: 'Artist', biography: 'old' }
const { rerender } = renderDetails(record)
await waitFor(() => expect(mockGetArtistInfo).toHaveBeenCalledTimes(1))
rerender(wrap({ ...record, biography: 'new' }))
await waitFor(() => expect(mockGetArtistInfo).toHaveBeenCalledTimes(2))
})
it('does not re-fetch when the same record object is passed again', async () => {
const record = { id: 'ar1', name: 'Artist', biography: 'old' }
const { rerender } = renderDetails(record)
await waitFor(() => expect(mockGetArtistInfo).toHaveBeenCalledTimes(1))
rerender(wrap(record))
expect(mockGetArtistInfo).toHaveBeenCalledTimes(1)
})
})