Angular Academy · درس

اختبار الإشارات والتعليمات البرمجية غير المتزامنة

اختبر السلوك التفاعلي وغير المتزامن

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

العمليات غير المتزامنة هي الجزء الأصعب في الاختبار

تنفّذ المكوّنات الحقيقية أعمالًا غير متزامنة، مثل المؤقتات والوعود وHTTP وعمليات الإدخال المؤجّلة. يجب أن تتحكم الاختبارات في الوقت لكي تُجرى التأكيدات بعد استقرار العمل غير المتزامن. يوفّر Angular الأدوات fakeAsync وtick وflush للتحكم الحتمي في الوقت.

اختبار Signal

تُقرأ signal مثل الدالة. واختبارها مباشر: استدعِ signal وتحقّق من القيمة، ثم حدّثها وتحقّق مرة أخرى.

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

تتحدّث Computed Signals تلقائيًا

يعيد computed الحساب عند تغيّر تبعياته. في الاختبار، غيّر signal المصدر ثم اقرأ computed؛ ولا حاجة إلى إعادة الحساب يدويًا.

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

Signals وDOM

لمشاهدة انعكاس تغيّر signal في القالب، استدعِ detectChanges() بعد تحديثها، كما تفعل مع أي حالة أخرى.

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

مقدمة إلى fakeAsync

غلّف الاختبار داخل fakeAsync للدخول إلى نطاق زمني وهمي. تُوضع المؤقتات والمهام الدقيقة في قائمة انتظار بدلًا من تشغيلها، وتحرّكها يدويًا. يجعل ذلك الاختبارات غير المتزامنة متزامنة وموثوقة.

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

تقديم الوقت باستخدام tick

يقدّم tick(ms) الساعة الافتراضية، ويشغّل أي مؤقتات جرى جدولتُها ضمن تلك الفترة.

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

flush لجميع المؤقتات المعلّقة

عندما لا تعرف التأخير الدقيق، يفرّغ flush() كل مهمة كبيرة معلّقة حتى تصبح قائمة الانتظار فارغة.

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

اختبار الوعود باستخدام fakeAsync

تُحلّ الوعود بوصفها مهام دقيقة. داخل fakeAsync، استدعِ flushMicrotasks() (أو tick()) لإتمامها قبل إجراء التأكيدات.

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

المساعد async / waitForAsync

للاختبارات التي يجب أن تنتظر عملًا غير متزامن حقيقيًا من دون التحكم في الوقت، غلّف الجسم داخل waitForAsync واستخدم fixture.whenStable().

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

اختبار effect()

يُنفّذ effect بشكل غير متزامن بعد تغيّر الإشارات التي يقرأها. لملاحظة نتيجته، شغّل اكتشاف التغييرات (أو نفّذ flush) لكي يُنفّذ effect، ثم تحقّق من الأثر الجانبي.

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

مشكلة شائعة: المؤقتات المتبقية

إذا انتهى اختبار fakeAsync ولا تزال مؤقتات في قائمة الانتظار، فسيطرح Angular خطأً. احرص دائمًا على تنفيذ tick/flush لها، أو مسح الفواصل الزمنية في ngOnDestroy، لكي تكون الساعة الافتراضية فارغة عند انتهاء الاختبار.

تحقّق سريعًا

اختر الأداة المناسبة لتأخير معلوم.

مراجعة

تُختبر Signals مثل الدوال البسيطة: استدعها للقراءة، واستخدم set للتحديث، وdetectChanges لتحديث DOM. بالنسبة إلى العمل غير المتزامن، يوفّر fakeAsync ساعة افتراضية تقدّمها باستخدام tick، وتفرّغها باستخدام flush، وتُتمّ الوعود باستخدام flushMicrotasks. لا تترك المؤقتات معلّقة أبدًا.

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

هل درس «اختبار الإشارات والتعليمات البرمجية غير المتزامنة» مجاني؟

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

ماذا ستتعلم في «اختبار الإشارات والتعليمات البرمجية غير المتزامنة»؟

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

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

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

كم من الوقت يستغرق درس «اختبار الإشارات والتعليمات البرمجية غير المتزامنة»؟

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

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

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

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

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

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