العودة إلى الدورة

اختبار سيناريوهات التوجيه

مطور Angular الشامل: من الصفر إلى الاحتراف

76. اختبار سيناريوهات التوجيه

يتضمن اختبار منطق التوجيه ضمان أن المكونات يمكنها التنقل بنجاح، واسترداد معلمات المسار، وأن الحراس يمنعون أو يسمحون بالوصول بشكل صحيح.

1. إعداد وحدة اختبار الموجه

لاختبار المكونات التي تتفاعل مع الموجه (على سبيل المثال، حقن Router أو ActivatedRoute)، نستخدم RouterTestingModule أو نوفر إصدارات وهمية لهذه الخدمات.

typescript import { RouterTestingModule } from '@angular/router/testing'; import { ActivatedRoute } from '@angular/router'; import { of } from 'rxjs';

// نموذج وهمي لـ ActivatedRoute snapshot و paramMap Observable const mockActivatedRoute = { snapshot: { paramMap: convertToParamMap({ id: '101' }) }, paramMap: of(convertToParamMap({ id: '101' })) };

TestBed.configureTestingModule({ imports: [ // استخدام RouterTestingModule.withRoutes([]) للاختبارات البسيطة RouterTestingModule.withRoutes([ { path: 'home', component: HomeComponent } ]) ], providers: [ // توفير ActivatedRoute الوهمي للمكون الذي يتم اختباره { provide: ActivatedRoute, useValue: mockActivatedRoute } ] });

2. اختبار تنقل المكون

نحقن ونتجسس على خدمة Router لضمان استدعاء router.navigate() بشكل صحيح.

typescript it('should navigate to home on success', inject([Router], (router: Router) => { spyOn(router, 'navigate');

component.loginSuccessful(); // منطق المكون الذي يستدعي router.navigate(['/home'])

expect(router.navigate).toHaveBeenCalledWith(['/home']); }));

3. اختبار حراس المسار

نختبر الحراس عن طريق إنشاء مثيل للحارس عبر الحقن واستدعاء طريقة canActivate مباشرة، وتوفير لقطات مسار وهمية إذا لزم الأمر.

typescript describe('AuthGuard', () => { let guard: AuthGuard; let authService: AuthService;

beforeEach(() => { // إعداد نموذج وهمي أو تجسس لـ AuthService // ... guard = TestBed.inject(AuthGuard); });

it('should return true if user is logged in', () => { spyOn(authService, 'isLoggedIn').and.returnValue(true); expect(guard.canActivate()).toBe(true); }); });