Implement Tag View and fix tests

1 files changed, 81 insertions, 0 deletions

diff --git a/frontend/src/components/TagView.test.tsx b/frontend/src/components/TagView.test.tsx
new file mode 100644
index 0000000..8a724cd
--- /dev/null
+++ b/frontend/src/components/TagView.test.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import FeedList from './FeedList';
+import FeedItems from './FeedItems';
+
+describe('Tag View Integration', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders tags in FeedList and navigates to tag view', async () => {
+        const mockFeeds = [{ _id: 1, title: 'Feed 1', url: 'http://example.com/rss', category: 'Tech' }];
+        const mockTags = [{ title: 'Tech' }, { title: 'News' }];
+
+        (global.fetch as any).mockImplementation((url: string) => {
+            if (url.includes('/api/feed/')) {
+                return Promise.resolve({
+                    ok: true,
+                    json: async () => mockFeeds,
+                });
+            }
+            if (url.includes('/api/tag')) {
+                return Promise.resolve({
+                    ok: true,
+                    json: async () => mockTags,
+                });
+            }
+            return Promise.reject(new Error(`Unknown URL: ${url}`));
+        });
+
+        render(
+            <MemoryRouter>
+                <FeedList />
+            </MemoryRouter>
+        );
+
+        await waitFor(() => {
+            const techTags = screen.getAllByText('Tech');
+            expect(techTags.length).toBeGreaterThan(0);
+            expect(screen.getByText('News')).toBeInTheDocument();
+        });
+
+        // Verify structure
+        const techTag = screen.getByText('News').closest('a');
+        expect(techTag).toHaveAttribute('href', '/tag/News');
+    });
+
+    it('fetches items by tag in FeedItems', async () => {
+        const mockItems = [
+            { _id: 101, title: 'Tag Item 1', url: 'http://example.com/1', feed_title: 'Feed 1' }
+        ];
+
+        (global.fetch as any).mockImplementation((url: string) => {
+            if (url.includes('/api/stream')) {
+                return Promise.resolve({
+                    ok: true,
+                    json: async () => mockItems,
+                });
+            }
+            return Promise.reject(new Error(`Unknown URL: ${url}`));
+        });
+
+        render(
+            <MemoryRouter initialEntries={['/tag/Tech']}>
+                <Routes>
+                    <Route path="/tag/:tagName" element={<FeedItems />} />
+                </Routes>
+            </MemoryRouter>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Tag: Tech')).toBeInTheDocument();
+            expect(screen.getByText('Tag Item 1')).toBeInTheDocument();
+        });
+
+        expect(global.fetch).toHaveBeenCalledWith('/api/stream?tag=Tech');
+    });
+});