محتويات الدورة

Angular / المتوسط / الدرس 12

اختبار المكوّنات والإتاحة

افحص السلوك عبر المضيف وميّز صياغة القالب من تنفيذه وأدخل لوحة المفاتيح والتسمية والتركيز في العقد.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • اختيار فحوص النموذج والقالب والمكوّن والمتصفح بوعي.
  • استخدام TestBed معزولة لعقود التفاعل.
  • اعتبار الإتاحة البنيوية واليدوية دليلين متكاملين.

يرى كل مستوى اختبار جزءًا من العقد

يفحص النموذج الحساب، ويحلل المحلل الصياغة، وتحل الترجمة الروابط والاعتماديات. يشغل المكوّن Angular بمضيف ويرى المتصفح تفاعل المنصة. لا يعني نجاح طبقة نجاح الباقي. يستخدم المقرر المحلي العملي ويميز المقاطع، ويسجل الإصدار والمزود والاستيراد والعداء والتزامن. قد يخفي اختبار سريع ناقص عيب الاعتمادية أو الحدث.

استخدام المحلل الرسمي دون ادعاء تنفيذ دلالي

يحلل البرنامج قالبين بالمترجم المثبت ويرفض أخطاء التحليل قبل النجاح. يفحص قواعد الربط والكتلة لا وجود count أو ready أو الاستيراد أو العرض. تكشف الصياغة بسرعة ويحتاج غياب الاعتمادية ترجمة أو مكوّنًا. اذكر هذا الحد بدل تسمية كل تحليل ناجح اختبارًا شاملًا.

typescript فحص مكتمل بالمحلل الرسمي
import { parseTemplate } from "@angular/compiler";
const templates = [
  `<button type="button">{{ count() }}</button>`,
  `@if (ready()) { <p>Ready</p> } @else { <p>Wait</p> }`
];
for (const template of templates) {
  const result = parseTemplate(template, "fixture.html");
  if (result.errors?.length) { throw new Error("template parse failed"); }
}
console.log("2 templates parsed");
الناتج المتوقع
2 templates parsed

تُحلل السلسلتان، وتبقى الأعضاء والاستيراد والعرض والإتاحة خارج تأكيد المحلل.

اختبار مسار الحدث الذي يستخدمه الشخص

يفترض الاختبار SignalCounter من درس الإشارات وبيئة Angular 20 مهيأة. يستورده وينشئه ويعرضه ويفعل الزر ويفحص النص بعد العرض، فيختبر الأسلاك لا المعالج فقط. يظل تابعًا لعداء لا سكربت Node مستقلًا. استخدم استقرار async المدعوم لا نومًا اعتباطيًا، ووائم المزود والاستيراد مع محاكيات الخارج المقصودة.

typescript اختبار تفاعل TestBed سياقي
import { TestBed } from "@angular/core/testing";
import { SignalCounter } from "./signal-counter";

it("increments through the button", async () => {
  await TestBed.configureTestingModule({ imports: [SignalCounter] }).compileComponents();
  const fixture = TestBed.createComponent(SignalCounter);
  fixture.detectChanges();
  const button = fixture.nativeElement.querySelector("button") as HTMLButtonElement | null;
  if (!button) { throw new Error("missing button"); }
  button.click();
  fixture.detectChanges();
  expect(fixture.nativeElement.textContent).toContain("3 / 6");
});

ينجح التأكيد في العداء المعلن إذا حدث الزر العرض، ولا ينفذه برنامج المحلل المحلي.

اختبار الاسم والدلالة والتركيز لا الشكل فقط

يحتاج العنصر اسمًا ميسرًا ودلالة أصلية. يكشف البحث بالدور والاسم نقص التسمية وقد يفوته CSS وحده. افحص لوحة المفاتيح والتركيز وربط الخطأ والتعطيل والرجوع بعد التنقل أو الحوار. يفيد البنيوي ولا يثبت تجربة المساعدة كلها. راجع يدويًا بمهام وأجهزة واقعية ولا تدّع شهادة من أداة. قد ينجح العمل ويعجز مستخدم لوحة؛ فاحفظ التوقعين.

حفظ أصغر تجربة فاشلة مكتملة

احفظ الصنف والقالب والاستيراد والمزود والبيانات والأمر عند الفشل. لا تخف الروابط المجهولة بمخطط واسع دون عرض الميزة. اختبر الفراغ والتحميل والرفض والخطأ والتنظيف كي لا تتسرب الاشتراكات. لا تتصل ببعيد أو تغير إعدادًا مشتركًا لإرضاء الاختبار. صرّح بالمفحوص ووسم التابع؛ فالغاية دليل المستخدم لا عد مرتفع يكرر التنفيذ الخاص.

الأخطاء الشائعة وإصلاحها

عرض فحص المحلل كتنفيذ مكوّن.

لماذا يحدث؟
خُلط قبول القواعد بالسلوك المحلول.
كيف تصلحه؟
أضف تجربة مكوّن مهيأة.
كيف تتجنب تكراره؟
سمِّ طبقة التحقق الفعلية.

يستدعي الاختبار المعالج والزر غير موصول.

لماذا يحدث؟
تجاوز الاختبار مسار القالب.
كيف تصلحه؟
فعّل العنصر المعروض بمضيف.
كيف تتجنب تكراره؟
اجعل النموذج والتفاعل متكاملين.

يفوت اختبار الفأرة عنصرًا بلا تسمية للوحة.

لماذا يحدث؟
اعتُبر النجاح المرئي دليل إتاحة كاملًا.
كيف تصلحه؟
افحص الاسم والدلالة واللوحة والتركيز.
كيف تتجنب تكراره؟
اجمع الأتمتة ومراجعة المهمة يدويًا.

اختبر فهمك

1. احذف ربط النقر وأبقِ منطق الزيادة بمكان آخر. أي اختبار يفشل وأي قد ينجح؟

اعرض الحل المشروح

قد ينجح انتقال خالص لصحة الحساب ويفشل تفاعل المضيف لثبات العرض. قد ينجح المحلل لصحة الصياغة. تحمي الطبقات وعودًا مختلفة فلا يكفي نموذج لميزة المكوّن.

2. يعرض زر الحفظ أيقونة فقط وينجح نقره. أضف متطلب إتاحة ودليله.

اعرض الحل المشروح

اشترط اسمًا مثل Save course وزرًا أصليًا وتفعيل لوحة وتركيزًا مرئيًا. يفحص الدور والاسم التسمية وتغطي المراجعة جودة التفاعل. لا تثبت سمة ARIA وحدها فائدة الاسم أو صحة التركيز.

أهم ما تعلمته

  • اختبر العقد الملحوظ بطبقته.
  • ضمّن الاسم واللوحة والتركيز.
  • اعزل التجارب ودقّق الادعاء.

المراجع الرسمية