exercise

1 files changed, 144 insertions, 0 deletions

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')
+        })
+    })
+})