import { describe, it, expect, beforeEach, vi } from 'vitest';
import { screen, fireEvent, waitFor } from '@testing-library/react';
import { renderWithProviders } from '../test/utils';
vi.mock('../lib/api', () => ({
api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
ApiError: class extends Error {},
}));
// react-leaflet به DOM واقعی نقشه نیاز دارد؛ در jsdom با یک placeholder جایگزین میشود.
vi.mock('react-leaflet', () => ({
MapContainer: ({ children }: any) =>
{children}
,
TileLayer: () => null,
Marker: () => null,
useMapEvents: () => null,
useMap: () => ({ flyTo: vi.fn() }),
}));
vi.mock('leaflet', () => ({
default: { Icon: { Default: { prototype: {}, mergeOptions: vi.fn() } } },
}));
vi.mock('leaflet/dist/leaflet.css', () => ({}));
vi.mock('../components/ClinicDoctorsManager', () => ({
default: () => ,
}));
import { Routes, Route } from 'react-router-dom';
import { api } from '../lib/api';
import { useAuthStore } from '../stores/authStore';
import ClinicDetailPage from './ClinicDetailPage';
/** صفحه از useParams میخواند، پس باید زیر یک Route واقعی رندر شود. */
function renderPage() {
return renderWithProviders(
} />
,
{ route: '/admin/clinics/c1' },
);
}
const get = api.get as ReturnType;
const clinic = {
uuid: 'c1',
name: 'کلینیک نمونه',
is_active: true,
phone: '02112345678',
specialties: [{ id: 1, name: 'قلب' }],
list_bime: [],
services: [],
images_clinic: [],
};
const address = {
id: '1', uuid: 'a1', name: 'شعبه مرکزی', address: 'خیابان اول',
telephone: '02100000000',
map: { latitude: '35.7', longitude: '51.4' },
city: { id: '1', name: 'تهران' },
province: { id: '1', name: 'تهران' },
};
function mockApi({ addresses = [address] as any[] } = {}) {
get.mockImplementation((url: string) => {
if (url.includes('/addresses')) return Promise.resolve({ success: true, data: { data: addresses } });
if (url.includes('/api/v1/clinic/')) return Promise.resolve({ success: true, data: { data: clinic } });
return Promise.resolve({ success: true, data: { data: [] } });
});
}
beforeEach(() => {
vi.clearAllMocks();
useAuthStore.setState({ primaryRole: 'admin', dbUuid: 'someone', token: 't' } as any);
});
describe('ClinicDetailPage', () => {
it('نام کلینیک را یکبار بهعنوان عنوان صفحه نشان میدهد، نه تکراری در کارت', async () => {
mockApi();
renderPage();
// عنوان صفحه + آخرین بردکرامب = دو نمونه؛ کارت هویت دیگر نام را تکرار نمیکند
await waitFor(() => expect(screen.getAllByText('کلینیک نمونه')).toHaveLength(2));
});
it('بردکرامب به فهرست کلینیکها لینک میدهد', async () => {
mockApi();
renderPage();
const crumb = await screen.findByRole('link', { name: 'کلینیکها' });
expect(crumb).toHaveAttribute('href', '/admin/clinics');
});
it('شهر و استان را در کارت هویت نشان میدهد', async () => {
mockApi();
renderPage();
await waitFor(() => expect(screen.getAllByText('تهران، تهران').length).toBeGreaterThan(0));
});
it('فرم آدرس با کامپوننت Modal مشترک باز میشود', async () => {
mockApi({ addresses: [] });
renderPage();
const addBtn = await screen.findByRole('button', { name: /افزودن آدرس/ });
fireEvent.click(addBtn);
expect(await screen.findByText('افزودن آدرس جدید')).toBeInTheDocument();
// لیبلهای فرم بهجای input دستساز، از field-block طرح استفاده میکنند
expect(screen.getByText('نام شعبه / عنوان')).toBeInTheDocument();
expect(screen.getByText('استان')).toBeInTheDocument();
});
it('دکمهٔ حذف آدرس با تم danger رندر میشود (نه رنگ ناموجود --error)', async () => {
mockApi();
const { container } = renderPage();
await screen.findByText('شعبه مرکزی');
const del = container.querySelector('button[title="حذف آدرس"]') as HTMLElement;
expect(del).toBeTruthy();
expect(del.className).toContain('mini-btn');
expect(del.className).toContain('danger');
expect(del.getAttribute('style') ?? '').not.toContain('--error');
});
});