Angular Academy · درس

TestBed وتجهيزات المكوّنات

اضبط المكوّنات وأنشئها في الاختبارات

TestBed وتجهيزات المكوّنات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

سبب وجود TestBed

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

فهي تهيّئ NgModule مؤقتًا، وتصرّف المكوّن، وتمنحك مرجعًا للتفاعل معه.

configureTestingModule

تحدد TestBed.configureTestingModule() ما يحتاج إليه اختبارك: المكوّن قيد الاختبار، وموفّراته، وأي استيرادات لازمة. وبالنسبة إلى المكوّنات المستقلة، تضع المكوّن نفسه في imports.

import { TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [CounterComponent],
  });
});

إنشاء بيئة اختبار لمكوّن

تعيد TestBed.createComponent(CounterComponent) كائن ComponentFixture. وتُعد بيئة الاختبار جهاز التحكم عن بُعد الخاص بك؛ فهي تغلف نسخة المكوّن، وعنصر DOM الأصلي الخاص به، وآلية اكتشاف التغييرات.

import { ComponentFixture, TestBed } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

beforeEach(() => {
  fixture = TestBed.createComponent(CounterComponent);
});

الوصول إلى نسخة المكوّن

تمثل fixture.componentInstance النسخة الفعلية من الفئة. ويمكنك استدعاء أساليبها وقراءة خصائصها مباشرةً، تمامًا كما تفعل في TypeScript العادي.

it('creates the component', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const component = fixture.componentInstance;
  expect(component).toBeTruthy();
  expect(component.count).toBe(0);
});

يؤدي detectChanges إلى تشغيل العرض

لا تكون بيئة الاختبار المنشأة حديثًا قد عُرضت بعد. استدعِ fixture.detectChanges() لتشغيل اكتشاف التغييرات وngOnInit الخاص بالمكوّن، وربط البيانات بعنصر DOM.

it('renders initial value', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  fixture.detectChanges(); // now bindings are applied
  const el = fixture.nativeElement as HTMLElement;
  expect(el.textContent).toContain('0');
});

nativeElement مقارنةً بـ debugElement

يمثل fixture.nativeElement عقدة DOM الخام (من نوع HTMLElement). أما fixture.debugElement فهو غلاف Angular الأكثر ثراءً، ويتيح لك الاستعلام باستخدام التوجيهات، وقراءة الخدمات المحقونة، وفحص عمليات الربط.

const native = fixture.nativeElement;       // HTMLElement
const debug = fixture.debugElement;         // DebugElement
console.log(debug.componentInstance === fixture.componentInstance); // true

الموفّرون في وحدة الاختبار

إذا كان المكوّن يحقن خدمات، فزوّده بها من خلال providers. ويمكنك استخدام خدمات فعلية أو بدائل اختبارية. سنوفّر هنا خدمة فعلية لحالة بسيطة.

TestBed.configureTestingModule({
  imports: [CounterComponent],
  providers: [
    { provide: LoggerService, useValue: { log: () => {} } },
  ],
});

compileComponents للقوالب الخارجية

عند استخدام templateUrl/styleUrls غير المضمّنة داخل المكوّن، ومن دون إعداد اختبار Angular CLI، يجب تصريف القوالب بشكل غير متزامن. استدعِ await TestBed.compileComponents(). أما مع CLI فعادةً ما يحدث ذلك تلقائيًا.

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [ProfileComponent],
  }).compileComponents();
});

اختبار كامل وبسيط

بتجميع الخطوات: هيّئ، وأنشئ، واكتشف التغييرات، ثم تحقّق. هذا هو الشكل المعتمد لمعظم اختبارات مكوّنات Angular.

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({ imports: [CounterComponent] });
    fixture = TestBed.createComponent(CounterComponent);
    fixture.detectChanges();
  });

  it('starts at zero', () => {
    expect(fixture.componentInstance.count).toBe(0);
  });
});

TestBed.inject للخدمات

للحصول على موفّر تمت تهيئته، استخدم TestBed.inject(Token). وهذا هو البديل الحديث عن TestBed.get() المهجورة.

const logger = TestBed.inject(LoggerService);
expect(logger).toBeDefined();

إعادة الضبط بين الاختبارات

تعيد TestBed ضبط وحدتها تلقائيًا قبل كل اختبار، لذلك لا تتسرب الموفّرات وحالة المكوّن. ولهذا تهيّئها داخل beforeEach بدلًا من تهيئتها مرة واحدة على مستوى عام.

تحقق سريع

اختبر ما يحدث مباشرةً بعد createComponent.

مراجعة

تعلمت أساسيات الاختبار: تنشئ TestBed.configureTestingModule() البيئة، وتعيد createComponent() كائن ComponentFixture، بينما يعرضه detectChanges(). استخدم componentInstance للفئة، وnativeElement/debugElement لـ DOM، وTestBed.inject() للخدمات.

الأسئلة الشائعة

هل درس «TestBed وتجهيزات المكوّنات» مجاني؟

نعم — نص درس «TestBed وتجهيزات المكوّنات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «TestBed وتجهيزات المكوّنات»؟

اضبط المكوّنات وأنشئها في الاختبارات تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «TestBed وتجهيزات المكوّنات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

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

جميع الدروس في هذه الدورة

TestBed وتجهيزات المكوّنات
اختبار المدخلات والمخرجات وDOM
محاكاة الخدمات والتبعيات
اختبار الإشارات والتعليمات البرمجية غير المتزامنة

← العودة إلى Angular Academy