74. اختبار وحدات المكونات (الاختبار الضحل)

عند اختبار وحدة مكون، نركز فقط على منطقه وتفاعله مع القالب، مع تجاهل مكوناته الفرعية للحفاظ على تركيز الاختبار (الاختبار الضحل).

اختبار منطق المكون

نتفاعل مباشرة مع مثيل component.

typescript it('should correctly calculate total price', () => { component.price = 100; component.taxRate = 0.1; // اختبار أسلوب فئة expect(component.calculateTotal()).toBe(110); });

اختبار تفاعل القالب (DOM)

نستخدم كائن fixture للاستعلام عن DOM وتشغيل اكتشاف التغيير.

1. fixture.detectChanges(): يجبر Angular على تشغيل اكتشاف التغيير وتحديث DOM بناءً على حالة المكون الحالية.
2. fixture.nativeElement: عنصر DOM الخام لمضيف المكون.
3. DebugElement: غلاف Angular لعنصر DOM، يُستخدم للاستعلام وإرسال الأحداث.

typescript it('should render title in an H1 tag', () => { component.title = 'Test App'; // 1. تشغيل اكتشاف التغيير لعرض العنوان fixture.detectChanges();

// 2. الاستعلام عن DOM const compiled = fixture.nativeElement as HTMLElement; const h1 = compiled.querySelector('h1');

// 3. تأكيد النتيجة expect(h1?.textContent).toContain('Test App'); });

it('should call increment() on button click', () => { spyOn(component, 'increment'); // التجسس على الأسلوب fixture.detectChanges();

const button = fixture.debugElement.query(By.css('button')); button.triggerEventHandler('click', null); // محاكاة النقر

expect(component.increment).toHaveBeenCalled(); });

يضمن الاختبار الضحل أن الاختبار الخاص بك يتعطل فقط إذا تغير المكون الذي تختبره حالياً، وليس إذا تغير مكون ابن بعيد.