Implement Frontend Feed Items View with tests

1 files changed, 52 insertions, 0 deletions

diff --git a/frontend/src/components/FeedItems.test.tsx b/frontend/src/components/FeedItems.test.tsx
new file mode 100644
index 0000000..9c271c4
--- /dev/null
+++ b/frontend/src/components/FeedItems.test.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedItems from './FeedItems';
+
+describe('FeedItems Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders loading state', () => {
+        (global.fetch as any).mockImplementation(() => new Promise(() => { }));
+        render(
+            <MemoryRouter initialEntries={['/feed/1']}>
+                <Routes>
+                    <Route path="/feed/:feedId" element={<FeedItems />} />
+                </Routes>
+            </MemoryRouter>
+        );
+        expect(screen.getByText(/loading items/i)).toBeInTheDocument();
+    });
+
+    it('renders items for a feed', async () => {
+        const mockItems = [
+            { _id: 101, title: 'Item One', url: 'http://example.com/1', publish_date: '2023-01-01', read: false },
+            { _id: 102, title: 'Item Two', url: 'http://example.com/2', publish_date: '2023-01-02', read: true },
+        ];
+
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockItems,
+        });
+
+        render(
+            <MemoryRouter initialEntries={['/feed/1']}>
+                <Routes>
+                    <Route path="/feed/:feedId" element={<FeedItems />} />
+                </Routes>
+            </MemoryRouter>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Item One')).toBeInTheDocument();
+            expect(screen.getByText('Item Two')).toBeInTheDocument();
+        });
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/stream?feed_id=1');
+    });
+});