feat: implement BackButton component for consistent navigation

- Added BackButton component to standardize back navigation across pages. - Integrated BackButton into various pages, replacing custom back buttons for consistency. - Updated PageHeader to accept backTo prop for displaying BackButton when navigating from subpages. - Created useGoBack hook to handle navigation logic, determining whether to go back in history or redirect to a fallback page. - Added tests for BackButton and its integration with PageHeader to ensure expected behavior.
2026-07-29 20:26:51 +03:30
parent e6267080b2
commit e0e8fbd1e4
31 changed files with 224 additions and 82 deletions
@@ -0,0 +1,90 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, fireEvent, render } from '@testing-library/react';
+import { MemoryRouter, Route, Routes, Link } from 'react-router-dom';
+import BackButton from './BackButton';
+import PageHeader from './PageHeader';
+
+/**
+ * رفتار «بازگشت» باید در همهٔ صفحات یکی باشد: یک قدم عقب در تاریخچهٔ پنل، و وقتی
+ * صفحه مستقیم باز شده (تاریخچه‌ای نیست) رفتن به صفحهٔ والد.
+ */
+function Detail({ fallback = '/admin/clinic-services' }: { fallback?: string }) {
+  return (
+    <>
+      <span>صفحهٔ جزئیات</span>
+      <BackButton fallback={fallback} />
+    </>
+  );
+}
+
+function List() {
+  return (
+    <>
+      <span>صفحهٔ لیست</span>
+      <Link to="/admin/clinic-services/x1">باز کردن جزئیات</Link>
+    </>
+  );
+}
+
+function renderAt(initialEntries: string[]) {
+  return render(
+    <MemoryRouter initialEntries={initialEntries}>
+      <Routes>
+        <Route path="/admin/clinic-services" element={<List />} />
+        <Route path="/admin/clinic-services/:uuid" element={<Detail />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('BackButton', () => {
+  it('ظاهر یکسان دارد: همان دکمهٔ بازگشتِ صفحهٔ سرویس‌ها', () => {
+    renderAt(['/admin/clinic-services/x1']);
+
+    const btn = screen.getByRole('button', { name: /بازگشت/ });
+    expect(btn).toHaveClass('cp-btn-secondary');
+    expect(btn).toHaveAttribute('type', 'button');
+  });
+
+  it('وقتی از صفحهٔ دیگری آمده‌ایم، یک قدم به همان صفحه برمی‌گردد', () => {
+    renderAt(['/admin/clinic-services']);
+
+    fireEvent.click(screen.getByText('باز کردن جزئیات'));
+    expect(screen.getByText('صفحهٔ جزئیات')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /بازگشت/ }));
+    expect(screen.getByText('صفحهٔ لیست')).toBeInTheDocument();
+  });
+
+  it('در ورود مستقیم (بدون تاریخچه) به صفحهٔ والد می‌رود', () => {
+    renderAt(['/admin/clinic-services/x1']);
+
+    fireEvent.click(screen.getByRole('button', { name: /بازگشت/ }));
+
+    expect(screen.getByText('صفحهٔ لیست')).toBeInTheDocument();
+  });
+});
+
+describe('PageHeader — backTo', () => {
+  it('با backTo دکمهٔ بازگشت را نشان می‌دهد', () => {
+    render(
+      <MemoryRouter initialEntries={['/admin/claims/p1']}>
+        <PageHeader title="پروندهٔ بیمه" backTo="/admin/claims" />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByRole('button', { name: /بازگشت/ })).toBeInTheDocument();
+  });
+
+  it('بدون backTo دکمه‌ای رندر نمی‌شود (صفحات سطح‌اول)', () => {
+    render(
+      <MemoryRouter>
+        <PageHeader title="مطالبات بیمه" />
+      </MemoryRouter>,
+    );
+
+    expect(screen.queryByRole('button', { name: /بازگشت/ })).not.toBeInTheDocument();
+  });
+});