اختبار المدخلات والمخرجات وDOM
تحقّق من المخرجات المعروضة والأحداث
اختبار المدخلات والمخرجات وDOM درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
اختبار عقد المكوّن
تتواصل المكوّنات من خلال المدخلات (البيانات الواردة)، والمخرجات (الأحداث الصادرة)، وDOM المعروض. تختبر اختبارات المكوّن الجيدة هذه الواجهات الثلاث، وتتحقق من النتيجة المرئية بدلًا من تفاصيل التنفيذ الداخلية.
تعيين مدخل
عيّن قيمة إلى خاصية الإدخال في نسخة المكوّن، ثم استدعِ detectChanges() لإعادة العرض. أما مع مدخلات الإشارة، فعيّنها باستخدام fixture.componentRef.setInput().
fixture.componentInstance.label = 'Save';
fixture.detectChanges();
// signal inputs:
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();قراءة DOM باستخدام querySelector
استخدم fixture.nativeElement.querySelector() للعثور على العناصر المعروضة والتحقق من نصوصها أو سماتها.
fixture.componentRef.setInput('label', 'Save');
fixture.detectChanges();
const btn = fixture.nativeElement.querySelector('button');
expect(btn.textContent.trim()).toBe('Save');DebugElement وBy.css
تعيد fixture.debugElement.query(By.css(...)) غلافًا من نوع DebugElement. ويمثل .nativeElement الخاص به عقدة DOM، كما يتيح استعلامات أكثر ثراءً تعمل عبر المنصات المختلفة.
import { By } from '@angular/platform-browser';
const de = fixture.debugElement.query(By.css('.title'));
expect(de.nativeElement.textContent).toContain('Hello');queryAll للقوائم
للعناصر المتكررة (مثل حلقة @for) استخدم queryAll للحصول على جميع المطابقات والتحقق من العدد.
const items = fixture.debugElement.queryAll(By.css('li'));
expect(items.length).toBe(3);
expect(items[0].nativeElement.textContent).toContain('First');محاكاة النقر
شغّل أحداث DOM لاختبار التفاعل. استخدم triggerEventHandler على DebugElement، أو استدعِ .click() الأصلي، ثم detectChanges().
const btn = fixture.debugElement.query(By.css('button'));
btn.triggerEventHandler('click');
fixture.detectChanges();
expect(fixture.componentInstance.count).toBe(1);اختبار حدث مخرَج
اشترك في مخرج المكوّن (سواء كان EventEmitter أو إشارة مخرَج) قبل تشغيل الإجراء الذي ينبغي أن يرسله.
let emitted: string | undefined;
fixture.componentInstance.saved.subscribe((v: string) => (emitted = v));
fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
expect(emitted).toBe('done');التحقق من السمات والفئات
يمكنك التحقق من الفئات والسمات الشرطية التي تعتمد على المدخلات.
fixture.componentRef.setInput('active', true);
fixture.detectChanges();
const el = fixture.nativeElement.querySelector('.tab');
expect(el.classList.contains('active')).toBe(true);تحديث مدخلات النموذج
لاختبار حقول النص، عيّن قيمة الإدخال وأرسل حدث input حتى تحدّث روابط Angular قيمها.
const input = fixture.nativeElement.querySelector('input');
input.value = 'hello';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
expect(fixture.componentInstance.text).toBe('hello');سبب استدعاء detectChanges بعد كل تغيير
تتطلب الاختبارات المعتمدة على Zone والاختبارات غير المعتمدة عليها استدعاءً صريحًا لـ detectChanges() بعد تغيير الحالة، لأن الاختبار يعمل خارج دورة Angular التلقائية. ونسيان ذلك هو السبب الأول لظهور رسالة «يقرأ التأكيد DOM قديمًا».
اختبر السلوك لا التفاصيل الداخلية
يُفضّل التحقق من المخرجات المعروضة والأحداث المُرسلة بدلًا من الحقول الخاصة. فهذا يحافظ على مرونة الاختبارات؛ إذ لا ينبغي لإعادة هيكلة التفاصيل الداخلية أن تكسر اختبارًا ما دام السلوك المرئي للمستخدم لم يتغير.
تحقق سريع
أي واجهة برمجة تمنحك DebugElement؟
مراجعة
قدت المدخلات عبر setInput، وقرأت DOM باستخدام querySelector وBy.css، والتقطت المخرجات بالاشتراك فيها، وحاكيت أحداث النقر والإدخال. استدعِ دائمًا detectChanges() بعد أي تغيير، وتحقق من السلوك المرئي للمستخدم.
الأسئلة الشائعة
هل درس «اختبار المدخلات والمخرجات وDOM» مجاني؟
نعم — نص درس «اختبار المدخلات والمخرجات وDOM» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «اختبار المدخلات والمخرجات وDOM»؟
تحقّق من المخرجات المعروضة والأحداث تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «اختبار المدخلات والمخرجات وDOM»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- TestBed وتجهيزات المكوّنات
- اختبار المدخلات والمخرجات وDOM
- محاكاة الخدمات والتبعيات
- اختبار الإشارات والتعليمات البرمجية غير المتزامنة