aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/FeedItem.test.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/FeedItem.test.tsx')
-rw-r--r--frontend/src/components/FeedItem.test.tsx103
1 files changed, 53 insertions, 50 deletions
diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
index f0497c6..cb9aafa 100644
--- a/frontend/src/components/FeedItem.test.tsx
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -6,66 +6,69 @@ 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'
+ _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();
- });
+ 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('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 star status', async () => {
- (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
+ it('toggles star status', async () => {
+ (global.fetch as any).mockResolvedValueOnce({ ok: true, json: async () => ({}) });
- render(<FeedItem item={mockItem} />);
+ render(<FeedItem item={mockItem} />);
- const starBtn = screen.getByTitle('Star');
- expect(starBtn).toHaveTextContent('★');
- fireEvent.click(starBtn);
+ const starBtn = screen.getByTitle('Star');
+ expect(starBtn).toHaveTextContent('★');
+ fireEvent.click(starBtn);
- // Optimistic update
- expect(await screen.findByTitle('Unstar')).toHaveTextContent('★');
+ // Optimistic update
+ expect(await screen.findByTitle('Unstar')).toHaveTextContent('★');
- expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
- method: 'PUT',
- body: JSON.stringify({
- _id: 1,
- read: false,
- starred: true
- })
- }));
- });
+ expect(global.fetch).toHaveBeenCalledWith(
+ '/api/item/1',
+ expect.objectContaining({
+ method: 'PUT',
+ body: JSON.stringify({
+ _id: 1,
+ read: false,
+ starred: true,
+ }),
+ })
+ );
+ });
- it('updates styling when read state changes', () => {
- const { rerender } = render(<FeedItem item={{ ...mockItem, read: false }} />);
- const link = screen.getByText('Test Item');
- // Initial state: unread (bold)
- // Note: checking computed style might be flaky in jsdom, but we can check the class on the parent
- const listItem = link.closest('li');
- expect(listItem).toHaveClass('unread');
- expect(listItem).not.toHaveClass('read');
+ it('updates styling when read state changes', () => {
+ const { rerender } = render(<FeedItem item={{ ...mockItem, read: false }} />);
+ const link = screen.getByText('Test Item');
+ // Initial state: unread (bold)
+ // Note: checking computed style might be flaky in jsdom, but we can check the class on the parent
+ const listItem = link.closest('li');
+ expect(listItem).toHaveClass('unread');
+ expect(listItem).not.toHaveClass('read');
- // Update prop to read
- rerender(<FeedItem item={{ ...mockItem, read: true }} />);
+ // Update prop to read
+ rerender(<FeedItem item={{ ...mockItem, read: true }} />);
- // Should now be read
- expect(listItem).toHaveClass('read');
- expect(listItem).not.toHaveClass('unread');
- });
+ // Should now be read
+ expect(listItem).toHaveClass('read');
+ expect(listItem).not.toHaveClass('unread');
+ });
});