test(frontend): cover icon branch and tighten LoveButton title assertion

- Mock @material-ui/icons/Favorite and FavoriteBorder for deterministic
  assertions
- Add cases for FavoriteIcon (starred) and FavoriteBorderIcon (not
  starred) to cover the rendering branch
- Assert the exact title content (Date.toLocaleString) and that isDateSet
  is invoked with starredAt

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
yosoyepa 2026-05-15 16:49:26 -05:00
parent 1ed1d0ce79
commit 9d8e680451

View File

@ -26,6 +26,14 @@ vi.mock('../utils/validations', () => ({
isDateSet: vi.fn(),
}))
vi.mock('@material-ui/icons/Favorite', () => ({
default: () => <span data-testid="favorite-icon" />,
}))
vi.mock('@material-ui/icons/FavoriteBorder', () => ({
default: () => <span data-testid="favorite-border-icon" />,
}))
describe('LoveButton', () => {
const mockToggleLove = vi.fn()
@ -83,18 +91,32 @@ describe('LoveButton', () => {
})
it('shows starredAt date as title when starredAt is set', () => {
useRecordContext.mockReturnValue({
id: 'song-1',
starred: true,
starredAt: '2024-01-15T12:00:00Z',
})
const starredAt = '2024-01-15T12:00:00Z'
useRecordContext.mockReturnValue({ id: 'song-1', starred: true, starredAt })
isDateSet.mockReturnValue(true)
render(<LoveButton resource="song" />)
expect(screen.getByRole('button')).toHaveAttribute('title')
expect(screen.getByRole('button')).toHaveAttribute(
'title',
new Date(starredAt).toLocaleString(),
)
expect(isDateSet).toHaveBeenCalledWith(starredAt)
})
it('has no title attribute when starredAt is not set', () => {
render(<LoveButton resource="song" />)
expect(screen.getByRole('button')).not.toHaveAttribute('title')
})
it('renders FavoriteIcon when record is starred', () => {
useRecordContext.mockReturnValue({ id: 'song-1', starred: true })
render(<LoveButton resource="song" />)
expect(screen.getByTestId('favorite-icon')).toBeInTheDocument()
expect(screen.queryByTestId('favorite-border-icon')).not.toBeInTheDocument()
})
it('renders FavoriteBorderIcon when record is not starred', () => {
render(<LoveButton resource="song" />)
expect(screen.getByTestId('favorite-border-icon')).toBeInTheDocument()
expect(screen.queryByTestId('favorite-icon')).not.toBeInTheDocument()
})
})