Vanilla JS (v3): Redesign to 2-pane glassmorphism, fix CSP errors, fix Settings view, and achieve 80% test coverage

1 files changed, 27 insertions, 11 deletions

diff --git a/frontend-vanilla/src/components/FeedItem.test.ts b/frontend-vanilla/src/components/FeedItem.test.ts
index 708a871..e6c0b62 100644
--- a/frontend-vanilla/src/components/FeedItem.test.ts
+++ b/frontend-vanilla/src/components/FeedItem.test.ts
@@ -1,23 +1,39 @@
 import { describe, it, expect } from 'vitest';
 import { createFeedItem } from './FeedItem';
+import type { Item } from '../types';
 
 describe('FeedItem Component', () => {
-    const mockFeed = { _id: 1, title: 'My Feed', url: 'http://test', web_url: 'http://test', category: 'tag' };
+    const mockItem: Item = {
+        _id: 1,
+        title: 'Item Title',
+        url: 'http://test',
+        publish_date: '2023-01-01',
+        read: false,
+        starred: false,
+        feed_title: 'Feed Title',
+        description: 'Desc'
+    } as any;
 
-    it('should render a feed item correctly', () => {
-        const html = createFeedItem(mockFeed, false);
-        expect(html).toContain('My Feed');
+    it('should render an item correctly', () => {
+        const html = createFeedItem(mockItem);
+        expect(html).toContain('Item Title');
         expect(html).toContain('data-id="1"');
-        expect(html).not.toContain('active');
+        expect(html).toContain('unread');
     });
 
-    it('should apply active class when isActive is true', () => {
-        const html = createFeedItem(mockFeed, true);
-        expect(html).toContain('active');
+    it('should show read state', () => {
+        const html = createFeedItem({ ...mockItem, read: true });
+        expect(html).toContain('read');
+        expect(html).not.toContain('unread');
     });
 
-    it('should fallback to URL if title is missing', () => {
-        const html = createFeedItem({ ...mockFeed, title: '' }, false);
-        expect(html).toContain('http://test');
+    it('should show starred state', () => {
+        const html = createFeedItem({ ...mockItem, starred: true });
+        expect(html).toContain('is-starred');
+    });
+
+    it('should fallback to (No Title) if title is missing', () => {
+        const html = createFeedItem({ ...mockItem, title: '' });
+        expect(html).toContain('(No Title)');
     });
 });