From 9d8e680451cb63fbac02fb9ced9556986f00d644 Mon Sep 17 00:00:00 2001
From: yosoyepa <jandradeu@unal.edu.co>
Date: Fri, 15 May 2026 16:49:26 -0500
Subject: [PATCH] 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>
---
 ui/src/common/LoveButton.test.jsx | 34 +++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/ui/src/common/LoveButton.test.jsx b/ui/src/common/LoveButton.test.jsx
index dc56fc04b..0afcca1b5 100644
--- a/ui/src/common/LoveButton.test.jsx
+++ b/ui/src/common/LoveButton.test.jsx
@@ -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()
+  })
 })