Implement Item Interactions (read/star) with tests

1 files changed, 91 insertions, 0 deletions

diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
new file mode 100644
index 0000000..d46afaf
--- /dev/null
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedItem from './FeedItem';
+import type { Item } from '../types';
+
+const mockItem: Item = {
+    _id: 1,
+    feed_id: 101,
+    title: 'Test Item',
+    url: 'http://example.com/item',
+    description: '<p>Description</p>',
+    publish_date: '2023-01-01',
+    read: false,
+    starred: false,
+    feed_title: 'Test Feed'
+};
+
+describe('FeedItem Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders item details', () => {
+        render(<FeedItem item={mockItem} />);
+        expect(screen.getByText('Test Item')).toBeInTheDocument();
+        expect(screen.getByText(/Test Feed/)).toBeInTheDocument();
+        // Check for relative time or date formatting? For now just check it renders
+    });
+
+    it('toggles read status', async () => {
+        (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+
+        render(<FeedItem item={mockItem} />);
+
+        const readBtn = screen.getByTitle('Mark as read');
+        fireEvent.click(readBtn);
+
+        // Optimistic update
+        expect(await screen.findByTitle('Mark as unread')).toBeInTheDocument();
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
+            method: 'PUT',
+            body: JSON.stringify({
+                _id: 1,
+                read: true,
+                starred: false
+            })
+        }));
+    });
+
+    it('toggles star status', async () => {
+        (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+
+        render(<FeedItem item={mockItem} />);
+
+        const starBtn = screen.getByTitle('Star');
+        fireEvent.click(starBtn);
+
+        // Optimistic update
+        expect(await screen.findByTitle('Unstar')).toBeInTheDocument();
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
+            method: 'PUT',
+            body: JSON.stringify({
+                _id: 1,
+                read: false,
+                starred: true
+            })
+        }));
+    });
+
+    it('reverts optimistic update on failure', async () => {
+        (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
+        const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+
+        render(<FeedItem item={mockItem} />);
+
+        const readBtn = screen.getByTitle('Mark as read');
+        fireEvent.click(readBtn);
+
+        // Should revert to unread
+        await waitFor(() => {
+            expect(screen.getByTitle('Mark as read')).toBeInTheDocument();
+        });
+
+        consoleSpy.mockRestore();
+    });
+});