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
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user