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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
429
frontend/src/components/__tests__/ConfirmationModal.test.tsx
Normal file
429
frontend/src/components/__tests__/ConfirmationModal.test.tsx
Normal file
@@ -0,0 +1,429 @@
|
||||
/**
|
||||
* Unit tests for ConfirmationModal component
|
||||
*
|
||||
* Tests all modal functionality including:
|
||||
* - Rendering with different props (title, message, variants)
|
||||
* - User interactions (confirm, cancel, close button)
|
||||
* - Custom button labels
|
||||
* - Loading states
|
||||
* - Modal visibility (isOpen true/false)
|
||||
* - Different modal variants (info, warning, danger, success)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { I18nextProvider } from 'react-i18next';
|
||||
import i18n from 'i18next';
|
||||
import ConfirmationModal from '../ConfirmationModal';
|
||||
|
||||
// Setup i18n for tests
|
||||
beforeEach(() => {
|
||||
i18n.init({
|
||||
lng: 'en',
|
||||
fallbackLng: 'en',
|
||||
resources: {
|
||||
en: {
|
||||
translation: {
|
||||
common: {
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Test wrapper with i18n provider
|
||||
const renderWithI18n = (component: React.ReactElement) => {
|
||||
return render(<I18nextProvider i18n={i18n}>{component}</I18nextProvider>);
|
||||
};
|
||||
|
||||
describe('ConfirmationModal', () => {
|
||||
const defaultProps = {
|
||||
isOpen: true,
|
||||
onClose: vi.fn(),
|
||||
onConfirm: vi.fn(),
|
||||
title: 'Confirm Action',
|
||||
message: 'Are you sure you want to proceed?',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render modal with title and message', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Confirm Action')).toBeInTheDocument();
|
||||
expect(screen.getByText('Are you sure you want to proceed?')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render modal with React node as message', () => {
|
||||
const messageNode = (
|
||||
<div>
|
||||
<p>First paragraph</p>
|
||||
<p>Second paragraph</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} message={messageNode} />);
|
||||
|
||||
expect(screen.getByText('First paragraph')).toBeInTheDocument();
|
||||
expect(screen.getByText('Second paragraph')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render when isOpen is false', () => {
|
||||
const { container } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} isOpen={false} />
|
||||
);
|
||||
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('should render default confirm and cancel buttons', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /confirm/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render custom button labels', () => {
|
||||
renderWithI18n(
|
||||
<ConfirmationModal
|
||||
{...defaultProps}
|
||||
confirmText="Yes, delete it"
|
||||
cancelText="No, keep it"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Yes, delete it' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'No, keep it' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render close button in header', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
// Close button is an SVG icon, so we find it by its parent button
|
||||
const closeButtons = screen.getAllByRole('button');
|
||||
const closeButton = closeButtons.find((button) =>
|
||||
button.querySelector('svg') && button !== screen.getByRole('button', { name: /confirm/i })
|
||||
);
|
||||
|
||||
expect(closeButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('User Interactions', () => {
|
||||
it('should call onConfirm when confirm button is clicked', () => {
|
||||
const onConfirm = vi.fn();
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} onConfirm={onConfirm} />);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
fireEvent.click(confirmButton);
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should call onClose when cancel button is clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
const cancelButton = screen.getByRole('button', { name: /cancel/i });
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should call onClose when close button is clicked', () => {
|
||||
const onClose = vi.fn();
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} onClose={onClose} />);
|
||||
|
||||
// Find the close button (X icon in header)
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const closeButton = buttons.find((button) =>
|
||||
button.querySelector('svg') && !button.textContent?.includes('Confirm')
|
||||
);
|
||||
|
||||
if (closeButton) {
|
||||
fireEvent.click(closeButton);
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
}
|
||||
});
|
||||
|
||||
it('should not call onConfirm multiple times on multiple clicks', () => {
|
||||
const onConfirm = vi.fn();
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} onConfirm={onConfirm} />);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
fireEvent.click(confirmButton);
|
||||
fireEvent.click(confirmButton);
|
||||
fireEvent.click(confirmButton);
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Loading State', () => {
|
||||
it('should show loading spinner when isLoading is true', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} isLoading={true} />);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
const spinner = confirmButton.querySelector('svg.animate-spin');
|
||||
|
||||
expect(spinner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should disable confirm button when loading', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} isLoading={true} />);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should disable cancel button when loading', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} isLoading={true} />);
|
||||
|
||||
const cancelButton = screen.getByRole('button', { name: /cancel/i });
|
||||
expect(cancelButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should disable close button when loading', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} isLoading={true} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const closeButton = buttons.find((button) =>
|
||||
button.querySelector('svg') && !button.textContent?.includes('Confirm')
|
||||
);
|
||||
|
||||
expect(closeButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should not call onConfirm when button is disabled due to loading', () => {
|
||||
const onConfirm = vi.fn();
|
||||
renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} onConfirm={onConfirm} isLoading={true} />
|
||||
);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
fireEvent.click(confirmButton);
|
||||
|
||||
// Button is disabled, so onClick should not fire
|
||||
expect(onConfirm).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Modal Variants', () => {
|
||||
it('should render info variant by default', () => {
|
||||
const { container } = renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
// Info variant has blue styling
|
||||
const iconContainer = container.querySelector('.bg-blue-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render info variant with correct styling', () => {
|
||||
const { container } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} variant="info" />
|
||||
);
|
||||
|
||||
const iconContainer = container.querySelector('.bg-blue-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toHaveClass('bg-blue-600');
|
||||
});
|
||||
|
||||
it('should render warning variant with correct styling', () => {
|
||||
const { container } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} variant="warning" />
|
||||
);
|
||||
|
||||
const iconContainer = container.querySelector('.bg-amber-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toHaveClass('bg-amber-600');
|
||||
});
|
||||
|
||||
it('should render danger variant with correct styling', () => {
|
||||
const { container } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} variant="danger" />
|
||||
);
|
||||
|
||||
const iconContainer = container.querySelector('.bg-red-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toHaveClass('bg-red-600');
|
||||
});
|
||||
|
||||
it('should render success variant with correct styling', () => {
|
||||
const { container } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} variant="success" />
|
||||
);
|
||||
|
||||
const iconContainer = container.querySelector('.bg-green-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toHaveClass('bg-green-600');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper button roles', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBeGreaterThanOrEqual(2); // At least confirm and cancel
|
||||
});
|
||||
|
||||
it('should have backdrop overlay', () => {
|
||||
const { container } = renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
const backdrop = container.querySelector('.fixed.inset-0.bg-black\\/50');
|
||||
expect(backdrop).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have modal content container', () => {
|
||||
const { container } = renderWithI18n(<ConfirmationModal {...defaultProps} />);
|
||||
|
||||
const modal = container.querySelector('.bg-white.dark\\:bg-gray-800.rounded-xl');
|
||||
expect(modal).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle empty title', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} title="" />);
|
||||
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle empty message', () => {
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} message="" />);
|
||||
|
||||
const title = screen.getByText('Confirm Action');
|
||||
expect(title).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle very long title', () => {
|
||||
const longTitle = 'A'.repeat(200);
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} title={longTitle} />);
|
||||
|
||||
expect(screen.getByText(longTitle)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle very long message', () => {
|
||||
const longMessage = 'B'.repeat(500);
|
||||
renderWithI18n(<ConfirmationModal {...defaultProps} message={longMessage} />);
|
||||
|
||||
expect(screen.getByText(longMessage)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle rapid open/close state changes', () => {
|
||||
const { rerender } = renderWithI18n(<ConfirmationModal {...defaultProps} isOpen={true} />);
|
||||
expect(screen.getByText('Confirm Action')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<ConfirmationModal {...defaultProps} isOpen={false} />
|
||||
</I18nextProvider>
|
||||
);
|
||||
expect(screen.queryByText('Confirm Action')).not.toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<ConfirmationModal {...defaultProps} isOpen={true} />
|
||||
</I18nextProvider>
|
||||
);
|
||||
expect(screen.getByText('Confirm Action')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Complete User Flows', () => {
|
||||
it('should support complete confirmation flow', () => {
|
||||
const onConfirm = vi.fn();
|
||||
const onClose = vi.fn();
|
||||
|
||||
renderWithI18n(
|
||||
<ConfirmationModal
|
||||
{...defaultProps}
|
||||
onConfirm={onConfirm}
|
||||
onClose={onClose}
|
||||
title="Delete Item"
|
||||
message="Are you sure you want to delete this item?"
|
||||
variant="danger"
|
||||
confirmText="Delete"
|
||||
cancelText="Cancel"
|
||||
/>
|
||||
);
|
||||
|
||||
// User sees the modal
|
||||
expect(screen.getByText('Delete Item')).toBeInTheDocument();
|
||||
expect(screen.getByText('Are you sure you want to delete this item?')).toBeInTheDocument();
|
||||
|
||||
// User clicks confirm
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledTimes(1);
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should support complete cancellation flow', () => {
|
||||
const onConfirm = vi.fn();
|
||||
const onClose = vi.fn();
|
||||
|
||||
renderWithI18n(
|
||||
<ConfirmationModal
|
||||
{...defaultProps}
|
||||
onConfirm={onConfirm}
|
||||
onClose={onClose}
|
||||
variant="warning"
|
||||
/>
|
||||
);
|
||||
|
||||
// User sees the modal
|
||||
expect(screen.getByText('Confirm Action')).toBeInTheDocument();
|
||||
|
||||
// User clicks cancel
|
||||
fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
|
||||
|
||||
expect(onClose).toHaveBeenCalledTimes(1);
|
||||
expect(onConfirm).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should support loading state during async operation', () => {
|
||||
const onConfirm = vi.fn();
|
||||
|
||||
const { rerender } = renderWithI18n(
|
||||
<ConfirmationModal {...defaultProps} onConfirm={onConfirm} isLoading={false} />
|
||||
);
|
||||
|
||||
// Initial state - buttons enabled
|
||||
const confirmButton = screen.getByRole('button', { name: /confirm/i });
|
||||
expect(confirmButton).not.toBeDisabled();
|
||||
|
||||
// User clicks confirm
|
||||
fireEvent.click(confirmButton);
|
||||
expect(onConfirm).toHaveBeenCalledTimes(1);
|
||||
|
||||
// Parent component sets loading state
|
||||
rerender(
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<ConfirmationModal {...defaultProps} onConfirm={onConfirm} isLoading={true} />
|
||||
</I18nextProvider>
|
||||
);
|
||||
|
||||
// Buttons now disabled during async operation
|
||||
expect(screen.getByRole('button', { name: /confirm/i })).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
752
frontend/src/components/__tests__/EmailTemplateSelector.test.tsx
Normal file
752
frontend/src/components/__tests__/EmailTemplateSelector.test.tsx
Normal file
@@ -0,0 +1,752 @@
|
||||
/**
|
||||
* Unit tests for EmailTemplateSelector component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Rendering with templates list
|
||||
* - Template selection and onChange callback
|
||||
* - Selected template display (active state)
|
||||
* - Empty templates array handling
|
||||
* - Loading states
|
||||
* - Disabled state
|
||||
* - Category filtering
|
||||
* - Template info display
|
||||
* - Edit link functionality
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import React, { type ReactNode } from 'react';
|
||||
import EmailTemplateSelector from '../EmailTemplateSelector';
|
||||
import apiClient from '../../api/client';
|
||||
import { EmailTemplate } from '../../types';
|
||||
|
||||
// Mock apiClient
|
||||
vi.mock('../../api/client', () => ({
|
||||
default: {
|
||||
get: vi.fn(),
|
||||
},
|
||||
}));
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, fallback: string) => fallback,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test data factories
|
||||
const createMockEmailTemplate = (overrides?: Partial<EmailTemplate>): EmailTemplate => ({
|
||||
id: '1',
|
||||
name: 'Test Template',
|
||||
description: 'Test description',
|
||||
subject: 'Test Subject',
|
||||
htmlContent: '<p>Test content</p>',
|
||||
textContent: 'Test content',
|
||||
scope: 'BUSINESS',
|
||||
isDefault: false,
|
||||
category: 'APPOINTMENT',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
// Test wrapper with QueryClient
|
||||
const createWrapper = (queryClient: QueryClient) => {
|
||||
return ({ children }: { children: ReactNode }) => (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('EmailTemplateSelector', () => {
|
||||
let queryClient: QueryClient;
|
||||
const mockOnChange = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false, gcTime: 0 },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
});
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
queryClient.clear();
|
||||
});
|
||||
|
||||
describe('Rendering with templates', () => {
|
||||
it('should render with templates list', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Welcome Email' }),
|
||||
createMockEmailTemplate({ id: '2', name: 'Confirmation Email', category: 'CONFIRMATION' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
const options = Array.from(select.options);
|
||||
|
||||
expect(options).toHaveLength(3); // placeholder + 2 templates
|
||||
expect(options[1]).toHaveTextContent('Welcome Email (APPOINTMENT)');
|
||||
expect(options[2]).toHaveTextContent('Confirmation Email (CONFIRMATION)');
|
||||
});
|
||||
|
||||
it('should render templates without category suffix for OTHER category', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Custom Email', category: 'OTHER' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
const options = Array.from(select.options);
|
||||
|
||||
expect(options[1]).toHaveTextContent('Custom Email');
|
||||
expect(options[1]).not.toHaveTextContent('(OTHER)');
|
||||
});
|
||||
|
||||
it('should convert numeric IDs to strings', async () => {
|
||||
const mockData = [
|
||||
{
|
||||
id: 123,
|
||||
name: 'Numeric ID Template',
|
||||
description: 'Test',
|
||||
category: 'REMINDER',
|
||||
scope: 'BUSINESS',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: mockData });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options[1].value).toBe('123');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Template selection', () => {
|
||||
it('should select template on click', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
createMockEmailTemplate({ id: '2', name: 'Template 2' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
fireEvent.change(select, { target: { value: '2' } });
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith('2');
|
||||
});
|
||||
|
||||
it('should call onChange with undefined when selecting empty option', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
fireEvent.change(select, { target: { value: '' } });
|
||||
|
||||
expect(mockOnChange).toHaveBeenCalledWith(undefined);
|
||||
});
|
||||
|
||||
it('should handle numeric value prop', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={1} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.value).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Selected template display', () => {
|
||||
it('should show selected template as active', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({
|
||||
id: '1',
|
||||
name: 'Selected Template',
|
||||
description: 'This template is selected',
|
||||
}),
|
||||
createMockEmailTemplate({ id: '2', name: 'Other Template' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.value).toBe('1');
|
||||
});
|
||||
|
||||
it('should display selected template info with description', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({
|
||||
id: '1',
|
||||
name: 'Template Name',
|
||||
description: 'Template description text',
|
||||
}),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Template description text')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display template name when description is empty', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({
|
||||
id: '1',
|
||||
name: 'No Description Template',
|
||||
description: '',
|
||||
}),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No Description Template')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display edit link for selected template', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Editable Template' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const editLink = screen.getByRole('link', { name: /edit/i });
|
||||
expect(editLink).toBeInTheDocument();
|
||||
expect(editLink).toHaveAttribute('href', '#/email-templates');
|
||||
expect(editLink).toHaveAttribute('target', '_blank');
|
||||
expect(editLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
});
|
||||
|
||||
it('should not display template info when no template is selected', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const editLink = screen.queryByRole('link', { name: /edit/i });
|
||||
expect(editLink).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Empty templates array', () => {
|
||||
it('should handle empty templates array', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/no email templates yet/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display create link when templates array is empty', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const createLink = screen.getByRole('link', { name: /create your first template/i });
|
||||
expect(createLink).toBeInTheDocument();
|
||||
expect(createLink).toHaveAttribute('href', '#/email-templates');
|
||||
});
|
||||
});
|
||||
|
||||
it('should render select with only placeholder option when empty', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options).toHaveLength(1); // only placeholder
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Loading states', () => {
|
||||
it('should show loading text in placeholder when loading', async () => {
|
||||
vi.mocked(apiClient.get).mockImplementation(
|
||||
() => new Promise(() => {}) // Never resolves to keep loading state
|
||||
);
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options[0]).toHaveTextContent('Loading...');
|
||||
});
|
||||
|
||||
it('should disable select when loading', async () => {
|
||||
vi.mocked(apiClient.get).mockImplementation(
|
||||
() => new Promise(() => {}) // Never resolves
|
||||
);
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
const select = screen.getByRole('combobox');
|
||||
expect(select).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should not show empty state while loading', () => {
|
||||
vi.mocked(apiClient.get).mockImplementation(
|
||||
() => new Promise(() => {}) // Never resolves
|
||||
);
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
const emptyMessage = screen.queryByText(/no email templates yet/i);
|
||||
expect(emptyMessage).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Disabled state', () => {
|
||||
it('should disable select when disabled prop is true', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} disabled={true} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox');
|
||||
expect(select).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply disabled attribute when disabled prop is true', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} disabled={true} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox');
|
||||
expect(select).toBeDisabled();
|
||||
});
|
||||
|
||||
// Verify the select element has disabled attribute
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select).toHaveAttribute('disabled');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Category filtering', () => {
|
||||
it('should fetch templates with category filter', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} category="REMINDER" />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(apiClient.get).toHaveBeenCalledWith('/email-templates/?category=REMINDER');
|
||||
});
|
||||
});
|
||||
|
||||
it('should fetch templates without category filter when not provided', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(apiClient.get).toHaveBeenCalledWith('/email-templates/?');
|
||||
});
|
||||
});
|
||||
|
||||
it('should refetch when category changes', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValue({ data: [] });
|
||||
|
||||
const { rerender } = render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} category="REMINDER" />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(apiClient.get).toHaveBeenCalledWith('/email-templates/?category=REMINDER');
|
||||
});
|
||||
|
||||
vi.clearAllMocks();
|
||||
|
||||
rerender(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} category="CONFIRMATION" />
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(apiClient.get).toHaveBeenCalledWith('/email-templates/?category=CONFIRMATION');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Props and customization', () => {
|
||||
it('should use custom placeholder when provided', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector
|
||||
value={undefined}
|
||||
onChange={mockOnChange}
|
||||
placeholder="Choose an email template"
|
||||
/>,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options[0]).toHaveTextContent('Choose an email template');
|
||||
});
|
||||
});
|
||||
|
||||
it('should use default placeholder when not provided', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const select = screen.getByRole('combobox') as HTMLSelectElement;
|
||||
expect(select.options[0]).toHaveTextContent('Select a template...');
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply custom className', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector
|
||||
value={undefined}
|
||||
onChange={mockOnChange}
|
||||
className="custom-class"
|
||||
/>,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const container = screen.getByRole('combobox').parentElement?.parentElement;
|
||||
expect(container).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
|
||||
it('should work without className prop', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icons', () => {
|
||||
it('should display Mail icon', async () => {
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({ data: [] });
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const container = screen.getByRole('combobox').parentElement;
|
||||
const svg = container?.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display ExternalLink icon for selected template', async () => {
|
||||
const mockTemplates = [
|
||||
createMockEmailTemplate({ id: '1', name: 'Template 1' }),
|
||||
];
|
||||
|
||||
vi.mocked(apiClient.get).mockResolvedValueOnce({
|
||||
data: mockTemplates.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
category: t.category,
|
||||
scope: t.scope,
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
})),
|
||||
});
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value="1" onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
await waitFor(() => {
|
||||
const editLink = screen.getByRole('link', { name: /edit/i });
|
||||
const svg = editLink.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('API error handling', () => {
|
||||
it('should handle API errors gracefully', async () => {
|
||||
const error = new Error('API Error');
|
||||
vi.mocked(apiClient.get).mockRejectedValueOnce(error);
|
||||
|
||||
render(
|
||||
<EmailTemplateSelector value={undefined} onChange={mockOnChange} />,
|
||||
{ wrapper: createWrapper(queryClient) }
|
||||
);
|
||||
|
||||
// Component should still render the select
|
||||
const select = screen.getByRole('combobox');
|
||||
expect(select).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
264
frontend/src/components/__tests__/HelpButton.test.tsx
Normal file
264
frontend/src/components/__tests__/HelpButton.test.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
/**
|
||||
* Unit tests for HelpButton component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering
|
||||
* - Link navigation
|
||||
* - Icon display
|
||||
* - Text display and responsive behavior
|
||||
* - Accessibility attributes
|
||||
* - Custom className prop
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import HelpButton from '../HelpButton';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, fallback: string) => fallback,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('HelpButton', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the button', () => {
|
||||
render(<HelpButton helpPath="/help/getting-started" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render as a Link component with correct href', () => {
|
||||
render(<HelpButton helpPath="/help/resources" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveAttribute('href', '/help/resources');
|
||||
});
|
||||
|
||||
it('should render with different help paths', () => {
|
||||
const { rerender } = render(<HelpButton helpPath="/help/page1" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
let link = screen.getByRole('link');
|
||||
expect(link).toHaveAttribute('href', '/help/page1');
|
||||
|
||||
rerender(<HelpButton helpPath="/help/page2" />);
|
||||
|
||||
link = screen.getByRole('link');
|
||||
expect(link).toHaveAttribute('href', '/help/page2');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icon Display', () => {
|
||||
it('should display the HelpCircle icon', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
// Check for SVG icon (lucide-react renders as SVG)
|
||||
const svg = link.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Text Display', () => {
|
||||
it('should display help text', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const text = screen.getByText('Help');
|
||||
expect(text).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply responsive class to hide text on small screens', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const text = screen.getByText('Help');
|
||||
expect(text).toHaveClass('hidden', 'sm:inline');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have title attribute', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveAttribute('title', 'Help');
|
||||
});
|
||||
|
||||
it('should be keyboard accessible as a link', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link.tagName).toBe('A');
|
||||
});
|
||||
|
||||
it('should have accessible name from text content', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /help/i });
|
||||
expect(link).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply default classes', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveClass('inline-flex');
|
||||
expect(link).toHaveClass('items-center');
|
||||
expect(link).toHaveClass('gap-1.5');
|
||||
expect(link).toHaveClass('px-3');
|
||||
expect(link).toHaveClass('py-1.5');
|
||||
expect(link).toHaveClass('text-sm');
|
||||
expect(link).toHaveClass('rounded-lg');
|
||||
expect(link).toHaveClass('transition-colors');
|
||||
});
|
||||
|
||||
it('should apply color classes for light mode', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveClass('text-gray-500');
|
||||
expect(link).toHaveClass('hover:text-brand-600');
|
||||
expect(link).toHaveClass('hover:bg-gray-100');
|
||||
});
|
||||
|
||||
it('should apply color classes for dark mode', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveClass('dark:text-gray-400');
|
||||
expect(link).toHaveClass('dark:hover:text-brand-400');
|
||||
expect(link).toHaveClass('dark:hover:bg-gray-800');
|
||||
});
|
||||
|
||||
it('should apply custom className when provided', () => {
|
||||
render(<HelpButton helpPath="/help" className="custom-class" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('should merge custom className with default classes', () => {
|
||||
render(<HelpButton helpPath="/help" className="ml-auto" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveClass('ml-auto');
|
||||
expect(link).toHaveClass('inline-flex');
|
||||
expect(link).toHaveClass('items-center');
|
||||
});
|
||||
|
||||
it('should work without custom className', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translation for help text', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// The mock returns the fallback value
|
||||
const text = screen.getByText('Help');
|
||||
expect(text).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for title attribute', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toHaveAttribute('title', 'Help');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all props together', () => {
|
||||
render(
|
||||
<HelpButton
|
||||
helpPath="/help/advanced"
|
||||
className="custom-styling"
|
||||
/>,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link).toHaveAttribute('href', '/help/advanced');
|
||||
expect(link).toHaveAttribute('title', 'Help');
|
||||
expect(link).toHaveClass('custom-styling');
|
||||
expect(link).toHaveClass('inline-flex');
|
||||
|
||||
const icon = link.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
|
||||
const text = screen.getByText('Help');
|
||||
expect(text).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain structure with icon and text', () => {
|
||||
render(<HelpButton helpPath="/help" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link');
|
||||
const svg = link.querySelector('svg');
|
||||
const span = link.querySelector('span');
|
||||
|
||||
expect(svg).toBeInTheDocument();
|
||||
expect(span).toBeInTheDocument();
|
||||
expect(span).toHaveTextContent('Help');
|
||||
});
|
||||
});
|
||||
});
|
||||
560
frontend/src/components/__tests__/LanguageSelector.test.tsx
Normal file
560
frontend/src/components/__tests__/LanguageSelector.test.tsx
Normal file
@@ -0,0 +1,560 @@
|
||||
/**
|
||||
* Unit tests for LanguageSelector component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Rendering both dropdown and inline variants
|
||||
* - Current language display
|
||||
* - Dropdown open/close functionality
|
||||
* - Language selection and change
|
||||
* - Available languages display
|
||||
* - Flag display
|
||||
* - Click outside to close dropdown
|
||||
* - Accessibility attributes
|
||||
* - Responsive text hiding
|
||||
* - Custom className prop
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import LanguageSelector from '../LanguageSelector';
|
||||
|
||||
// Mock i18n
|
||||
const mockChangeLanguage = vi.fn();
|
||||
const mockCurrentLanguage = 'en';
|
||||
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
i18n: {
|
||||
language: mockCurrentLanguage,
|
||||
changeLanguage: mockChangeLanguage,
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock i18n module with supported languages
|
||||
vi.mock('../../i18n', () => ({
|
||||
supportedLanguages: [
|
||||
{ code: 'en', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'es', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
|
||||
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
|
||||
],
|
||||
}));
|
||||
|
||||
describe('LanguageSelector', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Dropdown Variant (Default)', () => {
|
||||
describe('Rendering', () => {
|
||||
it('should render the language selector button', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button', { expanded: false });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display current language name on desktop', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const languageName = screen.getByText('English');
|
||||
expect(languageName).toBeInTheDocument();
|
||||
expect(languageName).toHaveClass('hidden', 'sm:inline');
|
||||
});
|
||||
|
||||
it('should display current language flag by default', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const flag = screen.getByText('🇺🇸');
|
||||
expect(flag).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display Globe icon', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
const svg = button.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display ChevronDown icon', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
const chevron = button.querySelector('svg.w-4.h-4.transition-transform');
|
||||
expect(chevron).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not display flag when showFlag is false', () => {
|
||||
render(<LanguageSelector showFlag={false} />);
|
||||
|
||||
const flag = screen.queryByText('🇺🇸');
|
||||
expect(flag).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not show dropdown by default', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const dropdown = screen.queryByRole('listbox');
|
||||
expect(dropdown).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dropdown Open/Close', () => {
|
||||
it('should open dropdown when button clicked', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const dropdown = screen.getByRole('listbox');
|
||||
expect(dropdown).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('should close dropdown when button clicked again', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
|
||||
// Open
|
||||
fireEvent.click(button);
|
||||
expect(screen.getByRole('listbox')).toBeInTheDocument();
|
||||
|
||||
// Close
|
||||
fireEvent.click(button);
|
||||
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
it('should rotate chevron icon when dropdown is open', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
const chevron = button.querySelector('svg.w-4.h-4.transition-transform');
|
||||
|
||||
// Initially not rotated
|
||||
expect(chevron).not.toHaveClass('rotate-180');
|
||||
|
||||
// Open dropdown
|
||||
fireEvent.click(button);
|
||||
expect(chevron).toHaveClass('rotate-180');
|
||||
});
|
||||
|
||||
it('should close dropdown when clicking outside', async () => {
|
||||
render(
|
||||
<div>
|
||||
<LanguageSelector />
|
||||
<button>Outside Button</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { expanded: false });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(screen.getByRole('listbox')).toBeInTheDocument();
|
||||
|
||||
// Click outside
|
||||
const outsideButton = screen.getByText('Outside Button');
|
||||
fireEvent.mouseDown(outsideButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should not close dropdown when clicking inside dropdown', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const dropdown = screen.getByRole('listbox');
|
||||
fireEvent.mouseDown(dropdown);
|
||||
|
||||
expect(screen.getByRole('listbox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Language Selection', () => {
|
||||
it('should display all available languages in dropdown', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(screen.getAllByText('English')).toHaveLength(2); // One in button, one in dropdown
|
||||
expect(screen.getByText('Español')).toBeInTheDocument();
|
||||
expect(screen.getByText('Français')).toBeInTheDocument();
|
||||
expect(screen.getByText('Deutsch')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display flags for all languages in dropdown', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(screen.getAllByText('🇺🇸')).toHaveLength(2); // One in button, one in dropdown
|
||||
expect(screen.getByText('🇪🇸')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇫🇷')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇩🇪')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should mark current language with Check icon', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const options = screen.getAllByRole('option');
|
||||
const englishOption = options.find(opt => opt.textContent?.includes('English'));
|
||||
|
||||
expect(englishOption).toHaveAttribute('aria-selected', 'true');
|
||||
|
||||
// Check icon should be present
|
||||
const checkIcon = englishOption?.querySelector('svg.w-4.h-4');
|
||||
expect(checkIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should change language when option clicked', async () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const spanishOption = screen.getAllByRole('option').find(
|
||||
opt => opt.textContent?.includes('Español')
|
||||
);
|
||||
|
||||
fireEvent.click(spanishOption!);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockChangeLanguage).toHaveBeenCalledWith('es');
|
||||
});
|
||||
});
|
||||
|
||||
it('should close dropdown after language selection', async () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const frenchOption = screen.getAllByRole('option').find(
|
||||
opt => opt.textContent?.includes('Français')
|
||||
);
|
||||
|
||||
fireEvent.click(frenchOption!);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should highlight selected language with brand color', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const options = screen.getAllByRole('option');
|
||||
const englishOption = options.find(opt => opt.textContent?.includes('English'));
|
||||
|
||||
expect(englishOption).toHaveClass('bg-brand-50', 'dark:bg-brand-900/20');
|
||||
expect(englishOption).toHaveClass('text-brand-700', 'dark:text-brand-300');
|
||||
});
|
||||
|
||||
it('should not highlight non-selected languages with brand color', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const options = screen.getAllByRole('option');
|
||||
const spanishOption = options.find(opt => opt.textContent?.includes('Español'));
|
||||
|
||||
expect(spanishOption).toHaveClass('text-gray-700', 'dark:text-gray-300');
|
||||
expect(spanishOption).not.toHaveClass('bg-brand-50');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper ARIA attributes on button', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(button).toHaveAttribute('aria-haspopup', 'listbox');
|
||||
});
|
||||
|
||||
it('should update aria-expanded when dropdown opens', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
fireEvent.click(button);
|
||||
expect(button).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('should have aria-label on listbox', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const listbox = screen.getByRole('listbox');
|
||||
expect(listbox).toHaveAttribute('aria-label', 'Select language');
|
||||
});
|
||||
|
||||
it('should mark language options as selected correctly', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const options = screen.getAllByRole('option');
|
||||
const englishOption = options.find(opt => opt.textContent?.includes('English'));
|
||||
const spanishOption = options.find(opt => opt.textContent?.includes('Español'));
|
||||
|
||||
expect(englishOption).toHaveAttribute('aria-selected', 'true');
|
||||
expect(spanishOption).toHaveAttribute('aria-selected', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply default classes to button', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveClass('flex', 'items-center', 'gap-2');
|
||||
expect(button).toHaveClass('px-3', 'py-2');
|
||||
expect(button).toHaveClass('rounded-lg');
|
||||
expect(button).toHaveClass('transition-colors');
|
||||
});
|
||||
|
||||
it('should apply custom className when provided', () => {
|
||||
render(<LanguageSelector className="custom-class" />);
|
||||
|
||||
const container = screen.getByRole('button').parentElement;
|
||||
expect(container).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('should apply dropdown animation classes', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
|
||||
const dropdown = screen.getByRole('listbox').parentElement;
|
||||
expect(dropdown).toHaveClass('animate-in', 'fade-in', 'slide-in-from-top-2');
|
||||
});
|
||||
|
||||
it('should apply focus ring on button', () => {
|
||||
render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveClass('focus:outline-none', 'focus:ring-2', 'focus:ring-brand-500');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Inline Variant', () => {
|
||||
describe('Rendering', () => {
|
||||
it('should render inline variant when specified', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
// Should show buttons, not a dropdown
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBe(4); // One for each language
|
||||
});
|
||||
|
||||
it('should display all languages as separate buttons', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
expect(screen.getByText('English')).toBeInTheDocument();
|
||||
expect(screen.getByText('Español')).toBeInTheDocument();
|
||||
expect(screen.getByText('Français')).toBeInTheDocument();
|
||||
expect(screen.getByText('Deutsch')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display flags in inline variant by default', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
expect(screen.getByText('🇺🇸')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇪🇸')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇫🇷')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇩🇪')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not display flags when showFlag is false', () => {
|
||||
render(<LanguageSelector variant="inline" showFlag={false} />);
|
||||
|
||||
expect(screen.queryByText('🇺🇸')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('🇪🇸')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should highlight current language button', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const englishButton = screen.getByRole('button', { name: /English/i });
|
||||
expect(englishButton).toHaveClass('bg-brand-600', 'text-white');
|
||||
});
|
||||
|
||||
it('should not highlight non-selected language buttons', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const spanishButton = screen.getByRole('button', { name: /Español/i });
|
||||
expect(spanishButton).toHaveClass('bg-gray-100', 'text-gray-700');
|
||||
expect(spanishButton).not.toHaveClass('bg-brand-600');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Language Selection', () => {
|
||||
it('should change language when button clicked', async () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const frenchButton = screen.getByRole('button', { name: /Français/i });
|
||||
fireEvent.click(frenchButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockChangeLanguage).toHaveBeenCalledWith('fr');
|
||||
});
|
||||
});
|
||||
|
||||
it('should change language for each available language', async () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const germanButton = screen.getByRole('button', { name: /Deutsch/i });
|
||||
fireEvent.click(germanButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockChangeLanguage).toHaveBeenCalledWith('de');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply flex layout classes', () => {
|
||||
const { container } = render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const wrapper = container.firstChild;
|
||||
expect(wrapper).toHaveClass('flex', 'flex-wrap', 'gap-2');
|
||||
});
|
||||
|
||||
it('should apply custom className when provided', () => {
|
||||
const { container } = render(<LanguageSelector variant="inline" className="my-custom-class" />);
|
||||
|
||||
const wrapper = container.firstChild;
|
||||
expect(wrapper).toHaveClass('my-custom-class');
|
||||
});
|
||||
|
||||
it('should apply button styling classes', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
buttons.forEach(button => {
|
||||
expect(button).toHaveClass('px-3', 'py-1.5', 'rounded-lg', 'text-sm', 'font-medium', 'transition-colors');
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply hover classes to non-selected buttons', () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const spanishButton = screen.getByRole('button', { name: /Español/i });
|
||||
expect(spanishButton).toHaveClass('hover:bg-gray-200', 'dark:hover:bg-gray-600');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all dropdown props together', () => {
|
||||
render(
|
||||
<LanguageSelector
|
||||
variant="dropdown"
|
||||
showFlag={true}
|
||||
className="custom-class"
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(screen.getByText('English')).toBeInTheDocument();
|
||||
expect(screen.getByText('🇺🇸')).toBeInTheDocument();
|
||||
|
||||
const container = button.parentElement;
|
||||
expect(container).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('should render correctly with all inline props together', () => {
|
||||
const { container } = render(
|
||||
<LanguageSelector
|
||||
variant="inline"
|
||||
showFlag={true}
|
||||
className="inline-custom"
|
||||
/>
|
||||
);
|
||||
|
||||
const wrapper = container.firstChild;
|
||||
expect(wrapper).toHaveClass('inline-custom');
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
expect(buttons.length).toBe(4);
|
||||
|
||||
expect(screen.getByText('🇺🇸')).toBeInTheDocument();
|
||||
expect(screen.getByText('English')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain dropdown functionality across re-renders', () => {
|
||||
const { rerender } = render(<LanguageSelector />);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
fireEvent.click(button);
|
||||
expect(screen.getByRole('listbox')).toBeInTheDocument();
|
||||
|
||||
rerender(<LanguageSelector className="updated" />);
|
||||
expect(screen.getByRole('listbox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle missing language gracefully', () => {
|
||||
// The component should fall back to the first language if current language is not found
|
||||
render(<LanguageSelector />);
|
||||
|
||||
// Should still render without crashing
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should cleanup event listener on unmount', () => {
|
||||
const { unmount } = render(<LanguageSelector />);
|
||||
|
||||
const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener');
|
||||
unmount();
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
|
||||
});
|
||||
|
||||
it('should not call changeLanguage when clicking current language', async () => {
|
||||
render(<LanguageSelector variant="inline" />);
|
||||
|
||||
const englishButton = screen.getByRole('button', { name: /English/i });
|
||||
fireEvent.click(englishButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockChangeLanguage).toHaveBeenCalledWith('en');
|
||||
});
|
||||
|
||||
// Even if clicking the current language, it still calls changeLanguage
|
||||
// This is expected behavior (idempotent)
|
||||
});
|
||||
});
|
||||
});
|
||||
534
frontend/src/components/__tests__/MasqueradeBanner.test.tsx
Normal file
534
frontend/src/components/__tests__/MasqueradeBanner.test.tsx
Normal file
@@ -0,0 +1,534 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import MasqueradeBanner from '../MasqueradeBanner';
|
||||
import { User } from '../../types';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, options?: any) => {
|
||||
const translations: Record<string, string> = {
|
||||
'platform.masquerade.masqueradingAs': 'Masquerading as',
|
||||
'platform.masquerade.loggedInAs': `Logged in as ${options?.name || ''}`,
|
||||
'platform.masquerade.returnTo': `Return to ${options?.name || ''}`,
|
||||
'platform.masquerade.stopMasquerading': 'Stop Masquerading',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock lucide-react icons
|
||||
vi.mock('lucide-react', () => ({
|
||||
Eye: ({ size }: { size: number }) => <svg data-testid="eye-icon" width={size} height={size} />,
|
||||
XCircle: ({ size }: { size: number }) => <svg data-testid="xcircle-icon" width={size} height={size} />,
|
||||
}));
|
||||
|
||||
describe('MasqueradeBanner', () => {
|
||||
const mockOnStop = vi.fn();
|
||||
|
||||
const effectiveUser: User = {
|
||||
id: '2',
|
||||
name: 'John Doe',
|
||||
email: 'john@example.com',
|
||||
role: 'owner',
|
||||
};
|
||||
|
||||
const originalUser: User = {
|
||||
id: '1',
|
||||
name: 'Admin User',
|
||||
email: 'admin@platform.com',
|
||||
role: 'superuser',
|
||||
};
|
||||
|
||||
const previousUser: User = {
|
||||
id: '3',
|
||||
name: 'Manager User',
|
||||
email: 'manager@example.com',
|
||||
role: 'platform_manager',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders the banner with correct structure', () => {
|
||||
const { container } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check for main container - it's the first child div
|
||||
const banner = container.firstChild as HTMLElement;
|
||||
expect(banner).toBeInTheDocument();
|
||||
expect(banner).toHaveClass('bg-orange-600', 'text-white');
|
||||
});
|
||||
|
||||
it('displays the Eye icon', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const eyeIcon = screen.getByTestId('eye-icon');
|
||||
expect(eyeIcon).toBeInTheDocument();
|
||||
expect(eyeIcon).toHaveAttribute('width', '18');
|
||||
expect(eyeIcon).toHaveAttribute('height', '18');
|
||||
});
|
||||
|
||||
it('displays the XCircle icon in the button', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const xCircleIcon = screen.getByTestId('xcircle-icon');
|
||||
expect(xCircleIcon).toBeInTheDocument();
|
||||
expect(xCircleIcon).toHaveAttribute('width', '14');
|
||||
expect(xCircleIcon).toHaveAttribute('height', '14');
|
||||
});
|
||||
});
|
||||
|
||||
describe('User Information Display', () => {
|
||||
it('displays the effective user name and role', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText(/owner/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays the original user name', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Logged in as Admin User/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays masquerading as message', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/Masquerading as/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays different user roles correctly', () => {
|
||||
const staffUser: User = {
|
||||
id: '4',
|
||||
name: 'Staff Member',
|
||||
email: 'staff@example.com',
|
||||
role: 'staff',
|
||||
};
|
||||
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={staffUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Staff Member')).toBeInTheDocument();
|
||||
// Use a more specific query to avoid matching "Staff Member" text
|
||||
expect(screen.getByText(/\(staff\)/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Stop Masquerade Button', () => {
|
||||
it('renders the stop masquerade button when no previous user', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Stop Masquerading/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the return to user button when previous user exists', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={previousUser}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Return to Manager User/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onStop when button is clicked', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Stop Masquerading/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockOnStop).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onStop when return button is clicked with previous user', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={previousUser}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Return to Manager User/i });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockOnStop).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('can be clicked multiple times', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Stop Masquerading/i });
|
||||
fireEvent.click(button);
|
||||
fireEvent.click(button);
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(mockOnStop).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling and Visual State', () => {
|
||||
it('has warning/info styling with orange background', () => {
|
||||
const { container } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const banner = container.firstChild as HTMLElement;
|
||||
expect(banner).toHaveClass('bg-orange-600');
|
||||
expect(banner).toHaveClass('text-white');
|
||||
});
|
||||
|
||||
it('has proper button styling', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /Stop Masquerading/i });
|
||||
expect(button).toHaveClass('bg-white');
|
||||
expect(button).toHaveClass('text-orange-600');
|
||||
expect(button).toHaveClass('hover:bg-orange-50');
|
||||
});
|
||||
|
||||
it('has animated pulse effect on Eye icon container', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const eyeIcon = screen.getByTestId('eye-icon');
|
||||
const iconContainer = eyeIcon.closest('div');
|
||||
expect(iconContainer).toHaveClass('animate-pulse');
|
||||
});
|
||||
|
||||
it('has proper layout classes for flexbox', () => {
|
||||
const { container } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const banner = container.firstChild as HTMLElement;
|
||||
expect(banner).toHaveClass('flex');
|
||||
expect(banner).toHaveClass('items-center');
|
||||
expect(banner).toHaveClass('justify-between');
|
||||
});
|
||||
|
||||
it('has z-index for proper stacking', () => {
|
||||
const { container } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const banner = container.firstChild as HTMLElement;
|
||||
expect(banner).toHaveClass('z-50');
|
||||
expect(banner).toHaveClass('relative');
|
||||
});
|
||||
|
||||
it('has shadow for visual prominence', () => {
|
||||
const { container } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const banner = container.firstChild as HTMLElement;
|
||||
expect(banner).toHaveClass('shadow-md');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('handles users with numeric IDs', () => {
|
||||
const numericIdUser: User = {
|
||||
id: 123,
|
||||
name: 'Numeric User',
|
||||
email: 'numeric@example.com',
|
||||
role: 'customer',
|
||||
};
|
||||
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={numericIdUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Numeric User')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles users with long names', () => {
|
||||
const longNameUser: User = {
|
||||
id: '5',
|
||||
name: 'This Is A Very Long User Name That Should Still Display Properly',
|
||||
email: 'longname@example.com',
|
||||
role: 'manager',
|
||||
};
|
||||
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={longNameUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByText('This Is A Very Long User Name That Should Still Display Properly')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles all possible user roles', () => {
|
||||
const roles: Array<User['role']> = [
|
||||
'superuser',
|
||||
'platform_manager',
|
||||
'platform_support',
|
||||
'owner',
|
||||
'manager',
|
||||
'staff',
|
||||
'resource',
|
||||
'customer',
|
||||
];
|
||||
|
||||
roles.forEach((role) => {
|
||||
const { unmount } = render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={{ ...effectiveUser, role }}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(new RegExp(role, 'i'))).toBeInTheDocument();
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it('handles previousUser being null', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Stop Masquerading/i })).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Return to/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles previousUser being defined', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={previousUser}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /Return to Manager User/i })).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Stop Masquerading/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('has a clickable button element', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button.tagName).toBe('BUTTON');
|
||||
});
|
||||
|
||||
it('button has descriptive text', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toHaveTextContent(/Stop Masquerading/i);
|
||||
});
|
||||
|
||||
it('displays user information in semantic HTML', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
const strongElement = screen.getByText('John Doe');
|
||||
expect(strongElement.tagName).toBe('STRONG');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component Integration', () => {
|
||||
it('renders without crashing with minimal props', () => {
|
||||
const minimalEffectiveUser: User = {
|
||||
id: '1',
|
||||
name: 'Test',
|
||||
email: 'test@test.com',
|
||||
role: 'customer',
|
||||
};
|
||||
|
||||
const minimalOriginalUser: User = {
|
||||
id: '2',
|
||||
name: 'Admin',
|
||||
email: 'admin@test.com',
|
||||
role: 'superuser',
|
||||
};
|
||||
|
||||
expect(() =>
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={minimalEffectiveUser}
|
||||
originalUser={minimalOriginalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
)
|
||||
).not.toThrow();
|
||||
});
|
||||
|
||||
it('renders all required elements together', () => {
|
||||
render(
|
||||
<MasqueradeBanner
|
||||
effectiveUser={effectiveUser}
|
||||
originalUser={originalUser}
|
||||
previousUser={null}
|
||||
onStop={mockOnStop}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check all major elements are present
|
||||
expect(screen.getByTestId('eye-icon')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('xcircle-icon')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Masquerading as/i)).toBeInTheDocument();
|
||||
expect(screen.getByText('John Doe')).toBeInTheDocument();
|
||||
expect(screen.getByText(/Logged in as Admin User/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
714
frontend/src/components/__tests__/PlatformSidebar.test.tsx
Normal file
714
frontend/src/components/__tests__/PlatformSidebar.test.tsx
Normal file
@@ -0,0 +1,714 @@
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { BrowserRouter, MemoryRouter } from 'react-router-dom';
|
||||
import PlatformSidebar from '../PlatformSidebar';
|
||||
import { User } from '../../types';
|
||||
|
||||
// Mock the i18next module
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, fallback?: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'nav.platformDashboard': 'Platform Dashboard',
|
||||
'nav.dashboard': 'Dashboard',
|
||||
'nav.businesses': 'Businesses',
|
||||
'nav.users': 'Users',
|
||||
'nav.support': 'Support',
|
||||
'nav.staff': 'Staff',
|
||||
'nav.platformSettings': 'Platform Settings',
|
||||
'nav.help': 'Help',
|
||||
'nav.apiDocs': 'API Docs',
|
||||
};
|
||||
return translations[key] || fallback || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock the SmoothScheduleLogo component
|
||||
vi.mock('../SmoothScheduleLogo', () => ({
|
||||
default: ({ className }: { className?: string }) => (
|
||||
<div data-testid="smooth-schedule-logo" className={className}>Logo</div>
|
||||
),
|
||||
}));
|
||||
|
||||
describe('PlatformSidebar', () => {
|
||||
const mockSuperuser: User = {
|
||||
id: '1',
|
||||
name: 'Super User',
|
||||
email: 'super@example.com',
|
||||
role: 'superuser',
|
||||
};
|
||||
|
||||
const mockPlatformManager: User = {
|
||||
id: '2',
|
||||
name: 'Platform Manager',
|
||||
email: 'manager@example.com',
|
||||
role: 'platform_manager',
|
||||
};
|
||||
|
||||
const mockPlatformSupport: User = {
|
||||
id: '3',
|
||||
name: 'Platform Support',
|
||||
email: 'support@example.com',
|
||||
role: 'platform_support',
|
||||
};
|
||||
|
||||
const mockToggleCollapse = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders the sidebar with logo and user role', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
|
||||
expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
|
||||
expect(screen.getByText('superuser')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all navigation links for superuser', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Operations section
|
||||
expect(screen.getByText('Operations')).toBeInTheDocument();
|
||||
expect(screen.getByText('Dashboard')).toBeInTheDocument();
|
||||
expect(screen.getByText('Businesses')).toBeInTheDocument();
|
||||
expect(screen.getByText('Users')).toBeInTheDocument();
|
||||
expect(screen.getByText('Support')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Email Addresses')[0]).toBeInTheDocument();
|
||||
|
||||
// System section (superuser only)
|
||||
expect(screen.getByText('System')).toBeInTheDocument();
|
||||
expect(screen.getByText('Staff')).toBeInTheDocument();
|
||||
expect(screen.getByText('Platform Settings')).toBeInTheDocument();
|
||||
|
||||
// Help section
|
||||
expect(screen.getByText('Help')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Email Settings')[0]).toBeInTheDocument();
|
||||
expect(screen.getByText('API Docs')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides system section for platform manager', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformManager}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Operations section visible
|
||||
expect(screen.getByText('Dashboard')).toBeInTheDocument();
|
||||
expect(screen.getByText('Businesses')).toBeInTheDocument();
|
||||
|
||||
// System section not visible
|
||||
expect(screen.queryByText('System')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Staff')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Platform Settings')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides system section and dashboard for platform support', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformSupport}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Dashboard not visible for support
|
||||
expect(screen.queryByText('Dashboard')).not.toBeInTheDocument();
|
||||
|
||||
// Operations section visible
|
||||
expect(screen.getByText('Businesses')).toBeInTheDocument();
|
||||
expect(screen.getByText('Users')).toBeInTheDocument();
|
||||
|
||||
// System section not visible
|
||||
expect(screen.queryByText('System')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Staff')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays role with underscores replaced by spaces', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformManager}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByText('platform manager')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Collapsed State', () => {
|
||||
it('hides text labels when collapsed', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={true}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Logo should be visible
|
||||
expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
|
||||
|
||||
// Text should be hidden
|
||||
expect(screen.queryByText('Smooth Schedule')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('superuser')).not.toBeInTheDocument();
|
||||
|
||||
// Section headers should show abbreviated versions
|
||||
expect(screen.getByText('Ops')).toBeInTheDocument();
|
||||
expect(screen.getByText('Sys')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows full section names when expanded', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Operations')).toBeInTheDocument();
|
||||
expect(screen.getByText('System')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Ops')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Sys')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies correct width classes based on collapsed state', () => {
|
||||
const { container, rerender } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('w-64');
|
||||
expect(sidebar).not.toHaveClass('w-20');
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={true}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(sidebar).toHaveClass('w-20');
|
||||
expect(sidebar).not.toHaveClass('w-64');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Toggle Collapse Button', () => {
|
||||
it('calls toggleCollapse when clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const toggleButton = screen.getByRole('button', { name: /collapse sidebar/i });
|
||||
await user.click(toggleButton);
|
||||
|
||||
expect(mockToggleCollapse).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('has correct aria-label when collapsed', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={true}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /expand sidebar/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has correct aria-label when expanded', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('button', { name: /collapse sidebar/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Active Link Highlighting', () => {
|
||||
it('highlights the active link based on current path', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/platform/businesses']}>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const businessesLink = screen.getByRole('link', { name: /businesses/i });
|
||||
const usersLink = screen.getByRole('link', { name: /^users$/i });
|
||||
|
||||
// Active link should have active classes
|
||||
expect(businessesLink).toHaveClass('bg-gray-700', 'text-white');
|
||||
expect(businessesLink).not.toHaveClass('text-gray-400');
|
||||
|
||||
// Inactive link should have inactive classes
|
||||
expect(usersLink).toHaveClass('text-gray-400');
|
||||
expect(usersLink).not.toHaveClass('bg-gray-700');
|
||||
});
|
||||
|
||||
it('highlights dashboard link when on dashboard route', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/platform/dashboard']}>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const dashboardLink = screen.getByRole('link', { name: /dashboard/i });
|
||||
expect(dashboardLink).toHaveClass('bg-gray-700', 'text-white');
|
||||
});
|
||||
|
||||
it('highlights link for nested routes', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/platform/businesses/123']}>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const businessesLink = screen.getByRole('link', { name: /businesses/i });
|
||||
expect(businessesLink).toHaveClass('bg-gray-700', 'text-white');
|
||||
});
|
||||
|
||||
it('highlights staff link when on staff route', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/platform/staff']}>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const staffLink = screen.getByRole('link', { name: /staff/i });
|
||||
expect(staffLink).toHaveClass('bg-gray-700', 'text-white');
|
||||
});
|
||||
|
||||
it('highlights help link when on help route', () => {
|
||||
render(
|
||||
<MemoryRouter initialEntries={['/help/api']}>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
const apiDocsLink = screen.getByRole('link', { name: /api docs/i });
|
||||
expect(apiDocsLink).toHaveClass('bg-gray-700', 'text-white');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation Links', () => {
|
||||
it('has correct href attributes for all links', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('link', { name: /dashboard/i })).toHaveAttribute('href', '/platform/dashboard');
|
||||
expect(screen.getByRole('link', { name: /businesses/i })).toHaveAttribute('href', '/platform/businesses');
|
||||
expect(screen.getByRole('link', { name: /^users$/i })).toHaveAttribute('href', '/platform/users');
|
||||
expect(screen.getByRole('link', { name: /support/i })).toHaveAttribute('href', '/platform/support');
|
||||
expect(screen.getByRole('link', { name: /staff/i })).toHaveAttribute('href', '/platform/staff');
|
||||
expect(screen.getByRole('link', { name: /platform settings/i })).toHaveAttribute('href', '/platform/settings');
|
||||
expect(screen.getByRole('link', { name: /api docs/i })).toHaveAttribute('href', '/help/api');
|
||||
});
|
||||
|
||||
it('shows title attributes on links for accessibility', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('link', { name: /dashboard/i })).toHaveAttribute('title', 'Platform Dashboard');
|
||||
expect(screen.getByRole('link', { name: /businesses/i })).toHaveAttribute('title', 'Businesses');
|
||||
expect(screen.getByRole('link', { name: /^users$/i })).toHaveAttribute('title', 'Users');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icons', () => {
|
||||
it('renders lucide-react icons for all navigation items', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Check that SVG icons are present (lucide-react renders as SVG)
|
||||
const svgs = container.querySelectorAll('svg');
|
||||
// Should have: logo + icons for each nav item
|
||||
expect(svgs.length).toBeGreaterThanOrEqual(10);
|
||||
});
|
||||
|
||||
it('keeps icons visible when collapsed', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={true}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Icons should still be present when collapsed
|
||||
const svgs = container.querySelectorAll('svg');
|
||||
expect(svgs.length).toBeGreaterThanOrEqual(10);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Design', () => {
|
||||
it('applies flex column layout', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('flex', 'flex-col', 'h-full');
|
||||
});
|
||||
|
||||
it('applies dark theme colors', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('bg-gray-900', 'text-white');
|
||||
});
|
||||
|
||||
it('has transition classes for smooth collapse animation', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const sidebar = container.firstChild as HTMLElement;
|
||||
expect(sidebar).toHaveClass('transition-all', 'duration-300');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Role-Based Access Control', () => {
|
||||
it('shows dashboard for superuser and platform_manager only', () => {
|
||||
const { rerender } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('Dashboard')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformManager}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('Dashboard')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformSupport}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('Dashboard')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows system section only for superuser', () => {
|
||||
const { rerender } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('System')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Staff')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformManager}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('System')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Staff')).not.toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockPlatformSupport}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
expect(screen.queryByText('System')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('always shows common operations links for all roles', () => {
|
||||
const roles: User[] = [mockSuperuser, mockPlatformManager, mockPlatformSupport];
|
||||
|
||||
roles.forEach((user) => {
|
||||
const { unmount } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={user}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Businesses')).toBeInTheDocument();
|
||||
expect(screen.getByText('Users')).toBeInTheDocument();
|
||||
expect(screen.getByText('Support')).toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('has semantic HTML structure with nav element', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const nav = container.querySelector('nav');
|
||||
expect(nav).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('provides proper button label for keyboard users', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /collapse sidebar/i });
|
||||
expect(button).toHaveAccessibleName();
|
||||
});
|
||||
|
||||
it('all links have accessible names', () => {
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
links.forEach((link) => {
|
||||
expect(link).toHaveAccessibleName();
|
||||
});
|
||||
});
|
||||
|
||||
it('maintains focus visibility for keyboard navigation', () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /collapse sidebar/i });
|
||||
expect(button).toHaveClass('focus:outline-none');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('handles user with empty name gracefully', () => {
|
||||
const userWithoutName: User = {
|
||||
...mockSuperuser,
|
||||
name: '',
|
||||
};
|
||||
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={userWithoutName}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Should still render without crashing
|
||||
expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles missing translation gracefully', () => {
|
||||
// Translation mock should return the key if translation is missing
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
// Should render without errors even with missing translations
|
||||
expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles rapid collapse/expand toggling', async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
render(
|
||||
<BrowserRouter>
|
||||
<PlatformSidebar
|
||||
user={mockSuperuser}
|
||||
isCollapsed={false}
|
||||
toggleCollapse={mockToggleCollapse}
|
||||
/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button', { name: /collapse sidebar/i });
|
||||
|
||||
// Rapidly click multiple times
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
await user.click(button);
|
||||
|
||||
expect(mockToggleCollapse).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
453
frontend/src/components/__tests__/Portal.test.tsx
Normal file
453
frontend/src/components/__tests__/Portal.test.tsx
Normal file
@@ -0,0 +1,453 @@
|
||||
/**
|
||||
* Unit tests for Portal component
|
||||
*
|
||||
* Tests the Portal component which uses ReactDOM.createPortal to render
|
||||
* children outside the parent DOM hierarchy. This is useful for modals,
|
||||
* tooltips, and other UI elements that need to escape parent stacking contexts.
|
||||
*/
|
||||
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { render, screen, cleanup } from '@testing-library/react';
|
||||
import Portal from '../Portal';
|
||||
|
||||
describe('Portal', () => {
|
||||
afterEach(() => {
|
||||
// Clean up any rendered components
|
||||
cleanup();
|
||||
});
|
||||
|
||||
describe('Basic Rendering', () => {
|
||||
it('should render children', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Portal Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('portal-content')).toBeInTheDocument();
|
||||
expect(screen.getByText('Portal Content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render text content', () => {
|
||||
render(<Portal>Simple text content</Portal>);
|
||||
|
||||
expect(screen.getByText('Simple text content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render complex JSX children', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<div>
|
||||
<h1>Title</h1>
|
||||
<p>Description</p>
|
||||
<button>Click me</button>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('heading', { name: 'Title' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Description')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Portal Behavior', () => {
|
||||
it('should render content to document.body', () => {
|
||||
const { container } = render(
|
||||
<div id="root">
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Portal Content</div>
|
||||
</Portal>
|
||||
</div>
|
||||
);
|
||||
|
||||
const portalContent = screen.getByTestId('portal-content');
|
||||
|
||||
// Portal content should NOT be inside the container
|
||||
expect(container.contains(portalContent)).toBe(false);
|
||||
|
||||
// Portal content SHOULD be inside document.body
|
||||
expect(document.body.contains(portalContent)).toBe(true);
|
||||
});
|
||||
|
||||
it('should escape parent DOM hierarchy', () => {
|
||||
const { container } = render(
|
||||
<div id="parent" style={{ position: 'relative', zIndex: 1 }}>
|
||||
<div id="child">
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Escaped Content</div>
|
||||
</Portal>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const portalContent = screen.getByTestId('portal-content');
|
||||
const parent = container.querySelector('#parent');
|
||||
|
||||
// Portal content should not be inside parent
|
||||
expect(parent?.contains(portalContent)).toBe(false);
|
||||
|
||||
// Portal content should be direct child of body
|
||||
expect(portalContent.parentElement).toBe(document.body);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Multiple Children', () => {
|
||||
it('should render multiple children', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<div data-testid="child-1">First child</div>
|
||||
<div data-testid="child-2">Second child</div>
|
||||
<div data-testid="child-3">Third child</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('child-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('child-2')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('child-3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render an array of children', () => {
|
||||
const items = ['Item 1', 'Item 2', 'Item 3'];
|
||||
|
||||
render(
|
||||
<Portal>
|
||||
{items.map((item, index) => (
|
||||
<div key={index} data-testid={`item-${index}`}>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</Portal>
|
||||
);
|
||||
|
||||
items.forEach((item, index) => {
|
||||
expect(screen.getByTestId(`item-${index}`)).toBeInTheDocument();
|
||||
expect(screen.getByText(item)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render nested components', () => {
|
||||
const NestedComponent = () => (
|
||||
<div data-testid="nested">
|
||||
<span>Nested Component</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
render(
|
||||
<Portal>
|
||||
<NestedComponent />
|
||||
<div>Other content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('nested')).toBeInTheDocument();
|
||||
expect(screen.getByText('Nested Component')).toBeInTheDocument();
|
||||
expect(screen.getByText('Other content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Mounting Behavior', () => {
|
||||
it('should not render before component is mounted', () => {
|
||||
// This test verifies the internal mounting state
|
||||
const { rerender } = render(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
// After initial render, content should be present
|
||||
expect(screen.getByTestId('portal-content')).toBeInTheDocument();
|
||||
|
||||
// Re-render should still show content
|
||||
rerender(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Updated Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Updated Content')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Multiple Portals', () => {
|
||||
it('should support multiple portal instances', () => {
|
||||
render(
|
||||
<div>
|
||||
<Portal>
|
||||
<div data-testid="portal-1">Portal 1</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div data-testid="portal-2">Portal 2</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div data-testid="portal-3">Portal 3</div>
|
||||
</Portal>
|
||||
</div>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('portal-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('portal-2')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('portal-3')).toBeInTheDocument();
|
||||
|
||||
// All portals should be in document.body
|
||||
expect(document.body.contains(screen.getByTestId('portal-1'))).toBe(true);
|
||||
expect(document.body.contains(screen.getByTestId('portal-2'))).toBe(true);
|
||||
expect(document.body.contains(screen.getByTestId('portal-3'))).toBe(true);
|
||||
});
|
||||
|
||||
it('should keep portals separate from each other', () => {
|
||||
render(
|
||||
<div>
|
||||
<Portal>
|
||||
<div data-testid="portal-1">
|
||||
<span data-testid="content-1">Content 1</span>
|
||||
</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div data-testid="portal-2">
|
||||
<span data-testid="content-2">Content 2</span>
|
||||
</div>
|
||||
</Portal>
|
||||
</div>
|
||||
);
|
||||
|
||||
const portal1 = screen.getByTestId('portal-1');
|
||||
const portal2 = screen.getByTestId('portal-2');
|
||||
const content1 = screen.getByTestId('content-1');
|
||||
const content2 = screen.getByTestId('content-2');
|
||||
|
||||
// Each portal should contain only its own content
|
||||
expect(portal1.contains(content1)).toBe(true);
|
||||
expect(portal1.contains(content2)).toBe(false);
|
||||
expect(portal2.contains(content2)).toBe(true);
|
||||
expect(portal2.contains(content1)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Cleanup', () => {
|
||||
it('should remove content from body when unmounted', () => {
|
||||
const { unmount } = render(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Temporary Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
// Content should exist initially
|
||||
expect(screen.getByTestId('portal-content')).toBeInTheDocument();
|
||||
|
||||
// Unmount the component
|
||||
unmount();
|
||||
|
||||
// Content should be removed from DOM
|
||||
expect(screen.queryByTestId('portal-content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should clean up multiple portals on unmount', () => {
|
||||
const { unmount } = render(
|
||||
<div>
|
||||
<Portal>
|
||||
<div data-testid="portal-1">Portal 1</div>
|
||||
</Portal>
|
||||
<Portal>
|
||||
<div data-testid="portal-2">Portal 2</div>
|
||||
</Portal>
|
||||
</div>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('portal-1')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('portal-2')).toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
|
||||
expect(screen.queryByTestId('portal-1')).not.toBeInTheDocument();
|
||||
expect(screen.queryByTestId('portal-2')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Re-rendering', () => {
|
||||
it('should update content on re-render', () => {
|
||||
const { rerender } = render(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Initial Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Initial Content')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<Portal>
|
||||
<div data-testid="portal-content">Updated Content</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Updated Content')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Initial Content')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle prop changes', () => {
|
||||
const TestComponent = ({ message }: { message: string }) => (
|
||||
<Portal>
|
||||
<div data-testid="message">{message}</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
const { rerender } = render(<TestComponent message="First message" />);
|
||||
|
||||
expect(screen.getByText('First message')).toBeInTheDocument();
|
||||
|
||||
rerender(<TestComponent message="Second message" />);
|
||||
|
||||
expect(screen.getByText('Second message')).toBeInTheDocument();
|
||||
expect(screen.queryByText('First message')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle empty children', () => {
|
||||
render(<Portal>{null}</Portal>);
|
||||
|
||||
// Should not throw error
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle undefined children', () => {
|
||||
render(<Portal>{undefined}</Portal>);
|
||||
|
||||
// Should not throw error
|
||||
expect(document.body).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle boolean children', () => {
|
||||
render(
|
||||
<Portal>
|
||||
{false && <div>Should not render</div>}
|
||||
{true && <div data-testid="should-render">Should render</div>}
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.queryByText('Should not render')).not.toBeInTheDocument();
|
||||
expect(screen.getByTestId('should-render')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle conditional rendering', () => {
|
||||
const { rerender } = render(
|
||||
<Portal>
|
||||
{false && <div data-testid="conditional">Conditional Content</div>}
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.queryByTestId('conditional')).not.toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<Portal>
|
||||
{true && <div data-testid="conditional">Conditional Content</div>}
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('conditional')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration with Parent Components', () => {
|
||||
it('should work inside modals', () => {
|
||||
const Modal = ({ children }: { children: React.ReactNode }) => (
|
||||
<div className="modal" data-testid="modal">
|
||||
<Portal>{children}</Portal>
|
||||
</div>
|
||||
);
|
||||
|
||||
const { container } = render(
|
||||
<Modal>
|
||||
<div data-testid="modal-content">Modal Content</div>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
const modalContent = screen.getByTestId('modal-content');
|
||||
const modal = container.querySelector('[data-testid="modal"]');
|
||||
|
||||
// Modal content should not be inside modal container
|
||||
expect(modal?.contains(modalContent)).toBe(false);
|
||||
|
||||
// Modal content should be in document.body
|
||||
expect(document.body.contains(modalContent)).toBe(true);
|
||||
});
|
||||
|
||||
it('should preserve event handlers', () => {
|
||||
let clicked = false;
|
||||
const handleClick = () => {
|
||||
clicked = true;
|
||||
};
|
||||
|
||||
render(
|
||||
<Portal>
|
||||
<button data-testid="button" onClick={handleClick}>
|
||||
Click me
|
||||
</button>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
const button = screen.getByTestId('button');
|
||||
button.click();
|
||||
|
||||
expect(clicked).toBe(true);
|
||||
});
|
||||
|
||||
it('should preserve CSS classes and styles', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<div
|
||||
data-testid="styled-content"
|
||||
className="custom-class"
|
||||
style={{ color: 'red', fontSize: '16px' }}
|
||||
>
|
||||
Styled Content
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
const styledContent = screen.getByTestId('styled-content');
|
||||
|
||||
expect(styledContent).toHaveClass('custom-class');
|
||||
// Check styles individually - color may be normalized to rgb()
|
||||
expect(styledContent.style.color).toBeTruthy();
|
||||
expect(styledContent.style.fontSize).toBe('16px');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should maintain ARIA attributes', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<div
|
||||
data-testid="aria-content"
|
||||
role="dialog"
|
||||
aria-label="Test Dialog"
|
||||
aria-describedby="description"
|
||||
>
|
||||
<div id="description">Dialog description</div>
|
||||
</div>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
const content = screen.getByTestId('aria-content');
|
||||
|
||||
expect(content).toHaveAttribute('role', 'dialog');
|
||||
expect(content).toHaveAttribute('aria-label', 'Test Dialog');
|
||||
expect(content).toHaveAttribute('aria-describedby', 'description');
|
||||
});
|
||||
|
||||
it('should support semantic HTML inside portal', () => {
|
||||
render(
|
||||
<Portal>
|
||||
<dialog open data-testid="dialog">
|
||||
<h2>Dialog Title</h2>
|
||||
<p>Dialog content</p>
|
||||
</dialog>
|
||||
</Portal>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('dialog')).toBeInTheDocument();
|
||||
expect(screen.getByRole('heading', { name: 'Dialog Title' })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
681
frontend/src/components/__tests__/QuotaWarningBanner.test.tsx
Normal file
681
frontend/src/components/__tests__/QuotaWarningBanner.test.tsx
Normal file
@@ -0,0 +1,681 @@
|
||||
/**
|
||||
* Unit tests for QuotaWarningBanner component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Rendering based on quota overage state
|
||||
* - Critical, urgent, and warning severity levels
|
||||
* - Display of correct percentage and usage information
|
||||
* - Multiple overages display
|
||||
* - Manage Quota button/link functionality
|
||||
* - Dismiss button functionality
|
||||
* - Date formatting
|
||||
* - Internationalization (i18n)
|
||||
* - Accessibility attributes
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import QuotaWarningBanner from '../QuotaWarningBanner';
|
||||
import { QuotaOverage } from '../../api/auth';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, fallback: string, options?: Record<string, unknown>) => {
|
||||
// Handle interpolation for dynamic values
|
||||
if (options) {
|
||||
let result = fallback;
|
||||
Object.entries(options).forEach(([key, value]) => {
|
||||
result = result.replace(`{{${key}}}`, String(value));
|
||||
});
|
||||
return result;
|
||||
}
|
||||
return fallback;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
// Test data factories
|
||||
const createMockOverage = (overrides?: Partial<QuotaOverage>): QuotaOverage => ({
|
||||
id: 1,
|
||||
quota_type: 'resources',
|
||||
display_name: 'Resources',
|
||||
current_usage: 15,
|
||||
allowed_limit: 10,
|
||||
overage_amount: 5,
|
||||
days_remaining: 14,
|
||||
grace_period_ends_at: '2025-12-21T00:00:00Z',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
describe('QuotaWarningBanner', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering Conditions', () => {
|
||||
it('should not render when overages array is empty', () => {
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={[]} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('should not render when overages is null', () => {
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={null as any} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('should not render when overages is undefined', () => {
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={undefined as any} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('should render when quota is near limit (warning state)', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 14 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/quota exceeded/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render when quota is critical (1 day remaining)', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 1 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/urgent.*automatic archiving tomorrow/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render when quota is urgent (7 days remaining)', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 7 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/action required.*7 days left/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Severity Levels and Styling', () => {
|
||||
it('should apply warning styles for normal overages (>7 days)', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 14 })];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const banner = container.querySelector('div[class*="bg-amber-100"]');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply urgent styles for 7 days or less', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 7 })];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const banner = container.querySelector('div[class*="bg-amber-500"]');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply critical styles for 1 day or less', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 1 })];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const banner = container.querySelector('div[class*="bg-red-600"]');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply critical styles for 0 days remaining', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 0 })];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const banner = container.querySelector('div[class*="bg-red-600"]');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Usage and Percentage Display', () => {
|
||||
it('should display correct overage amount', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
overage_amount: 5,
|
||||
display_name: 'Resources',
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/you have 5 Resources over your plan limit/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display current usage and limit in multi-overage list', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
id: 1,
|
||||
current_usage: 15,
|
||||
allowed_limit: 10,
|
||||
display_name: 'Staff Members',
|
||||
}),
|
||||
createMockOverage({
|
||||
id: 2,
|
||||
current_usage: 20,
|
||||
allowed_limit: 15,
|
||||
display_name: 'Resources',
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Usage/limit is shown in the "All overages" list when there are multiple
|
||||
expect(screen.getByText(/Staff Members: 15\/10/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Resources: 20\/15/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display quota type name', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
display_name: 'Calendar Events',
|
||||
overage_amount: 100,
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/you have 100 Calendar Events over your plan limit/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should format and display grace period end date', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
grace_period_ends_at: '2025-12-25T00:00:00Z',
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Date formatting will depend on locale, but should contain the date components
|
||||
const detailsText = screen.getByText(/grace period ends/i);
|
||||
expect(detailsText).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Multiple Overages', () => {
|
||||
it('should display most urgent overage in main message', () => {
|
||||
const overages = [
|
||||
createMockOverage({ id: 1, days_remaining: 14, display_name: 'Resources' }),
|
||||
createMockOverage({ id: 2, days_remaining: 3, display_name: 'Staff Members' }),
|
||||
createMockOverage({ id: 3, days_remaining: 7, display_name: 'Events' }),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Should show the most urgent (3 days)
|
||||
expect(screen.getByText(/action required.*3 days left/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show additional overages section when multiple overages exist', () => {
|
||||
const overages = [
|
||||
createMockOverage({ id: 1, days_remaining: 14, display_name: 'Resources', current_usage: 15, allowed_limit: 10, overage_amount: 5 }),
|
||||
createMockOverage({ id: 2, days_remaining: 7, display_name: 'Staff', current_usage: 8, allowed_limit: 5, overage_amount: 3 }),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/all overages:/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should list all overages with details in the additional section', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
id: 1,
|
||||
display_name: 'Resources',
|
||||
current_usage: 15,
|
||||
allowed_limit: 10,
|
||||
overage_amount: 5,
|
||||
days_remaining: 14,
|
||||
}),
|
||||
createMockOverage({
|
||||
id: 2,
|
||||
display_name: 'Staff',
|
||||
current_usage: 8,
|
||||
allowed_limit: 5,
|
||||
overage_amount: 3,
|
||||
days_remaining: 7,
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/Resources: 15\/10/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/over by 5/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Staff: 8\/5/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/over by 3/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not show additional overages section for single overage', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.queryByText(/all overages:/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display "expires today" for 0 days remaining in overage list', () => {
|
||||
const overages = [
|
||||
createMockOverage({ id: 1, days_remaining: 14 }),
|
||||
createMockOverage({ id: 2, days_remaining: 0, display_name: 'Critical Item' }),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/expires today!/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Manage Quota Button', () => {
|
||||
it('should render Manage Quota link', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should link to settings/quota page', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toHaveAttribute('href', '/settings/quota');
|
||||
});
|
||||
|
||||
it('should display external link icon', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
const icon = link.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply warning button styles for normal overages', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 14 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toHaveClass('bg-amber-600');
|
||||
});
|
||||
|
||||
it('should apply urgent button styles for urgent/critical overages', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 7 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toHaveClass('bg-white/20');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dismiss Button', () => {
|
||||
it('should render dismiss button when onDismiss prop is provided', () => {
|
||||
const overages = [createMockOverage()];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
expect(dismissButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render dismiss button when onDismiss prop is not provided', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const dismissButton = screen.queryByRole('button', { name: /dismiss/i });
|
||||
expect(dismissButton).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call onDismiss when dismiss button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const overages = [createMockOverage()];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
await user.click(dismissButton);
|
||||
|
||||
expect(onDismiss).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should display X icon in dismiss button', () => {
|
||||
const overages = [createMockOverage()];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
const icon = dismissButton.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have alert icon with appropriate styling', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
// AlertTriangle icon should be present
|
||||
const icon = container.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have accessible label for dismiss button', () => {
|
||||
const overages = [createMockOverage()];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
expect(dismissButton).toHaveAttribute('aria-label', 'Dismiss');
|
||||
});
|
||||
|
||||
it('should use semantic HTML structure', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 14 })];
|
||||
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
// Should have proper div structure
|
||||
expect(container.querySelector('div')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have accessible link for Manage Quota', () => {
|
||||
const overages = [createMockOverage()];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link.tagName).toBe('A');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Message Priority', () => {
|
||||
it('should show critical message for 1 day remaining', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 1 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/urgent.*automatic archiving tomorrow/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show urgent message for 2-7 days remaining', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 5 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/action required.*5 days left/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show warning message for more than 7 days remaining', () => {
|
||||
const overages = [createMockOverage({ days_remaining: 10 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/quota exceeded for 1 item/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show count of overages in warning message', () => {
|
||||
const overages = [
|
||||
createMockOverage({ id: 1, days_remaining: 14 }),
|
||||
createMockOverage({ id: 2, days_remaining: 10 }),
|
||||
createMockOverage({ id: 3, days_remaining: 12 }),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/quota exceeded for 3 item/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete banner with all elements', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
id: 1,
|
||||
quota_type: 'resources',
|
||||
display_name: 'Resources',
|
||||
current_usage: 15,
|
||||
allowed_limit: 10,
|
||||
overage_amount: 5,
|
||||
days_remaining: 7,
|
||||
grace_period_ends_at: '2025-12-21T00:00:00Z',
|
||||
}),
|
||||
];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Check main message
|
||||
expect(screen.getByText(/action required.*7 days left/i)).toBeInTheDocument();
|
||||
|
||||
// Check details
|
||||
expect(screen.getByText(/you have 5 Resources over your plan limit/i)).toBeInTheDocument();
|
||||
|
||||
// Check Manage Quota link
|
||||
const link = screen.getByRole('link', { name: /manage quota/i });
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link).toHaveAttribute('href', '/settings/quota');
|
||||
|
||||
// Check dismiss button
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
expect(dismissButton).toBeInTheDocument();
|
||||
|
||||
// Check icons are present (via SVG elements)
|
||||
const { container } = render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
const icons = container.querySelectorAll('svg');
|
||||
expect(icons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should handle complex multi-overage scenario', async () => {
|
||||
const user = userEvent.setup();
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
id: 1,
|
||||
display_name: 'Resources',
|
||||
current_usage: 15,
|
||||
allowed_limit: 10,
|
||||
overage_amount: 5,
|
||||
days_remaining: 14,
|
||||
}),
|
||||
createMockOverage({
|
||||
id: 2,
|
||||
display_name: 'Staff Members',
|
||||
current_usage: 12,
|
||||
allowed_limit: 8,
|
||||
overage_amount: 4,
|
||||
days_remaining: 2,
|
||||
}),
|
||||
createMockOverage({
|
||||
id: 3,
|
||||
display_name: 'Calendar Events',
|
||||
current_usage: 500,
|
||||
allowed_limit: 400,
|
||||
overage_amount: 100,
|
||||
days_remaining: 7,
|
||||
}),
|
||||
];
|
||||
const onDismiss = vi.fn();
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} onDismiss={onDismiss} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Should show most urgent (2 days)
|
||||
expect(screen.getByText(/action required.*2 days left/i)).toBeInTheDocument();
|
||||
|
||||
// Should show all overages section
|
||||
expect(screen.getByText(/all overages:/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Resources: 15\/10/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Staff Members: 12\/8/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Calendar Events: 500\/400/)).toBeInTheDocument();
|
||||
|
||||
// Should be able to dismiss
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
await user.click(dismissButton);
|
||||
expect(onDismiss).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle negative days remaining', () => {
|
||||
const overages = [createMockOverage({ days_remaining: -1 })];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// Should treat as critical (0 or less)
|
||||
const { container } = render(
|
||||
<QuotaWarningBanner overages={overages} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const banner = container.querySelector('div[class*="bg-red-600"]');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle very large overage amounts', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
overage_amount: 999999,
|
||||
display_name: 'Events',
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/you have 999999 Events over your plan limit/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle zero overage amount', () => {
|
||||
const overages = [
|
||||
createMockOverage({
|
||||
overage_amount: 0,
|
||||
current_usage: 10,
|
||||
allowed_limit: 10,
|
||||
}),
|
||||
];
|
||||
|
||||
render(<QuotaWarningBanner overages={overages} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText(/you have 0 Resources over your plan limit/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
511
frontend/src/components/__tests__/TrialBanner.test.tsx
Normal file
511
frontend/src/components/__tests__/TrialBanner.test.tsx
Normal file
@@ -0,0 +1,511 @@
|
||||
/**
|
||||
* Unit tests for TrialBanner component
|
||||
*
|
||||
* Tests the trial status banner that appears at the top of the business layout.
|
||||
* Covers:
|
||||
* - Rendering with different days remaining
|
||||
* - Urgent state (3 days or less)
|
||||
* - Upgrade button navigation
|
||||
* - Dismiss functionality
|
||||
* - Hidden states (dismissed, not active, no days left)
|
||||
* - Trial end date formatting
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen, fireEvent, within } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import TrialBanner from '../TrialBanner';
|
||||
import { Business } from '../../types';
|
||||
|
||||
// Mock react-router-dom's useNavigate
|
||||
const mockNavigate = vi.fn();
|
||||
vi.mock('react-router-dom', async () => {
|
||||
const actual = await vi.importActual('react-router-dom');
|
||||
return {
|
||||
...actual,
|
||||
useNavigate: () => mockNavigate,
|
||||
};
|
||||
});
|
||||
|
||||
// Mock i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, params?: Record<string, unknown>) => {
|
||||
// Simulate translation behavior
|
||||
const translations: Record<string, string> = {
|
||||
'trial.banner.title': 'Trial Active',
|
||||
'trial.banner.daysLeft': `${params?.days} days left in trial`,
|
||||
'trial.banner.expiresOn': `Trial expires on ${params?.date}`,
|
||||
'trial.banner.upgradeNow': 'Upgrade Now',
|
||||
'trial.banner.dismiss': 'Dismiss',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test data factory for Business objects
|
||||
const createMockBusiness = (overrides?: Partial<Business>): Business => ({
|
||||
id: '1',
|
||||
name: 'Test Business',
|
||||
subdomain: 'testbiz',
|
||||
primaryColor: '#3B82F6',
|
||||
secondaryColor: '#1E40AF',
|
||||
whitelabelEnabled: false,
|
||||
paymentsEnabled: true,
|
||||
requirePaymentMethodToBook: false,
|
||||
cancellationWindowHours: 24,
|
||||
lateCancellationFeePercent: 50,
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
trialEnd: '2025-12-17T23:59:59Z',
|
||||
...overrides,
|
||||
});
|
||||
|
||||
// Wrapper component that provides router context
|
||||
const renderWithRouter = (ui: React.ReactElement) => {
|
||||
return render(<BrowserRouter>{ui}</BrowserRouter>);
|
||||
};
|
||||
|
||||
describe('TrialBanner', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render banner with trial information when trial is active', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
trialEnd: '2025-12-17T23:59:59Z',
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/10 days left in trial/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /upgrade now/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display the trial end date', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 5,
|
||||
trialEnd: '2025-12-17T00:00:00Z',
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Check that the date is displayed (format may vary by locale)
|
||||
expect(screen.getByText(/trial expires on/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Sparkles icon when more than 3 days left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 7,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// The Sparkles icon should be rendered (not the Clock icon)
|
||||
// Check for the non-urgent styling
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-blue-600');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Clock icon with pulse animation when 3 days or less left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 3,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Check for urgent styling
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-red-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
|
||||
// Check for pulse animation on the icon
|
||||
const pulsingIcon = container.querySelector('.animate-pulse');
|
||||
expect(pulsingIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Upgrade Now button with arrow icon', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const upgradeButton = screen.getByRole('button', { name: /upgrade now/i });
|
||||
expect(upgradeButton).toBeInTheDocument();
|
||||
expect(upgradeButton).toHaveClass('bg-white', 'text-blue-600');
|
||||
});
|
||||
|
||||
it('should render dismiss button with aria-label', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
expect(dismissButton).toBeInTheDocument();
|
||||
expect(dismissButton).toHaveAttribute('aria-label', 'Dismiss');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Urgent State (3 days or less)', () => {
|
||||
it('should apply urgent styling when 3 days left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 3,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-red-500.to-orange-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply urgent styling when 2 days left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 2,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-red-500.to-orange-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply urgent styling when 1 day left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 1,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.getByText(/1 days left in trial/i)).toBeInTheDocument();
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-red-500.to-orange-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should NOT apply urgent styling when 4 days left', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 4,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-blue-600.to-blue-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
expect(container.querySelector('.from-red-500')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('User Interactions', () => {
|
||||
it('should navigate to /upgrade when Upgrade Now button is clicked', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const upgradeButton = screen.getByRole('button', { name: /upgrade now/i });
|
||||
fireEvent.click(upgradeButton);
|
||||
|
||||
expect(mockNavigate).toHaveBeenCalledWith('/upgrade');
|
||||
expect(mockNavigate).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should hide banner when dismiss button is clicked', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Banner should be visible initially
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
|
||||
// Click dismiss button
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
fireEvent.click(dismissButton);
|
||||
|
||||
// Banner should be hidden
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should keep banner hidden after dismissing even when multiple clicks', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
fireEvent.click(dismissButton);
|
||||
|
||||
// Banner should remain hidden
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Hidden States', () => {
|
||||
it('should not render when trial is not active', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: false,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render when daysLeftInTrial is undefined', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: undefined,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render when daysLeftInTrial is 0', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 0,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render when daysLeftInTrial is null', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: null as unknown as number,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render when already dismissed', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Dismiss the banner
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
fireEvent.click(dismissButton);
|
||||
|
||||
// Banner should not be visible
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle missing trialEnd date gracefully', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 5,
|
||||
trialEnd: undefined,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Banner should still render
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/5 days left in trial/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle invalid trialEnd date gracefully', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 5,
|
||||
trialEnd: 'invalid-date',
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Banner should still render despite invalid date
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display correct styling for boundary case of exactly 3 days', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 3,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Should use urgent styling at exactly 3 days
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-red-500');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle very large number of days remaining', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 999,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.getByText(/999 days left in trial/i)).toBeInTheDocument();
|
||||
// Should use non-urgent styling
|
||||
const { container } = render(<TrialBanner business={business} />, { wrapper: BrowserRouter });
|
||||
const banner = container.querySelector('.bg-gradient-to-r.from-blue-600');
|
||||
expect(banner).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper button roles and labels', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
const upgradeButton = screen.getByRole('button', { name: /upgrade now/i });
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
|
||||
expect(upgradeButton).toBeInTheDocument();
|
||||
expect(dismissButton).toBeInTheDocument();
|
||||
expect(dismissButton).toHaveAttribute('aria-label');
|
||||
});
|
||||
|
||||
it('should have readable text content for screen readers', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 7,
|
||||
trialEnd: '2025-12-24T23:59:59Z',
|
||||
});
|
||||
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// All important text should be accessible
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/7 days left in trial/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/trial expires on/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Behavior', () => {
|
||||
it('should render trial end date with hidden class for small screens', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
trialEnd: '2025-12-17T23:59:59Z',
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// The trial end date paragraph should have 'hidden sm:block' classes
|
||||
const endDateElement = container.querySelector('.hidden.sm\\:block');
|
||||
expect(endDateElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all key elements in the banner', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
const { container } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Icon container
|
||||
const iconContainer = container.querySelector('.p-2.rounded-full');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
|
||||
// Buttons container
|
||||
const buttonsContainer = screen.getByRole('button', { name: /upgrade now/i }).parentElement;
|
||||
expect(buttonsContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component Integration', () => {
|
||||
it('should work with different business configurations', () => {
|
||||
const businesses = [
|
||||
createMockBusiness({ daysLeftInTrial: 1, isTrialActive: true }),
|
||||
createMockBusiness({ daysLeftInTrial: 7, isTrialActive: true }),
|
||||
createMockBusiness({ daysLeftInTrial: 14, isTrialActive: true }),
|
||||
];
|
||||
|
||||
businesses.forEach((business) => {
|
||||
const { unmount } = renderWithRouter(<TrialBanner business={business} />);
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it('should maintain state across re-renders when not dismissed', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
const { rerender } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
|
||||
// Re-render with updated days
|
||||
const updatedBusiness = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 9,
|
||||
});
|
||||
|
||||
rerender(
|
||||
<BrowserRouter>
|
||||
<TrialBanner business={updatedBusiness} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/9 days left in trial/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should reset dismissed state on component unmount and remount', () => {
|
||||
const business = createMockBusiness({
|
||||
isTrialActive: true,
|
||||
daysLeftInTrial: 10,
|
||||
});
|
||||
|
||||
const { unmount } = renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Dismiss the banner
|
||||
const dismissButton = screen.getByRole('button', { name: /dismiss/i });
|
||||
fireEvent.click(dismissButton);
|
||||
|
||||
expect(screen.queryByText(/trial active/i)).not.toBeInTheDocument();
|
||||
|
||||
// Unmount and remount
|
||||
unmount();
|
||||
renderWithRouter(<TrialBanner business={business} />);
|
||||
|
||||
// Banner should reappear (dismissed state is not persisted)
|
||||
expect(screen.getByText(/trial active/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
897
frontend/src/components/dashboard/__tests__/ChartWidget.test.tsx
Normal file
897
frontend/src/components/dashboard/__tests__/ChartWidget.test.tsx
Normal file
@@ -0,0 +1,897 @@
|
||||
/**
|
||||
* Unit tests for ChartWidget component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Chart container rendering
|
||||
* - Title display
|
||||
* - Bar chart rendering
|
||||
* - Line chart rendering
|
||||
* - Data visualization
|
||||
* - Custom colors
|
||||
* - Value prefixes
|
||||
* - Edit mode with drag handle and remove button
|
||||
* - Tooltip formatting
|
||||
* - Responsive container
|
||||
* - Accessibility
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import ChartWidget from '../ChartWidget';
|
||||
|
||||
// Mock Recharts components to avoid rendering issues in tests
|
||||
vi.mock('recharts', () => ({
|
||||
ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
|
||||
<div data-testid="responsive-container">{children}</div>
|
||||
),
|
||||
BarChart: ({ data, children }: { data: any[]; children: React.ReactNode }) => (
|
||||
<div data-testid="bar-chart" data-chart-data={JSON.stringify(data)}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
LineChart: ({ data, children }: { data: any[]; children: React.ReactNode }) => (
|
||||
<div data-testid="line-chart" data-chart-data={JSON.stringify(data)}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
Bar: ({ dataKey, fill }: { dataKey: string; fill: string }) => (
|
||||
<div data-testid="bar" data-key={dataKey} data-fill={fill} />
|
||||
),
|
||||
Line: ({ dataKey, stroke }: { dataKey: string; stroke: string }) => (
|
||||
<div data-testid="line" data-key={dataKey} data-stroke={stroke} />
|
||||
),
|
||||
XAxis: ({ dataKey }: { dataKey: string }) => (
|
||||
<div data-testid="x-axis" data-key={dataKey} />
|
||||
),
|
||||
YAxis: () => <div data-testid="y-axis" />,
|
||||
CartesianGrid: () => <div data-testid="cartesian-grid" />,
|
||||
Tooltip: () => <div data-testid="tooltip" />,
|
||||
}));
|
||||
|
||||
describe('ChartWidget', () => {
|
||||
const mockChartData = [
|
||||
{ name: 'Mon', value: 100 },
|
||||
{ name: 'Tue', value: 150 },
|
||||
{ name: 'Wed', value: 120 },
|
||||
{ name: 'Thu', value: 180 },
|
||||
{ name: 'Fri', value: 200 },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the component', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue Chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render chart container', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const container = screen.getByTestId('responsive-container');
|
||||
expect(container).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with different titles', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Appointments"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Appointments')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with empty data array', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Empty Chart"
|
||||
data={[]}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Empty Chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Title', () => {
|
||||
it('should display title with correct styling', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Weekly Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Weekly Revenue');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveClass('text-lg', 'font-semibold', 'text-gray-900');
|
||||
});
|
||||
|
||||
it('should apply dark mode styles to title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('dark:text-white');
|
||||
});
|
||||
|
||||
it('should handle long titles', () => {
|
||||
const longTitle = 'Very Long Chart Title That Should Still Display Properly Without Breaking Layout';
|
||||
render(
|
||||
<ChartWidget
|
||||
title={longTitle}
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(longTitle)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Bar Chart', () => {
|
||||
it('should render bar chart when type is "bar"', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('line-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass data to bar chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(mockChartData);
|
||||
});
|
||||
|
||||
it('should render bar with correct dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-key', 'value');
|
||||
});
|
||||
|
||||
it('should render bar with default color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', '#3b82f6');
|
||||
});
|
||||
|
||||
it('should render bar with custom color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color="#10b981"
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', '#10b981');
|
||||
});
|
||||
|
||||
it('should render CartesianGrid for bar chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render XAxis with name dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const xAxis = screen.getByTestId('x-axis');
|
||||
expect(xAxis).toHaveAttribute('data-key', 'name');
|
||||
});
|
||||
|
||||
it('should render YAxis', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('y-axis')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Tooltip', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('tooltip')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Line Chart', () => {
|
||||
it('should render line chart when type is "line"', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('line-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should pass data to line chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(mockChartData);
|
||||
});
|
||||
|
||||
it('should render line with correct dataKey', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-key', 'value');
|
||||
});
|
||||
|
||||
it('should render line with default color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-stroke', '#3b82f6');
|
||||
});
|
||||
|
||||
it('should render line with custom color', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
color="#ef4444"
|
||||
/>
|
||||
);
|
||||
|
||||
const line = screen.getByTestId('line');
|
||||
expect(line).toHaveAttribute('data-stroke', '#ef4444');
|
||||
});
|
||||
|
||||
it('should render CartesianGrid for line chart', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should switch between chart types', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('line-chart')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('bar-chart')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Value Prefix', () => {
|
||||
it('should use empty prefix by default', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Appointments"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
// Component renders successfully without prefix
|
||||
expect(screen.getByText('Appointments')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should accept custom value prefix', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="$"
|
||||
/>
|
||||
);
|
||||
|
||||
// Component renders successfully with prefix
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should accept different prefixes', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="$"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
valuePrefix="€"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Revenue')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edit Mode', () => {
|
||||
it('should not show edit controls when isEditing is false', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show drag handle when in edit mode', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show remove button when in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
expect(removeButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call onRemove when remove button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleRemove = vi.fn();
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
await user.click(removeButton);
|
||||
|
||||
expect(handleRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should apply padding to title when in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('pl-5');
|
||||
});
|
||||
|
||||
it('should not apply padding to title when not in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).not.toHaveClass('pl-5');
|
||||
});
|
||||
|
||||
it('should have grab cursor on drag handle', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).toHaveClass('cursor-grab', 'active:cursor-grabbing');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Container', () => {
|
||||
it('should render ResponsiveContainer', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should wrap chart in responsive container', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const container = screen.getByTestId('responsive-container');
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
|
||||
expect(container).toContainElement(barChart);
|
||||
});
|
||||
|
||||
it('should have flex layout for proper sizing', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass('flex', 'flex-col');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply container styles', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass(
|
||||
'h-full',
|
||||
'p-4',
|
||||
'bg-white',
|
||||
'rounded-xl',
|
||||
'border',
|
||||
'border-gray-200',
|
||||
'shadow-sm',
|
||||
'relative',
|
||||
'group'
|
||||
);
|
||||
});
|
||||
|
||||
it('should apply dark mode styles', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass('dark:bg-gray-800', 'dark:border-gray-700');
|
||||
});
|
||||
|
||||
it('should have proper spacing for title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('mb-4');
|
||||
});
|
||||
|
||||
it('should use flex-1 for chart container', () => {
|
||||
const { container } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const chartContainer = container.querySelector('.flex-1');
|
||||
expect(chartContainer).toBeInTheDocument();
|
||||
expect(chartContainer).toHaveClass('min-h-0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Data Handling', () => {
|
||||
it('should handle single data point', () => {
|
||||
const singlePoint = [{ name: 'Mon', value: 100 }];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={singlePoint}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(singlePoint);
|
||||
});
|
||||
|
||||
it('should handle large datasets', () => {
|
||||
const largeData = Array.from({ length: 100 }, (_, i) => ({
|
||||
name: `Day ${i + 1}`,
|
||||
value: Math.random() * 1000,
|
||||
}));
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={largeData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toHaveLength(100);
|
||||
});
|
||||
|
||||
it('should handle zero values', () => {
|
||||
const zeroData = [
|
||||
{ name: 'Mon', value: 0 },
|
||||
{ name: 'Tue', value: 0 },
|
||||
];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={zeroData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const barChart = screen.getByTestId('bar-chart');
|
||||
const chartData = JSON.parse(barChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(zeroData);
|
||||
});
|
||||
|
||||
it('should handle negative values', () => {
|
||||
const negativeData = [
|
||||
{ name: 'Mon', value: -50 },
|
||||
{ name: 'Tue', value: 100 },
|
||||
{ name: 'Wed', value: -30 },
|
||||
];
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Profit/Loss"
|
||||
data={negativeData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
const lineChart = screen.getByTestId('line-chart');
|
||||
const chartData = JSON.parse(lineChart.getAttribute('data-chart-data') || '[]');
|
||||
expect(chartData).toEqual(negativeData);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have semantic heading for title', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 3 });
|
||||
expect(heading).toHaveTextContent('Revenue Chart');
|
||||
});
|
||||
|
||||
it('should be keyboard accessible in edit mode', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have proper color contrast', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('text-gray-900');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all props', () => {
|
||||
const handleRemove = vi.fn();
|
||||
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Weekly Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color="#10b981"
|
||||
valuePrefix="$"
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Weekly Revenue')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar')).toHaveAttribute('data-fill', '#10b981');
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should work with minimal props', () => {
|
||||
render(
|
||||
<ChartWidget
|
||||
title="Simple Chart"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Simple Chart')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('bar-chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain layout with varying data lengths', () => {
|
||||
const shortData = [{ name: 'A', value: 1 }];
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Data"
|
||||
data={shortData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Data')).toBeInTheDocument();
|
||||
|
||||
const longData = Array.from({ length: 50 }, (_, i) => ({
|
||||
name: `Item ${i}`,
|
||||
value: i * 10,
|
||||
}));
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Data"
|
||||
data={longData}
|
||||
type="bar"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Data')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should support different color schemes', () => {
|
||||
const colors = ['#3b82f6', '#10b981', '#ef4444', '#f59e0b', '#8b5cf6'];
|
||||
|
||||
colors.forEach((color) => {
|
||||
const { container, rerender } = render(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color={color}
|
||||
/>
|
||||
);
|
||||
|
||||
const bar = screen.getByTestId('bar');
|
||||
expect(bar).toHaveAttribute('data-fill', color);
|
||||
|
||||
if (color !== colors[colors.length - 1]) {
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Revenue"
|
||||
data={mockChartData}
|
||||
type="bar"
|
||||
color={colors[colors.indexOf(color) + 1]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle rapid data updates', () => {
|
||||
const { rerender } = render(
|
||||
<ChartWidget
|
||||
title="Live Data"
|
||||
data={mockChartData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const newData = mockChartData.map((item) => ({
|
||||
...item,
|
||||
value: item.value + Math.random() * 50,
|
||||
}));
|
||||
|
||||
rerender(
|
||||
<ChartWidget
|
||||
title="Live Data"
|
||||
data={newData}
|
||||
type="line"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Live Data')).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,702 @@
|
||||
/**
|
||||
* Unit tests for MetricWidget component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering with title and value
|
||||
* - Growth/trend indicators (positive, negative, neutral)
|
||||
* - Change percentage formatting
|
||||
* - Weekly and monthly metrics display
|
||||
* - Icon rendering
|
||||
* - Edit mode with drag handle and remove button
|
||||
* - Internationalization (i18n)
|
||||
* - Accessibility
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import MetricWidget from '../MetricWidget';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'dashboard.weekLabel': 'Week:',
|
||||
'dashboard.monthLabel': 'Month:',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('MetricWidget', () => {
|
||||
const mockGrowthData = {
|
||||
weekly: { value: 100, change: 5.5 },
|
||||
monthly: { value: 400, change: -2.3 },
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the component', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Total Revenue"
|
||||
value="$12,345"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Total Revenue')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render title correctly', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Total Customers"
|
||||
value={150}
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Total Customers');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveClass('text-sm', 'font-medium', 'text-gray-500');
|
||||
});
|
||||
|
||||
it('should render numeric value', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Total Appointments"
|
||||
value={42}
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const value = screen.getByText('42');
|
||||
expect(value).toBeInTheDocument();
|
||||
expect(value).toHaveClass('text-2xl', 'font-bold', 'text-gray-900');
|
||||
});
|
||||
|
||||
it('should render string value', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$25,000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const value = screen.getByText('$25,000');
|
||||
expect(value).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with custom icon', () => {
|
||||
const CustomIcon = () => <span data-testid="custom-icon">💰</span>;
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
icon={<CustomIcon />}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without icon', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const iconContainer = container.querySelector('.text-brand-500');
|
||||
expect(iconContainer).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Trend Indicators', () => {
|
||||
describe('Positive Change', () => {
|
||||
it('should show positive trend icon for weekly growth', () => {
|
||||
const positiveGrowth = {
|
||||
weekly: { value: 100, change: 10.5 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={positiveGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeText = screen.getByText('+10.5%');
|
||||
expect(changeText).toBeInTheDocument();
|
||||
|
||||
// Check for TrendingUp icon (lucide-react renders as SVG)
|
||||
const svgs = container.querySelectorAll('svg');
|
||||
expect(svgs.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply positive change styling', () => {
|
||||
const positiveGrowth = {
|
||||
weekly: { value: 100, change: 15 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={positiveGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeElement = screen.getByText('+15.0%').closest('span');
|
||||
expect(changeElement).toHaveClass('text-green-700', 'bg-green-50');
|
||||
});
|
||||
|
||||
it('should format positive change with plus sign', () => {
|
||||
const positiveGrowth = {
|
||||
weekly: { value: 100, change: 7.8 },
|
||||
monthly: { value: 400, change: 3.2 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={positiveGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('+7.8%')).toBeInTheDocument();
|
||||
expect(screen.getByText('+3.2%')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Negative Change', () => {
|
||||
it('should show negative trend icon for monthly growth', () => {
|
||||
const negativeGrowth = {
|
||||
weekly: { value: 100, change: 0 },
|
||||
monthly: { value: 400, change: -5.5 },
|
||||
};
|
||||
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={negativeGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeText = screen.getByText('-5.5%');
|
||||
expect(changeText).toBeInTheDocument();
|
||||
|
||||
// Check for TrendingDown icon
|
||||
const svgs = container.querySelectorAll('svg');
|
||||
expect(svgs.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply negative change styling', () => {
|
||||
const negativeGrowth = {
|
||||
weekly: { value: 100, change: -12.3 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={negativeGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeElement = screen.getByText('-12.3%').closest('span');
|
||||
expect(changeElement).toHaveClass('text-red-700', 'bg-red-50');
|
||||
});
|
||||
|
||||
it('should format negative change without extra minus sign', () => {
|
||||
const negativeGrowth = {
|
||||
weekly: { value: 100, change: -8.9 },
|
||||
monthly: { value: 400, change: -15.2 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={negativeGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('-8.9%')).toBeInTheDocument();
|
||||
expect(screen.getByText('-15.2%')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Zero Change', () => {
|
||||
it('should show neutral trend icon for zero change', () => {
|
||||
const zeroGrowth = {
|
||||
weekly: { value: 100, change: 0 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={zeroGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeTexts = screen.getAllByText('0%');
|
||||
expect(changeTexts).toHaveLength(2);
|
||||
|
||||
// Check for Minus icon
|
||||
const svgs = container.querySelectorAll('svg');
|
||||
expect(svgs.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply neutral change styling', () => {
|
||||
const zeroGrowth = {
|
||||
weekly: { value: 100, change: 0 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={zeroGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeElements = screen.getAllByText('0%');
|
||||
changeElements.forEach((element) => {
|
||||
const spanElement = element.closest('span');
|
||||
expect(spanElement).toHaveClass('text-gray-700', 'bg-gray-50');
|
||||
});
|
||||
});
|
||||
|
||||
it('should format zero change as 0%', () => {
|
||||
const zeroGrowth = {
|
||||
weekly: { value: 100, change: 0 },
|
||||
monthly: { value: 400, change: 0 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={zeroGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
const changeTexts = screen.getAllByText('0%');
|
||||
expect(changeTexts).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Weekly and Monthly Metrics', () => {
|
||||
it('should display weekly label', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Week:')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display monthly label', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Month:')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display weekly change percentage', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('+5.5%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display monthly change percentage', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('-2.3%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle different weekly and monthly trends', () => {
|
||||
const mixedGrowth = {
|
||||
weekly: { value: 100, change: 12.5 },
|
||||
monthly: { value: 400, change: -8.2 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mixedGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('+12.5%')).toBeInTheDocument();
|
||||
expect(screen.getByText('-8.2%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should format change values to one decimal place', () => {
|
||||
const preciseGrowth = {
|
||||
weekly: { value: 100, change: 5.456 },
|
||||
monthly: { value: 400, change: -3.789 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={preciseGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('+5.5%')).toBeInTheDocument();
|
||||
expect(screen.getByText('-3.8%')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edit Mode', () => {
|
||||
it('should not show edit controls when isEditing is false', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show drag handle when in edit mode', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const dragHandle = container.querySelector('.drag-handle');
|
||||
expect(dragHandle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show remove button when in edit mode', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
expect(removeButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call onRemove when remove button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const handleRemove = vi.fn();
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
const removeButton = screen.getByRole('button');
|
||||
await user.click(removeButton);
|
||||
|
||||
expect(handleRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should apply padding when in edit mode', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={true}
|
||||
/>
|
||||
);
|
||||
|
||||
const contentContainer = container.querySelector('.pl-5');
|
||||
expect(contentContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not apply padding when not in edit mode', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={false}
|
||||
/>
|
||||
);
|
||||
|
||||
const contentContainer = container.querySelector('.pl-5');
|
||||
expect(contentContainer).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply container styles', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass(
|
||||
'h-full',
|
||||
'p-4',
|
||||
'bg-white',
|
||||
'rounded-xl',
|
||||
'border',
|
||||
'border-gray-200',
|
||||
'shadow-sm',
|
||||
'relative',
|
||||
'group'
|
||||
);
|
||||
});
|
||||
|
||||
it('should apply dark mode styles', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const widget = container.firstChild;
|
||||
expect(widget).toHaveClass('dark:bg-gray-800', 'dark:border-gray-700');
|
||||
});
|
||||
|
||||
it('should apply trend badge styles', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const badges = container.querySelectorAll('.rounded-full');
|
||||
expect(badges.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have semantic HTML structure', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const paragraphs = container.querySelectorAll('p');
|
||||
const divs = container.querySelectorAll('div');
|
||||
|
||||
expect(paragraphs.length).toBeGreaterThan(0);
|
||||
expect(divs.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have readable text contrast', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Revenue');
|
||||
expect(title).toHaveClass('text-gray-500');
|
||||
});
|
||||
|
||||
it('should make remove button accessible when in edit mode', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
isEditing={true}
|
||||
onRemove={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
const button = screen.getByRole('button');
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translation for week label', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Week:')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for month label', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Month:')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with all props', () => {
|
||||
const CustomIcon = () => <span data-testid="icon">📊</span>;
|
||||
const handleRemove = vi.fn();
|
||||
const fullGrowth = {
|
||||
weekly: { value: 150, change: 10 },
|
||||
monthly: { value: 600, change: -5 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Total Revenue"
|
||||
value="$15,000"
|
||||
growth={fullGrowth}
|
||||
icon={<CustomIcon />}
|
||||
isEditing={true}
|
||||
onRemove={handleRemove}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Total Revenue')).toBeInTheDocument();
|
||||
expect(screen.getByText('$15,000')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('icon')).toBeInTheDocument();
|
||||
expect(screen.getByText('+10.0%')).toBeInTheDocument();
|
||||
expect(screen.getByText('-5.0%')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle edge case values', () => {
|
||||
const edgeCaseGrowth = {
|
||||
weekly: { value: 0, change: 0 },
|
||||
monthly: { value: 1000000, change: 99.9 },
|
||||
};
|
||||
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Edge Case"
|
||||
value={0}
|
||||
growth={edgeCaseGrowth}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Edge Case')).toBeInTheDocument();
|
||||
expect(screen.getByText('0')).toBeInTheDocument();
|
||||
expect(screen.getByText('0%')).toBeInTheDocument();
|
||||
expect(screen.getByText('+99.9%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain layout with long titles', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Very Long Metric Title That Should Still Display Properly"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
const title = screen.getByText('Very Long Metric Title That Should Still Display Properly');
|
||||
expect(title).toBeInTheDocument();
|
||||
expect(title).toHaveClass('text-sm');
|
||||
});
|
||||
|
||||
it('should handle large numeric values', () => {
|
||||
render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1,234,567,890"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('$1,234,567,890')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display multiple trend indicators simultaneously', () => {
|
||||
const { container } = render(
|
||||
<MetricWidget
|
||||
title="Revenue"
|
||||
value="$1000"
|
||||
growth={mockGrowthData}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should have trend indicators for both weekly and monthly
|
||||
const trendBadges = container.querySelectorAll('.rounded-full');
|
||||
expect(trendBadges.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
533
frontend/src/components/marketing/__tests__/CTASection.test.tsx
Normal file
533
frontend/src/components/marketing/__tests__/CTASection.test.tsx
Normal file
@@ -0,0 +1,533 @@
|
||||
/**
|
||||
* Unit tests for CTASection component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering in both variants (default and minimal)
|
||||
* - CTA text rendering
|
||||
* - Button/link presence and navigation
|
||||
* - Click navigation behavior
|
||||
* - Icon display
|
||||
* - Internationalization (i18n)
|
||||
* - Accessibility
|
||||
* - Styling variations
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import CTASection from '../CTASection';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'marketing.cta.ready': 'Ready to get started?',
|
||||
'marketing.cta.readySubtitle': 'Join thousands of businesses already using SmoothSchedule.',
|
||||
'marketing.cta.startFree': 'Get Started Free',
|
||||
'marketing.cta.talkToSales': 'Talk to Sales',
|
||||
'marketing.cta.noCredit': 'No credit card required',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('CTASection', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Default Variant', () => {
|
||||
describe('Rendering', () => {
|
||||
it('should render the CTA section', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render CTA text elements', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
// Main heading
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toBeInTheDocument();
|
||||
|
||||
// Subtitle
|
||||
const subtitle = screen.getByText(/join thousands of businesses/i);
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
|
||||
// No credit card required
|
||||
const disclaimer = screen.getByText(/no credit card required/i);
|
||||
expect(disclaimer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with correct text hierarchy', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading.tagName).toBe('H2');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Button/Link Presence', () => {
|
||||
it('should render the signup button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the talk to sales button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render both CTA buttons', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
expect(links).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should have correct href for signup button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should have correct href for sales button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should navigate when signup button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
|
||||
// Click should not throw error
|
||||
await expect(user.click(signupButton)).resolves.not.toThrow();
|
||||
});
|
||||
|
||||
it('should navigate when sales button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
|
||||
// Click should not throw error
|
||||
await expect(user.click(salesButton)).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icon Display', () => {
|
||||
it('should display ArrowRight icon on signup button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const icon = signupButton.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct icon size', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const icon = signupButton.querySelector('svg');
|
||||
expect(icon).toHaveClass('h-5', 'w-5');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply gradient background', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('bg-gradient-to-br', 'from-brand-600', 'to-brand-700');
|
||||
});
|
||||
|
||||
it('should apply correct padding', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('py-20', 'lg:py-28');
|
||||
});
|
||||
|
||||
it('should style signup button as primary CTA', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveClass('bg-white', 'text-brand-600');
|
||||
expect(signupButton).toHaveClass('hover:bg-brand-50');
|
||||
});
|
||||
|
||||
it('should style sales button as secondary CTA', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).toHaveClass('bg-white/10', 'text-white');
|
||||
expect(salesButton).toHaveClass('hover:bg-white/20');
|
||||
});
|
||||
|
||||
it('should have responsive button layout', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const buttonContainer = container.querySelector('.flex.flex-col.sm\\:flex-row');
|
||||
expect(buttonContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply shadow to signup button', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveClass('shadow-lg', 'shadow-black/10');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Background Pattern', () => {
|
||||
it('should render decorative background elements', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const backgroundPattern = container.querySelector('.absolute.inset-0');
|
||||
expect(backgroundPattern).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Minimal Variant', () => {
|
||||
describe('Rendering', () => {
|
||||
it('should render the minimal CTA section', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render CTA text in minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toBeInTheDocument();
|
||||
|
||||
const subtitle = screen.getByText(/join thousands of businesses/i);
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should only render one button in minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
expect(links).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Button/Link Presence', () => {
|
||||
it('should render only the signup button', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render the sales button', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.queryByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not render the disclaimer text', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const disclaimer = screen.queryByText(/no credit card required/i);
|
||||
expect(disclaimer).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation', () => {
|
||||
it('should have correct href for signup button', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should navigate when button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
|
||||
// Click should not throw error
|
||||
await expect(user.click(signupButton)).resolves.not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icon Display', () => {
|
||||
it('should display ArrowRight icon', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const icon = signupButton.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct icon size', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const icon = signupButton.querySelector('svg');
|
||||
expect(icon).toHaveClass('h-5', 'w-5');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('should apply white background', () => {
|
||||
const { container } = render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('bg-white', 'dark:bg-gray-900');
|
||||
});
|
||||
|
||||
it('should apply minimal padding', () => {
|
||||
const { container } = render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('py-16');
|
||||
});
|
||||
|
||||
it('should use brand colors for button', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveClass('bg-brand-600', 'text-white');
|
||||
expect(signupButton).toHaveClass('hover:bg-brand-700');
|
||||
});
|
||||
|
||||
it('should have smaller heading size', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toHaveClass('text-2xl', 'sm:text-3xl');
|
||||
});
|
||||
|
||||
it('should not have gradient background', () => {
|
||||
const { container } = render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).not.toHaveClass('bg-gradient-to-br');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Variant Comparison', () => {
|
||||
it('should render different layouts for different variants', () => {
|
||||
const { container: defaultContainer } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
const { container: minimalContainer } = render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const defaultSection = defaultContainer.querySelector('section');
|
||||
const minimalSection = minimalContainer.querySelector('section');
|
||||
|
||||
expect(defaultSection?.className).not.toEqual(minimalSection?.className);
|
||||
});
|
||||
|
||||
it('should use default variant when no variant prop provided', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
// Check for elements unique to default variant
|
||||
const salesButton = screen.queryByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should switch variants correctly', () => {
|
||||
const { rerender } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
// Should have 2 buttons in default
|
||||
let links = screen.getAllByRole('link');
|
||||
expect(links).toHaveLength(2);
|
||||
|
||||
rerender(<CTASection variant="minimal" />);
|
||||
|
||||
// Should have 1 button in minimal
|
||||
links = screen.getAllByRole('link');
|
||||
expect(links).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translation for heading', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByText('Ready to get started?');
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for subtitle', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const subtitle = screen.getByText('Join thousands of businesses already using SmoothSchedule.');
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for button text', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveTextContent('Get Started Free');
|
||||
});
|
||||
|
||||
it('should use translation for sales button text', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
expect(salesButton).toHaveTextContent('Talk to Sales');
|
||||
});
|
||||
|
||||
it('should use translation for disclaimer', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const disclaimer = screen.getByText('No credit card required');
|
||||
expect(disclaimer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should translate all text in minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Ready to get started?')).toBeInTheDocument();
|
||||
expect(screen.getByText('Join thousands of businesses already using SmoothSchedule.')).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /get started free/i })).toHaveTextContent('Get Started Free');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have semantic section element', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have heading hierarchy', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 2 });
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have keyboard accessible links', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
|
||||
expect(signupButton.tagName).toBe('A');
|
||||
expect(salesButton.tagName).toBe('A');
|
||||
});
|
||||
|
||||
it('should have descriptive link text', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
const salesButton = screen.getByRole('link', { name: /talk to sales/i });
|
||||
|
||||
expect(signupButton).toHaveAccessibleName();
|
||||
expect(salesButton).toHaveAccessibleName();
|
||||
});
|
||||
|
||||
it('should maintain accessibility in minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 2 });
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
|
||||
expect(heading).toBeInTheDocument();
|
||||
expect(signupButton).toHaveAccessibleName();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Design', () => {
|
||||
it('should have responsive heading sizes', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toHaveClass('text-3xl', 'sm:text-4xl', 'lg:text-5xl');
|
||||
});
|
||||
|
||||
it('should have responsive subtitle size', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const subtitle = screen.getByText(/join thousands of businesses/i);
|
||||
expect(subtitle).toHaveClass('text-lg', 'sm:text-xl');
|
||||
});
|
||||
|
||||
it('should have responsive button layout', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const signupButton = screen.getByRole('link', { name: /get started free/i });
|
||||
expect(signupButton).toHaveClass('w-full', 'sm:w-auto');
|
||||
});
|
||||
|
||||
it('should have responsive padding in minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { name: /ready to get started/i });
|
||||
expect(heading).toHaveClass('text-2xl', 'sm:text-3xl');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render correctly with default variant', () => {
|
||||
render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByRole('heading', { name: /ready to get started/i })).toBeInTheDocument();
|
||||
expect(screen.getByText(/join thousands of businesses/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /get started free/i })).toHaveAttribute('href', '/signup');
|
||||
expect(screen.getByRole('link', { name: /talk to sales/i })).toHaveAttribute('href', '/contact');
|
||||
expect(screen.getByText(/no credit card required/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render correctly with minimal variant', () => {
|
||||
render(<CTASection variant="minimal" />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByRole('heading', { name: /ready to get started/i })).toBeInTheDocument();
|
||||
expect(screen.getByText(/join thousands of businesses/i)).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /get started free/i })).toHaveAttribute('href', '/signup');
|
||||
expect(screen.queryByRole('link', { name: /talk to sales/i })).not.toBeInTheDocument();
|
||||
expect(screen.queryByText(/no credit card required/i)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain structure with all elements in place', () => {
|
||||
const { container } = render(<CTASection />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('section');
|
||||
const heading = screen.getByRole('heading');
|
||||
const subtitle = screen.getByText(/join thousands/i);
|
||||
const buttons = screen.getAllByRole('link');
|
||||
|
||||
expect(section).toContainElement(heading);
|
||||
expect(section).toContainElement(subtitle);
|
||||
buttons.forEach(button => {
|
||||
expect(section).toContainElement(button);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
362
frontend/src/components/marketing/__tests__/CodeBlock.test.tsx
Normal file
362
frontend/src/components/marketing/__tests__/CodeBlock.test.tsx
Normal file
@@ -0,0 +1,362 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, act } from '@testing-library/react';
|
||||
import CodeBlock from '../CodeBlock';
|
||||
|
||||
describe('CodeBlock', () => {
|
||||
// Mock clipboard API
|
||||
const originalClipboard = navigator.clipboard;
|
||||
const mockWriteText = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
Object.assign(navigator, {
|
||||
clipboard: {
|
||||
writeText: mockWriteText,
|
||||
},
|
||||
});
|
||||
vi.useFakeTimers();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
Object.assign(navigator, {
|
||||
clipboard: originalClipboard,
|
||||
});
|
||||
vi.restoreAllMocks();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders code content correctly', () => {
|
||||
const code = 'print("Hello, World!")';
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
// Check that the code content is rendered (text is within code element)
|
||||
const codeElement = container.querySelector('code');
|
||||
expect(codeElement?.textContent).toContain('print(');
|
||||
// Due to string splitting in regex, checking for function call
|
||||
expect(container.querySelector('.text-blue-400')?.textContent).toContain('print(');
|
||||
});
|
||||
|
||||
it('renders multi-line code with line numbers', () => {
|
||||
const code = 'line 1\nline 2\nline 3';
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
// Check line numbers
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
expect(screen.getByText('2')).toBeInTheDocument();
|
||||
expect(screen.getByText('3')).toBeInTheDocument();
|
||||
|
||||
// Check content
|
||||
expect(screen.getByText(/line 1/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/line 2/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/line 3/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders terminal-style dots', () => {
|
||||
render(<CodeBlock code="test code" />);
|
||||
|
||||
const container = screen.getByRole('button', { name: /copy code/i }).closest('div');
|
||||
expect(container).toBeInTheDocument();
|
||||
|
||||
// Check for the presence of the terminal-style dots container
|
||||
const dotsContainer = container?.querySelector('.flex.gap-1\\.5');
|
||||
expect(dotsContainer).toBeInTheDocument();
|
||||
expect(dotsContainer?.children).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Language and Filename', () => {
|
||||
it('applies default language class when no language specified', () => {
|
||||
const code = 'test code';
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
const codeElement = screen.getByText(/test code/).closest('code');
|
||||
expect(codeElement).toHaveClass('language-python');
|
||||
});
|
||||
|
||||
it('applies custom language class when specified', () => {
|
||||
const code = 'const x = 1;';
|
||||
render(<CodeBlock code={code} language="javascript" />);
|
||||
|
||||
const codeElement = screen.getByText(/const x = 1/).closest('code');
|
||||
expect(codeElement).toHaveClass('language-javascript');
|
||||
});
|
||||
|
||||
it('displays filename when provided', () => {
|
||||
const code = 'test code';
|
||||
const filename = 'example.py';
|
||||
render(<CodeBlock code={code} filename={filename} />);
|
||||
|
||||
expect(screen.getByText(filename)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not display filename when not provided', () => {
|
||||
const code = 'test code';
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
// The filename element should not exist in the DOM
|
||||
const filenameElement = screen.queryByText(/\.py$/);
|
||||
expect(filenameElement).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Copy Functionality', () => {
|
||||
it('renders copy button', () => {
|
||||
render(<CodeBlock code="test code" />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
expect(copyButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('copies code to clipboard when copy button is clicked', async () => {
|
||||
const code = 'print("Copy me!")';
|
||||
mockWriteText.mockResolvedValue(undefined);
|
||||
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
fireEvent.click(copyButton);
|
||||
|
||||
expect(mockWriteText).toHaveBeenCalledWith(code);
|
||||
});
|
||||
|
||||
it('shows check icon after successful copy', async () => {
|
||||
const code = 'test code';
|
||||
mockWriteText.mockResolvedValue(undefined);
|
||||
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
|
||||
// Initially should show Copy icon
|
||||
let copyIcon = copyButton.querySelector('svg');
|
||||
expect(copyIcon).toBeInTheDocument();
|
||||
|
||||
// Click to copy
|
||||
fireEvent.click(copyButton);
|
||||
|
||||
// Should immediately show Check icon (synchronous state update)
|
||||
const checkIcon = container.querySelector('.text-green-400');
|
||||
expect(checkIcon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('reverts to copy icon after 2 seconds', () => {
|
||||
const code = 'test code';
|
||||
mockWriteText.mockResolvedValue(undefined);
|
||||
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
|
||||
// Click to copy
|
||||
fireEvent.click(copyButton);
|
||||
|
||||
// Should show Check icon
|
||||
let checkIcon = container.querySelector('.text-green-400');
|
||||
expect(checkIcon).toBeInTheDocument();
|
||||
|
||||
// Fast-forward 2 seconds using act to wrap state updates
|
||||
vi.advanceTimersByTime(2000);
|
||||
|
||||
// Should revert to Copy icon (check icon should be gone)
|
||||
checkIcon = container.querySelector('.text-green-400');
|
||||
expect(checkIcon).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Syntax Highlighting', () => {
|
||||
it('highlights Python comments', () => {
|
||||
const code = '# This is a comment';
|
||||
render(<CodeBlock code={code} language="python" />);
|
||||
|
||||
const commentElement = screen.getByText(/This is a comment/);
|
||||
expect(commentElement).toBeInTheDocument();
|
||||
expect(commentElement).toHaveClass('text-gray-500');
|
||||
});
|
||||
|
||||
it('highlights JavaScript comments', () => {
|
||||
const code = '// This is a comment';
|
||||
render(<CodeBlock code={code} language="javascript" />);
|
||||
|
||||
const commentElement = screen.getByText(/This is a comment/);
|
||||
expect(commentElement).toBeInTheDocument();
|
||||
expect(commentElement).toHaveClass('text-gray-500');
|
||||
});
|
||||
|
||||
it('highlights string literals', () => {
|
||||
const code = 'print("Hello World")';
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
const stringElements = container.querySelectorAll('.text-green-400');
|
||||
expect(stringElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('highlights Python keywords', () => {
|
||||
const code = 'def my_function():';
|
||||
const { container } = render(<CodeBlock code={code} language="python" />);
|
||||
|
||||
const keywordElements = container.querySelectorAll('.text-purple-400');
|
||||
expect(keywordElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('highlights function calls', () => {
|
||||
const code = 'print("test")';
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
const functionElements = container.querySelectorAll('.text-blue-400');
|
||||
expect(functionElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('highlights multiple keywords in a line', () => {
|
||||
const code = 'if True return None';
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
const keywordElements = container.querySelectorAll('.text-purple-400');
|
||||
// Should highlight 'if', 'True', 'return', and 'None'
|
||||
expect(keywordElements.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('does not highlight non-keyword words', () => {
|
||||
const code = 'my_variable = 42';
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
const codeText = screen.getByText(/my_variable/);
|
||||
expect(codeText).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Complex Code Examples', () => {
|
||||
it('handles Python code with multiple syntax elements', () => {
|
||||
const code = `def greet(name):
|
||||
# Print a greeting
|
||||
return "Hello, " + name`;
|
||||
|
||||
render(<CodeBlock code={code} language="python" />);
|
||||
|
||||
// Check that all lines are rendered
|
||||
expect(screen.getByText(/def/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Print a greeting/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/return/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles JavaScript code', () => {
|
||||
const code = `const greeting = "Hello";
|
||||
// Log the greeting
|
||||
console.log(greeting);`;
|
||||
|
||||
render(<CodeBlock code={code} language="javascript" />);
|
||||
|
||||
expect(screen.getByText(/const greeting =/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Log the greeting/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/console.log/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('preserves indentation and whitespace', () => {
|
||||
const code = `def test():
|
||||
if True:
|
||||
return 1`;
|
||||
|
||||
const { container } = render(<CodeBlock code={code} />);
|
||||
|
||||
// Check for whitespace-pre class which preserves whitespace
|
||||
const codeLines = container.querySelectorAll('.whitespace-pre');
|
||||
expect(codeLines.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('handles empty code string', () => {
|
||||
render(<CodeBlock code="" />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
expect(copyButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles code with only whitespace', () => {
|
||||
const code = ' \n \n ';
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
// Should still render line numbers
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles very long single line', () => {
|
||||
const code = 'x = ' + 'a'.repeat(1000);
|
||||
render(<CodeBlock code={code} />);
|
||||
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles special characters in code', () => {
|
||||
const code = 'const regex = /[a-z]+/g;';
|
||||
render(<CodeBlock code={code} language="javascript" />);
|
||||
|
||||
expect(screen.getByText(/regex/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles quotes within strings', () => {
|
||||
const code = 'const msg = "test message";';
|
||||
const { container } = render(<CodeBlock code={code} language="javascript" />);
|
||||
|
||||
// Code should be rendered
|
||||
expect(container.querySelector('code')).toBeInTheDocument();
|
||||
// Should have string highlighting
|
||||
expect(container.querySelectorAll('.text-green-400').length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('has accessible copy button with title', () => {
|
||||
render(<CodeBlock code="test" />);
|
||||
|
||||
const copyButton = screen.getByRole('button', { name: /copy code/i });
|
||||
expect(copyButton).toHaveAttribute('title', 'Copy code');
|
||||
});
|
||||
|
||||
it('uses semantic HTML elements', () => {
|
||||
const { container } = render(<CodeBlock code="test" />);
|
||||
|
||||
const preElement = container.querySelector('pre');
|
||||
const codeElement = container.querySelector('code');
|
||||
|
||||
expect(preElement).toBeInTheDocument();
|
||||
expect(codeElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('line numbers are not selectable', () => {
|
||||
const { container } = render(<CodeBlock code="line 1\nline 2" />);
|
||||
|
||||
const lineNumbers = container.querySelectorAll('.select-none');
|
||||
expect(lineNumbers.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('applies dark theme styling', () => {
|
||||
const { container } = render(<CodeBlock code="test" />);
|
||||
|
||||
const mainContainer = container.querySelector('.bg-gray-900');
|
||||
expect(mainContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies proper border and shadow', () => {
|
||||
const { container } = render(<CodeBlock code="test" />);
|
||||
|
||||
const mainContainer = container.querySelector('.border-gray-800.shadow-2xl');
|
||||
expect(mainContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies monospace font to code', () => {
|
||||
const { container } = render(<CodeBlock code="test" />);
|
||||
|
||||
const preElement = container.querySelector('pre.font-mono');
|
||||
expect(preElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies correct text colors', () => {
|
||||
const { container } = render(<CodeBlock code="test" />);
|
||||
|
||||
const codeText = container.querySelector('.text-gray-300');
|
||||
expect(codeText).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,431 @@
|
||||
/**
|
||||
* Unit tests for FAQAccordion component
|
||||
*
|
||||
* Tests the FAQ accordion functionality including:
|
||||
* - Rendering questions and answers
|
||||
* - Expanding and collapsing items
|
||||
* - Single-item accordion behavior (only one open at a time)
|
||||
* - Accessibility attributes
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import FAQAccordion from '../FAQAccordion';
|
||||
|
||||
// Test data
|
||||
const mockFAQItems = [
|
||||
{
|
||||
question: 'What is SmoothSchedule?',
|
||||
answer: 'SmoothSchedule is a comprehensive scheduling platform for businesses.',
|
||||
},
|
||||
{
|
||||
question: 'How much does it cost?',
|
||||
answer: 'We offer flexible pricing plans starting at $29/month.',
|
||||
},
|
||||
{
|
||||
question: 'Can I try it for free?',
|
||||
answer: 'Yes! We offer a 14-day free trial with no credit card required.',
|
||||
},
|
||||
];
|
||||
|
||||
describe('FAQAccordion', () => {
|
||||
describe('Rendering', () => {
|
||||
it('should render all questions', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
expect(screen.getByText('What is SmoothSchedule?')).toBeInTheDocument();
|
||||
expect(screen.getByText('How much does it cost?')).toBeInTheDocument();
|
||||
expect(screen.getByText('Can I try it for free?')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render first item as expanded by default', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
// First answer should be visible
|
||||
expect(
|
||||
screen.getByText('SmoothSchedule is a comprehensive scheduling platform for businesses.')
|
||||
).toBeInTheDocument();
|
||||
|
||||
// Other answers should not be visible
|
||||
expect(
|
||||
screen.queryByText('We offer flexible pricing plans starting at $29/month.')
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.queryByText('Yes! We offer a 14-day free trial with no credit card required.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with empty items array', () => {
|
||||
const { container } = render(<FAQAccordion items={[]} />);
|
||||
|
||||
// Should render the container but no items
|
||||
expect(container.querySelector('.space-y-4')).toBeInTheDocument();
|
||||
expect(container.querySelectorAll('button')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('should render with single item', () => {
|
||||
const singleItem = [mockFAQItems[0]];
|
||||
render(<FAQAccordion items={singleItem} />);
|
||||
|
||||
expect(screen.getByText('What is SmoothSchedule?')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText('SmoothSchedule is a comprehensive scheduling platform for businesses.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have aria-expanded attribute on buttons', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
|
||||
// First button should be expanded (default)
|
||||
expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// Other buttons should be collapsed
|
||||
expect(buttons[1]).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(buttons[2]).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
it('should update aria-expanded when item is toggled', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const secondButton = buttons[1];
|
||||
|
||||
// Initially collapsed
|
||||
expect(secondButton).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(secondButton);
|
||||
|
||||
// Now expanded
|
||||
expect(secondButton).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('should have proper button semantics', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
|
||||
buttons.forEach((button) => {
|
||||
// Each button should have text content
|
||||
expect(button.textContent).toBeTruthy();
|
||||
|
||||
// Each button should be clickable
|
||||
expect(button).toBeEnabled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Expand/Collapse Behavior', () => {
|
||||
it('should expand answer when question is clicked', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const secondQuestion = screen.getByText('How much does it cost?');
|
||||
|
||||
// Answer should be in the document but potentially hidden
|
||||
const answer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
|
||||
const answerContainer = answer.closest('.overflow-hidden');
|
||||
|
||||
// Initially collapsed (max-h-0)
|
||||
expect(answerContainer).toHaveClass('max-h-0');
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(secondQuestion);
|
||||
|
||||
// Now expanded (max-h-96)
|
||||
expect(answerContainer).toHaveClass('max-h-96');
|
||||
});
|
||||
|
||||
it('should collapse answer when clicking expanded question', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstQuestion = screen.getByText('What is SmoothSchedule?');
|
||||
const answer = screen.getByText(
|
||||
'SmoothSchedule is a comprehensive scheduling platform for businesses.'
|
||||
);
|
||||
const answerContainer = answer.closest('.overflow-hidden');
|
||||
|
||||
// Initially expanded (first item is open by default)
|
||||
expect(answerContainer).toHaveClass('max-h-96');
|
||||
|
||||
// Click to collapse
|
||||
fireEvent.click(firstQuestion);
|
||||
|
||||
// Now collapsed
|
||||
expect(answerContainer).toHaveClass('max-h-0');
|
||||
});
|
||||
|
||||
it('should collapse answer when clicking it again (toggle)', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const secondQuestion = screen.getByText('How much does it cost?');
|
||||
const answer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
|
||||
const answerContainer = answer.closest('.overflow-hidden');
|
||||
|
||||
// Initially collapsed
|
||||
expect(answerContainer).toHaveClass('max-h-0');
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(secondQuestion);
|
||||
expect(answerContainer).toHaveClass('max-h-96');
|
||||
|
||||
// Click again to collapse
|
||||
fireEvent.click(secondQuestion);
|
||||
expect(answerContainer).toHaveClass('max-h-0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Single Item Accordion Behavior', () => {
|
||||
it('should only allow one item to be expanded at a time', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstQuestion = screen.getByText('What is SmoothSchedule?');
|
||||
const secondQuestion = screen.getByText('How much does it cost?');
|
||||
const thirdQuestion = screen.getByText('Can I try it for free?');
|
||||
|
||||
const firstAnswer = screen.getByText(
|
||||
'SmoothSchedule is a comprehensive scheduling platform for businesses.'
|
||||
);
|
||||
const secondAnswer = screen.getByText(
|
||||
'We offer flexible pricing plans starting at $29/month.'
|
||||
);
|
||||
const thirdAnswer = screen.getByText(
|
||||
'Yes! We offer a 14-day free trial with no credit card required.'
|
||||
);
|
||||
|
||||
// Initially, first item is expanded
|
||||
expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
|
||||
expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
|
||||
// Click second question
|
||||
fireEvent.click(secondQuestion);
|
||||
|
||||
// Now only second item is expanded
|
||||
expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
|
||||
expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
|
||||
// Click third question
|
||||
fireEvent.click(thirdQuestion);
|
||||
|
||||
// Now only third item is expanded
|
||||
expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
|
||||
|
||||
// Click first question
|
||||
fireEvent.click(firstQuestion);
|
||||
|
||||
// Back to first item expanded
|
||||
expect(firstAnswer.closest('.overflow-hidden')).toHaveClass('max-h-96');
|
||||
expect(secondAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
expect(thirdAnswer.closest('.overflow-hidden')).toHaveClass('max-h-0');
|
||||
});
|
||||
|
||||
it('should close the currently open item when opening another', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
|
||||
// First button is expanded by default
|
||||
expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
|
||||
expect(buttons[1]).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
// Click second button
|
||||
fireEvent.click(buttons[1]);
|
||||
|
||||
// First button should now be collapsed, second expanded
|
||||
expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('should allow collapsing all items by clicking the open one', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstQuestion = screen.getByText('What is SmoothSchedule?');
|
||||
const buttons = screen.getAllByRole('button');
|
||||
|
||||
// Initially first item is expanded
|
||||
expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// Click to collapse
|
||||
fireEvent.click(firstQuestion);
|
||||
|
||||
// All items should be collapsed
|
||||
buttons.forEach((button) => {
|
||||
expect(button).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Chevron Icon Rotation', () => {
|
||||
it('should rotate chevron icon when item is expanded', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const firstButton = buttons[0];
|
||||
const secondButton = buttons[1];
|
||||
|
||||
// First item is expanded, so chevron should be rotated
|
||||
const firstChevron = firstButton.querySelector('svg');
|
||||
expect(firstChevron).toHaveClass('rotate-180');
|
||||
|
||||
// Second item is collapsed, so chevron should not be rotated
|
||||
const secondChevron = secondButton.querySelector('svg');
|
||||
expect(secondChevron).not.toHaveClass('rotate-180');
|
||||
|
||||
// Click second button
|
||||
fireEvent.click(secondButton);
|
||||
|
||||
// Now second chevron should be rotated, first should not
|
||||
expect(firstChevron).not.toHaveClass('rotate-180');
|
||||
expect(secondChevron).toHaveClass('rotate-180');
|
||||
});
|
||||
|
||||
it('should toggle chevron rotation when item is clicked multiple times', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstButton = screen.getAllByRole('button')[0];
|
||||
const chevron = firstButton.querySelector('svg');
|
||||
|
||||
// Initially rotated (first item is expanded)
|
||||
expect(chevron).toHaveClass('rotate-180');
|
||||
|
||||
// Click to collapse
|
||||
fireEvent.click(firstButton);
|
||||
expect(chevron).not.toHaveClass('rotate-180');
|
||||
|
||||
// Click to expand
|
||||
fireEvent.click(firstButton);
|
||||
expect(chevron).toHaveClass('rotate-180');
|
||||
|
||||
// Click to collapse again
|
||||
fireEvent.click(firstButton);
|
||||
expect(chevron).not.toHaveClass('rotate-180');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle items with long text content', () => {
|
||||
const longTextItems = [
|
||||
{
|
||||
question: 'This is a very long question that might wrap to multiple lines in the UI?',
|
||||
answer:
|
||||
'This is a very long answer with lots of text. ' +
|
||||
'It contains multiple sentences and provides detailed information. ' +
|
||||
'The accordion should handle this gracefully without breaking the layout. ' +
|
||||
'Users should be able to read all of this content when the item is expanded.',
|
||||
},
|
||||
];
|
||||
|
||||
render(<FAQAccordion items={longTextItems} />);
|
||||
|
||||
expect(
|
||||
screen.getByText('This is a very long question that might wrap to multiple lines in the UI?')
|
||||
).toBeInTheDocument();
|
||||
|
||||
const answer = screen.getByText(/This is a very long answer with lots of text/);
|
||||
expect(answer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle items with special characters', () => {
|
||||
const specialCharItems = [
|
||||
{
|
||||
question: 'What about <special> & "characters"?',
|
||||
answer: 'We support all UTF-8 characters: é, ñ, 中文, 日本語!',
|
||||
},
|
||||
];
|
||||
|
||||
render(<FAQAccordion items={specialCharItems} />);
|
||||
|
||||
expect(screen.getByText('What about <special> & "characters"?')).toBeInTheDocument();
|
||||
expect(screen.getByText('We support all UTF-8 characters: é, ñ, 中文, 日本語!')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle rapid clicking without breaking', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
|
||||
// Rapidly click different buttons
|
||||
fireEvent.click(buttons[0]);
|
||||
fireEvent.click(buttons[1]);
|
||||
fireEvent.click(buttons[2]);
|
||||
fireEvent.click(buttons[0]);
|
||||
fireEvent.click(buttons[1]);
|
||||
|
||||
// Should still be functional - second button should be expanded
|
||||
expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
|
||||
expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
|
||||
expect(buttons[2]).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
it('should handle clicking on the same item multiple times', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstButton = screen.getAllByRole('button')[0];
|
||||
|
||||
// Initially expanded
|
||||
expect(firstButton).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
// Click multiple times
|
||||
fireEvent.click(firstButton);
|
||||
expect(firstButton).toHaveAttribute('aria-expanded', 'false');
|
||||
|
||||
fireEvent.click(firstButton);
|
||||
expect(firstButton).toHaveAttribute('aria-expanded', 'true');
|
||||
|
||||
fireEvent.click(firstButton);
|
||||
expect(firstButton).toHaveAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Visual States', () => {
|
||||
it('should apply correct CSS classes for expanded state', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const firstAnswer = screen.getByText(
|
||||
'SmoothSchedule is a comprehensive scheduling platform for businesses.'
|
||||
);
|
||||
const answerContainer = firstAnswer.closest('.overflow-hidden');
|
||||
|
||||
// Expanded state should have max-h-96
|
||||
expect(answerContainer).toHaveClass('max-h-96');
|
||||
expect(answerContainer).toHaveClass('transition-all');
|
||||
expect(answerContainer).toHaveClass('duration-200');
|
||||
});
|
||||
|
||||
it('should apply correct CSS classes for collapsed state', () => {
|
||||
render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
const secondAnswer = screen.getByText('We offer flexible pricing plans starting at $29/month.');
|
||||
const answerContainer = secondAnswer.closest('.overflow-hidden');
|
||||
|
||||
// Collapsed state should have max-h-0
|
||||
expect(answerContainer).toHaveClass('max-h-0');
|
||||
expect(answerContainer).toHaveClass('overflow-hidden');
|
||||
});
|
||||
|
||||
it('should have proper container structure', () => {
|
||||
const { container } = render(<FAQAccordion items={mockFAQItems} />);
|
||||
|
||||
// Root container should have space-y-4
|
||||
const rootDiv = container.querySelector('.space-y-4');
|
||||
expect(rootDiv).toBeInTheDocument();
|
||||
|
||||
// Each item should have proper styling
|
||||
const itemContainers = container.querySelectorAll('.bg-white');
|
||||
expect(itemContainers).toHaveLength(mockFAQItems.length);
|
||||
|
||||
itemContainers.forEach((item) => {
|
||||
expect(item).toHaveClass('rounded-xl');
|
||||
expect(item).toHaveClass('border');
|
||||
expect(item).toHaveClass('overflow-hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
688
frontend/src/components/marketing/__tests__/FeatureCard.test.tsx
Normal file
688
frontend/src/components/marketing/__tests__/FeatureCard.test.tsx
Normal file
@@ -0,0 +1,688 @@
|
||||
/**
|
||||
* Unit tests for FeatureCard component
|
||||
*
|
||||
* Tests the FeatureCard marketing component including:
|
||||
* - Basic rendering with title and description
|
||||
* - Icon rendering with different colors
|
||||
* - CSS classes and styling
|
||||
* - Hover states and animations
|
||||
* - Accessibility
|
||||
*/
|
||||
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Calendar, Clock, Users, CheckCircle, AlertCircle } from 'lucide-react';
|
||||
import FeatureCard from '../FeatureCard';
|
||||
|
||||
describe('FeatureCard', () => {
|
||||
describe('Basic Rendering', () => {
|
||||
it('should render with title and description', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Easy Scheduling"
|
||||
description="Schedule appointments with ease using our intuitive calendar interface."
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Easy Scheduling')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText('Schedule appointments with ease using our intuitive calendar interface.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with different content', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Users}
|
||||
title="Team Management"
|
||||
description="Manage your team members and their availability efficiently."
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Team Management')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText('Manage your team members and their availability efficiently.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with long description text', () => {
|
||||
const longDescription =
|
||||
'This is a very long description that contains multiple sentences. It should wrap properly and display all the content. Our feature card component is designed to handle various lengths of text gracefully.';
|
||||
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Clock}
|
||||
title="Time Tracking"
|
||||
description={longDescription}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(longDescription)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with empty description', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={CheckCircle}
|
||||
title="Success Tracking"
|
||||
description=""
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Success Tracking')).toBeInTheDocument();
|
||||
// Empty description should still render the paragraph element
|
||||
const descriptionElement = screen.getByText('Success Tracking').parentElement?.querySelector('p');
|
||||
expect(descriptionElement).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icon Rendering', () => {
|
||||
it('should render the provided icon', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Calendar Feature"
|
||||
description="Calendar description"
|
||||
/>
|
||||
);
|
||||
|
||||
// Check for SVG element (icons are rendered as SVG)
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toBeInTheDocument();
|
||||
expect(svgElement).toHaveClass('h-6', 'w-6');
|
||||
});
|
||||
|
||||
it('should render different icons correctly', () => {
|
||||
const { container: container1 } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Feature 1"
|
||||
description="Description 1"
|
||||
/>
|
||||
);
|
||||
|
||||
const { container: container2 } = render(
|
||||
<FeatureCard
|
||||
icon={Users}
|
||||
title="Feature 2"
|
||||
description="Description 2"
|
||||
/>
|
||||
);
|
||||
|
||||
// Both should have SVG elements
|
||||
expect(container1.querySelector('svg')).toBeInTheDocument();
|
||||
expect(container2.querySelector('svg')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct icon size classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Clock}
|
||||
title="Time Feature"
|
||||
description="Time description"
|
||||
/>
|
||||
);
|
||||
|
||||
const svgElement = container.querySelector('svg');
|
||||
expect(svgElement).toHaveClass('h-6');
|
||||
expect(svgElement).toHaveClass('w-6');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icon Colors', () => {
|
||||
it('should render with default brand color when no iconColor prop provided', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Default Color"
|
||||
description="Uses brand color by default"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-brand-100');
|
||||
expect(iconWrapper).toHaveClass('dark:bg-brand-900/30');
|
||||
expect(iconWrapper).toHaveClass('text-brand-600');
|
||||
expect(iconWrapper).toHaveClass('dark:text-brand-400');
|
||||
});
|
||||
|
||||
it('should render with brand color when explicitly set', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Brand Color"
|
||||
description="Explicit brand color"
|
||||
iconColor="brand"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-brand-100');
|
||||
expect(iconWrapper).toHaveClass('text-brand-600');
|
||||
});
|
||||
|
||||
it('should render with green color', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={CheckCircle}
|
||||
title="Success Feature"
|
||||
description="Green icon color"
|
||||
iconColor="green"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-green-100');
|
||||
expect(iconWrapper).toHaveClass('dark:bg-green-900/30');
|
||||
expect(iconWrapper).toHaveClass('text-green-600');
|
||||
expect(iconWrapper).toHaveClass('dark:text-green-400');
|
||||
});
|
||||
|
||||
it('should render with purple color', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Users}
|
||||
title="Purple Feature"
|
||||
description="Purple icon color"
|
||||
iconColor="purple"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-purple-100');
|
||||
expect(iconWrapper).toHaveClass('text-purple-600');
|
||||
});
|
||||
|
||||
it('should render with orange color', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={AlertCircle}
|
||||
title="Warning Feature"
|
||||
description="Orange icon color"
|
||||
iconColor="orange"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-orange-100');
|
||||
expect(iconWrapper).toHaveClass('text-orange-600');
|
||||
});
|
||||
|
||||
it('should render with pink color', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Pink Feature"
|
||||
description="Pink icon color"
|
||||
iconColor="pink"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-pink-100');
|
||||
expect(iconWrapper).toHaveClass('text-pink-600');
|
||||
});
|
||||
|
||||
it('should render with cyan color', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Clock}
|
||||
title="Cyan Feature"
|
||||
description="Cyan icon color"
|
||||
iconColor="cyan"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-cyan-100');
|
||||
expect(iconWrapper).toHaveClass('text-cyan-600');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling and CSS Classes', () => {
|
||||
it('should apply base card styling classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Card Styling"
|
||||
description="Testing base styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('group');
|
||||
expect(cardElement).toHaveClass('p-6');
|
||||
expect(cardElement).toHaveClass('bg-white');
|
||||
expect(cardElement).toHaveClass('dark:bg-gray-800');
|
||||
expect(cardElement).toHaveClass('rounded-2xl');
|
||||
});
|
||||
|
||||
it('should apply border classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Border Test"
|
||||
description="Testing border styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('border');
|
||||
expect(cardElement).toHaveClass('border-gray-200');
|
||||
expect(cardElement).toHaveClass('dark:border-gray-700');
|
||||
});
|
||||
|
||||
it('should apply hover border classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Hover Border"
|
||||
description="Testing hover border styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('hover:border-brand-300');
|
||||
expect(cardElement).toHaveClass('dark:hover:border-brand-700');
|
||||
});
|
||||
|
||||
it('should apply shadow classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Shadow Test"
|
||||
description="Testing shadow styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('hover:shadow-lg');
|
||||
expect(cardElement).toHaveClass('hover:shadow-brand-600/5');
|
||||
});
|
||||
|
||||
it('should apply transition classes', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Transition Test"
|
||||
description="Testing transition styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('transition-all');
|
||||
expect(cardElement).toHaveClass('duration-300');
|
||||
});
|
||||
|
||||
it('should apply icon wrapper styling', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Icon Wrapper"
|
||||
description="Testing icon wrapper styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('p-3');
|
||||
expect(iconWrapper).toHaveClass('rounded-xl');
|
||||
expect(iconWrapper).toHaveClass('mb-4');
|
||||
});
|
||||
|
||||
it('should apply title styling', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Title Styling"
|
||||
description="Testing title styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Title Styling');
|
||||
expect(titleElement).toHaveClass('text-lg');
|
||||
expect(titleElement).toHaveClass('font-semibold');
|
||||
expect(titleElement).toHaveClass('text-gray-900');
|
||||
expect(titleElement).toHaveClass('dark:text-white');
|
||||
expect(titleElement).toHaveClass('mb-2');
|
||||
});
|
||||
|
||||
it('should apply title hover classes', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Hover Title"
|
||||
description="Testing title hover styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Hover Title');
|
||||
expect(titleElement).toHaveClass('group-hover:text-brand-600');
|
||||
expect(titleElement).toHaveClass('dark:group-hover:text-brand-400');
|
||||
expect(titleElement).toHaveClass('transition-colors');
|
||||
});
|
||||
|
||||
it('should apply description styling', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Description Style"
|
||||
description="Testing description styles"
|
||||
/>
|
||||
);
|
||||
|
||||
const descriptionElement = screen.getByText('Testing description styles');
|
||||
expect(descriptionElement).toHaveClass('text-gray-600');
|
||||
expect(descriptionElement).toHaveClass('dark:text-gray-400');
|
||||
expect(descriptionElement).toHaveClass('leading-relaxed');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Hover and Animation States', () => {
|
||||
it('should have group class for hover effects', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Group Hover"
|
||||
description="Testing group hover functionality"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('group');
|
||||
});
|
||||
|
||||
it('should support mouse hover interactions', async () => {
|
||||
const user = userEvent.setup();
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Mouse Hover"
|
||||
description="Testing mouse hover"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
|
||||
// Hovering should not cause errors
|
||||
await user.hover(cardElement);
|
||||
expect(cardElement).toBeInTheDocument();
|
||||
|
||||
// Unhovering should not cause errors
|
||||
await user.unhover(cardElement);
|
||||
expect(cardElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain structure during hover', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Structure Test"
|
||||
description="Testing structure during hover"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Structure Test');
|
||||
const descriptionElement = screen.getByText('Testing structure during hover');
|
||||
|
||||
// Hover over the card
|
||||
await user.hover(titleElement.closest('.group')!);
|
||||
|
||||
// Elements should still be present
|
||||
expect(titleElement).toBeInTheDocument();
|
||||
expect(descriptionElement).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should use semantic HTML heading for title', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Semantic Title"
|
||||
description="Testing semantic HTML"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Semantic Title');
|
||||
expect(titleElement.tagName).toBe('H3');
|
||||
});
|
||||
|
||||
it('should use paragraph element for description', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Semantic Description"
|
||||
description="Testing paragraph element"
|
||||
/>
|
||||
);
|
||||
|
||||
const descriptionElement = screen.getByText('Testing paragraph element');
|
||||
expect(descriptionElement.tagName).toBe('P');
|
||||
});
|
||||
|
||||
it('should maintain readable text contrast', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Contrast Test"
|
||||
description="Testing text contrast"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Contrast Test');
|
||||
const descriptionElement = screen.getByText('Testing text contrast');
|
||||
|
||||
// Title should have dark text (gray-900)
|
||||
expect(titleElement).toHaveClass('text-gray-900');
|
||||
// Description should have readable gray
|
||||
expect(descriptionElement).toHaveClass('text-gray-600');
|
||||
});
|
||||
|
||||
it('should be keyboard accessible when used in interactive context', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Keyboard Test"
|
||||
description="Testing keyboard accessibility"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
// Card itself is not interactive, so it shouldn't have tabIndex
|
||||
expect(cardElement).not.toHaveAttribute('tabIndex');
|
||||
});
|
||||
|
||||
it('should support screen readers with proper text hierarchy', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Screen Reader Test"
|
||||
description="This is a longer description that screen readers will announce."
|
||||
/>
|
||||
);
|
||||
|
||||
// Check that heading comes before paragraph in DOM order
|
||||
const heading = container.querySelector('h3');
|
||||
const paragraph = container.querySelector('p');
|
||||
|
||||
expect(heading).toBeInTheDocument();
|
||||
expect(paragraph).toBeInTheDocument();
|
||||
|
||||
// Verify DOM order (heading should appear before paragraph)
|
||||
const headingPosition = Array.from(container.querySelectorAll('*')).indexOf(heading!);
|
||||
const paragraphPosition = Array.from(container.querySelectorAll('*')).indexOf(paragraph!);
|
||||
expect(headingPosition).toBeLessThan(paragraphPosition);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should include dark mode classes for card background', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Dark Mode Card"
|
||||
description="Testing dark mode"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('dark:bg-gray-800');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for borders', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Dark Mode Border"
|
||||
description="Testing dark mode borders"
|
||||
/>
|
||||
);
|
||||
|
||||
const cardElement = container.firstChild as HTMLElement;
|
||||
expect(cardElement).toHaveClass('dark:border-gray-700');
|
||||
expect(cardElement).toHaveClass('dark:hover:border-brand-700');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for title text', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Dark Mode Title"
|
||||
description="Testing dark mode title"
|
||||
/>
|
||||
);
|
||||
|
||||
const titleElement = screen.getByText('Dark Mode Title');
|
||||
expect(titleElement).toHaveClass('dark:text-white');
|
||||
expect(titleElement).toHaveClass('dark:group-hover:text-brand-400');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for description text', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Dark Mode Description"
|
||||
description="Testing dark mode description"
|
||||
/>
|
||||
);
|
||||
|
||||
const descriptionElement = screen.getByText('Testing dark mode description');
|
||||
expect(descriptionElement).toHaveClass('dark:text-gray-400');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for icon colors', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Dark Mode Icon"
|
||||
description="Testing dark mode icon"
|
||||
iconColor="green"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('dark:bg-green-900/30');
|
||||
expect(iconWrapper).toHaveClass('dark:text-green-400');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Component Props Validation', () => {
|
||||
it('should handle all required props', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Required Props"
|
||||
description="All required props provided"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.firstChild).toBeInTheDocument();
|
||||
expect(screen.getByText('Required Props')).toBeInTheDocument();
|
||||
expect(screen.getByText('All required props provided')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle optional iconColor prop', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Optional Props"
|
||||
description="Optional iconColor provided"
|
||||
iconColor="purple"
|
||||
/>
|
||||
);
|
||||
|
||||
const iconWrapper = container.querySelector('.inline-flex');
|
||||
expect(iconWrapper).toHaveClass('bg-purple-100');
|
||||
});
|
||||
|
||||
it('should render correctly with minimal props', () => {
|
||||
const { container } = render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Min Props"
|
||||
description="Minimal props"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.firstChild).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge Cases', () => {
|
||||
it('should handle very long title text', () => {
|
||||
const longTitle = 'This is a very long title that might wrap to multiple lines in the card';
|
||||
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title={longTitle}
|
||||
description="Normal description"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(longTitle)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle special characters in title', () => {
|
||||
const specialTitle = 'Special <>&"\' Characters';
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title={specialTitle}
|
||||
description="Testing special chars"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(specialTitle)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle special characters in description', () => {
|
||||
const specialDescription = 'Description with <>&"\' special characters';
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Special Chars"
|
||||
description={specialDescription}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText(specialDescription)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should handle unicode characters', () => {
|
||||
render(
|
||||
<FeatureCard
|
||||
icon={Calendar}
|
||||
title="Unicode Test 你好 🎉"
|
||||
description="Description with émojis and 中文"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Unicode Test 你好 🎉")).toBeInTheDocument();
|
||||
expect(screen.getByText("Description with émojis and 中文")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
544
frontend/src/components/marketing/__tests__/Footer.test.tsx
Normal file
544
frontend/src/components/marketing/__tests__/Footer.test.tsx
Normal file
@@ -0,0 +1,544 @@
|
||||
/**
|
||||
* Unit tests for Footer component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering with all sections
|
||||
* - Footer navigation links (Product, Company, Legal)
|
||||
* - Social media links
|
||||
* - Copyright text with dynamic year
|
||||
* - Brand logo and name
|
||||
* - Link accessibility
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import Footer from '../Footer';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'marketing.nav.features': 'Features',
|
||||
'marketing.nav.pricing': 'Pricing',
|
||||
'marketing.nav.getStarted': 'Get Started',
|
||||
'marketing.nav.about': 'About',
|
||||
'marketing.nav.contact': 'Contact',
|
||||
'marketing.footer.legal.privacy': 'Privacy Policy',
|
||||
'marketing.footer.legal.terms': 'Terms of Service',
|
||||
'marketing.footer.product.title': 'Product',
|
||||
'marketing.footer.company.title': 'Company',
|
||||
'marketing.footer.legal.title': 'Legal',
|
||||
'marketing.footer.brandName': 'Smooth Schedule',
|
||||
'marketing.description': 'The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.',
|
||||
'marketing.footer.copyright': 'Smooth Schedule Inc. All rights reserved.',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock SmoothScheduleLogo component
|
||||
vi.mock('../../SmoothScheduleLogo', () => ({
|
||||
default: ({ className }: { className?: string }) => (
|
||||
<svg data-testid="smooth-schedule-logo" className={className}>
|
||||
<path d="test" />
|
||||
</svg>
|
||||
),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Footer', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the footer element', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
expect(footer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all main sections', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Product')).toBeInTheDocument();
|
||||
expect(screen.getByText('Company')).toBeInTheDocument();
|
||||
expect(screen.getByText('Legal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct CSS classes for styling', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
expect(footer).toHaveClass('bg-gray-50');
|
||||
expect(footer).toHaveClass('dark:bg-gray-900');
|
||||
expect(footer).toHaveClass('border-t');
|
||||
expect(footer).toHaveClass('border-gray-200');
|
||||
expect(footer).toHaveClass('dark:border-gray-800');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Brand Section', () => {
|
||||
it('should render the SmoothSchedule logo', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const logo = screen.getByTestId('smooth-schedule-logo');
|
||||
expect(logo).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render brand name with translation', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render brand description', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(
|
||||
screen.getByText(
|
||||
'The all-in-one scheduling platform for businesses of all sizes. Manage resources, staff, and bookings effortlessly.'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should link logo to homepage', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const logoLink = screen.getByRole('link', { name: /smooth schedule/i });
|
||||
expect(logoLink).toHaveAttribute('href', '/');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Product Links', () => {
|
||||
it('should render Product section title', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Product')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Features link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const featuresLink = screen.getByRole('link', { name: 'Features' });
|
||||
expect(featuresLink).toBeInTheDocument();
|
||||
expect(featuresLink).toHaveAttribute('href', '/features');
|
||||
});
|
||||
|
||||
it('should render Pricing link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const pricingLink = screen.getByRole('link', { name: 'Pricing' });
|
||||
expect(pricingLink).toBeInTheDocument();
|
||||
expect(pricingLink).toHaveAttribute('href', '/pricing');
|
||||
});
|
||||
|
||||
it('should render Get Started link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const getStartedLink = screen.getByRole('link', { name: 'Get Started' });
|
||||
expect(getStartedLink).toBeInTheDocument();
|
||||
expect(getStartedLink).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should apply correct styling to product links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const featuresLink = screen.getByRole('link', { name: 'Features' });
|
||||
expect(featuresLink).toHaveClass('text-sm');
|
||||
expect(featuresLink).toHaveClass('text-gray-600');
|
||||
expect(featuresLink).toHaveClass('dark:text-gray-400');
|
||||
expect(featuresLink).toHaveClass('hover:text-brand-600');
|
||||
expect(featuresLink).toHaveClass('dark:hover:text-brand-400');
|
||||
expect(featuresLink).toHaveClass('transition-colors');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Company Links', () => {
|
||||
it('should render Company section title', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Company')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render About link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const aboutLink = screen.getByRole('link', { name: 'About' });
|
||||
expect(aboutLink).toBeInTheDocument();
|
||||
expect(aboutLink).toHaveAttribute('href', '/about');
|
||||
});
|
||||
|
||||
it('should render Contact link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const contactLink = screen.getByRole('link', { name: 'Contact' });
|
||||
expect(contactLink).toBeInTheDocument();
|
||||
expect(contactLink).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should apply correct styling to company links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const aboutLink = screen.getByRole('link', { name: 'About' });
|
||||
expect(aboutLink).toHaveClass('text-sm');
|
||||
expect(aboutLink).toHaveClass('text-gray-600');
|
||||
expect(aboutLink).toHaveClass('dark:text-gray-400');
|
||||
expect(aboutLink).toHaveClass('hover:text-brand-600');
|
||||
expect(aboutLink).toHaveClass('dark:hover:text-brand-400');
|
||||
expect(aboutLink).toHaveClass('transition-colors');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Legal Links', () => {
|
||||
it('should render Legal section title', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Legal')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Privacy Policy link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
|
||||
expect(privacyLink).toBeInTheDocument();
|
||||
expect(privacyLink).toHaveAttribute('href', '/privacy');
|
||||
});
|
||||
|
||||
it('should render Terms of Service link', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const termsLink = screen.getByRole('link', { name: 'Terms of Service' });
|
||||
expect(termsLink).toBeInTheDocument();
|
||||
expect(termsLink).toHaveAttribute('href', '/terms');
|
||||
});
|
||||
|
||||
it('should apply correct styling to legal links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const privacyLink = screen.getByRole('link', { name: 'Privacy Policy' });
|
||||
expect(privacyLink).toHaveClass('text-sm');
|
||||
expect(privacyLink).toHaveClass('text-gray-600');
|
||||
expect(privacyLink).toHaveClass('dark:text-gray-400');
|
||||
expect(privacyLink).toHaveClass('hover:text-brand-600');
|
||||
expect(privacyLink).toHaveClass('dark:hover:text-brand-400');
|
||||
expect(privacyLink).toHaveClass('transition-colors');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Social Media Links', () => {
|
||||
it('should render all social media links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByLabelText('Twitter')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('LinkedIn')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('GitHub')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('YouTube')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Twitter link with correct href', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const twitterLink = screen.getByLabelText('Twitter');
|
||||
expect(twitterLink).toHaveAttribute('href', 'https://twitter.com/smoothschedule');
|
||||
expect(twitterLink).toHaveAttribute('target', '_blank');
|
||||
expect(twitterLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
|
||||
it('should render LinkedIn link with correct href', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const linkedinLink = screen.getByLabelText('LinkedIn');
|
||||
expect(linkedinLink).toHaveAttribute('href', 'https://linkedin.com/company/smoothschedule');
|
||||
expect(linkedinLink).toHaveAttribute('target', '_blank');
|
||||
expect(linkedinLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
|
||||
it('should render GitHub link with correct href', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const githubLink = screen.getByLabelText('GitHub');
|
||||
expect(githubLink).toHaveAttribute('href', 'https://github.com/smoothschedule');
|
||||
expect(githubLink).toHaveAttribute('target', '_blank');
|
||||
expect(githubLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
|
||||
it('should render YouTube link with correct href', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const youtubeLink = screen.getByLabelText('YouTube');
|
||||
expect(youtubeLink).toHaveAttribute('href', 'https://youtube.com/@smoothschedule');
|
||||
expect(youtubeLink).toHaveAttribute('target', '_blank');
|
||||
expect(youtubeLink).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
});
|
||||
|
||||
it('should apply correct styling to social links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const twitterLink = screen.getByLabelText('Twitter');
|
||||
expect(twitterLink).toHaveClass('p-2');
|
||||
expect(twitterLink).toHaveClass('rounded-lg');
|
||||
expect(twitterLink).toHaveClass('text-gray-500');
|
||||
expect(twitterLink).toHaveClass('hover:text-brand-600');
|
||||
expect(twitterLink).toHaveClass('dark:text-gray-400');
|
||||
expect(twitterLink).toHaveClass('dark:hover:text-brand-400');
|
||||
expect(twitterLink).toHaveClass('hover:bg-gray-100');
|
||||
expect(twitterLink).toHaveClass('dark:hover:bg-gray-800');
|
||||
expect(twitterLink).toHaveClass('transition-colors');
|
||||
});
|
||||
|
||||
it('should render social media icons as SVGs', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const twitterLink = screen.getByLabelText('Twitter');
|
||||
const icon = twitterLink.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
expect(icon).toHaveClass('h-5', 'w-5');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Copyright Section', () => {
|
||||
it('should render copyright text', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
expect(
|
||||
screen.getByText(/Smooth Schedule Inc. All rights reserved./i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display current year in copyright', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
expect(screen.getByText(new RegExp(currentYear.toString()))).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct styling to copyright text', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const copyrightElement = screen.getByText(
|
||||
/Smooth Schedule Inc. All rights reserved./i
|
||||
);
|
||||
expect(copyrightElement).toHaveClass('text-sm');
|
||||
expect(copyrightElement).toHaveClass('text-center');
|
||||
expect(copyrightElement).toHaveClass('text-gray-500');
|
||||
expect(copyrightElement).toHaveClass('dark:text-gray-400');
|
||||
});
|
||||
|
||||
it('should have proper spacing from content', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const copyrightElement = screen.getByText(
|
||||
/Smooth Schedule Inc. All rights reserved./i
|
||||
);
|
||||
const parent = copyrightElement.parentElement;
|
||||
expect(parent).toHaveClass('mt-12');
|
||||
expect(parent).toHaveClass('pt-8');
|
||||
expect(parent).toHaveClass('border-t');
|
||||
expect(parent).toHaveClass('border-gray-200');
|
||||
expect(parent).toHaveClass('dark:border-gray-800');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Section Titles', () => {
|
||||
it('should style section titles consistently', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const productTitle = screen.getByText('Product');
|
||||
expect(productTitle).toHaveClass('text-sm');
|
||||
expect(productTitle).toHaveClass('font-semibold');
|
||||
expect(productTitle).toHaveClass('text-gray-900');
|
||||
expect(productTitle).toHaveClass('dark:text-white');
|
||||
expect(productTitle).toHaveClass('uppercase');
|
||||
expect(productTitle).toHaveClass('tracking-wider');
|
||||
expect(productTitle).toHaveClass('mb-4');
|
||||
});
|
||||
|
||||
it('should render all section titles with h3 tags', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const titles = ['Product', 'Company', 'Legal'];
|
||||
titles.forEach((title) => {
|
||||
const element = screen.getByText(title);
|
||||
expect(element.tagName).toBe('H3');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should use semantic footer element', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
expect(footer.tagName).toBe('FOOTER');
|
||||
});
|
||||
|
||||
it('should have aria-label on social links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const socialLabels = ['Twitter', 'LinkedIn', 'GitHub', 'YouTube'];
|
||||
socialLabels.forEach((label) => {
|
||||
const link = screen.getByLabelText(label);
|
||||
expect(link).toHaveAttribute('aria-label', label);
|
||||
});
|
||||
});
|
||||
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const headings = screen.getAllByRole('heading', { level: 3 });
|
||||
expect(headings).toHaveLength(3);
|
||||
expect(headings[0]).toHaveTextContent('Product');
|
||||
expect(headings[1]).toHaveTextContent('Company');
|
||||
expect(headings[2]).toHaveTextContent('Legal');
|
||||
});
|
||||
|
||||
it('should have list structure for links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const lists = screen.getAllByRole('list');
|
||||
expect(lists.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('should have keyboard-accessible links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
links.forEach((link) => {
|
||||
expect(link).toBeInTheDocument();
|
||||
expect(link.tagName).toBe('A');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Layout and Structure', () => {
|
||||
it('should use grid layout for sections', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
const gridContainer = footer.querySelector('.grid');
|
||||
expect(gridContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive grid classes', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
const gridContainer = footer.querySelector('.grid');
|
||||
expect(gridContainer).toHaveClass('grid-cols-2');
|
||||
expect(gridContainer).toHaveClass('md:grid-cols-4');
|
||||
expect(gridContainer).toHaveClass('gap-8');
|
||||
expect(gridContainer).toHaveClass('lg:gap-12');
|
||||
});
|
||||
|
||||
it('should have proper padding on container', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
const container = footer.querySelector('.max-w-7xl');
|
||||
expect(container).toHaveClass('max-w-7xl');
|
||||
expect(container).toHaveClass('mx-auto');
|
||||
expect(container).toHaveClass('px-4');
|
||||
expect(container).toHaveClass('sm:px-6');
|
||||
expect(container).toHaveClass('lg:px-8');
|
||||
expect(container).toHaveClass('py-12');
|
||||
expect(container).toHaveClass('lg:py-16');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translations for all text content', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
// Product links
|
||||
expect(screen.getByText('Features')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pricing')).toBeInTheDocument();
|
||||
expect(screen.getByText('Get Started')).toBeInTheDocument();
|
||||
|
||||
// Company links
|
||||
expect(screen.getByText('About')).toBeInTheDocument();
|
||||
expect(screen.getByText('Contact')).toBeInTheDocument();
|
||||
|
||||
// Legal links
|
||||
expect(screen.getByText('Privacy Policy')).toBeInTheDocument();
|
||||
expect(screen.getByText('Terms of Service')).toBeInTheDocument();
|
||||
|
||||
// Section titles
|
||||
expect(screen.getByText('Product')).toBeInTheDocument();
|
||||
expect(screen.getByText('Company')).toBeInTheDocument();
|
||||
expect(screen.getByText('Legal')).toBeInTheDocument();
|
||||
|
||||
// Brand and copyright
|
||||
expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/Smooth Schedule Inc\. All rights reserved\./i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete footer with all sections', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
// Brand section
|
||||
expect(screen.getByTestId('smooth-schedule-logo')).toBeInTheDocument();
|
||||
expect(screen.getByText('Smooth Schedule')).toBeInTheDocument();
|
||||
|
||||
// Navigation sections
|
||||
expect(screen.getByText('Product')).toBeInTheDocument();
|
||||
expect(screen.getByText('Company')).toBeInTheDocument();
|
||||
expect(screen.getByText('Legal')).toBeInTheDocument();
|
||||
|
||||
// Social links
|
||||
expect(screen.getByLabelText('Twitter')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('LinkedIn')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('GitHub')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('YouTube')).toBeInTheDocument();
|
||||
|
||||
// Copyright
|
||||
const currentYear = new Date().getFullYear();
|
||||
expect(screen.getByText(new RegExp(currentYear.toString()))).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText(/Smooth Schedule Inc\. All rights reserved\./i)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct number of navigation links', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
const allLinks = screen.getAllByRole('link');
|
||||
// 1 logo link + 3 product + 2 company + 2 legal + 4 social = 12 total
|
||||
expect(allLinks).toHaveLength(12);
|
||||
});
|
||||
|
||||
it('should maintain proper visual hierarchy', () => {
|
||||
render(<Footer />, { wrapper: createWrapper() });
|
||||
|
||||
// Check that sections are in correct order
|
||||
const footer = screen.getByRole('contentinfo');
|
||||
const text = footer.textContent || '';
|
||||
|
||||
// Brand should come before sections
|
||||
const brandIndex = text.indexOf('Smooth Schedule');
|
||||
const productIndex = text.indexOf('Product');
|
||||
const companyIndex = text.indexOf('Company');
|
||||
const legalIndex = text.indexOf('Legal');
|
||||
|
||||
expect(brandIndex).toBeLessThan(productIndex);
|
||||
expect(productIndex).toBeLessThan(companyIndex);
|
||||
expect(companyIndex).toBeLessThan(legalIndex);
|
||||
});
|
||||
});
|
||||
});
|
||||
625
frontend/src/components/marketing/__tests__/Hero.test.tsx
Normal file
625
frontend/src/components/marketing/__tests__/Hero.test.tsx
Normal file
@@ -0,0 +1,625 @@
|
||||
/**
|
||||
* Unit tests for Hero component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering with all elements
|
||||
* - Headline and title rendering
|
||||
* - Subheadline/description rendering
|
||||
* - CTA buttons presence and functionality
|
||||
* - Visual content and graphics rendering
|
||||
* - Feature badges display
|
||||
* - Responsive design elements
|
||||
* - Accessibility attributes
|
||||
* - Internationalization (i18n)
|
||||
* - Background decorative elements
|
||||
* - Statistics and metrics display
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
import Hero from '../Hero';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
// Return mock translations based on key
|
||||
const translations: Record<string, string> = {
|
||||
'marketing.hero.badge': 'New: Automation Marketplace',
|
||||
'marketing.hero.title': 'The Operating System for',
|
||||
'marketing.hero.titleHighlight': 'Service Businesses',
|
||||
'marketing.hero.description': 'Orchestrate your entire operation with intelligent scheduling and powerful automation. No coding required.',
|
||||
'marketing.hero.startFreeTrial': 'Start Free Trial',
|
||||
'marketing.hero.watchDemo': 'Watch Demo',
|
||||
'marketing.hero.noCreditCard': 'No credit card required',
|
||||
'marketing.hero.freeTrial': '14-day free trial',
|
||||
'marketing.hero.cancelAnytime': 'Cancel anytime',
|
||||
'marketing.hero.visualContent.automatedSuccess': 'Automated Success',
|
||||
'marketing.hero.visualContent.autopilot': 'Your business, running on autopilot.',
|
||||
'marketing.hero.visualContent.revenue': 'Revenue',
|
||||
'marketing.hero.visualContent.noShows': 'No-Shows',
|
||||
'marketing.hero.visualContent.revenueOptimized': 'Revenue Optimized',
|
||||
'marketing.hero.visualContent.thisWeek': '+$2,400 this week',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Hero', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Component Rendering', () => {
|
||||
it('should render the hero section', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heroSection = screen.getByText(/The Operating System for/i).closest('div');
|
||||
expect(heroSection).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without crashing', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should have proper semantic structure', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Should have h1 for main heading
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Headline and Title Rendering', () => {
|
||||
it('should render main headline', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const headline = screen.getByText(/The Operating System for/i);
|
||||
expect(headline).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render highlighted title text', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const highlightedTitle = screen.getByText(/Service Businesses/i);
|
||||
expect(highlightedTitle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render headline as h1 element', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toHaveTextContent(/The Operating System for/i);
|
||||
expect(heading).toHaveTextContent(/Service Businesses/i);
|
||||
});
|
||||
|
||||
it('should apply proper styling to headline', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toHaveClass('font-bold');
|
||||
expect(heading).toHaveClass('tracking-tight');
|
||||
});
|
||||
|
||||
it('should highlight title portion with brand color', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const highlightedTitle = screen.getByText(/Service Businesses/i);
|
||||
expect(highlightedTitle).toHaveClass('text-brand-600');
|
||||
expect(highlightedTitle).toHaveClass('dark:text-brand-400');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Subheadline/Description Rendering', () => {
|
||||
it('should render description text', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/Orchestrate your entire operation/i);
|
||||
expect(description).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render complete description', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/intelligent scheduling and powerful automation/i);
|
||||
expect(description).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply proper styling to description', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/Orchestrate your entire operation/i);
|
||||
expect(description.tagName).toBe('P');
|
||||
expect(description).toHaveClass('text-lg');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Badge Display', () => {
|
||||
it('should render new feature badge', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const badge = screen.getByText(/New: Automation Marketplace/i);
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should include animated pulse indicator', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const pulseElement = container.querySelector('.animate-pulse');
|
||||
expect(pulseElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply badge styling', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const badge = screen.getByText(/New: Automation Marketplace/i);
|
||||
expect(badge).toHaveClass('text-sm');
|
||||
expect(badge).toHaveClass('font-medium');
|
||||
});
|
||||
});
|
||||
|
||||
describe('CTA Buttons', () => {
|
||||
it('should render Start Free Trial button', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
expect(ctaButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Watch Demo button', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
|
||||
expect(demoButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct href for Start Free Trial button', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
expect(ctaButton).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should have correct href for Watch Demo button', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
|
||||
expect(demoButton).toHaveAttribute('href', '/features');
|
||||
});
|
||||
|
||||
it('should render primary CTA with brand colors', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
expect(ctaButton).toHaveClass('bg-brand-600');
|
||||
expect(ctaButton).toHaveClass('hover:bg-brand-700');
|
||||
expect(ctaButton).toHaveClass('text-white');
|
||||
});
|
||||
|
||||
it('should render secondary CTA with outline style', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
|
||||
expect(demoButton).toHaveClass('border');
|
||||
expect(demoButton).toHaveClass('border-gray-200');
|
||||
});
|
||||
|
||||
it('should include ArrowRight icon in primary CTA', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
const icon = ctaButton.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should include Play icon in secondary CTA', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const demoButton = screen.getByRole('link', { name: /Watch Demo/i });
|
||||
const icon = demoButton.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should be clickable (keyboard accessible)', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const ctaButton = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
|
||||
// Should be focusable
|
||||
await user.tab();
|
||||
// Check if any link is focused (may not be the first due to badge)
|
||||
expect(document.activeElement).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Feature Checkmarks', () => {
|
||||
it('should display no credit card feature', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const feature = screen.getByText(/No credit card required/i);
|
||||
expect(feature).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display free trial feature', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const feature = screen.getByText(/14-day free trial/i);
|
||||
expect(feature).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display cancel anytime feature', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const feature = screen.getByText(/Cancel anytime/i);
|
||||
expect(feature).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render CheckCircle2 icons for features', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Should have multiple check circle icons
|
||||
const checkIcons = container.querySelectorAll('svg');
|
||||
expect(checkIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Visual Content and Graphics', () => {
|
||||
it('should render visual content section', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const visualHeading = screen.getByText(/Automated Success/i);
|
||||
expect(visualHeading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render visual content description', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/Your business, running on autopilot/i);
|
||||
expect(description).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render revenue metric', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const revenueMetric = screen.getByText(/\+24%/i);
|
||||
expect(revenueMetric).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render no-shows metric', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const noShowsMetric = screen.getByText(/-40%/i);
|
||||
expect(noShowsMetric).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render revenue label', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const label = screen.getByText(/^Revenue$/i);
|
||||
expect(label).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render no-shows label', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const label = screen.getByText(/^No-Shows$/i);
|
||||
expect(label).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have gradient background on visual content', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const gradientElement = container.querySelector('.bg-gradient-to-br');
|
||||
expect(gradientElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render visual content as h3', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 3, name: /Automated Success/i });
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Floating Badge', () => {
|
||||
it('should render floating revenue badge', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const badge = screen.getByText(/Revenue Optimized/i);
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render weekly revenue amount', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const amount = screen.getByText(/\+\$2,400 this week/i);
|
||||
expect(amount).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have bounce animation', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Find element with animate-bounce-slow (custom animation class)
|
||||
const badge = container.querySelector('.animate-bounce-slow');
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should include CheckCircle2 icon in badge', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// The badge has an SVG icon, check for its presence in the floating badge area
|
||||
const badge = screen.getByText(/Revenue Optimized/i).parentElement?.parentElement;
|
||||
const icon = badge?.querySelector('svg');
|
||||
expect(icon).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Design', () => {
|
||||
it('should use grid layout for content', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const gridElement = container.querySelector('.grid');
|
||||
expect(gridElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive grid columns', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const gridElement = container.querySelector('.lg\\:grid-cols-2');
|
||||
expect(gridElement).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive text alignment', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Text should be centered on mobile, left-aligned on larger screens
|
||||
const textContainer = container.querySelector('.text-center.lg\\:text-left');
|
||||
expect(textContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive heading sizes', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toHaveClass('text-4xl');
|
||||
expect(heading).toHaveClass('sm:text-5xl');
|
||||
expect(heading).toHaveClass('lg:text-6xl');
|
||||
});
|
||||
|
||||
it('should have responsive button layout', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const buttonContainer = container.querySelector('.flex-col.sm\\:flex-row');
|
||||
expect(buttonContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Background Elements', () => {
|
||||
it('should render decorative background elements', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Should have blur effects
|
||||
const blurElements = container.querySelectorAll('.blur-3xl');
|
||||
expect(blurElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have brand-colored background element', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const brandBg = container.querySelector('.bg-brand-500\\/10');
|
||||
expect(brandBg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have purple background element', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const purpleBg = container.querySelector('.bg-purple-500\\/10');
|
||||
expect(purpleBg).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have accessible heading hierarchy', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const h1 = screen.getByRole('heading', { level: 1 });
|
||||
const h3 = screen.getByRole('heading', { level: 3 });
|
||||
|
||||
expect(h1).toBeInTheDocument();
|
||||
expect(h3).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have accessible link text', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const primaryCTA = screen.getByRole('link', { name: /Start Free Trial/i });
|
||||
const secondaryCTA = screen.getByRole('link', { name: /Watch Demo/i });
|
||||
|
||||
expect(primaryCTA).toHaveAccessibleName();
|
||||
expect(secondaryCTA).toHaveAccessibleName();
|
||||
});
|
||||
|
||||
it('should not use ambiguous link text', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Should not have links with text like "Click here" or "Read more"
|
||||
const links = screen.getAllByRole('link');
|
||||
links.forEach(link => {
|
||||
expect(link.textContent).not.toMatch(/^click here$/i);
|
||||
expect(link.textContent).not.toMatch(/^read more$/i);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translations for badge text', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const badge = screen.getByText(/New: Automation Marketplace/i);
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for main title', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/The Operating System for/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Service Businesses/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for description', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/Orchestrate your entire operation/i);
|
||||
expect(description).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for CTA buttons', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByRole('link', { name: /Start Free Trial/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /Watch Demo/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for features', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/No credit card required/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/14-day free trial/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Cancel anytime/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for visual content', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/Automated Success/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Your business, running on autopilot/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Revenue Optimized/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should have dark mode classes for main container', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const mainContainer = container.querySelector('.dark\\:bg-gray-900');
|
||||
expect(mainContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have dark mode classes for text elements', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toHaveClass('dark:text-white');
|
||||
});
|
||||
|
||||
it('should have dark mode classes for description', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const description = screen.getByText(/Orchestrate your entire operation/i);
|
||||
expect(description).toHaveClass('dark:text-gray-400');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Layout and Spacing', () => {
|
||||
it('should have proper padding on container', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const mainSection = container.querySelector('.pt-16');
|
||||
expect(mainSection).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive padding', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const section = container.querySelector('.lg\\:pt-24');
|
||||
expect(section).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have proper margins between elements', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
expect(heading).toHaveClass('mb-6');
|
||||
});
|
||||
|
||||
it('should constrain max width', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const constrainedContainer = container.querySelector('.max-w-7xl');
|
||||
expect(constrainedContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration Tests', () => {
|
||||
it('should render all major sections together', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Text content
|
||||
expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
|
||||
expect(screen.getByText(/Orchestrate your entire operation/i)).toBeInTheDocument();
|
||||
|
||||
// CTAs
|
||||
expect(screen.getByRole('link', { name: /Start Free Trial/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: /Watch Demo/i })).toBeInTheDocument();
|
||||
|
||||
// Features
|
||||
expect(screen.getByText(/No credit card required/i)).toBeInTheDocument();
|
||||
|
||||
// Visual content
|
||||
expect(screen.getByText(/Automated Success/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Revenue Optimized/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain proper component structure', () => {
|
||||
const { container } = render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
// Grid layout
|
||||
const grid = container.querySelector('.grid');
|
||||
expect(grid).toBeInTheDocument();
|
||||
|
||||
// Background elements
|
||||
const backgrounds = container.querySelectorAll('.blur-3xl');
|
||||
expect(backgrounds.length).toBeGreaterThan(0);
|
||||
|
||||
// Visual content area
|
||||
const visualContent = screen.getByText(/Automated Success/i).closest('div');
|
||||
expect(visualContent).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have complete feature set displayed', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
const features = [
|
||||
/No credit card required/i,
|
||||
/14-day free trial/i,
|
||||
/Cancel anytime/i,
|
||||
];
|
||||
|
||||
features.forEach(feature => {
|
||||
expect(screen.getByText(feature)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should have complete metrics displayed', () => {
|
||||
render(<Hero />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/\+24%/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/-40%/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/\+\$2,400 this week/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
439
frontend/src/components/marketing/__tests__/HowItWorks.test.tsx
Normal file
439
frontend/src/components/marketing/__tests__/HowItWorks.test.tsx
Normal file
@@ -0,0 +1,439 @@
|
||||
/**
|
||||
* Unit tests for HowItWorks component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Section title and subtitle rendering
|
||||
* - All three steps are displayed
|
||||
* - Step numbers (01, 02, 03) are present
|
||||
* - Icons from lucide-react render correctly
|
||||
* - Step titles and descriptions render
|
||||
* - Connector lines between steps (desktop only)
|
||||
* - Color theming for each step
|
||||
* - Responsive grid layout
|
||||
* - Accessibility
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import HowItWorks from '../HowItWorks';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'marketing.howItWorks.title': 'Get Started in Minutes',
|
||||
'marketing.howItWorks.subtitle': 'Three simple steps to transform your scheduling',
|
||||
'marketing.howItWorks.step1.title': 'Create Your Account',
|
||||
'marketing.howItWorks.step1.description': 'Sign up for free and set up your business profile in minutes.',
|
||||
'marketing.howItWorks.step2.title': 'Add Your Services',
|
||||
'marketing.howItWorks.step2.description': 'Configure your services, pricing, and available resources.',
|
||||
'marketing.howItWorks.step3.title': 'Start Booking',
|
||||
'marketing.howItWorks.step3.description': 'Share your booking link and let customers schedule instantly.',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('HowItWorks', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Section Header', () => {
|
||||
it('should render the section title', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByRole('heading', {
|
||||
name: 'Get Started in Minutes',
|
||||
level: 2,
|
||||
});
|
||||
expect(title).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the section subtitle', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const subtitle = screen.getByText('Three simple steps to transform your scheduling');
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct styling to section title', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByRole('heading', { level: 2 });
|
||||
expect(title).toHaveClass('text-3xl');
|
||||
expect(title).toHaveClass('sm:text-4xl');
|
||||
expect(title).toHaveClass('font-bold');
|
||||
expect(title).toHaveClass('text-gray-900');
|
||||
expect(title).toHaveClass('dark:text-white');
|
||||
});
|
||||
|
||||
it('should apply correct styling to subtitle', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const subtitle = screen.getByText('Three simple steps to transform your scheduling');
|
||||
expect(subtitle).toHaveClass('text-lg');
|
||||
expect(subtitle).toHaveClass('text-gray-600');
|
||||
expect(subtitle).toHaveClass('dark:text-gray-400');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Steps Display', () => {
|
||||
it('should render all three steps', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const step1 = screen.getByText('Create Your Account');
|
||||
const step2 = screen.getByText('Add Your Services');
|
||||
const step3 = screen.getByText('Start Booking');
|
||||
|
||||
expect(step1).toBeInTheDocument();
|
||||
expect(step2).toBeInTheDocument();
|
||||
expect(step3).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render step descriptions', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const desc1 = screen.getByText('Sign up for free and set up your business profile in minutes.');
|
||||
const desc2 = screen.getByText('Configure your services, pricing, and available resources.');
|
||||
const desc3 = screen.getByText('Share your booking link and let customers schedule instantly.');
|
||||
|
||||
expect(desc1).toBeInTheDocument();
|
||||
expect(desc2).toBeInTheDocument();
|
||||
expect(desc3).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use heading level 3 for step titles', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const stepHeadings = screen.getAllByRole('heading', { level: 3 });
|
||||
expect(stepHeadings).toHaveLength(3);
|
||||
expect(stepHeadings[0]).toHaveTextContent('Create Your Account');
|
||||
expect(stepHeadings[1]).toHaveTextContent('Add Your Services');
|
||||
expect(stepHeadings[2]).toHaveTextContent('Start Booking');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Step Numbers', () => {
|
||||
it('should display step number 01', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const stepNumber = screen.getByText('01');
|
||||
expect(stepNumber).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display step number 02', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const stepNumber = screen.getByText('02');
|
||||
expect(stepNumber).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display step number 03', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const stepNumber = screen.getByText('03');
|
||||
expect(stepNumber).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply correct styling to step numbers', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const stepNumber = screen.getByText('01');
|
||||
expect(stepNumber).toHaveClass('text-sm');
|
||||
expect(stepNumber).toHaveClass('font-bold');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Icons', () => {
|
||||
it('should render SVG icons for all steps', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Each step should have an icon (lucide-react renders as SVG)
|
||||
const icons = container.querySelectorAll('svg');
|
||||
expect(icons.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('should render icons with correct size classes', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const icons = container.querySelectorAll('svg');
|
||||
icons.forEach((icon) => {
|
||||
expect(icon).toHaveClass('h-8');
|
||||
expect(icon).toHaveClass('w-8');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Grid Layout', () => {
|
||||
it('should render steps in a grid container', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const grid = container.querySelector('.grid');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should apply responsive grid classes', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const grid = container.querySelector('.grid');
|
||||
expect(grid).toHaveClass('md:grid-cols-3');
|
||||
expect(grid).toHaveClass('gap-8');
|
||||
expect(grid).toHaveClass('lg:gap-12');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Card Styling', () => {
|
||||
it('should render each step in a card', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const cards = container.querySelectorAll('.bg-white');
|
||||
expect(cards.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
|
||||
it('should apply card border and rounded corners', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const cards = container.querySelectorAll('.rounded-2xl');
|
||||
expect(cards.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Color Themes', () => {
|
||||
it('should apply brand color theme to step 1', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Check for brand color classes
|
||||
const brandElements = container.querySelectorAll('.text-brand-600, .bg-brand-100');
|
||||
expect(brandElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply purple color theme to step 2', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Check for purple color classes
|
||||
const purpleElements = container.querySelectorAll('.text-purple-600, .bg-purple-100');
|
||||
expect(purpleElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply green color theme to step 3', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Check for green color classes
|
||||
const greenElements = container.querySelectorAll('.text-green-600, .bg-green-100');
|
||||
expect(greenElements.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Connector Lines', () => {
|
||||
it('should render connector lines between steps', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Connector lines have absolute positioning and gradient
|
||||
const connectors = container.querySelectorAll('.bg-gradient-to-r');
|
||||
expect(connectors.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
it('should hide connector lines on mobile', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const connectors = container.querySelectorAll('.hidden.md\\:block');
|
||||
// Should have 2 connector lines (between step 1-2 and 2-3)
|
||||
expect(connectors.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Section Styling', () => {
|
||||
it('should apply section background color', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('bg-gray-50');
|
||||
expect(section).toHaveClass('dark:bg-gray-800/50');
|
||||
});
|
||||
|
||||
it('should apply section padding', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('py-20');
|
||||
expect(section).toHaveClass('lg:py-28');
|
||||
});
|
||||
|
||||
it('should use max-width container', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const maxWidthContainer = container.querySelector('.max-w-7xl');
|
||||
expect(maxWidthContainer).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should use semantic section element', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
// h2 for main title
|
||||
const h2 = screen.getByRole('heading', { level: 2 });
|
||||
expect(h2).toBeInTheDocument();
|
||||
|
||||
// h3 for step titles
|
||||
const h3Elements = screen.getAllByRole('heading', { level: 3 });
|
||||
expect(h3Elements).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should have readable text content', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByText('Get Started in Minutes');
|
||||
const subtitle = screen.getByText('Three simple steps to transform your scheduling');
|
||||
|
||||
expect(title).toBeVisible();
|
||||
expect(subtitle).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translation for section title', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByText('Get Started in Minutes');
|
||||
expect(title).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translation for section subtitle', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const subtitle = screen.getByText('Three simple steps to transform your scheduling');
|
||||
expect(subtitle).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for all step titles', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
expect(screen.getByText('Create Your Account')).toBeInTheDocument();
|
||||
expect(screen.getByText('Add Your Services')).toBeInTheDocument();
|
||||
expect(screen.getByText('Start Booking')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for all step descriptions', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
expect(screen.getByText('Sign up for free and set up your business profile in minutes.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Configure your services, pricing, and available resources.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Share your booking link and let customers schedule instantly.')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Design', () => {
|
||||
it('should apply responsive text sizing to title', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByRole('heading', { level: 2 });
|
||||
expect(title).toHaveClass('text-3xl');
|
||||
expect(title).toHaveClass('sm:text-4xl');
|
||||
});
|
||||
|
||||
it('should apply responsive padding to section', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('py-20');
|
||||
expect(section).toHaveClass('lg:py-28');
|
||||
});
|
||||
|
||||
it('should apply responsive padding to container', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const containerDiv = container.querySelector('.max-w-7xl');
|
||||
expect(containerDiv).toHaveClass('px-4');
|
||||
expect(containerDiv).toHaveClass('sm:px-6');
|
||||
expect(containerDiv).toHaveClass('lg:px-8');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should include dark mode classes for title', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const title = screen.getByRole('heading', { level: 2 });
|
||||
expect(title).toHaveClass('dark:text-white');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for subtitle', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
const subtitle = screen.getByText('Three simple steps to transform your scheduling');
|
||||
expect(subtitle).toHaveClass('dark:text-gray-400');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for section background', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toHaveClass('dark:bg-gray-800/50');
|
||||
});
|
||||
|
||||
it('should include dark mode classes for cards', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
const cards = container.querySelectorAll('.dark\\:bg-gray-800');
|
||||
expect(cards.length).toBeGreaterThanOrEqual(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete component with all elements', () => {
|
||||
render(<HowItWorks />);
|
||||
|
||||
// Header
|
||||
expect(screen.getByRole('heading', { level: 2, name: 'Get Started in Minutes' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Three simple steps to transform your scheduling')).toBeInTheDocument();
|
||||
|
||||
// All steps
|
||||
expect(screen.getByText('01')).toBeInTheDocument();
|
||||
expect(screen.getByText('02')).toBeInTheDocument();
|
||||
expect(screen.getByText('03')).toBeInTheDocument();
|
||||
|
||||
// All titles
|
||||
expect(screen.getByText('Create Your Account')).toBeInTheDocument();
|
||||
expect(screen.getByText('Add Your Services')).toBeInTheDocument();
|
||||
expect(screen.getByText('Start Booking')).toBeInTheDocument();
|
||||
|
||||
// All descriptions
|
||||
expect(screen.getByText('Sign up for free and set up your business profile in minutes.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Configure your services, pricing, and available resources.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Share your booking link and let customers schedule instantly.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain proper structure and layout', () => {
|
||||
const { container } = render(<HowItWorks />);
|
||||
|
||||
// Section element
|
||||
const section = container.querySelector('section');
|
||||
expect(section).toBeInTheDocument();
|
||||
|
||||
// Container
|
||||
const maxWidthContainer = section?.querySelector('.max-w-7xl');
|
||||
expect(maxWidthContainer).toBeInTheDocument();
|
||||
|
||||
// Grid
|
||||
const grid = maxWidthContainer?.querySelector('.grid');
|
||||
expect(grid).toBeInTheDocument();
|
||||
|
||||
// Cards
|
||||
const cards = grid?.querySelectorAll('.bg-white');
|
||||
expect(cards?.length).toBe(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
739
frontend/src/components/marketing/__tests__/Navbar.test.tsx
Normal file
739
frontend/src/components/marketing/__tests__/Navbar.test.tsx
Normal file
@@ -0,0 +1,739 @@
|
||||
/**
|
||||
* Unit tests for Navbar component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Logo and brand rendering
|
||||
* - Navigation links presence
|
||||
* - Login/signup buttons
|
||||
* - Mobile menu toggle functionality
|
||||
* - Scroll behavior (background change on scroll)
|
||||
* - Theme toggle functionality
|
||||
* - User authentication states
|
||||
* - Dashboard URL generation based on user role
|
||||
* - Route change effects on mobile menu
|
||||
* - Accessibility attributes
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { BrowserRouter, MemoryRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import Navbar from '../Navbar';
|
||||
import { User } from '../../../api/auth';
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => {
|
||||
const translations: Record<string, string> = {
|
||||
'marketing.nav.features': 'Features',
|
||||
'marketing.nav.pricing': 'Pricing',
|
||||
'marketing.nav.about': 'About',
|
||||
'marketing.nav.contact': 'Contact',
|
||||
'marketing.nav.login': 'Login',
|
||||
'marketing.nav.getStarted': 'Get Started',
|
||||
'marketing.nav.brandName': 'Smooth Schedule',
|
||||
'marketing.nav.switchToLightMode': 'Switch to light mode',
|
||||
'marketing.nav.switchToDarkMode': 'Switch to dark mode',
|
||||
'marketing.nav.toggleMenu': 'Toggle menu',
|
||||
};
|
||||
return translations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Mock SmoothScheduleLogo
|
||||
vi.mock('../../SmoothScheduleLogo', () => ({
|
||||
default: ({ className }: { className?: string }) => (
|
||||
<div data-testid="smooth-schedule-logo" className={className}>Logo</div>
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock LanguageSelector
|
||||
vi.mock('../../LanguageSelector', () => ({
|
||||
default: () => <div data-testid="language-selector">Language</div>,
|
||||
}));
|
||||
|
||||
// Mock domain utilities
|
||||
vi.mock('../../../utils/domain', () => ({
|
||||
buildSubdomainUrl: (subdomain: string | null, path: string = '/') => {
|
||||
if (subdomain) {
|
||||
return `http://${subdomain}.lvh.me:5173${path}`;
|
||||
}
|
||||
return `http://lvh.me:5173${path}`;
|
||||
},
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = (initialRoute: string = '/') => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<MemoryRouter initialEntries={[initialRoute]}>{children}</MemoryRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Navbar', () => {
|
||||
const mockToggleTheme = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
// Reset window.scrollY before each test
|
||||
Object.defineProperty(window, 'scrollY', {
|
||||
writable: true,
|
||||
configurable: true,
|
||||
value: 0,
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Logo and Brand Rendering', () => {
|
||||
it('should render the logo', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const logo = screen.getByTestId('smooth-schedule-logo');
|
||||
expect(logo).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render the brand name', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const brandName = screen.getByText('Smooth Schedule');
|
||||
expect(brandName).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have logo link pointing to home', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const logoLink = screen.getByRole('link', { name: /smooth schedule/i });
|
||||
expect(logoLink).toHaveAttribute('href', '/');
|
||||
});
|
||||
|
||||
it('should apply correct classes to logo link', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const logoLink = screen.getByRole('link', { name: /smooth schedule/i });
|
||||
expect(logoLink).toHaveClass('flex', 'items-center', 'gap-2', 'group');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Navigation Links', () => {
|
||||
it('should render all navigation links on desktop', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getAllByText('Features')[0]).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Pricing')[0]).toBeInTheDocument();
|
||||
expect(screen.getAllByText('About')[0]).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Contact')[0]).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct href attributes for navigation links', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const featuresLinks = screen.getAllByRole('link', { name: 'Features' });
|
||||
expect(featuresLinks[0]).toHaveAttribute('href', '/features');
|
||||
|
||||
const pricingLinks = screen.getAllByRole('link', { name: 'Pricing' });
|
||||
expect(pricingLinks[0]).toHaveAttribute('href', '/pricing');
|
||||
|
||||
const aboutLinks = screen.getAllByRole('link', { name: 'About' });
|
||||
expect(aboutLinks[0]).toHaveAttribute('href', '/about');
|
||||
|
||||
const contactLinks = screen.getAllByRole('link', { name: 'Contact' });
|
||||
expect(contactLinks[0]).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should highlight active navigation link', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper('/features'),
|
||||
});
|
||||
|
||||
const featuresLinks = screen.getAllByRole('link', { name: 'Features' });
|
||||
const activeLink = featuresLinks[0];
|
||||
|
||||
expect(activeLink).toHaveClass('text-brand-600');
|
||||
});
|
||||
|
||||
it('should not highlight inactive navigation links', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper('/features'),
|
||||
});
|
||||
|
||||
const pricingLinks = screen.getAllByRole('link', { name: 'Pricing' });
|
||||
const inactiveLink = pricingLinks[0];
|
||||
|
||||
expect(inactiveLink).toHaveClass('text-gray-600');
|
||||
expect(inactiveLink).not.toHaveClass('text-brand-600');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Login and Signup Buttons', () => {
|
||||
it('should render login button when no user is provided', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginButtons = screen.getAllByText('Login');
|
||||
expect(loginButtons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should render login link with correct href when no user', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByRole('link', { name: 'Login' });
|
||||
expect(loginLinks[0]).toHaveAttribute('href', '/login');
|
||||
});
|
||||
|
||||
it('should render signup button', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const signupButtons = screen.getAllByText('Get Started');
|
||||
expect(signupButtons.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should render signup link with correct href', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const signupLinks = screen.getAllByRole('link', { name: 'Get Started' });
|
||||
expect(signupLinks[0]).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should render dashboard link when user is authenticated', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'test@example.com',
|
||||
username: 'testuser',
|
||||
first_name: 'Test',
|
||||
last_name: 'User',
|
||||
role: 'owner',
|
||||
business_subdomain: 'testbusiness',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
// Should still show "Login" text but as anchor tag to dashboard
|
||||
expect(loginLinks.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should generate correct dashboard URL for platform users', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'admin@example.com',
|
||||
username: 'admin',
|
||||
first_name: 'Admin',
|
||||
last_name: 'User',
|
||||
role: 'superuser',
|
||||
business_subdomain: null,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
const dashboardLink = loginLinks[0].closest('a');
|
||||
expect(dashboardLink).toHaveAttribute('href', 'http://platform.lvh.me:5173/');
|
||||
});
|
||||
|
||||
it('should generate correct dashboard URL for business users', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'owner@example.com',
|
||||
username: 'owner',
|
||||
first_name: 'Owner',
|
||||
last_name: 'User',
|
||||
role: 'owner',
|
||||
business_subdomain: 'mybusiness',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
const dashboardLink = loginLinks[0].closest('a');
|
||||
expect(dashboardLink).toHaveAttribute('href', 'http://mybusiness.lvh.me:5173/');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Theme Toggle', () => {
|
||||
it('should render theme toggle button', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to dark mode');
|
||||
expect(themeButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call toggleTheme when theme button is clicked', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to dark mode');
|
||||
fireEvent.click(themeButton);
|
||||
|
||||
expect(mockToggleTheme).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should show moon icon in light mode', () => {
|
||||
const { container } = render(
|
||||
<Navbar darkMode={false} toggleTheme={mockToggleTheme} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to dark mode');
|
||||
const svg = themeButton.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show sun icon in dark mode', () => {
|
||||
const { container } = render(
|
||||
<Navbar darkMode={true} toggleTheme={mockToggleTheme} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to light mode');
|
||||
const svg = themeButton.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct aria-label in light mode', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to dark mode');
|
||||
expect(themeButton).toHaveAttribute('aria-label', 'Switch to dark mode');
|
||||
});
|
||||
|
||||
it('should have correct aria-label in dark mode', () => {
|
||||
render(<Navbar darkMode={true} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to light mode');
|
||||
expect(themeButton).toHaveAttribute('aria-label', 'Switch to light mode');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Mobile Menu Toggle', () => {
|
||||
it('should render mobile menu button', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
expect(menuButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show mobile menu when menu button is clicked', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
// Mobile menu should be visible (max-h-96 instead of max-h-0)
|
||||
const mobileMenuContainer = menuButton.closest('nav')?.querySelector('.lg\\:hidden.overflow-hidden');
|
||||
expect(mobileMenuContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should toggle mobile menu on multiple clicks', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
|
||||
// First click - open
|
||||
fireEvent.click(menuButton);
|
||||
let mobileMenuContainer = menuButton.closest('nav')?.querySelector('.lg\\:hidden.overflow-hidden');
|
||||
expect(mobileMenuContainer).toHaveClass('max-h-96');
|
||||
|
||||
// Second click - close
|
||||
fireEvent.click(menuButton);
|
||||
mobileMenuContainer = menuButton.closest('nav')?.querySelector('.lg\\:hidden.overflow-hidden');
|
||||
expect(mobileMenuContainer).toHaveClass('max-h-0');
|
||||
});
|
||||
|
||||
it('should show Menu icon when menu is closed', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
const svg = menuButton.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show X icon when menu is open', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
const svg = menuButton.querySelector('svg');
|
||||
expect(svg).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all navigation links in mobile menu', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
// Each link appears twice (desktop + mobile)
|
||||
expect(screen.getAllByText('Features')).toHaveLength(2);
|
||||
expect(screen.getAllByText('Pricing')).toHaveLength(2);
|
||||
expect(screen.getAllByText('About')).toHaveLength(2);
|
||||
expect(screen.getAllByText('Contact')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should render language selector in mobile menu', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
const languageSelectors = screen.getAllByTestId('language-selector');
|
||||
// Should appear twice (desktop + mobile)
|
||||
expect(languageSelectors).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should close mobile menu on route change', () => {
|
||||
// Test that mobile menu state resets when component receives new location
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper('/'),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
// Verify menu is open
|
||||
let mobileMenuContainer = menuButton.closest('nav')?.querySelector('.lg\\:hidden.overflow-hidden');
|
||||
expect(mobileMenuContainer).toHaveClass('max-h-96');
|
||||
|
||||
// Click a navigation link (simulates route change behavior)
|
||||
const featuresLink = screen.getAllByRole('link', { name: 'Features' })[1]; // Mobile menu link
|
||||
fireEvent.click(featuresLink);
|
||||
|
||||
// The useEffect with location.pathname dependency should close the menu
|
||||
// In actual usage, clicking a link triggers navigation which changes location.pathname
|
||||
// For this test, we verify the menu can be manually closed
|
||||
fireEvent.click(menuButton);
|
||||
mobileMenuContainer = menuButton.closest('nav')?.querySelector('.lg\\:hidden.overflow-hidden');
|
||||
expect(mobileMenuContainer).toHaveClass('max-h-0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Scroll Behavior', () => {
|
||||
it('should have transparent background when not scrolled', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toHaveClass('bg-transparent');
|
||||
});
|
||||
|
||||
it('should change background on scroll', async () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
|
||||
// Simulate scroll
|
||||
Object.defineProperty(window, 'scrollY', { writable: true, value: 50 });
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nav).toHaveClass('bg-white/80');
|
||||
expect(nav).toHaveClass('backdrop-blur-lg');
|
||||
expect(nav).toHaveClass('shadow-sm');
|
||||
});
|
||||
});
|
||||
|
||||
it('should remove background when scrolled back to top', async () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
|
||||
// Scroll down
|
||||
Object.defineProperty(window, 'scrollY', { writable: true, value: 50 });
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nav).toHaveClass('bg-white/80');
|
||||
});
|
||||
|
||||
// Scroll back to top
|
||||
Object.defineProperty(window, 'scrollY', { writable: true, value: 0 });
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nav).toHaveClass('bg-transparent');
|
||||
});
|
||||
});
|
||||
|
||||
it('should clean up scroll event listener on unmount', () => {
|
||||
const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
|
||||
|
||||
const { unmount } = render(
|
||||
<Navbar darkMode={false} toggleTheme={mockToggleTheme} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
unmount();
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('scroll', expect.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have navigation role', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have aria-label on theme toggle button', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const themeButton = screen.getByLabelText('Switch to dark mode');
|
||||
expect(themeButton).toHaveAttribute('aria-label');
|
||||
});
|
||||
|
||||
it('should have aria-label on mobile menu toggle button', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
expect(menuButton).toHaveAttribute('aria-label');
|
||||
});
|
||||
|
||||
it('should have semantic link elements for navigation', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
expect(links.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Language Selector', () => {
|
||||
it('should render language selector on desktop', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const languageSelectors = screen.getAllByTestId('language-selector');
|
||||
expect(languageSelectors.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should render language selector in mobile menu', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
fireEvent.click(menuButton);
|
||||
|
||||
const languageSelectors = screen.getAllByTestId('language-selector');
|
||||
expect(languageSelectors).toHaveLength(2); // Desktop + Mobile
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling and Layout', () => {
|
||||
it('should have fixed positioning', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toHaveClass('fixed', 'top-0', 'left-0', 'right-0', 'z-50');
|
||||
});
|
||||
|
||||
it('should have transition classes for smooth animations', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
expect(nav).toHaveClass('transition-all', 'duration-300');
|
||||
});
|
||||
|
||||
it('should have max-width container', () => {
|
||||
const { container } = render(
|
||||
<Navbar darkMode={false} toggleTheme={mockToggleTheme} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const maxWidthContainer = container.querySelector('.max-w-7xl');
|
||||
expect(maxWidthContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should hide desktop nav on mobile screens', () => {
|
||||
const { container } = render(
|
||||
<Navbar darkMode={false} toggleTheme={mockToggleTheme} />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const desktopNav = container.querySelector('.hidden.lg\\:flex');
|
||||
expect(desktopNav).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should hide mobile menu button on large screens', () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const menuButton = screen.getByLabelText('Toggle menu');
|
||||
expect(menuButton).toHaveClass('lg:hidden');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should apply dark mode classes when darkMode is true and scrolled', async () => {
|
||||
render(<Navbar darkMode={true} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
|
||||
// Simulate scroll to trigger background change
|
||||
Object.defineProperty(window, 'scrollY', { writable: true, value: 50 });
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFor(() => {
|
||||
// The component uses dark: prefix for dark mode classes
|
||||
expect(nav.className).toContain('dark:bg-gray-900/80');
|
||||
});
|
||||
});
|
||||
|
||||
it('should apply light mode classes when darkMode is false and scrolled', async () => {
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const nav = screen.getByRole('navigation');
|
||||
|
||||
// Simulate scroll to trigger background change
|
||||
Object.defineProperty(window, 'scrollY', { writable: true, value: 50 });
|
||||
fireEvent.scroll(window);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(nav.className).toContain('bg-white/80');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('User Role Based Dashboard Links', () => {
|
||||
it('should link to platform dashboard for platform_manager', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'manager@example.com',
|
||||
username: 'manager',
|
||||
first_name: 'Manager',
|
||||
last_name: 'User',
|
||||
role: 'platform_manager',
|
||||
business_subdomain: null,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
const dashboardLink = loginLinks[0].closest('a');
|
||||
expect(dashboardLink).toHaveAttribute('href', 'http://platform.lvh.me:5173/');
|
||||
});
|
||||
|
||||
it('should link to platform dashboard for platform_support', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'support@example.com',
|
||||
username: 'support',
|
||||
first_name: 'Support',
|
||||
last_name: 'User',
|
||||
role: 'platform_support',
|
||||
business_subdomain: null,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
const dashboardLink = loginLinks[0].closest('a');
|
||||
expect(dashboardLink).toHaveAttribute('href', 'http://platform.lvh.me:5173/');
|
||||
});
|
||||
|
||||
it('should link to login when user has no subdomain', () => {
|
||||
const mockUser: User = {
|
||||
id: 1,
|
||||
email: 'user@example.com',
|
||||
username: 'user',
|
||||
first_name: 'Regular',
|
||||
last_name: 'User',
|
||||
role: 'customer',
|
||||
business_subdomain: null,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
render(<Navbar darkMode={false} toggleTheme={mockToggleTheme} user={mockUser} />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const loginLinks = screen.getAllByText('Login');
|
||||
const dashboardLink = loginLinks[0].closest('a');
|
||||
// Falls back to /login when no business_subdomain
|
||||
expect(dashboardLink).toHaveAttribute('href', '/login');
|
||||
});
|
||||
});
|
||||
});
|
||||
604
frontend/src/components/marketing/__tests__/PricingCard.test.tsx
Normal file
604
frontend/src/components/marketing/__tests__/PricingCard.test.tsx
Normal file
@@ -0,0 +1,604 @@
|
||||
/**
|
||||
* Unit tests for PricingCard component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Plan name rendering
|
||||
* - Price display (monthly, annual, custom)
|
||||
* - Features list rendering
|
||||
* - CTA button functionality
|
||||
* - Popular/highlighted badge
|
||||
* - Transaction fees
|
||||
* - Trial information
|
||||
* - Styling variations
|
||||
* - Internationalization (i18n)
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import PricingCard from '../PricingCard';
|
||||
|
||||
// Mock translation data
|
||||
const mockTranslations: Record<string, any> = {
|
||||
'marketing.pricing.mostPopular': 'Most Popular',
|
||||
'marketing.pricing.perMonth': '/month',
|
||||
'marketing.pricing.getStarted': 'Get Started',
|
||||
'marketing.pricing.contactSales': 'Contact Sales',
|
||||
'marketing.pricing.tiers.free.name': 'Free',
|
||||
'marketing.pricing.tiers.free.description': 'Perfect for getting started',
|
||||
'marketing.pricing.tiers.free.features': [
|
||||
'Up to 2 resources',
|
||||
'Basic scheduling',
|
||||
'Customer management',
|
||||
'Direct Stripe integration',
|
||||
'Subdomain (business.smoothschedule.com)',
|
||||
'Community support',
|
||||
],
|
||||
'marketing.pricing.tiers.free.transactionFee': '2.5% + $0.30 per transaction',
|
||||
'marketing.pricing.tiers.free.trial': 'Free forever - no trial needed',
|
||||
'marketing.pricing.tiers.professional.name': 'Professional',
|
||||
'marketing.pricing.tiers.professional.description': 'For growing businesses',
|
||||
'marketing.pricing.tiers.professional.features': [
|
||||
'Up to 10 resources',
|
||||
'Custom domain',
|
||||
'Stripe Connect (lower fees)',
|
||||
'White-label branding',
|
||||
'Email reminders',
|
||||
'Priority email support',
|
||||
],
|
||||
'marketing.pricing.tiers.professional.transactionFee': '1.5% + $0.25 per transaction',
|
||||
'marketing.pricing.tiers.professional.trial': '14-day free trial',
|
||||
'marketing.pricing.tiers.business.name': 'Business',
|
||||
'marketing.pricing.tiers.business.description': 'Full power of the platform for serious operations.',
|
||||
'marketing.pricing.tiers.business.features': [
|
||||
'Unlimited Users',
|
||||
'Unlimited Appointments',
|
||||
'Unlimited Automations',
|
||||
'Custom Python Scripts',
|
||||
'Custom Domain (White-Label)',
|
||||
'Dedicated Support',
|
||||
'API Access',
|
||||
],
|
||||
'marketing.pricing.tiers.business.transactionFee': '1.0% + $0.20 per transaction',
|
||||
'marketing.pricing.tiers.business.trial': '14-day free trial',
|
||||
'marketing.pricing.tiers.enterprise.name': 'Enterprise',
|
||||
'marketing.pricing.tiers.enterprise.description': 'For large organizations',
|
||||
'marketing.pricing.tiers.enterprise.price': 'Custom',
|
||||
'marketing.pricing.tiers.enterprise.features': [
|
||||
'All Business features',
|
||||
'Custom integrations',
|
||||
'Dedicated success manager',
|
||||
'SLA guarantees',
|
||||
'Custom contracts',
|
||||
'On-premise option',
|
||||
],
|
||||
'marketing.pricing.tiers.enterprise.transactionFee': 'Custom transaction fees',
|
||||
'marketing.pricing.tiers.enterprise.trial': '14-day free trial',
|
||||
};
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string, options?: any) => {
|
||||
if (options?.returnObjects) {
|
||||
return mockTranslations[key] || [];
|
||||
}
|
||||
return mockTranslations[key] || key;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('PricingCard', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Plan Name Rendering', () => {
|
||||
it('should render free tier name', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Free')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render professional tier name', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Professional')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render business tier name', () => {
|
||||
render(<PricingCard tier="business" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render enterprise tier name', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Enterprise')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render tier description', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('For growing businesses')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Price Display', () => {
|
||||
describe('Monthly Billing', () => {
|
||||
it('should display free tier price correctly', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$0')).toBeInTheDocument();
|
||||
expect(screen.getByText('/month')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display professional tier monthly price', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$29')).toBeInTheDocument();
|
||||
expect(screen.getByText('/month')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display business tier monthly price', () => {
|
||||
render(<PricingCard tier="business" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$79')).toBeInTheDocument();
|
||||
expect(screen.getByText('/month')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Annual Billing', () => {
|
||||
it('should display professional tier annual price', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="annual" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$290')).toBeInTheDocument();
|
||||
expect(screen.getByText('/year')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display business tier annual price', () => {
|
||||
render(<PricingCard tier="business" billingPeriod="annual" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$790')).toBeInTheDocument();
|
||||
expect(screen.getByText('/year')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display free tier with annual billing', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="annual" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('$0')).toBeInTheDocument();
|
||||
expect(screen.getByText('/year')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Custom Pricing', () => {
|
||||
it('should display custom price for enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Custom')).toBeInTheDocument();
|
||||
expect(screen.queryByText('$')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display custom price for enterprise tier with annual billing', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="annual" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Custom')).toBeInTheDocument();
|
||||
expect(screen.queryByText('/year')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Features List Rendering', () => {
|
||||
it('should render all features for free tier', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Up to 2 resources')).toBeInTheDocument();
|
||||
expect(screen.getByText('Basic scheduling')).toBeInTheDocument();
|
||||
expect(screen.getByText('Customer management')).toBeInTheDocument();
|
||||
expect(screen.getByText('Direct Stripe integration')).toBeInTheDocument();
|
||||
expect(screen.getByText('Subdomain (business.smoothschedule.com)')).toBeInTheDocument();
|
||||
expect(screen.getByText('Community support')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all features for professional tier', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Up to 10 resources')).toBeInTheDocument();
|
||||
expect(screen.getByText('Custom domain')).toBeInTheDocument();
|
||||
expect(screen.getByText('Stripe Connect (lower fees)')).toBeInTheDocument();
|
||||
expect(screen.getByText('White-label branding')).toBeInTheDocument();
|
||||
expect(screen.getByText('Email reminders')).toBeInTheDocument();
|
||||
expect(screen.getByText('Priority email support')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render all features for enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('All Business features')).toBeInTheDocument();
|
||||
expect(screen.getByText('Custom integrations')).toBeInTheDocument();
|
||||
expect(screen.getByText('Dedicated success manager')).toBeInTheDocument();
|
||||
expect(screen.getByText('SLA guarantees')).toBeInTheDocument();
|
||||
expect(screen.getByText('Custom contracts')).toBeInTheDocument();
|
||||
expect(screen.getByText('On-premise option')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render check icons for each feature', () => {
|
||||
const { container } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const checkIcons = container.querySelectorAll('svg');
|
||||
// Should have at least 6 check icons (one for each feature)
|
||||
expect(checkIcons.length).toBeGreaterThanOrEqual(6);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Transaction Fees', () => {
|
||||
it('should display transaction fee for free tier', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('2.5% + $0.30 per transaction')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display transaction fee for professional tier', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('1.5% + $0.25 per transaction')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display custom transaction fees for enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Custom transaction fees')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Trial Information', () => {
|
||||
it('should display trial information for free tier', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Free forever - no trial needed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display trial information for professional tier', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('14-day free trial')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display trial information for enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('14-day free trial')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('CTA Button', () => {
|
||||
it('should render Get Started button for free tier', () => {
|
||||
render(<PricingCard tier="free" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should render Get Started button for professional tier', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should render Get Started button for business tier', () => {
|
||||
render(<PricingCard tier="business" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/signup');
|
||||
});
|
||||
|
||||
it('should render Contact Sales button for enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /contact sales/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should render Contact Sales button for highlighted enterprise tier', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="monthly" highlighted />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /contact sales/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Popular/Highlighted Badge', () => {
|
||||
it('should not display badge when not highlighted', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.queryByText('Most Popular')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display Most Popular badge when highlighted', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" highlighted />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display badge for any tier when highlighted', () => {
|
||||
const { rerender } = render(
|
||||
<PricingCard tier="free" billingPeriod="monthly" highlighted />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
|
||||
rerender(<PricingCard tier="business" billingPeriod="monthly" highlighted />);
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
|
||||
rerender(<PricingCard tier="enterprise" billingPeriod="monthly" highlighted />);
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling Variations', () => {
|
||||
it('should apply default styling for non-highlighted card', () => {
|
||||
const { container } = render(
|
||||
<PricingCard tier="free" billingPeriod="monthly" />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const card = container.firstChild as HTMLElement;
|
||||
expect(card).toHaveClass('bg-white');
|
||||
expect(card).toHaveClass('border-gray-200');
|
||||
expect(card).not.toHaveClass('bg-brand-600');
|
||||
});
|
||||
|
||||
it('should apply highlighted styling for highlighted card', () => {
|
||||
const { container } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" highlighted />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
const card = container.firstChild as HTMLElement;
|
||||
expect(card).toHaveClass('bg-brand-600');
|
||||
expect(card).not.toHaveClass('bg-white');
|
||||
});
|
||||
|
||||
it('should apply different button styles for highlighted card', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" highlighted />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toHaveClass('bg-white');
|
||||
expect(button).toHaveClass('text-brand-600');
|
||||
});
|
||||
|
||||
it('should apply different button styles for non-highlighted card', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toHaveClass('bg-brand-50');
|
||||
expect(button).toHaveClass('text-brand-600');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Billing Period Switching', () => {
|
||||
it('should switch from monthly to annual pricing', () => {
|
||||
const { rerender } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('$29')).toBeInTheDocument();
|
||||
expect(screen.getByText('/month')).toBeInTheDocument();
|
||||
|
||||
rerender(<PricingCard tier="professional" billingPeriod="annual" />);
|
||||
|
||||
expect(screen.getByText('$290')).toBeInTheDocument();
|
||||
expect(screen.getByText('/year')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should maintain other props when billing period changes', () => {
|
||||
const { rerender } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" highlighted />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
expect(screen.getByText('Professional')).toBeInTheDocument();
|
||||
|
||||
rerender(<PricingCard tier="professional" billingPeriod="annual" highlighted />);
|
||||
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
expect(screen.getByText('Professional')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete highlighted professional card', () => {
|
||||
const { container } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" highlighted />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
// Badge
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
|
||||
// Plan name and description
|
||||
expect(screen.getByText('Professional')).toBeInTheDocument();
|
||||
expect(screen.getByText('For growing businesses')).toBeInTheDocument();
|
||||
|
||||
// Price
|
||||
expect(screen.getByText('$29')).toBeInTheDocument();
|
||||
expect(screen.getByText('/month')).toBeInTheDocument();
|
||||
|
||||
// Trial info
|
||||
expect(screen.getByText('14-day free trial')).toBeInTheDocument();
|
||||
|
||||
// Features (at least one)
|
||||
expect(screen.getByText('Up to 10 resources')).toBeInTheDocument();
|
||||
|
||||
// Transaction fee
|
||||
expect(screen.getByText('1.5% + $0.25 per transaction')).toBeInTheDocument();
|
||||
|
||||
// CTA
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
// Styling
|
||||
const card = container.firstChild as HTMLElement;
|
||||
expect(card).toHaveClass('bg-brand-600');
|
||||
});
|
||||
|
||||
it('should render complete non-highlighted enterprise card', () => {
|
||||
render(<PricingCard tier="enterprise" billingPeriod="annual" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
// No badge
|
||||
expect(screen.queryByText('Most Popular')).not.toBeInTheDocument();
|
||||
|
||||
// Plan name and description
|
||||
expect(screen.getByText('Enterprise')).toBeInTheDocument();
|
||||
expect(screen.getByText('For large organizations')).toBeInTheDocument();
|
||||
|
||||
// Custom price
|
||||
expect(screen.getByText('Custom')).toBeInTheDocument();
|
||||
|
||||
// Trial info
|
||||
expect(screen.getByText('14-day free trial')).toBeInTheDocument();
|
||||
|
||||
// Features (at least one)
|
||||
expect(screen.getByText('All Business features')).toBeInTheDocument();
|
||||
|
||||
// Transaction fee
|
||||
expect(screen.getByText('Custom transaction fees')).toBeInTheDocument();
|
||||
|
||||
// CTA
|
||||
const button = screen.getByRole('link', { name: /contact sales/i });
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should render all card variations correctly', () => {
|
||||
const tiers: Array<'free' | 'professional' | 'business' | 'enterprise'> = [
|
||||
'free',
|
||||
'professional',
|
||||
'business',
|
||||
'enterprise',
|
||||
];
|
||||
|
||||
tiers.forEach((tier) => {
|
||||
const { unmount } = render(
|
||||
<PricingCard tier={tier} billingPeriod="monthly" />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
// Each tier should have a CTA button
|
||||
const button = screen.getByRole('link', {
|
||||
name: tier === 'enterprise' ? /contact sales/i : /get started/i,
|
||||
});
|
||||
expect(button).toBeInTheDocument();
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have accessible link elements', () => {
|
||||
render(<PricingCard tier="professional" billingPeriod="monthly" />, {
|
||||
wrapper: createWrapper(),
|
||||
});
|
||||
|
||||
const button = screen.getByRole('link', { name: /get started/i });
|
||||
expect(button.tagName).toBe('A');
|
||||
});
|
||||
|
||||
it('should maintain semantic structure', () => {
|
||||
const { container } = render(
|
||||
<PricingCard tier="professional" billingPeriod="monthly" />,
|
||||
{ wrapper: createWrapper() }
|
||||
);
|
||||
|
||||
// Should have heading elements
|
||||
const heading = screen.getByText('Professional');
|
||||
expect(heading.tagName).toBe('H3');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* Unit tests for PricingTable component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Component rendering
|
||||
* - All pricing tiers display
|
||||
* - Feature lists (included and not included)
|
||||
* - Column headers and tier information
|
||||
* - Popular badge display
|
||||
* - CTA buttons and links
|
||||
* - Accessibility attributes
|
||||
* - Internationalization (i18n)
|
||||
* - Responsive grid layout
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
import PricingTable from '../PricingTable';
|
||||
|
||||
// Mock translation data matching the actual en.json structure
|
||||
const mockTranslations: Record<string, string> = {
|
||||
'marketing.pricing.tiers.starter.name': 'Starter',
|
||||
'marketing.pricing.tiers.starter.description': 'Perfect for solo practitioners and small studios.',
|
||||
'marketing.pricing.tiers.starter.cta': 'Start Free',
|
||||
'marketing.pricing.tiers.starter.features.0': '1 User',
|
||||
'marketing.pricing.tiers.starter.features.1': 'Unlimited Appointments',
|
||||
'marketing.pricing.tiers.starter.features.2': '1 Active Automation',
|
||||
'marketing.pricing.tiers.starter.features.3': 'Basic Reporting',
|
||||
'marketing.pricing.tiers.starter.features.4': 'Email Support',
|
||||
'marketing.pricing.tiers.starter.notIncluded.0': 'Custom Domain',
|
||||
'marketing.pricing.tiers.starter.notIncluded.1': 'Python Scripting',
|
||||
'marketing.pricing.tiers.starter.notIncluded.2': 'White-Labeling',
|
||||
'marketing.pricing.tiers.starter.notIncluded.3': 'Priority Support',
|
||||
'marketing.pricing.tiers.pro.name': 'Pro',
|
||||
'marketing.pricing.tiers.pro.description': 'For growing businesses that need automation.',
|
||||
'marketing.pricing.tiers.pro.cta': 'Start Trial',
|
||||
'marketing.pricing.tiers.pro.features.0': '5 Users',
|
||||
'marketing.pricing.tiers.pro.features.1': 'Unlimited Appointments',
|
||||
'marketing.pricing.tiers.pro.features.2': '5 Active Automations',
|
||||
'marketing.pricing.tiers.pro.features.3': 'Advanced Reporting',
|
||||
'marketing.pricing.tiers.pro.features.4': 'Priority Email Support',
|
||||
'marketing.pricing.tiers.pro.features.5': 'SMS Reminders',
|
||||
'marketing.pricing.tiers.pro.notIncluded.0': 'Custom Domain',
|
||||
'marketing.pricing.tiers.pro.notIncluded.1': 'Python Scripting',
|
||||
'marketing.pricing.tiers.pro.notIncluded.2': 'White-Labeling',
|
||||
'marketing.pricing.tiers.business.name': 'Business',
|
||||
'marketing.pricing.tiers.business.description': 'Full power of the platform for serious operations.',
|
||||
'marketing.pricing.tiers.business.cta': 'Contact Sales',
|
||||
'marketing.pricing.tiers.business.features.0': 'Unlimited Users',
|
||||
'marketing.pricing.tiers.business.features.1': 'Unlimited Appointments',
|
||||
'marketing.pricing.tiers.business.features.2': 'Unlimited Automations',
|
||||
'marketing.pricing.tiers.business.features.3': 'Custom Python Scripts',
|
||||
'marketing.pricing.tiers.business.features.4': 'Custom Domain (White-Label)',
|
||||
'marketing.pricing.tiers.business.features.5': 'Dedicated Support',
|
||||
'marketing.pricing.tiers.business.features.6': 'API Access',
|
||||
'marketing.pricing.perMonth': '/month',
|
||||
'marketing.pricing.mostPopular': 'Most Popular',
|
||||
'marketing.pricing.contactSales': 'Contact Sales',
|
||||
};
|
||||
|
||||
// Mock react-i18next
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => mockTranslations[key] || key,
|
||||
}),
|
||||
}));
|
||||
|
||||
// Test wrapper with Router
|
||||
const createWrapper = () => {
|
||||
return ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
};
|
||||
|
||||
describe('PricingTable', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the pricing table', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const grid = container.querySelector('.grid');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with grid layout classes', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const grid = container.querySelector('.grid.md\\:grid-cols-3');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with responsive spacing classes', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const grid = container.querySelector('.max-w-7xl.mx-auto');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Pricing Tiers', () => {
|
||||
it('should render all three pricing tiers', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Starter')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pro')).toBeInTheDocument();
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render tier names as headings', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const starterHeading = screen.getByRole('heading', { name: 'Starter' });
|
||||
const proHeading = screen.getByRole('heading', { name: 'Pro' });
|
||||
const businessHeading = screen.getByRole('heading', { name: 'Business' });
|
||||
|
||||
expect(starterHeading).toBeInTheDocument();
|
||||
expect(proHeading).toBeInTheDocument();
|
||||
expect(businessHeading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render correct tier descriptions', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Perfect for solo practitioners and small studios.')).toBeInTheDocument();
|
||||
expect(screen.getByText('For growing businesses that need automation.')).toBeInTheDocument();
|
||||
expect(screen.getByText('Full power of the platform for serious operations.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render correct prices', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('$0')).toBeInTheDocument();
|
||||
expect(screen.getByText('$29')).toBeInTheDocument();
|
||||
expect(screen.getByText('$99')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render price periods', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const periods = screen.getAllByText('/month');
|
||||
expect(periods).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Popular Badge', () => {
|
||||
it('should show "Most Popular" badge on Pro tier', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const badge = screen.getByText('Most Popular');
|
||||
expect(badge).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should only show one popular badge', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const badges = screen.getAllByText('Most Popular');
|
||||
expect(badges).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should style the popular tier differently', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const popularCard = container.querySelector('.border-brand-500.scale-105');
|
||||
expect(popularCard).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Feature Lists - Included Features', () => {
|
||||
it('should render Starter tier features', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('1 User')).toBeInTheDocument();
|
||||
// "Unlimited Appointments" appears in all tiers, so use getAllByText
|
||||
expect(screen.getAllByText('Unlimited Appointments')[0]).toBeInTheDocument();
|
||||
expect(screen.getByText('1 Active Automation')).toBeInTheDocument();
|
||||
expect(screen.getByText('Basic Reporting')).toBeInTheDocument();
|
||||
expect(screen.getByText('Email Support')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Pro tier features', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('5 Users')).toBeInTheDocument();
|
||||
expect(screen.getByText('5 Active Automations')).toBeInTheDocument();
|
||||
expect(screen.getByText('Advanced Reporting')).toBeInTheDocument();
|
||||
expect(screen.getByText('Priority Email Support')).toBeInTheDocument();
|
||||
expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Business tier features', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Unlimited Users')).toBeInTheDocument();
|
||||
expect(screen.getByText('Unlimited Automations')).toBeInTheDocument();
|
||||
expect(screen.getByText('Custom Python Scripts')).toBeInTheDocument();
|
||||
expect(screen.getByText('Custom Domain (White-Label)')).toBeInTheDocument();
|
||||
expect(screen.getByText('Dedicated Support')).toBeInTheDocument();
|
||||
expect(screen.getByText('API Access')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render features with check icons', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// Check icons are rendered as SVGs with lucide-react
|
||||
const checkIcons = container.querySelectorAll('svg');
|
||||
expect(checkIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Feature Lists - Not Included Features', () => {
|
||||
it('should render Starter tier excluded features', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// These features appear in multiple tiers, so use getAllByText
|
||||
expect(screen.getAllByText('Custom Domain').length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getAllByText('Python Scripting').length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getAllByText('White-Labeling').length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getByText('Priority Support')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render Pro tier excluded features', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// Pro tier has these excluded
|
||||
const customDomains = screen.getAllByText('Custom Domain');
|
||||
expect(customDomains.length).toBeGreaterThanOrEqual(1);
|
||||
|
||||
const pythonScripting = screen.getAllByText('Python Scripting');
|
||||
expect(pythonScripting.length).toBeGreaterThanOrEqual(1);
|
||||
|
||||
const whiteLabeling = screen.getAllByText('White-Labeling');
|
||||
expect(whiteLabeling.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('should not render excluded features for Business tier', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// Business tier has empty notIncluded array
|
||||
// All features should be included (no X icons in that column)
|
||||
// We can't easily test the absence without more context
|
||||
// But we verify the business tier is rendered
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
|
||||
// Count the number of X icons - should be less than total excluded features
|
||||
const allListItems = container.querySelectorAll('li');
|
||||
expect(allListItems.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should style excluded features differently', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const excludedItems = container.querySelectorAll('li.opacity-50');
|
||||
expect(excludedItems.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CTA Buttons', () => {
|
||||
it('should render CTA button for each tier', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
|
||||
const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });
|
||||
const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });
|
||||
|
||||
expect(startFreeBtn).toBeInTheDocument();
|
||||
expect(startTrialBtn).toBeInTheDocument();
|
||||
expect(contactSalesBtn).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have correct links for each tier', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
|
||||
const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });
|
||||
const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });
|
||||
|
||||
expect(startFreeBtn).toHaveAttribute('href', '/signup');
|
||||
expect(startTrialBtn).toHaveAttribute('href', '/signup?plan=pro');
|
||||
expect(contactSalesBtn).toHaveAttribute('href', '/contact');
|
||||
});
|
||||
|
||||
it('should style popular tier CTA button differently', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const startTrialBtn = screen.getByRole('link', { name: 'Start Trial' });
|
||||
|
||||
expect(startTrialBtn).toHaveClass('bg-brand-600');
|
||||
expect(startTrialBtn).toHaveClass('text-white');
|
||||
expect(startTrialBtn).toHaveClass('hover:bg-brand-700');
|
||||
});
|
||||
|
||||
it('should style non-popular tier CTA buttons consistently', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const startFreeBtn = screen.getByRole('link', { name: 'Start Free' });
|
||||
const contactSalesBtn = screen.getByRole('link', { name: 'Contact Sales' });
|
||||
|
||||
[startFreeBtn, contactSalesBtn].forEach(btn => {
|
||||
expect(btn).toHaveClass('bg-gray-100');
|
||||
expect(btn).toHaveClass('dark:bg-gray-700');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('should have proper heading hierarchy', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const headings = screen.getAllByRole('heading');
|
||||
expect(headings).toHaveLength(3); // One for each tier
|
||||
});
|
||||
|
||||
it('should use semantic list elements for features', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const lists = container.querySelectorAll('ul');
|
||||
expect(lists.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have accessible link elements for CTAs', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const links = screen.getAllByRole('link');
|
||||
expect(links).toHaveLength(3); // One CTA per tier
|
||||
});
|
||||
|
||||
it('should maintain proper color contrast', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const tierCards = container.querySelectorAll('.bg-white.dark\\:bg-gray-800');
|
||||
expect(tierCards.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling and Layout', () => {
|
||||
it('should apply card styling to tier containers', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const cards = container.querySelectorAll('.rounded-2xl.border');
|
||||
expect(cards).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should apply padding to tier cards', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const cards = container.querySelectorAll('.p-8');
|
||||
expect(cards).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should use flex layout for card content', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const flexContainers = container.querySelectorAll('.flex.flex-col');
|
||||
expect(flexContainers.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply spacing between features', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const featureLists = container.querySelectorAll('.space-y-4');
|
||||
expect(featureLists.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should apply shadow effects appropriately', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const shadowXl = container.querySelector('.shadow-xl');
|
||||
expect(shadowXl).toBeInTheDocument(); // Popular tier
|
||||
|
||||
const shadowSm = container.querySelectorAll('.shadow-sm');
|
||||
expect(shadowSm.length).toBeGreaterThan(0); // Other tiers
|
||||
});
|
||||
});
|
||||
|
||||
describe('Internationalization', () => {
|
||||
it('should use translations for tier names', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Starter')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pro')).toBeInTheDocument();
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for tier descriptions', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText(/Perfect for solo practitioners/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/For growing businesses/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Full power of the platform/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for feature text', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// Sample some features to verify translations are used
|
||||
// Use getAllByText for features that appear in multiple tiers
|
||||
expect(screen.getAllByText('Unlimited Appointments').length).toBeGreaterThanOrEqual(1);
|
||||
expect(screen.getByText('Custom Python Scripts')).toBeInTheDocument();
|
||||
expect(screen.getByText('SMS Reminders')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for CTA buttons', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByRole('link', { name: 'Start Free' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: 'Start Trial' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('link', { name: 'Contact Sales' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use translations for price periods', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const periods = screen.getAllByText('/month');
|
||||
expect(periods).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should use translations for popular badge', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration', () => {
|
||||
it('should render complete pricing table with all elements', () => {
|
||||
render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
// Verify all major elements are present
|
||||
expect(screen.getByText('Starter')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pro')).toBeInTheDocument();
|
||||
expect(screen.getByText('Business')).toBeInTheDocument();
|
||||
expect(screen.getByText('Most Popular')).toBeInTheDocument();
|
||||
expect(screen.getByText('$0')).toBeInTheDocument();
|
||||
expect(screen.getByText('$29')).toBeInTheDocument();
|
||||
expect(screen.getByText('$99')).toBeInTheDocument();
|
||||
expect(screen.getAllByRole('link')).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should maintain proper structure with icons and text', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const cards = container.querySelectorAll('.flex.flex-col');
|
||||
expect(cards.length).toBeGreaterThan(0);
|
||||
|
||||
const icons = container.querySelectorAll('svg');
|
||||
expect(icons.length).toBeGreaterThan(0);
|
||||
|
||||
const lists = container.querySelectorAll('ul');
|
||||
expect(lists.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should work with React Router BrowserRouter', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const links = container.querySelectorAll('a');
|
||||
expect(links).toHaveLength(3);
|
||||
|
||||
links.forEach(link => {
|
||||
expect(link).toBeInstanceOf(HTMLAnchorElement);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Responsive Design', () => {
|
||||
it('should use responsive grid classes', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const grid = container.querySelector('.md\\:grid-cols-3');
|
||||
expect(grid).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should have responsive padding', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const responsivePadding = container.querySelector('.px-4.sm\\:px-6.lg\\:px-8');
|
||||
expect(responsivePadding).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should use gap for spacing between cards', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const gridWithGap = container.querySelector('.gap-8');
|
||||
expect(gridWithGap).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Dark Mode Support', () => {
|
||||
it('should include dark mode classes for cards', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const darkModeCards = container.querySelectorAll('.dark\\:bg-gray-800');
|
||||
expect(darkModeCards.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should include dark mode classes for text', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const darkModeText = container.querySelectorAll('.dark\\:text-white');
|
||||
expect(darkModeText.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should include dark mode classes for borders', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const darkModeBorders = container.querySelectorAll('.dark\\:border-gray-700');
|
||||
expect(darkModeBorders.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should include dark mode classes for buttons', () => {
|
||||
const { container } = render(<PricingTable />, { wrapper: createWrapper() });
|
||||
|
||||
const darkModeButtons = container.querySelectorAll('.dark\\:bg-gray-700');
|
||||
expect(darkModeButtons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user