feat(date-input): refactor PersianDateInput to use PersianDatePicker for Jalali calendar support

2026-07-16 08:26:39 +03:30
parent 2f060bd5be
commit 7b8a5c2775
4 changed files with 210 additions and 63 deletions
@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import PersianDateInput from '@/components/ui/PersianDateInput';
+
+describe('PersianDateInput', () => {
+    it('placeholder را وقتی مقدار خالی است نشان می‌دهد', () => {
+        render(<PersianDateInput value="" onChange={vi.fn()} placeholder="از تاریخ" />);
+        expect(screen.getByText('از تاریخ')).toBeInTheDocument();
+    });
+
+    it('از تقویم شمسی استفاده می‌کند نه input بومی میلادی', () => {
+        const { container } = render(<PersianDateInput value="" onChange={vi.fn()} />);
+        expect(container.querySelector('input[type="date"]')).toBeNull();
+    });
+
+    it('با کلیک، تقویم شمسی باز می‌شود (نام ماه فارسی)', () => {
+        const { container } = render(<PersianDateInput value="2024-03-25" onChange={vi.fn()} />);
+        fireEvent.click((container.firstChild as HTMLElement).firstChild as Element);
+        // 2024-03-25 میلادی = ۶ فروردین ۱۴۰۳ شمسی
+        expect(screen.getByText('فروردین')).toBeInTheDocument();
+    });
+
+    it('انتخاب روز، onChange را با YYYY-MM-DD میلادی صدا می‌زند', () => {
+        const onChange = vi.fn();
+        const { container } = render(<PersianDateInput value="2024-03-25" onChange={onChange} />);
+        fireEvent.click((container.firstChild as HTMLElement).firstChild as Element);
+        const target = Array.from(container.querySelectorAll('button')).find(
+            (b) => b.textContent?.trim() === '۱۵',
+        );
+        expect(target).toBeTruthy();
+        fireEvent.click(target as Element);
+        expect(onChange).toHaveBeenCalledWith(expect.stringMatching(/^\d{4}-\d{2}-\d{2}$/));
+    });
+
+    it('دکمه پاک‌کردن، onChange با رشته خالی می‌فرستد', () => {
+        const onChange = vi.fn();
+        const { container } = render(<PersianDateInput value="2024-03-25" onChange={onChange} />);
+        const svgs = container.querySelectorAll('svg');
+        const clearIcon = svgs[svgs.length - 1];
+        fireEvent.click(clearIcon.parentElement as Element);
+        expect(onChange).toHaveBeenCalledWith('');
+    });
+});