diff options
Diffstat (limited to 'frontend/test/components')
| -rw-r--r-- | frontend/test/components/Events.test.js | 144 | ||||
| -rw-r--r-- | frontend/test/components/Header.test.js | 73 |
2 files changed, 217 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') + }) + }) +}) 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 |