اختبار تغييرات Route Params في Angular 2

التحديثات في تطبيق Angular تتم عبر تغييرات في الـ route parameters، وهو ما يتطلب اختبارا دقيقا لضمان توافق السلوك المتوقع مع التغييرات في هذه القيم. في مكانك، أود أن أبدأ بتوضيح الطريقة التي تقوم بها باختبار سلوك الكومبوننت الخاص بك عند تغيير قيمة الـ route parameters.

في الشيفرة التي قدمتها، أولاً تقوم بتعريف الكومبوننت MyComponent الذي يستجيب للتغييرات في الـ route parameters عبر الاشتراك في Observable الخاص بالـ ActivatedRoute. يتم ذلك في دالة ngOnInit حيث يتم استخدام forEach للاشتراك في تغييرات الـ params. ومن ثم، في اختبارك، تحاول تكوين بيئة اختبارية لاختبار سلوك الكومبوننت عند تغيير قيمة الـ route parameters.

الخطأ الذي تحصل عليه يشير إلى أنه لا يمكن الوصول إلى الـ subscribe من Observable، وهذا يعني أن هناك خطأ في تكوين الاستبانة للاشتراك في تغييرات الـ route parameters.

المشكلة الرئيسية تكمن في كيفية توصيل المتغير routes بالـ ActivatedRoute. في الاختبار، تقوم بإعادة تعريف مزود ActivatedRoute باستخدام قيمة ثابتة Observable.from(routes)، وهذا لا يؤدي إلى النتيجة المتوقعة لأنه لا يمكن استخدام Observable.from مع جدول عادي. بدلاً من ذلك، يجب عليك استخدام Observable.of(routes) لتحويل القيمة إلى Observable.

إليك كيفية تعديل اختبارك ليعمل بشكل صحيح:

typescriptCopy code
it('sets PageToShow to new area if params.area is changed', fakeAsync(() => {
    let routes : Params[] = [{ 'area': "Terry" }];
    TestBed.overrideComponent(MyComponent, {
        set: {
            providers: [{ provide: ActivatedRoute,
                useValue: { 'params': of(routes)}}] // Change Observable.from to of
        }
    });

    let fixture = TestBed.createComponent(MyComponent);
    let comp = fixture.componentInstance;
    let route: ActivatedRoute = fixture.debugElement.injector.get(ActivatedRoute);
    comp.ngOnInit();

    expect(comp.PageToShow).toBe("Terry");
    routes.splice(2,0,{ 'area': "Billy" });

    fixture.detectChanges();
    tick(); // Resolve async observables
    expect(comp.PageToShow).toBe("Billy");
}));

باستخدام Observable.of(routes) بدلاً من Observable.from(routes)، يجب أن تحل المشكلة التي تواجهها ويعمل الاختبار كما هو متوقع، مع تعيين الـ PageToShow بشكل صحيح إلى القيمة الجديدة “Billy” بعد تغيير الـ route parameters.

بالطبع، دعني أكمل المقال بمزيد من التفاصيل والشروحات.

عند اختبار سلوك كومبوننت Angular الذي يستجيب لتغييرات الـ route parameters، يجب أولاً فهم كيفية توصيل الـ ActivatedRoute بالكومبوننت في سياق الاختبار. في الكود السابق، تقوم باختبار كومبوننت MyComponent، وتحاول تكوين بيئة اختبارية لهذا الغرض. باستخدام TestBed.overrideComponent، يمكنك تغيير المزودات (providers) الموجودة في تكوين Angular للكومبوننت المستهدف. في هذه الحالة، تغييرت المزود ActivatedRoute لتقديم قيمة Observable من الـ route parameters.

ومع ذلك، كان هناك خطأ في تكوين الـ Observable الذي يتم تقديمه كمزود ActivatedRoute. الاستخدام السابق لـ Observable.from(routes) لم يكن صحيحاً، حيث أن Observable.from يتوقع مصفوفة من العناصر لإنشاء Observable، بينما كنت تحاول إرسال مصفوفة من الكائنات Params. الحل كان باستخدام Observable.of(routes) الذي يقوم بتحويل الكائنات الموجودة في الكائن Params إلى Observable.

بعد تصحيح هذا الخطأ، يمكنك رؤية أن الاختبار ينجح بشكل صحيح. باستخدام الدالة tick()، يتم حل الاشتراك في Observable بشكل صحيح للتأكد من أن جميع العمليات الداخلية المتعلقة بـ Observable تنتهي قبل التحقق من النتيجة.

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