feat: add comprehensive tests for UI components, hooks, and API interactions

- Implement tests for Pagination, StatusBadge, ConfirmDialog, and MobileInput components.
- Add tests for useSubscription, usePaymentConfig, and usePwaInstall hooks.
- Create tests for API requests in the api module, including success and error handling.
- Add utility function tests for formatting and validating Iranian mobile numbers.
- Implement tests for BlogFormPage and BlogsPage to validate form submissions and data fetching.
- Add tests for LoginPage to ensure proper validation and state management.
- Create tests for authStore and uiStore to validate state management and functionality.
- Set up Vitest configuration and testing utilities for consistent testing environment.
This commit is contained in:
hamed
2026-06-28 22:58:15 +03:30
parent 439bb0868e
commit 6084dc5d6b
15 changed files with 2083 additions and 2146 deletions
+43
View File
@@ -0,0 +1,43 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders } from '@/test/utils';
vi.mock('@ckeditor/ckeditor5-react', () => ({ CKEditor: () => null }));
vi.mock('@ckeditor/ckeditor5-build-classic', () => ({ default: {} }));
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
vi.mock('@/components/ui/SearchableSelect', () => ({ default: () => null }));
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 BlogFormPage from '@/pages/BlogFormPage';
const post = api.post as ReturnType<typeof vi.fn>;
beforeEach(() => {
post.mockReset();
});
describe('BlogFormPage — اعتبارسنجی zod (حالت ساخت)', () => {
it('submit با فیلدهای خالی → خطای عنوان و جلوگیری از فراخوانی API', async () => {
renderWithProviders(<BlogFormPage />, { route: '/admin/blogs/new' });
await userEvent.click(screen.getByRole('button', { name: 'ذخیره' }));
expect(await screen.findByText('عنوان الزامی است')).toBeInTheDocument();
expect(post).not.toHaveBeenCalled();
});
it('عنوان کوتاه‌تر از ۳ کاراکتر هم خطا می‌دهد', async () => {
renderWithProviders(<BlogFormPage />, { route: '/admin/blogs/new' });
await userEvent.type(screen.getByPlaceholderText('عنوان جذاب بنویسید...'), 'اب');
await userEvent.click(screen.getByRole('button', { name: 'ذخیره' }));
expect(await screen.findByText('عنوان الزامی است')).toBeInTheDocument();
expect(post).not.toHaveBeenCalled();
});
});
+51
View File
@@ -0,0 +1,51 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { screen } from '@testing-library/react';
import { renderWithProviders } from '@/test/utils';
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
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 BlogsPage from '@/pages/BlogsPage';
const get = api.get as ReturnType<typeof vi.fn>;
beforeEach(() => {
get.mockReset();
});
describe('BlogsPage — قرارداد PaginatedResponse', () => {
it('ردیف‌ها از data.data و تعداد از meta.totalRecords می‌آیند', async () => {
get.mockResolvedValue({
success: true,
data: [
{ uuid: 'b1', title: 'مقاله اول', status: 'published', tags: [], created_at: 1700000000 },
{ uuid: 'b2', title: 'مقاله دوم', status: 'draft', tags: [], created_at: 1700000000 },
],
meta: { totalRecords: 2, totalPages: 1, currentPage: 1 },
errors: [],
});
renderWithProviders(<BlogsPage />, { route: '/admin/blogs' });
expect(await screen.findByText('مقاله اول')).toBeInTheDocument();
expect(screen.getByText('مقاله دوم')).toBeInTheDocument();
expect(get).toHaveBeenCalledWith(expect.stringContaining('/api/v1/blogs'));
});
it('پاسخ خالی → پیام «هیچ مقاله‌ای یافت نشد»', async () => {
get.mockResolvedValue({
success: true,
data: [],
meta: { totalRecords: 0, totalPages: 0, currentPage: 1 },
errors: [],
});
renderWithProviders(<BlogsPage />, { route: '/admin/blogs' });
expect(await screen.findByText('هیچ مقاله‌ای یافت نشد')).toBeInTheDocument();
});
});
+41
View File
@@ -0,0 +1,41 @@
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders } from '@/test/utils';
vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
vi.mock('@/components/ui/PwaLoginCard', () => ({ default: () => null }));
import { toast } from 'sonner';
import LoginPage from '@/pages/LoginPage';
const errorToast = toast.error as ReturnType<typeof vi.fn>;
beforeEach(() => {
vi.stubGlobal('fetch', vi.fn());
});
describe('LoginPage — حالت رمز عبور', () => {
it('submit با فیلد خالی → خطای اعتبارسنجی و بدون fetch', async () => {
renderWithProviders(<LoginPage />, { route: '/admin/login' });
await userEvent.click(screen.getByRole('button', { name: 'ورود به سیستم' }));
expect(errorToast).toHaveBeenCalledWith('شماره موبایل و رمز عبور الزامی است');
expect(fetch).not.toHaveBeenCalled();
});
});
describe('LoginPage — تعویض حالت', () => {
it('کلیک «ورود با پیامک» فرم پیامک را نشان می‌دهد', async () => {
renderWithProviders(<LoginPage />, { route: '/admin/login' });
await userEvent.click(screen.getByRole('button', { name: 'ورود با پیامک' }));
expect(screen.getByRole('button', { name: 'ارسال کد تأیید' })).toBeInTheDocument();
});
it('شماره موبایل نامعتبر در حالت پیامک → خطا', async () => {
renderWithProviders(<LoginPage />, { route: '/admin/login' });
await userEvent.click(screen.getByRole('button', { name: 'ورود با پیامک' }));
await userEvent.type(screen.getByPlaceholderText('09xxxxxxxxx'), '12345');
await userEvent.click(screen.getByRole('button', { name: 'ارسال کد تأیید' }));
expect(errorToast).toHaveBeenCalledWith('شماره موبایل معتبر نیست');
});
});