اختبار حدود الخطأ والتشويق
تعلم كيفية اختبار حدود التشويش والخطأ من خلال التحقق من صحة مراحل التراجع والخطأ والاسترداد الملتزم بها بدلاً من تفاصيل التنفيذ، حتى عندما يكون العرض قائمًا على الوقت ومتزامنًا.
مع توسع تطبيقات React ، لم يعد العرض عملية واحدة متواصلة. قد تتوقف المكونات مؤقتًا أثناء انتظار البيانات. وقد تتدفق المناطق المتداخلة تدريجيًا. وقد تحدث أخطاء أثناء العرض ويتم رصدها بواسطة حدود مصممة لعزل الفشل. يُضفي React 19 طابعًا رسميًا على هذا النموذج: فالعرض مُجدول، وقابل للمقاطعة، ومنسق عبر الحدود.
في العروض التوضيحية الصغيرة، غالبًا ما تُختبر حالات التحميل والخطأ بافتراضات مبسطة: انتظر 500 مللي ثانية، وتوقع ظهور مؤشر التحميل؛ قم بمحاكاة خطأ، وتوقع ظهور رسالة. لكن تدفقات التعليق في بيئة الإنتاج أكثر تعقيدًا. تظهر حالات التراجع وتختفي. قد تظهر الأخطاء في مناطق متداخلة بينما يظل الهيكل الخارجي مستقرًا. يجب أن تعيد تدفقات إعادة المحاولة ضبط الحدود دون تعطيل واجهة المستخدم غير ذات الصلة. يضيف السلوك القائم على الوقت، مثل التراجع المتأخر لتجنب الوميض، مزيدًا من الدقة.
المشكلة الحقيقية التي يجب علينا حلها هي هذه:
كيف نختبر حدود التشويق والخطأ بطريقة تتحقق من صحة العقد المرئي للمستخدم دون ربط الاختبارات بتقنيات التوقيت أو الآليات الداخلية؟
تُحدد حدود التجميد وحدود الخطأ فواصل العرض. يُفعّل حد التجميد خيارًا احتياطيًا عند تجميد عنصر فرعي. بينما يُفعّل حد الخطأ واجهة مستخدم بديلة عند حدوث خطأ من عنصر تابع. يُدخل كلا الحدين مراحل صريحة في عملية العرض. يجب أن تتحقق اختباراتنا من هذه المراحل المُفعّلة.
ما الذي يتم تنفيذه قبل التعليق؟
متى يظهر خيار التراجع؟
ما الذي يستمر أثناء الفشل؟
ما الذي يتم إعادة ضبطه عند إعادة المحاولة؟
ما الذي يتغير عند وجود عتبات زمنية؟
تخيّل شجرة مكونات ذات حدين: حدّ "التعليق" حول لوحة البيانات، وحدّ "الخطأ" الذي يغلّف تلك اللوحة. عند بدء تحميل البيانات، يستبدل حدّ "التعليق" اللوحة فقط، وليس الصفحة بأكملها. إذا حدث خطأ في اللوحة، يستبدل حدّ "الخطأ" تلك المنطقة بواجهة مستخدم للخطأ. عند ضغط المستخدم على "إعادة المحاولة"، يُعاد ضبط الحدّ، وقد تتكرر دورة "التعليق".
تتم عملية العرض على مراحل مرئية: غلاف مستقر → التراجع → المحتوى أو الخطأ → إعادة التعيين → إعادة المحاولة.
اختبار حدود التشويق والخطأ من خلال ما يلتزم به React
لا يُعدّ Suspense API برمجة تطبيقات لجلب البيانات، بل هو أداة أساسية لتنسيق العرض. عندما يُطلق عنصر فرعي وعدًا أثناء العرض، يُوقف React هذا الفرع مؤقتًا ويعرض أقرب عنصر احتياطي من Suspense بدلاً منه. بمجرد اكتمال الوعد، يُعيد React محاولة الوصول إلى الفرع المُعلق ويُثبّت محتواه الفعلي.
يعمل حد الخطأ بطريقة مشابهة، ولكنه بدلاً من معالجة الوعود، يعالج الأخطاء التي تحدث أثناء العرض، أو في دوال دورة الحياة، أو في التأثيرات. عندما يُصدر عنصر فرعي خطأً، يُفعّل الحد واجهة مستخدم الخطأ بدلاً من تعطيل الشجرة بأكملها. تسمح عملية إعادة الضبط React بمحاولة عرض الشجرة الفرعية مرة أخرى.
يتطلب اختبار التشويق التفكير المنطقي في مراحل الالتزام:
الالتزام الأولي قبل الإيقاف
الالتزام بالتراجع أثناء الإيقاف
الالتزام النهائي بالمحتوى بعد الحل
يتطلب اختبار حدود الخطأ التحقق من صحة ما يلي:
تظهر واجهة المستخدم الخاصة بالأخطاء عندما يُظهر أحد الأطفال خطأً
يبقى الغلاف المحيط مستقرًا
إعادة الضبط تعيد مسار العرض الطبيعي
يُضيف التشويش الزمني طبقةً أخرى. أحيانًا نؤخر عرض الشاشة الاحتياطية عمدًا لتجنب الوميض (على سبيل المثال، لا نعرض مؤشر التحميل إلا إذا تجاوز وقت التحميل 300 مللي ثانية). يجب أن تؤكد ...