Refactors all-day event rendering to use a layout engine for overlap detection and positioning, ensuring events are placed in available rows and columns. Removes deprecated method and adds unit tests.
134 lines
No EOL
5.9 KiB
TypeScript
134 lines
No EOL
5.9 KiB
TypeScript
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');
|
|
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
|
|
|
expect(layout1.startColumn).toBe(1);
|
|
expect(layout1.row).toBe(1);
|
|
|
|
// Event 2: Sept 24 (column 3) - different column, should be row 1
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-24', '2024-09-24');
|
|
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
|
|
|
expect(layout2.startColumn).toBe(3);
|
|
expect(layout2.row).toBe(1);
|
|
});
|
|
|
|
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');
|
|
const autumnLayout = allDayManager.calculateAllDayEventLayout(autumnEvent);
|
|
|
|
expect(autumnLayout.startColumn).toBe(1);
|
|
expect(autumnLayout.endColumn).toBe(2);
|
|
expect(autumnLayout.row).toBe(1);
|
|
|
|
// Teknisk Workshop: Sept 23-26 (columns 2-5) - overlaps on Sept 23
|
|
const workshopEvent = createMockEvent('workshop', 'Teknisk Workshop', '2024-09-23', '2024-09-26');
|
|
const workshopLayout = allDayManager.calculateAllDayEventLayout(workshopEvent);
|
|
|
|
expect(workshopLayout.startColumn).toBe(2);
|
|
expect(workshopLayout.endColumn).toBe(5);
|
|
expect(workshopLayout.row).toBe(2); // Should be row 2 due to overlap
|
|
});
|
|
|
|
it('Scenario 3: Multiple events in same column', () => {
|
|
// Event 1: Sept 23 only
|
|
const event1 = createMockEvent('1', 'Event 1', '2024-09-23', '2024-09-23');
|
|
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
|
|
|
expect(layout1.startColumn).toBe(2);
|
|
expect(layout1.row).toBe(1);
|
|
|
|
// Event 2: Sept 23 only - same column, should be row 2
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-23');
|
|
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
|
|
|
expect(layout2.startColumn).toBe(2);
|
|
expect(layout2.row).toBe(2);
|
|
|
|
// Event 3: Sept 23 only - same column, should be row 3
|
|
const event3 = createMockEvent('3', 'Event 3', '2024-09-23', '2024-09-23');
|
|
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
|
|
|
expect(layout3.startColumn).toBe(2);
|
|
expect(layout3.row).toBe(3);
|
|
});
|
|
|
|
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');
|
|
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
|
|
|
expect(layout1.startColumn).toBe(1);
|
|
expect(layout1.endColumn).toBe(2);
|
|
expect(layout1.row).toBe(1);
|
|
|
|
// Event 2: Sept 23-24 (columns 2-3) - overlaps on Sept 23
|
|
const event2 = createMockEvent('2', 'Event 2', '2024-09-23', '2024-09-24');
|
|
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
|
|
|
expect(layout2.startColumn).toBe(2);
|
|
expect(layout2.endColumn).toBe(3);
|
|
expect(layout2.row).toBe(2); // Should be row 2 due to overlap
|
|
|
|
// 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');
|
|
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
|
|
|
expect(layout3.startColumn).toBe(4);
|
|
expect(layout3.endColumn).toBe(5);
|
|
expect(layout3.row).toBe(1); // No overlap, back to row 1
|
|
});
|
|
|
|
it('Scenario 5: Complex overlapping pattern', () => {
|
|
// Event 1: Sept 22-25 (columns 1-4) - spans most of week
|
|
const event1 = createMockEvent('1', 'Long Event', '2024-09-22', '2024-09-25');
|
|
const layout1 = allDayManager.calculateAllDayEventLayout(event1);
|
|
|
|
expect(layout1.startColumn).toBe(1);
|
|
expect(layout1.endColumn).toBe(4);
|
|
expect(layout1.row).toBe(1);
|
|
|
|
// Event 2: Sept 23-24 (columns 2-3) - overlaps with Event 1
|
|
const event2 = createMockEvent('2', 'Short Event', '2024-09-23', '2024-09-24');
|
|
const layout2 = allDayManager.calculateAllDayEventLayout(event2);
|
|
|
|
expect(layout2.startColumn).toBe(2);
|
|
expect(layout2.endColumn).toBe(3);
|
|
expect(layout2.row).toBe(2);
|
|
|
|
// Event 3: Sept 24-26 (columns 3-5) - overlaps with both
|
|
const event3 = createMockEvent('3', 'Another Event', '2024-09-24', '2024-09-26');
|
|
const layout3 = allDayManager.calculateAllDayEventLayout(event3);
|
|
|
|
expect(layout3.startColumn).toBe(3);
|
|
expect(layout3.endColumn).toBe(5);
|
|
expect(layout3.row).toBe(3); // Should be row 3 due to overlaps with both
|
|
});
|
|
|
|
it('Scenario 6: Drag-drop target date override', () => {
|
|
// Multi-day event dragged to specific date should use single column
|
|
const event = createMockEvent('drag', 'Dragged Event', '2024-09-22', '2024-09-25');
|
|
const layout = allDayManager.calculateAllDayEventLayout(event, '2024-09-24');
|
|
|
|
expect(layout.startColumn).toBe(3); // Sept 24 is column 3
|
|
expect(layout.endColumn).toBe(3); // Single column when targetDate specified
|
|
expect(layout.columnSpan).toBe(1);
|
|
expect(layout.row).toBe(1);
|
|
});
|
|
});
|
|
}); |