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