Files
clinicpro/assets/admin/pages/AppointmentCreatePage.test.tsx
T
hamed 684cf1f783 feat: implement useUrlState hook for managing URL-based state in admin pages
- Refactor multiple admin pages (BlogsPage, ClinicsPage, DoctorsPage, etc.) to utilize the new useUrlState hook for managing pagination, search, and filter states via URL.
- Ensure that the state persists in the URL, allowing users to return to the same state when navigating back from detail pages.
- Update relevant components to handle state changes appropriately and maintain clean URLs by removing default values.
- Add SlotPicker component for selecting appointment slots based on availability.
- Create tests for useUrlState to validate its functionality and ensure correct behavior when interacting with the URL.
- Update API documentation to reflect changes in appointment creation and slot selection processes.
2026-07-29 21:04:40 +03:30

260 lines
15 KiB
TypeScript

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 {},
}));
import { api } from '../lib/api';
import { useAuthStore } from '../stores/authStore';
import AppointmentCreatePage from './AppointmentCreatePage';
const get = api.get as ReturnType<typeof vi.fn>;
const post = api.post as ReturnType<typeof vi.fn>;
beforeEach(() => {
get.mockReset();
post.mockReset();
useAuthStore.setState({ primaryRole: 'doctor', dbUuid: 'doc1' } as any);
get.mockImplementation((url: string) => (
url.startsWith('/api/v1/appointment-slots')
? Promise.resolve(SLOTS_RESPONSE)
: Promise.resolve({ success: true, data: [] })
));
post.mockResolvedValue({ success: true, data: { uuid: 'new1' } });
});
/** اسلات‌های واقعیِ برنامهٔ پزشک — حالت اسلاتی دیگر ساعت دستی نمی‌گیرد. */
const SLOTS_RESPONSE = {
success: true,
data: {
sessions: [{
start_time: '15:00', end_time: '16:00',
slots: [
{ start: 1754000000, end: 1754001800, start_time: '15:00', end_time: '15:30', is_available: true },
{ start: 1754001800, end: 1754003600, start_time: '15:30', end_time: '16:00', is_available: false },
],
}],
empty_reason: null,
},
};
/** انتخاب اولین اسلات آزاد (حالت اسلاتی). */
async function pickSlot() {
fireEvent.click(await screen.findByRole('button', { name: '15:00' }));
}
describe('AppointmentCreatePage — افزودن نوبت', () => {
it('posts a new appointment with the entered patient (happy path)', async () => {
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.click(screen.getByText('مراجعه کننده جدید'));
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });
await pickSlot();
fireEvent.click(screen.getByText('ثبت اطلاعات'));
await waitFor(() => expect(post).toHaveBeenCalled());
const [url, body] = post.mock.calls[0];
expect(url).toBe('/api/v1/my/appointment');
expect(body).toMatchObject({ doctor_uuid: 'doc1', patient_name: 'علی محمدی', patient_mobile: '09121234567', patient_national_code: '1234567891' });
});
it('service mode: picks service + suggested time and posts service_item_uuids', async () => {
get.mockImplementation((url: string) => {
if (url.startsWith('/api/v1/appointment-booking-services/'))
return Promise.resolve({ success: true, data: { booking_mode: 'service', buffer_minutes: 5, services: [{ uuid: 'sv1', name: 'عصب‌کشی', duration_minutes: 30, price_rials: 500000, service_section: { uuid: 'sec1', name: 'دندان' } }] } });
if (url.startsWith('/api/v1/appointment-service-slots'))
return Promise.resolve({ success: true, data: { total_duration_minutes: 30, buffer_minutes: 5, start_times: [{ start: 1754000000, end: 1754001800, start_time: '15:00' }] } });
if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
return Promise.resolve({ success: true, data: [] });
});
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.click(screen.getByText('مراجعه کننده جدید'));
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });
// صبر تا حالت سرویسی واقعاً رندر شود (پیش از آن، حالت اسلاتی است).
await waitFor(() => expect(document.getElementById('service-mode-section-select')).not.toBeNull());
// حالت سرویس: ورودی ساعت شروع نباید باشد
expect(screen.queryByLabelText('ساعت شروع')).toBeNull();
// حالت سرویسی هم «بخش → سرویس» است: ابتدا بخش، سپس سرویس
const secInput = document.getElementById('service-mode-section-select') as HTMLInputElement;
fireEvent.focus(secInput);
fireEvent.keyDown(secInput, { key: 'ArrowDown' });
fireEvent.click(await screen.findByText('دندان'));
fireEvent.click(await screen.findByText('عصب‌کشی'));
fireEvent.click(await screen.findByRole('button', { name: '15:00' }));
fireEvent.click(screen.getByText('ثبت اطلاعات'));
await waitFor(() => expect(post).toHaveBeenCalled());
const [, body] = post.mock.calls[0];
expect(body).toMatchObject({ doctor_uuid: 'doc1', slot_start: 1754000000, slot_end: 1754001800, service_item_uuids: ['sv1'] });
});
it('حالت اسلاتی: اسلات پرشده قابل انتخاب نیست', async () => {
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
const taken = await screen.findByRole('button', { name: '15:30' });
expect(taken).toBeDisabled();
expect(await screen.findByRole('button', { name: '15:00' })).not.toBeDisabled();
});
it('نوبتِ ساخته‌شده بلافاصله قطعی می‌شود', async () => {
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.click(screen.getByText('مراجعه کننده جدید'));
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });
await pickSlot();
fireEvent.click(screen.getByText('ثبت اطلاعات'));
await waitFor(() => expect(post).toHaveBeenCalledWith('/api/v1/appointment/new1/confirm', { payments: [] }));
});
it('ورود از پروندهٔ بیمار: مراجعه‌کننده پیش‌پر می‌شود و جستجو نمایش داده نمی‌شود', async () => {
get.mockImplementation((url: string) => {
if (url === '/api/v1/patient/rec7')
return Promise.resolve({ success: true, data: { uuid: 'rec7', user_name: 'مریم خلیلی', user_mobile: '09136549874', user_national_code: '0012345675' } });
if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
return Promise.resolve({ success: true, data: [] });
});
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new?record=rec7' });
expect(await screen.findByText('مریم خلیلی')).toBeInTheDocument();
expect(screen.queryByPlaceholderText('جستجوی نام، شماره تماس، شماره پرونده...')).toBeNull();
expect(screen.queryByText('مراجعه کننده جدید')).toBeNull();
await pickSlot();
fireEvent.click(screen.getByText('ثبت اطلاعات'));
await waitFor(() => expect(post).toHaveBeenCalled());
const [, body] = post.mock.calls[0];
expect(body).toMatchObject({ patient_name: 'مریم خلیلی', patient_mobile: '09136549874', patient_national_code: '0012345675' });
});
it('keeps the submit button disabled until a valid patient is entered (boundary)', () => {
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
expect(btn).toBeDisabled();
// فیلدهای مراجعه‌کنندهٔ جدید تا کلیک روی دکمه پنهان‌اند
expect(screen.queryByPlaceholderText('نام و نام خانوادگی مراجعه کننده')).toBeNull();
fireEvent.click(screen.getByText('مراجعه کننده جدید'));
// شماره ناقص → همچنان غیرفعال
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'ب' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '0912' } });
expect(btn).toBeDisabled();
// نام و موبایل معتبر ولی کد ملی خالی → همچنان غیرفعال (کد ملی الزامی است)
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
expect(btn).toBeDisabled();
});
it('picking an existing patient WITH a national code enables submit and posts it (happy path)', async () => {
get.mockImplementation((url: string) => {
if (url.startsWith('/api/v1/patients?'))
return Promise.resolve({ success: true, data: [{ uuid: 'rec1', user_name: 'حامد حسینی', user_mobile: '09210671745', user_national_code: '0012345675' }] });
if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
return Promise.resolve({ success: true, data: [] });
});
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.change(screen.getByPlaceholderText('جستجوی نام، شماره تماس، شماره پرونده...'), { target: { value: 'حامد' } });
fireEvent.click(await screen.findByText(/حامد حسینی/));
await pickSlot();
const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
await waitFor(() => expect(btn).not.toBeDisabled());
fireEvent.click(btn);
await waitFor(() => expect(post).toHaveBeenCalled());
const [, body] = post.mock.calls[0];
expect(body).toMatchObject({ patient_name: 'حامد حسینی', patient_mobile: '09210671745', patient_national_code: '0012345675' });
});
it('slot mode: accumulates services across multiple sections and removes them (happy path)', async () => {
get.mockImplementation((url: string) => {
if (url === '/api/v1/service-sections')
return Promise.resolve({ success: true, data: [{ uuid: 'sec1', name: 'زیبایی' }, { uuid: 'sec2', name: 'پوست' }] });
if (url === '/api/v1/service-items/sec1')
return Promise.resolve({ success: true, data: [{ uuid: 'i1', name: 'لیزر' }, { uuid: 'i2', name: 'ماساژ' }] });
if (url === '/api/v1/service-items/sec2')
return Promise.resolve({ success: true, data: [{ uuid: 'i3', name: 'پاکسازی' }] });
if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
return Promise.resolve({ success: true, data: [] });
});
const pickSection = async (optionLabel: string) => {
const input = document.getElementById('appt-section-select') as HTMLInputElement;
fireEvent.focus(input);
fireEvent.keyDown(input, { key: 'ArrowDown' });
fireEvent.click(await screen.findByText(optionLabel));
};
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.click(screen.getByText('مراجعه کننده جدید'));
fireEvent.change(screen.getByPlaceholderText('نام و نام خانوادگی مراجعه کننده'), { target: { value: 'علی محمدی' } });
fireEvent.change(screen.getByPlaceholderText('شماره تماس مراجعه کننده'), { target: { value: '09121234567' } });
fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '1234567891' } });
// بخش اول → دو سرویس انتخاب
await pickSection('زیبایی');
fireEvent.click(await screen.findByText('لیزر'));
fireEvent.click(await screen.findByText('ماساژ'));
// بخش دوم → یک سرویس؛ لیستِ انباشته باید سرویس‌های بخش قبل را نگه دارد
await pickSection('پوست');
fireEvent.click(await screen.findByText('پاکسازی'));
expect(screen.getByText('سرویس‌های انتخاب‌شده (3)')).toBeInTheDocument();
// حذف یک سرویس از لیست
fireEvent.click(screen.getByLabelText('حذف ماساژ'));
expect(screen.getByText('سرویس‌های انتخاب‌شده (2)')).toBeInTheDocument();
await pickSlot();
fireEvent.click(screen.getByText('ثبت اطلاعات'));
await waitFor(() => expect(post).toHaveBeenCalled());
const [, body] = post.mock.calls[0];
expect(body.service_item_uuids).toEqual(['i1', 'i3']);
expect(body.duration_from_services).toBeUndefined(); // حالت اسلاتی: ساعت پایانِ دستی حفظ
});
it('picking an existing patient WITHOUT a national code keeps submit disabled until one is entered (boundary)', async () => {
get.mockImplementation((url: string) => {
if (url.startsWith('/api/v1/patients?'))
return Promise.resolve({ success: true, data: [{ uuid: 'rec2', user_name: 'حامد حسینی', user_mobile: '09210671745', user_national_code: null }] });
if (url.startsWith('/api/v1/appointment-slots')) return Promise.resolve(SLOTS_RESPONSE);
return Promise.resolve({ success: true, data: [] });
});
renderWithProviders(<AppointmentCreatePage />, { route: '/admin/appointments/new' });
fireEvent.change(screen.getByPlaceholderText('جستجوی نام، شماره تماس، شماره پرونده...'), { target: { value: 'حامد' } });
fireEvent.click(await screen.findByText(/حامد حسینی/));
const btn = screen.getByText('ثبت اطلاعات') as HTMLButtonElement;
expect(btn).toBeDisabled();
// کد ملیِ خالیِ رکورد را دستی وارد کن + انتخاب اسلات → فعال می‌شود
fireEvent.change(screen.getByPlaceholderText('کد ملی مراجعه کننده'), { target: { value: '0012345675' } });
await pickSlot();
await waitFor(() => expect(btn).not.toBeDisabled());
});
});