2025-09-25 23:38:17 +02:00
|
|
|
import { describe, it, expect, beforeEach } from 'vitest';
|
|
|
|
|
import { AllDayManager } from '../../src/managers/AllDayManager';
|
|
|
|
|
import { setupMockDOM, createMockEvent } from '../helpers/dom-helpers';
|
|
|
|
|
|
|
|
|
|
describe('AllDayManager - Layout Calculation', () => {
|
|
|
|
|
let allDayManager: AllDayManager;
|
|
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
|
setupMockDOM();
|
|
|
|
|
allDayManager = new AllDayManager();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
describe('Overlap Detection Scenarios', () => {
|
|
|
|
|
it('Scenario 1: Non-overlapping single-day events', () => {
|
|
|
|
|
// Event 1: Sept 22 (column 1)
|
|
|
|
|
const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-22');
|
|
|
|
|
// Event 2: Sept 24 (column 3) - different column, should be row 1
|
|
|
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-24', '2024-09-24');
|
|
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
// Test both events together using new batch method
|
|
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([event1, event2], weekDates);
|
|
|
|
|
|
|
|
|
|
const layout1 = layouts.get('1');
|
|
|
|
|
const layout2 = layouts.get('2');
|
|
|
|
|
|
|
|
|
|
expect(layout1?.startColumn).toBe(1);
|
|
|
|
|
expect(layout1?.row).toBe(1);
|
|
|
|
|
expect(layout2?.startColumn).toBe(3);
|
|
|
|
|
expect(layout2?.row).toBe(1);
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('Scenario 2: Overlapping multi-day events - Autumn Equinox vs Teknisk Workshop', () => {
|
|
|
|
|
// Autumn Equinox: Sept 22-23 (columns 1-2)
|
|
|
|
|
const autumnEvent = createMockEvent('autumn', 'Autumn Equinox', '2024-09-22', '2024-09-23');
|
|
|
|
|
// Teknisk Workshop: Sept 23-26 (columns 2-5) - overlaps on Sept 23
|
|
|
|
|
const workshopEvent = createMockEvent('workshop', 'Teknisk Workshop', '2024-09-23', '2024-09-26');
|
|
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([autumnEvent, workshopEvent], weekDates);
|
|
|
|
|
|
|
|
|
|
const autumnLayout = layouts.get('autumn');
|
|
|
|
|
const workshopLayout = layouts.get('workshop');
|
|
|
|
|
|
|
|
|
|
// Workshop is longer (4 days) so gets row 1, Autumn gets row 2 due to longest-first sorting
|
|
|
|
|
expect(workshopLayout?.startColumn).toBe(2);
|
|
|
|
|
expect(workshopLayout?.endColumn).toBe(5);
|
|
|
|
|
expect(workshopLayout?.row).toBe(1); // Longest event gets row 1
|
|
|
|
|
expect(autumnLayout?.startColumn).toBe(1);
|
|
|
|
|
expect(autumnLayout?.endColumn).toBe(2);
|
|
|
|
|
expect(autumnLayout?.row).toBe(2); // Shorter overlapping event gets row 2
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('Scenario 3: Multiple events in same column', () => {
|
2025-09-25 23:44:13 +02:00
|
|
|
// All events on Sept 23 only
|
2025-09-25 23:38:17 +02:00
|
|
|
const event1 = createMockEvent('1', 'Event 1', '2024-09-23', '2024-09-23');
|
|
|
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-23');
|
2025-09-25 23:44:13 +02:00
|
|
|
const event3 = createMockEvent('3', 'Event 3', '2024-09-23', '2024-09-23');
|
2025-09-25 23:38:17 +02:00
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([event1, event2, event3], weekDates);
|
2025-09-25 23:38:17 +02:00
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
const layout1 = layouts.get('1');
|
|
|
|
|
const layout2 = layouts.get('2');
|
|
|
|
|
const layout3 = layouts.get('3');
|
2025-09-25 23:38:17 +02:00
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
expect(layout1?.startColumn).toBe(2);
|
|
|
|
|
expect(layout1?.row).toBe(1);
|
|
|
|
|
expect(layout2?.startColumn).toBe(2);
|
|
|
|
|
expect(layout2?.row).toBe(2);
|
|
|
|
|
expect(layout3?.startColumn).toBe(2);
|
|
|
|
|
expect(layout3?.row).toBe(3);
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('Scenario 4: Partial overlaps', () => {
|
|
|
|
|
// Event 1: Sept 22-23 (columns 1-2)
|
|
|
|
|
const event1 = createMockEvent('1', 'Event 1', '2024-09-22', '2024-09-23');
|
|
|
|
|
// Event 2: Sept 23-24 (columns 2-3) - overlaps on Sept 23
|
|
|
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-24');
|
|
|
|
|
// Event 3: Sept 25-26 (columns 4-5) - no overlap, should be row 1
|
|
|
|
|
const event3 = createMockEvent('3', 'Event 3', '2024-09-25', '2024-09-26');
|
|
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([event1, event2, event3], weekDates);
|
|
|
|
|
|
|
|
|
|
const layout1 = layouts.get('1');
|
|
|
|
|
const layout2 = layouts.get('2');
|
|
|
|
|
const layout3 = layouts.get('3');
|
|
|
|
|
|
|
|
|
|
expect(layout1?.startColumn).toBe(1);
|
|
|
|
|
expect(layout1?.endColumn).toBe(2);
|
|
|
|
|
expect(layout1?.row).toBe(1);
|
|
|
|
|
expect(layout2?.startColumn).toBe(2);
|
|
|
|
|
expect(layout2?.endColumn).toBe(3);
|
|
|
|
|
expect(layout2?.row).toBe(2); // Should be row 2 due to overlap
|
|
|
|
|
expect(layout3?.startColumn).toBe(4);
|
|
|
|
|
expect(layout3?.endColumn).toBe(5);
|
|
|
|
|
expect(layout3?.row).toBe(1); // No overlap, back to row 1
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it('Scenario 5: Complex overlapping pattern', () => {
|
2025-09-25 23:44:13 +02:00
|
|
|
// Event 1: Sept 22-25 (columns 1-4) - spans most of week (4 days)
|
2025-09-25 23:38:17 +02:00
|
|
|
const event1 = createMockEvent('1', 'Long Event', '2024-09-22', '2024-09-25');
|
2025-09-25 23:44:13 +02:00
|
|
|
// Event 2: Sept 23-24 (columns 2-3) - overlaps with Event 1 (2 days)
|
2025-09-25 23:38:17 +02:00
|
|
|
const event2 = createMockEvent('2', 'Short Event', '2024-09-23', '2024-09-24');
|
2025-09-25 23:44:13 +02:00
|
|
|
// Event 3: Sept 24-26 (columns 3-5) - overlaps with both (3 days)
|
2025-09-25 23:38:17 +02:00
|
|
|
const event3 = createMockEvent('3', 'Another Event', '2024-09-24', '2024-09-26');
|
|
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([event1, event2, event3], weekDates);
|
|
|
|
|
|
|
|
|
|
const layout1 = layouts.get('1');
|
|
|
|
|
const layout2 = layouts.get('2');
|
|
|
|
|
const layout3 = layouts.get('3');
|
|
|
|
|
|
|
|
|
|
// Longest-first sorting: Event1 (4 days) -> Event3 (3 days) -> Event2 (2 days)
|
|
|
|
|
expect(layout1?.startColumn).toBe(1);
|
|
|
|
|
expect(layout1?.endColumn).toBe(4);
|
|
|
|
|
expect(layout1?.row).toBe(1); // Longest event gets row 1
|
|
|
|
|
expect(layout3?.startColumn).toBe(3);
|
|
|
|
|
expect(layout3?.endColumn).toBe(5);
|
|
|
|
|
expect(layout3?.row).toBe(2); // Second longest, overlaps with Event1, gets row 2
|
|
|
|
|
expect(layout2?.startColumn).toBe(2);
|
|
|
|
|
expect(layout2?.endColumn).toBe(3);
|
|
|
|
|
expect(layout2?.row).toBe(3); // Shortest, overlaps with both, gets row 3
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
|
2025-09-25 23:44:13 +02:00
|
|
|
it('Scenario 6: Single event for drag-drop simulation', () => {
|
|
|
|
|
// Single event placed at specific date
|
|
|
|
|
const event = createMockEvent('drag', 'Dragged Event', '2024-09-24', '2024-09-24');
|
|
|
|
|
|
|
|
|
|
const weekDates = ['2024-09-22', '2024-09-23', '2024-09-24', '2024-09-25', '2024-09-26'];
|
|
|
|
|
const layouts = allDayManager.calculateAllDayEventsLayout([event], weekDates);
|
|
|
|
|
|
|
|
|
|
const layout = layouts.get('drag');
|
|
|
|
|
|
|
|
|
|
expect(layout?.startColumn).toBe(3); // Sept 24 is column 3
|
|
|
|
|
expect(layout?.endColumn).toBe(3); // Single column
|
|
|
|
|
expect(layout?.columnSpan).toBe(1);
|
|
|
|
|
expect(layout?.row).toBe(1);
|
2025-09-25 23:38:17 +02:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|