feat: Add comprehensive test suite and misc improvements
- Add frontend unit tests with Vitest for components, hooks, pages, and utilities - Add backend tests for webhooks, notifications, middleware, and edge cases - Add ForgotPassword, NotFound, and ResetPassword pages - Add migration for orphaned staff resources conversion - Add coverage directory to gitignore (generated reports) - Various bug fixes and improvements from previous work 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
914
frontend/src/components/Schedule/__tests__/Sidebar.test.tsx
Normal file
914
frontend/src/components/Schedule/__tests__/Sidebar.test.tsx
Normal file
@@ -0,0 +1,914 @@
|
||||
/**
|
||||
* Unit tests for Sidebar component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering
|
||||
* - Resources list display
|
||||
* - Pending appointments list
|
||||
* - Empty state handling
|
||||
* - Drag source setup with @dnd-kit
|
||||
* - Scrolling reference setup
|
||||
* - Multi-lane resource badges
|
||||
* - Archive drop zone display
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import { DndContext } from '@dnd-kit/core';
|
||||
import React from 'react';
|
||||
import Sidebar, { PendingAppointment, ResourceLayout } from '../Sidebar';
|
||||
|
||||
// Setup proper mocks for @dnd-kit
|
||||
beforeAll(() => {
|
||||
// Mock IntersectionObserver properly as a constructor
|
||||
class IntersectionObserverMock {
|
||||
observe = vi.fn();
|
||||
unobserve = vi.fn();
|
||||
disconnect = vi.fn();
|
||||
constructor() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
global.IntersectionObserver = IntersectionObserverMock as any;
|
||||
|
||||
// Mock ResizeObserver properly as a constructor
|
||||
class ResizeObserverMock {
|
||||
observe = vi.fn();
|
||||
unobserve = vi.fn();
|
||||
disconnect = vi.fn();
|
||||
constructor() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
global.ResizeObserver = ResizeObserverMock as any;
|
||||
});
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'scheduler.resources': 'Resources',
|
||||
'scheduler.resource': 'Resource',
|
||||
'scheduler.lanes': 'lanes',
|
||||
'scheduler.pendingRequests': 'Pending Requests',
|
||||
'scheduler.noPendingRequests': 'No pending requests',
|
||||
'scheduler.dropToArchive': 'Drop here to archive',
|
||||
'scheduler.min': 'min',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Helper function to create a wrapper with DndContext
|
||||
const createDndWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<DndContext>{children}</DndContext>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Sidebar', () => {
|
||||
const mockScrollRef = { current: null } as React.RefObject<HTMLDivElement>;
|
||||
|
||||
const mockResourceLayouts: ResourceLayout[] = [
|
||||
{
|
||||
resourceId: 1,
|
||||
resourceName: 'Dr. Smith',
|
||||
height: 100,
|
||||
laneCount: 1,
|
||||
},
|
||||
{
|
||||
resourceId: 2,
|
||||
resourceName: 'Conference Room A',
|
||||
height: 120,
|
||||
laneCount: 2,
|
||||
},
|
||||
{
|
||||
resourceId: 3,
|
||||
resourceName: 'Equipment Bay',
|
||||
height: 100,
|
||||
laneCount: 3,
|
||||
},
|
||||
];
|
||||
|
||||
const mockPendingAppointments: PendingAppointment[] = [
|
||||
{
|
||||
id: 1,
|
||||
customerName: 'John Doe',
|
||||
serviceName: 'Consultation',
|
||||
durationMinutes: 30,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
customerName: 'Jane Smith',
|
||||
serviceName: 'Follow-up',
|
||||
durationMinutes: 15,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
customerName: 'Bob Johnson',
|
||||
serviceName: 'Initial Assessment',
|
||||
durationMinutes: 60,
|
||||
},
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the sidebar container', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toBeInTheDocument();
|
||||
expect(sidebar).toHaveClass('flex', 'flex-col', 'bg-white');
|
||||
});
|
||||
|
||||
it('should render with fixed width of 250px', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveStyle({ width: '250px' });
|
||||
});
|
||||
|
||||
it('should render resources header', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const header = screen.getByText('Resources');
|
||||
expect(header).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render pending requests section', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const pendingHeader = screen.getByText(/Pending Requests/);
|
||||
expect(pendingHeader).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render archive drop zone', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const dropZone = screen.getByText('Drop here to archive');
|
||||
expect(dropZone).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Resources List', () => {
|
||||
it('should render all resources from resourceLayouts', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Dr. Smith')).toBeInTheDocument();
|
||||
expect(screen.getByText('Conference Room A')).toBeInTheDocument();
|
||||
expect(screen.getByText('Equipment Bay')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct height to each resource row', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const drSmith = screen.getByText('Dr. Smith').closest('div');
|
||||
const confRoom = screen.getByText('Conference Room A').closest('div');
|
||||
|
||||
expect(drSmith).toHaveStyle({ height: '100px' });
|
||||
expect(confRoom).toHaveStyle({ height: '120px' });
|
||||
});
|
||||
|
||||
it('should display "Resource" label for each resource', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const resourceLabels = screen.getAllByText('Resource');
|
||||
expect(resourceLabels.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should render grip icons for resources', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const gripIcons = container.querySelectorAll('svg');
|
||||
expect(gripIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should not render lane count badge for single-lane resources', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[mockResourceLayouts[0]]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.queryByText(/lanes/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render lane count badge for multi-lane resources', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[mockResourceLayouts[1]]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('2 lanes')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all multi-lane badges correctly', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('2 lanes')).toBeInTheDocument();
|
||||
expect(screen.getByText('3 lanes')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct styling to multi-lane badges', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[mockResourceLayouts[1]]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const badge = screen.getByText('2 lanes');
|
||||
expect(badge).toHaveClass('text-blue-600', 'bg-blue-50');
|
||||
});
|
||||
|
||||
it('should attach scroll ref to resource list container', () => {
|
||||
const testRef = React.createRef<HTMLDivElement>();
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={testRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(testRef.current).toBeInstanceOf(HTMLDivElement);
|
||||
});
|
||||
|
||||
it('should render empty resources list when no resources provided', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.queryByText('Dr. Smith')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pending Appointments List', () => {
|
||||
it('should render all pending appointments', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
|
||||
expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display customer names correctly', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
mockPendingAppointments.forEach((apt) => {
|
||||
expect(screen.getByText(apt.customerName)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display service names correctly', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Consultation')).toBeInTheDocument();
|
||||
expect(screen.getByText('Follow-up')).toBeInTheDocument();
|
||||
expect(screen.getByText('Initial Assessment')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display duration in minutes for each appointment', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('30 min')).toBeInTheDocument();
|
||||
expect(screen.getByText('15 min')).toBeInTheDocument();
|
||||
expect(screen.getByText('60 min')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display clock icon for each appointment', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
// Clock icons are SVGs
|
||||
const clockIcons = container.querySelectorAll('svg');
|
||||
expect(clockIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should display grip vertical icon for drag handle', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const appointment = screen.getByText('John Doe').closest('div');
|
||||
const svg = appointment?.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show appointment count in header', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Pending Requests \(3\)/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should update count when appointments change', () => {
|
||||
const { rerender } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Pending Requests \(3\)/)).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Pending Requests \(1\)/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Empty State', () => {
|
||||
it('should display empty message when no pending appointments', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('No pending requests')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show count of 0 in header when empty', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Pending Requests \(0\)/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply italic styling to empty message', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const emptyMessage = screen.getByText('No pending requests');
|
||||
expect(emptyMessage).toHaveClass('italic');
|
||||
});
|
||||
|
||||
it('should not render appointment items when empty', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Jane Smith')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Drag and Drop Setup', () => {
|
||||
it('should setup draggable for each pending appointment', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
// Each appointment should have drag cursor classes
|
||||
const appointments = container.querySelectorAll('[class*="cursor-grab"]');
|
||||
expect(appointments.length).toBe(mockPendingAppointments.length);
|
||||
});
|
||||
|
||||
it('should apply cursor-grab class to draggable items', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const appointmentCard = screen.getByText('John Doe').closest('div');
|
||||
expect(appointmentCard).toHaveClass('cursor-grab');
|
||||
});
|
||||
|
||||
it('should apply active cursor-grabbing class to draggable items', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const appointmentCard = screen.getByText('John Doe').closest('div');
|
||||
expect(appointmentCard).toHaveClass('active:cursor-grabbing');
|
||||
});
|
||||
|
||||
it('should render pending items with orange left border', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const appointmentCard = screen.getByText('John Doe').closest('div');
|
||||
expect(appointmentCard).toHaveClass('border-l-orange-400');
|
||||
});
|
||||
|
||||
it('should apply shadow on hover for draggable items', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const appointmentCard = screen.getByText('John Doe').closest('div');
|
||||
expect(appointmentCard).toHaveClass('hover:shadow-md');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Archive Drop Zone', () => {
|
||||
it('should render drop zone with trash icon', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const dropZone = screen.getByText('Drop here to archive').parentElement;
|
||||
const trashIcon = dropZone?.querySelector('svg');
|
||||
expect(trashIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply dashed border to drop zone', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const dropZone = screen.getByText('Drop here to archive').parentElement;
|
||||
expect(dropZone).toHaveClass('border-dashed');
|
||||
});
|
||||
|
||||
it('should apply opacity to drop zone container', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const dropZoneContainer = screen
|
||||
.getByText('Drop here to archive')
|
||||
.closest('.opacity-50');
|
||||
expect(dropZoneContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Layout and Styling', () => {
|
||||
it('should apply fixed height to resources header', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const header = screen.getByText('Resources').parentElement;
|
||||
expect(header).toHaveStyle({ height: '48px' });
|
||||
});
|
||||
|
||||
it('should apply fixed height to pending requests section', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const pendingSection = screen
|
||||
.getByText(/Pending Requests/)
|
||||
.closest('.h-80');
|
||||
expect(pendingSection).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have overflow-hidden on resource list', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const resourceList = container.querySelector('.overflow-hidden');
|
||||
expect(resourceList).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have overflow-y-auto on pending appointments list', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const pendingList = container.querySelector('.overflow-y-auto');
|
||||
expect(pendingList).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply border-right to sidebar', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('border-r');
|
||||
});
|
||||
|
||||
it('should apply shadow to sidebar', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('shadow-lg');
|
||||
});
|
||||
|
||||
it('should have dark mode classes', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('dark:bg-gray-800');
|
||||
expect(sidebar).toHaveClass('dark:border-gray-700');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translation for resources header', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Resources')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for pending requests header', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Pending Requests/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for empty state message', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('No pending requests')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for drop zone text', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Drop here to archive')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for duration units', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={[mockPendingAppointments[0]]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('30 min')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for resource label', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[mockResourceLayouts[0]]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Resource')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for lanes label', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[mockResourceLayouts[1]]}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('2 lanes')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all props together', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
// Verify resources
|
||||
expect(screen.getByText('Dr. Smith')).toBeInTheDocument();
|
||||
expect(screen.getByText('Conference Room A')).toBeInTheDocument();
|
||||
expect(screen.getByText('Equipment Bay')).toBeInTheDocument();
|
||||
|
||||
// Verify pending appointments
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
|
||||
expect(screen.getByText('Bob Johnson')).toBeInTheDocument();
|
||||
|
||||
// Verify count
|
||||
expect(screen.getByText(/Pending Requests \(3\)/)).toBeInTheDocument();
|
||||
|
||||
// Verify archive drop zone
|
||||
expect(screen.getByText('Drop here to archive')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle empty resources with full pending appointments', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={[]}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.queryByText('Dr. Smith')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Pending Requests \(3\)/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle full resources with empty pending appointments', () => {
|
||||
render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={[]}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Dr. Smith')).toBeInTheDocument();
|
||||
expect(screen.getByText('No pending requests')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Pending Requests \(0\)/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain structure with resources and pending sections', () => {
|
||||
const { container } = render(
|
||||
<Sidebar
|
||||
resourceLayouts={mockResourceLayouts}
|
||||
pendingAppointments={mockPendingAppointments}
|
||||
scrollRef={mockScrollRef}
|
||||
/>,
|
||||
{ wrapper: createDndWrapper() }
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
|
||||
// Should have header, resources list, and pending section
|
||||
const sections = sidebar.querySelectorAll(
|
||||
'.border-b, .border-t, .flex-col'
|
||||
);
|
||||
expect(sections.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
750
frontend/src/components/Schedule/__tests__/Timeline.test.tsx
Normal file
750
frontend/src/components/Schedule/__tests__/Timeline.test.tsx
Normal file
@@ -0,0 +1,750 @@
|
||||
/**
|
||||
* Comprehensive unit tests for Timeline component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering
|
||||
* - Time slots display for different view modes (day, week, month)
|
||||
* - Resource rows display with proper heights
|
||||
* - Events positioned correctly on timeline
|
||||
* - Current time indicator visibility and position
|
||||
* - Date navigation controls
|
||||
* - View mode switching
|
||||
* - Zoom functionality
|
||||
* - Drag and drop interactions
|
||||
* - Scroll synchronization between sidebar and timeline
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, waitFor, within } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import Timeline from '../Timeline';
|
||||
import * as apiClient from '../../../api/client';
|
||||
|
||||
// Mock modules
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, fallback?: string) => fallback || key,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('../../../api/client', () => ({
|
||||
default: {
|
||||
get: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock DnD Kit - simplified for testing
|
||||
vi.mock('@dnd-kit/core', () => ({
|
||||
DndContext: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
useSensor: vi.fn(),
|
||||
useSensors: vi.fn(() => []),
|
||||
PointerSensor: vi.fn(),
|
||||
useDroppable: vi.fn(() => ({
|
||||
setNodeRef: vi.fn(),
|
||||
isOver: false,
|
||||
})),
|
||||
useDraggable: vi.fn(() => ({
|
||||
attributes: {},
|
||||
listeners: {},
|
||||
setNodeRef: vi.fn(),
|
||||
isDragging: false,
|
||||
})),
|
||||
DragOverlay: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
|
||||
}));
|
||||
|
||||
// Mock child components
|
||||
vi.mock('../../Timeline/TimelineRow', () => ({
|
||||
default: ({ resourceId, events, height }: any) => (
|
||||
<div
|
||||
data-testid={`timeline-row-${resourceId}`}
|
||||
data-event-count={events.length}
|
||||
style={{ height }}
|
||||
>
|
||||
{events.map((event: any) => (
|
||||
<div key={event.id} data-testid={`event-${event.id}`}>
|
||||
{event.title}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../../Timeline/CurrentTimeIndicator', () => ({
|
||||
default: ({ startTime, hourWidth }: any) => (
|
||||
<div
|
||||
id="current-time-indicator"
|
||||
data-testid="current-time-indicator"
|
||||
data-start-time={startTime.toISOString()}
|
||||
data-hour-width={hourWidth}
|
||||
/>
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../Sidebar', () => ({
|
||||
default: ({ resourceLayouts, pendingAppointments }: any) => (
|
||||
<div data-testid="sidebar">
|
||||
<div data-testid="resource-count">{resourceLayouts.length}</div>
|
||||
<div data-testid="pending-count">{pendingAppointments.length}</div>
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Test data
|
||||
const mockResources = [
|
||||
{ id: 1, name: 'Resource 1', type: 'STAFF' },
|
||||
{ id: 2, name: 'Resource 2', type: 'ROOM' },
|
||||
{ id: 3, name: 'Resource 3', type: 'EQUIPMENT' },
|
||||
];
|
||||
|
||||
const mockAppointments = [
|
||||
{
|
||||
id: 1,
|
||||
resource: 1,
|
||||
customer: 101,
|
||||
service: 201,
|
||||
customer_name: 'John Doe',
|
||||
service_name: 'Haircut',
|
||||
start_time: new Date('2025-12-07T10:00:00').toISOString(),
|
||||
end_time: new Date('2025-12-07T11:00:00').toISOString(),
|
||||
status: 'CONFIRMED' as const,
|
||||
is_paid: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
resource: 1,
|
||||
customer: 102,
|
||||
service: 202,
|
||||
customer_name: 'Jane Smith',
|
||||
service_name: 'Coloring',
|
||||
start_time: new Date('2025-12-07T11:30:00').toISOString(),
|
||||
end_time: new Date('2025-12-07T13:00:00').toISOString(),
|
||||
status: 'CONFIRMED' as const,
|
||||
is_paid: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
resource: undefined, // Pending appointment - no resource assigned
|
||||
customer: 103,
|
||||
service: 203,
|
||||
customer_name: 'Bob Johnson',
|
||||
service_name: 'Massage',
|
||||
start_time: new Date('2025-12-07T14:00:00').toISOString(),
|
||||
end_time: new Date('2025-12-07T15:00:00').toISOString(),
|
||||
status: 'PENDING' as const,
|
||||
is_paid: false,
|
||||
},
|
||||
];
|
||||
|
||||
// Test wrapper with Query Client
|
||||
const createWrapper = () => {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Timeline Component', () => {
|
||||
let mockGet: any;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockGet = vi.mocked(apiClient.default.get);
|
||||
|
||||
// Default API responses
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.resolve({ data: mockResources });
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.resolve({ data: mockAppointments });
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Component Rendering', () => {
|
||||
it('should render the timeline component', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('sidebar')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display header bar with controls', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTitle('Previous')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Next')).toBeInTheDocument();
|
||||
expect(screen.getByText('+ New Appointment')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch resources from API', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockGet).toHaveBeenCalledWith('/resources/');
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch appointments from API', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockGet).toHaveBeenCalledWith('/appointments/');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Time Slots Rendering', () => {
|
||||
it('should render 24 hour slots in day view', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Check for some time labels
|
||||
expect(screen.getByText('12 AM')).toBeInTheDocument();
|
||||
expect(screen.getByText('6 AM')).toBeInTheDocument();
|
||||
expect(screen.getByText('12 PM')).toBeInTheDocument();
|
||||
expect(screen.getByText('6 PM')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render all 24 hours with correct spacing in day view', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const headerRow = container.querySelector('.sticky.top-0');
|
||||
expect(headerRow).toBeInTheDocument();
|
||||
|
||||
// Should have 24 time slots
|
||||
const timeSlots = headerRow?.querySelectorAll('[style*="width"]');
|
||||
expect(timeSlots?.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should render day headers in week view', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('day')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const weekButton = screen.getByRole('button', { name: /week/i });
|
||||
await user.click(weekButton);
|
||||
|
||||
await waitFor(() => {
|
||||
// Week view should show day names
|
||||
const container = screen.getByRole('button', { name: /week/i }).closest('div')?.parentElement?.parentElement?.parentElement;
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display date range label for current view', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Should show day view date format
|
||||
const dateLabel = screen.getByText(/December/i);
|
||||
expect(dateLabel).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Resource Rows Display', () => {
|
||||
it('should render resource rows for all resources', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('timeline-row-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('timeline-row-2')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('timeline-row-3')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display correct number of resources in sidebar', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const resourceCount = screen.getByTestId('resource-count');
|
||||
expect(resourceCount).toHaveTextContent('3');
|
||||
});
|
||||
});
|
||||
|
||||
it('should calculate row heights based on event lanes', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const row1 = screen.getByTestId('timeline-row-1');
|
||||
// Row 1 has 2 events, should have calculated height
|
||||
expect(row1).toHaveAttribute('style');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle resources with no events', async () => {
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.resolve({ data: mockResources });
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.resolve({ data: [] });
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('timeline-row-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('timeline-row-1')).toHaveAttribute('data-event-count', '0');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Events Positioning', () => {
|
||||
it('should render events on their assigned resources', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const row1 = screen.getByTestId('timeline-row-1');
|
||||
expect(row1).toHaveAttribute('data-event-count', '2');
|
||||
});
|
||||
});
|
||||
|
||||
it('should display event titles correctly', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText('Jane Smith')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should filter events by resource', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const row1 = screen.getByTestId('timeline-row-1');
|
||||
const row2 = screen.getByTestId('timeline-row-2');
|
||||
|
||||
expect(row1).toHaveAttribute('data-event-count', '2');
|
||||
expect(row2).toHaveAttribute('data-event-count', '0');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle overlapping events with lane calculation', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Both events are on resource 1, should be in timeline
|
||||
expect(screen.getByTestId('event-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('event-2')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Current Time Indicator', () => {
|
||||
it('should render current time indicator', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('current-time-indicator')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should pass correct props to current time indicator', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const indicator = screen.getByTestId('current-time-indicator');
|
||||
expect(indicator).toHaveAttribute('data-start-time');
|
||||
expect(indicator).toHaveAttribute('data-hour-width');
|
||||
});
|
||||
});
|
||||
|
||||
it('should have correct id for auto-scroll', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const indicator = screen.getByTestId('current-time-indicator');
|
||||
expect(indicator).toHaveAttribute('id', 'current-time-indicator');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Date Navigation', () => {
|
||||
it('should have previous and next navigation buttons', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTitle('Previous')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Next')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should navigate to previous day when clicking previous button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTitle('Previous')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const previousButton = screen.getByTitle('Previous');
|
||||
await user.click(previousButton);
|
||||
|
||||
// Date should change (we can't easily test exact date without exposing state)
|
||||
expect(previousButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should navigate to next day when clicking next button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTitle('Next')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const nextButton = screen.getByTitle('Next');
|
||||
await user.click(nextButton);
|
||||
|
||||
expect(nextButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display current date range', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Should show a date with calendar icon
|
||||
const dateDisplay = screen.getByText(/2025/);
|
||||
expect(dateDisplay).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('View Mode Switching', () => {
|
||||
it('should render view mode buttons (day, week, month)', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /day/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /week/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /month/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should highlight active view mode (day by default)', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const dayButton = screen.getByRole('button', { name: /day/i });
|
||||
expect(dayButton).toHaveClass('bg-blue-500');
|
||||
});
|
||||
});
|
||||
|
||||
it('should switch to week view when clicking week button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /week/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const weekButton = screen.getByRole('button', { name: /week/i });
|
||||
await user.click(weekButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(weekButton).toHaveClass('bg-blue-500');
|
||||
});
|
||||
});
|
||||
|
||||
it('should switch to month view when clicking month button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /month/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const monthButton = screen.getByRole('button', { name: /month/i });
|
||||
await user.click(monthButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(monthButton).toHaveClass('bg-blue-500');
|
||||
});
|
||||
});
|
||||
|
||||
it('should only have one active view mode at a time', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /week/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const weekButton = screen.getByRole('button', { name: /week/i });
|
||||
await user.click(weekButton);
|
||||
|
||||
await waitFor(() => {
|
||||
const dayButton = screen.getByRole('button', { name: /day/i });
|
||||
expect(weekButton).toHaveClass('bg-blue-500');
|
||||
expect(dayButton).not.toHaveClass('bg-blue-500');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Zoom Functionality', () => {
|
||||
it('should render zoom in and zoom out buttons', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Look for Zoom label and buttons
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Zoom buttons are rendered via Lucide icons
|
||||
const zoomSection = screen.getByText('Zoom').parentElement;
|
||||
expect(zoomSection).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should increase zoom when clicking zoom in button', async () => {
|
||||
const user = userEvent.setup();
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Find zoom in button (second button after Zoom label)
|
||||
const zoomSection = screen.getByText('Zoom').parentElement;
|
||||
const buttons = zoomSection?.querySelectorAll('button');
|
||||
const zoomInButton = buttons?.[1];
|
||||
|
||||
if (zoomInButton) {
|
||||
await user.click(zoomInButton);
|
||||
// Component should still be rendered
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
|
||||
it('should decrease zoom when clicking zoom out button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const zoomSection = screen.getByText('Zoom').parentElement;
|
||||
const buttons = zoomSection?.querySelectorAll('button');
|
||||
const zoomOutButton = buttons?.[0];
|
||||
|
||||
if (zoomOutButton) {
|
||||
await user.click(zoomOutButton);
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pending Appointments', () => {
|
||||
it('should display pending appointments in sidebar', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const pendingCount = screen.getByTestId('pending-count');
|
||||
expect(pendingCount).toHaveTextContent('1');
|
||||
});
|
||||
});
|
||||
|
||||
it('should filter pending appointments from events', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Should not render pending appointment as event
|
||||
expect(screen.queryByText('Bob Johnson')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have accessible button labels', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /day/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /week/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /month/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /new appointment/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have title attributes on navigation buttons', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTitle('Previous')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Next')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Undo/Redo Controls', () => {
|
||||
it('should render undo and redo buttons', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Undo/redo buttons exist but are disabled
|
||||
const buttons = container.querySelectorAll('button[disabled]');
|
||||
expect(buttons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have undo and redo buttons disabled by default', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const disabledButtons = container.querySelectorAll('button[disabled]');
|
||||
expect(disabledButtons.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Error Handling', () => {
|
||||
it('should handle API errors gracefully for resources', async () => {
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.reject(new Error('Network error'));
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.resolve({ data: [] });
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Should still render even with error
|
||||
expect(screen.getByText('+ New Appointment')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle API errors gracefully for appointments', async () => {
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.resolve({ data: mockResources });
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.reject(new Error('Network error'));
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('+ New Appointment')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle empty resources array', async () => {
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.resolve({ data: [] });
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.resolve({ data: [] });
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const resourceCount = screen.getByTestId('resource-count');
|
||||
expect(resourceCount).toHaveTextContent('0');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle empty appointments array', async () => {
|
||||
mockGet.mockImplementation((url: string) => {
|
||||
if (url === '/resources/') {
|
||||
return Promise.resolve({ data: mockResources });
|
||||
}
|
||||
if (url === '/appointments/') {
|
||||
return Promise.resolve({ data: [] });
|
||||
}
|
||||
return Promise.reject(new Error('Unknown endpoint'));
|
||||
});
|
||||
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const pendingCount = screen.getByTestId('pending-count');
|
||||
expect(pendingCount).toHaveTextContent('0');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should apply dark mode classes', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const mainContainer = container.querySelector('.bg-white');
|
||||
expect(mainContainer).toHaveClass('dark:bg-gray-900');
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply dark mode to header', async () => {
|
||||
const { container } = render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
const header = container.querySelector('.border-b');
|
||||
expect(header).toHaveClass('dark:bg-gray-800');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete timeline with all features', async () => {
|
||||
render(<Timeline />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
// Header controls
|
||||
expect(screen.getByTitle('Previous')).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Next')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /day/i })).toBeInTheDocument();
|
||||
expect(screen.getByText('Zoom')).toBeInTheDocument();
|
||||
expect(screen.getByText('+ New Appointment')).toBeInTheDocument();
|
||||
|
||||
// Sidebar
|
||||
expect(screen.getByTestId('sidebar')).toBeInTheDocument();
|
||||
|
||||
// Current time indicator
|
||||
expect(screen.getByTestId('current-time-indicator')).toBeInTheDocument();
|
||||
|
||||
// Resources
|
||||
expect(screen.getByTestId('resource-count')).toHaveTextContent('3');
|
||||
|
||||
// Events
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user