From 0a413efa2f7784f176d1ee533d9b404b423713a4 Mon Sep 17 00:00:00 2001
From: Anjana Vakil <contact@anjana.dev>
Date: Wed, 27 Aug 2025 08:49:51 -0500
Subject: exercise

---
 frontend/test/components/Events.test.js | 144 ++++++++++++++++++++++++++++++++
 frontend/test/components/Header.test.js |  73 ++++++++++++++++
 2 files changed, 217 insertions(+)
 create mode 100644 frontend/test/components/Events.test.js
 create mode 100644 frontend/test/components/Header.test.js

(limited to 'frontend/test/components')

diff --git a/frontend/test/components/Events.test.js b/frontend/test/components/Events.test.js
new file mode 100644
index 0000000..326c328
--- /dev/null
+++ b/frontend/test/components/Events.test.js
@@ -0,0 +1,144 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { EventCard, EventModal, EventsSection } from '../../src/components/Events.js'
+
+describe('Events', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    describe('EventCard', () => {
+        it('should render event card with basic information', () => {
+            const event = {
+                id: 1,
+                host_id: 2,
+                title: 'Test Event',
+                date: '2024-12-25',
+                host: { name: 'John Doe' },
+                description: 'A test event',
+                rsvps: [],
+                image_url: 'https://example.com/image.jpg'
+            }
+
+            const result = EventCard(event)
+
+            expect(result).toContain('Test Event')
+            expect(result).toContain('John Doe')
+            expect(result).toContain('A test event')
+            expect(result).toContain('https://example.com/image.jpg')
+            expect(result).toContain('0 went')
+        })
+
+        it('should handle missing optional fields', () => {
+            const event = {
+                id: 1,
+                title: 'Test Event',
+                date: '2024-12-25T10:00:00Z',
+                host_id: 123,
+                rsvps: [],
+                image_url: 'http://image.web'
+            }
+
+            const result = EventCard(event)
+
+            expect(result).toContain('Test Event')
+            expect(result).toContain('User 123')
+            expect(result).not.toContain('undefined')
+        })
+
+        it('should show past events correctly', () => {
+
+            const event = {
+                id: 1,
+                host_id: 4,
+                title: 'Past Event',
+                date: '1995-01-01',
+                host: { name: 'John Doe' },
+                image_url: 'http://image.web',
+                rsvps: [{}, {}] // 2 RSVPs
+            }
+
+            const result = EventCard(event);
+
+            expect(result).toContain('2 went');
+            expect(result).not.toContain('<button role="button" data-target="modal-event-1" ');
+        })
+
+        it('should show upcoming events with RSVP button', () => {
+            const futureDate = new Date()
+            futureDate.setDate(futureDate.getDate() + 1) // Tomorrow
+
+            const event = {
+                id: 1,
+                host_id: 6,
+                title: 'Future Event',
+                date: futureDate.toISOString(),
+                host: { name: 'John Doe' },
+                image_url: 'http://image.web',
+                rsvps: []
+            }
+
+            const result = EventCard(event)
+            expect(result).toContain('0 going')
+            expect(result).toContain('RSVP')
+        })
+    })
+
+    describe('EventModal', () => {
+        it('should render modal with correct form structure', () => {
+            const event = {
+                id: 1,
+                title: 'Test Event',
+                date: '2029-12-31',
+                host_id: 1,
+                image_url: 'http://image.web'
+            }
+
+            const result = EventModal(event)
+
+            expect(result).toContain('modal-event-1')
+            expect(result).toContain('rsvp-form-1')
+            expect(result).toContain('RSVP to Test Event')
+            expect(result).toContain('input type="text"')
+            expect(result).toContain('input type="email"')
+        })
+
+    })
+
+    describe('EventsSection', () => {
+        it('should render section with events', () => {
+            const events = [
+                {
+                    id: 1,
+                    title: 'Event 1',
+                    date: '2024-12-25T10:00:00Z',
+                    host_id: 1,
+                    host: { name: 'Host 1' },
+                    image_url: 'http://image.web',
+                    rsvps: []
+                },
+                {
+                    id: 2,
+                    host_id: 5,
+                    title: 'Event 2',
+                    date: '2024-12-26T10:00:00Z',
+                    host: { name: 'Host 2' },
+                    image_url: 'http://image.web',
+                    rsvps: []
+                }
+            ]
+
+            const result = EventsSection('Upcoming', events)
+
+            expect(result).toContain('Upcoming events')
+            expect(result).toContain('Event 1')
+            expect(result).toContain('Event 2')
+        })
+
+        it('should handle empty events array', () => {
+            const result = EventsSection('Past', [])
+
+            expect(result).toContain('Past events')
+            expect(result).toContain('No events')
+        })
+    })
+})
diff --git a/frontend/test/components/Header.test.js b/frontend/test/components/Header.test.js
new file mode 100644
index 0000000..d6bf564
--- /dev/null
+++ b/frontend/test/components/Header.test.js
@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setupThemeToggle } from '../../src/components/Header.js'
+
+// Mock DOM elements
+const mockDocument = {
+    documentElement: {
+        getAttribute: vi.fn(),
+        setAttribute: vi.fn()
+    },
+    getElementById: vi.fn()
+}
+
+global.document = mockDocument
+
+describe('Header', () => {
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    describe('toggleDarkMode', () => {
+        it('should toggle from dark to light theme', () => {
+            // Setup: current theme is dark
+            mockDocument.documentElement.getAttribute.mockReturnValue('dark')
+
+            const mockElement = {
+                addEventListener: vi.fn()
+            }
+            mockDocument.getElementById.mockReturnValue(mockElement)
+
+            // Get the toggle function by setting up the event listener
+            setupThemeToggle()
+            const clickHandler = mockElement.addEventListener.mock.calls[0][1]
+
+            // Execute the toggle function
+            clickHandler()
+
+            expect(mockDocument.documentElement.setAttribute).toHaveBeenCalledWith('data-theme', 'light')
+        })
+
+        it('should toggle from light to dark theme', () => {
+            // Setup: current theme is light
+            mockDocument.documentElement.getAttribute.mockReturnValue('light')
+
+            const mockElement = {
+                addEventListener: vi.fn()
+            }
+            mockDocument.getElementById.mockReturnValue(mockElement)
+
+            setupThemeToggle()
+            const clickHandler = mockElement.addEventListener.mock.calls[0][1]
+
+            clickHandler()
+
+            // This should work correctly
+            expect(mockDocument.documentElement.setAttribute).toHaveBeenCalledWith('data-theme', 'dark')
+        })
+
+
+        describe('setupThemeToggle', () => {
+            it('should add click event listener to theme toggle button', () => {
+                const mockElement = {
+                    addEventListener: vi.fn()
+                }
+                mockDocument.getElementById.mockReturnValue(mockElement)
+
+                setupThemeToggle()
+
+                expect(mockDocument.getElementById).toHaveBeenCalledWith('theme')
+                expect(mockElement.addEventListener).toHaveBeenCalledWith('click', expect.any(Function))
+            })
+        })
+    })
+});
\ No newline at end of file
-- 
cgit v1.3