Implement Frontend Settings with tests

1 files changed, 92 insertions, 0 deletions

diff --git a/frontend/src/components/Settings.test.tsx b/frontend/src/components/Settings.test.tsx
new file mode 100644
index 0000000..a15192d
--- /dev/null
+++ b/frontend/src/components/Settings.test.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import Settings from './Settings';
+
+describe('Settings Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+        // Mock confirm
+        global.confirm = vi.fn(() => true);
+    });
+
+    it('renders feed list', async () => {
+        const mockFeeds = [
+            { _id: 1, title: 'Tech News', url: 'http://tech.com/rss', category: 'tech' },
+            { _id: 2, title: 'Gaming', url: 'http://gaming.com/rss', category: 'gaming' },
+        ];
+
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockFeeds,
+        });
+
+        render(<Settings />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Tech News')).toBeInTheDocument();
+            expect(screen.getByText('http://tech.com/rss')).toBeInTheDocument();
+            expect(screen.getByText('Gaming')).toBeInTheDocument();
+        });
+    });
+
+    it('adds a new feed', async () => {
+        (global.fetch as any)
+            .mockResolvedValueOnce({ ok: true, json: async () => [] }) // Initial load
+            .mockResolvedValueOnce({ ok: true, json: async () => ({}) }) // Add feed
+            .mockResolvedValueOnce({ ok: true, json: async () => [{ _id: 3, title: 'New Feed', url: 'http://new.com/rss' }] }); // Refresh load
+
+        render(<Settings />);
+
+        // Wait for initial load to finish
+        await waitFor(() => {
+            expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+        });
+
+        const input = screen.getByPlaceholderText('https://example.com/feed.xml');
+        const button = screen.getByText('Add Feed');
+
+        fireEvent.change(input, { target: { value: 'http://new.com/rss' } });
+        fireEvent.click(button);
+
+        await waitFor(() => {
+            expect(global.fetch).toHaveBeenCalledWith('/api/feed/', expect.objectContaining({
+                method: 'POST',
+                body: JSON.stringify({ url: 'http://new.com/rss' }),
+            }));
+        });
+
+        // Wait for refresh
+        await waitFor(() => {
+            expect(screen.getByText('New Feed')).toBeInTheDocument();
+        });
+    });
+
+    it('deletes a feed', async () => {
+        const mockFeeds = [
+            { _id: 1, title: 'Tech News', url: 'http://tech.com/rss', category: 'tech' },
+        ];
+
+        (global.fetch as any)
+            .mockResolvedValueOnce({ ok: true, json: async () => mockFeeds }) // Initial load
+            .mockResolvedValueOnce({ ok: true }); // Delete
+
+        render(<Settings />);
+
+        await waitFor(() => {
+            expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+            expect(screen.getByText('Tech News')).toBeInTheDocument();
+        });
+
+        const deleteBtn = screen.getByTitle('Delete Feed');
+        fireEvent.click(deleteBtn);
+
+        await waitFor(() => {
+            expect(global.confirm).toHaveBeenCalled();
+            expect(global.fetch).toHaveBeenCalledWith('/api/feed/1', expect.objectContaining({ method: 'DELETE' }));
+            expect(screen.queryByText('Tech News')).not.toBeInTheDocument();
+        });
+    });
+});