الحل: اختبار سير عمل نموذج معقد

إليك تطبيق سير عمل نموذج المعقد مع مالك معالج واضح يُركز حالة المسودة والخطوة والخطأ، بحيث يكون كل انتقال بين الخطوات تغييرًا في العرض فقط، وليس إعادة ضبط للبيانات. يتم التعامل مع التحقق كجزء من دورة الالتزام: عندما يحاول المستخدم التقدم بحقول غير صالحة، تظهر الأخطاء بجوار المدخلات، ويتم تمييز كل إدخال بـaria-invalid يتم الإشارة إلى كل رسالة بواسطةaria-describedby وينتقل التركيز مرة واحدة إلى أول عنصر تحكم غير صالح، مما يجعل التفاعل التالي متوقعًا لمستخدمي لوحة المفاتيح والتقنيات المساعدة. تتم معالجة الإرسال بشكل تفاعلي من خلال تثبيت المحاولة الجارية، والإعلان عن "جاري الإرسال..." عبر منطقة تفاعلية، وعرض إيصال تأكيدي يتم تأكيده عند النجاح أو إلغاؤه عند الفشل، مما يوفر مسارًا لإعادة المحاولة دون تجميد واجهة المستخدم في حالات التحميل العامة.

تظل قابلية الاختبار مستقرة لأن آلية الاختبار اليدوية تؤكد فقط السلوك الملحوظ إخراج الدلالية: عناوين الخطوات، زر تفعيل/تعطيل الأزرار، ورسائل المنطقة المباشرة، وحالة الإيصال، ومخالفات بنية aXe. يتقارب التحقق من الصحة من خلال التحديثات المحددة النطاق، حيث لا يتغير سوى الإيصال والحالة أثناء الإرسال، ويبقى باقي المعالج ثابتًا وهادئًا نظرًا لتداخل عمليات التحقق والانتقالات وواجهة المستخدم التفاؤلية وإعادة المحاولة.

توضيح

إليكم شرح الكود أعلاه:

• فيApp.js ملف:

  • الأسطر من 1 إلى 5: استيراد خطافات React ، ومكونات الخطوة، وواجهة برمجة API الإرسال الوهمية، ومشغل اختبار الضبط اليدوي.

  • الأسطر 7-13: التحقق من صحة الاسم/البريد الإلكتروني بشكل متزامن وإرجاعerrors كائن مفهرس حسب الحقل.

  • الأسطر 15-17: إنشاء معرف من جانب العميل للإيصال المتفائل.

  • الأسطر 20-23: حالة مملوكة للوالد للخطوة الحالية، مدخلات المسودة، أخطاء التحقق، ومفتاح تبديل لفرض الفشل.

  • السطر 25: حالة انتقالية لتمييز تحديثات واجهة المستخدم للإرسال غير المتزامن على أنها غير عاجلةisPending ،startTransition .

  • الأسطر 27-32: حالة الاستلام +useOptimistic إظهار إيصال معلق على الفور ثم تسويته لاحقاً.

  • الأسطر 35-43: اقرأ#name و#email من DOM عند وجوده، لذلك يتم التقاط تغييرات إدخال الاختبار البرمجي.

  • الأسطر 45-92: إرسالtransaction استخدامuseActionState محاولة بناء ، والتحقق من الصحة، وعرض إيصال إيجابي، والإعلان عن الحالة، واستدعاء الإرسال غير المتزامن، وإرجاع نتيجة النجاح/الخطأ مع خيار إضافي.lastAttempt لإعادة المحاولة. ...