/** * Component: Change Password Modal Tests * Documentation: documentation/frontend/components.md */ // @vitest-environment jsdom import { afterEach, describe, expect, it, vi } from 'vitest'; import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'; import { ChangePasswordModal } from '@/components/ui/ChangePasswordModal'; describe('ChangePasswordModal', () => { afterEach(() => { vi.unstubAllGlobals(); vi.useRealTimers(); localStorage.clear(); }); it('shows validation errors when required fields are missing', () => { render(); fireEvent.click(screen.getByRole('button', { name: 'Change Password' })); expect(screen.getByText('Current password is required')).toBeInTheDocument(); expect(screen.getByText('New password is required')).toBeInTheDocument(); expect(screen.getByText('Please confirm your new password')).toBeInTheDocument(); }); it('rejects submission when access token is missing', async () => { const fetchMock = vi.fn(); vi.stubGlobal('fetch', fetchMock); render(); fireEvent.change(screen.getByLabelText('Current Password'), { target: { value: 'old-password' }, }); fireEvent.change(screen.getByLabelText('New Password'), { target: { value: 'new-password' }, }); fireEvent.change(screen.getByLabelText('Confirm New Password'), { target: { value: 'new-password' }, }); fireEvent.click(screen.getByRole('button', { name: 'Change Password' })); await waitFor(() => { expect(screen.getByText('Not authenticated')).toBeInTheDocument(); }); expect(fetchMock).not.toHaveBeenCalledWith( '/api/auth/change-password', expect.anything() ); }); it('submits successfully and auto-closes after showing success', async () => { vi.useFakeTimers(); const onClose = vi.fn(); const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({ success: true }), }); vi.stubGlobal('fetch', fetchMock); localStorage.setItem('accessToken', 'token'); render(); fireEvent.change(screen.getByLabelText('Current Password'), { target: { value: 'old-password' }, }); fireEvent.change(screen.getByLabelText('New Password'), { target: { value: 'new-password' }, }); fireEvent.change(screen.getByLabelText('Confirm New Password'), { target: { value: 'new-password' }, }); fireEvent.click(screen.getByRole('button', { name: 'Change Password' })); await act(async () => { await Promise.resolve(); await Promise.resolve(); }); expect(fetchMock).toHaveBeenCalledWith( '/api/auth/change-password', expect.objectContaining({ method: 'POST' }) ); expect(screen.getByText('Password changed successfully!')).toBeInTheDocument(); act(() => { vi.advanceTimersByTime(2000); }); expect(onClose).toHaveBeenCalledTimes(1); }); it('shows server error responses', async () => { const fetchMock = vi.fn().mockResolvedValue({ ok: false, json: async () => ({ error: 'Invalid password' }), }); vi.stubGlobal('fetch', fetchMock); localStorage.setItem('accessToken', 'token'); render(); fireEvent.change(screen.getByLabelText('Current Password'), { target: { value: 'old-password' }, }); fireEvent.change(screen.getByLabelText('New Password'), { target: { value: 'new-password' }, }); fireEvent.change(screen.getByLabelText('Confirm New Password'), { target: { value: 'new-password' }, }); fireEvent.click(screen.getByRole('button', { name: 'Change Password' })); expect(await screen.findByText('Invalid password')).toBeInTheDocument(); }); });