اختبار المكوّنات

نموذج التسجيل لديكم مغطّى بأربعة عشر اختبارًا، وكلها خضراء. في الشهر الماضي استبدل أحد المطوّرين <div class="erreur"> بمكوّن <Alerte> يطبّق فئات مساعدة مولَّدة تلقائيًا. فتحوّلت الاختبارات الأربعة عشر، التي كانت تبحث عن .erreur عبر querySelector، إلى اللون الأحمر دفعة واحدة مع أن المنتج كان يعمل على أكمل وجه. وبعد ساعتين كانت قد أُصلحت، ثم في الأسبوع التالي مرّ خطأ حقيقي: كانت رسالة الخطأ تظهر فعلًا، لكن من دون ارتباط بالحقل المعني، فهي غير مرئية لقارئ الشاشة. ولم يرصده أي اختبار.

لهذين الإخفاقين السبب نفسه. فالاستعلام عن DOM بفئة CSS يختبر البنية الداخلية للعرض، لا ما يدركه المستخدم. والبنية تتغير باستمرار دون أن يتغير السلوك، فينتج عن ذلك إيجابيات كاذبة؛ وتبقى كما هي حين يتدهور مستوى الوصولية، فينتج عن ذلك سلبيات كاذبة. والعلاج آلي: ابحث عن عناصرك بحسب دورها الوصولي (accessible role) واسمها الوصولي (accessible name)، تمامًا كما يفعل قارئ الشاشة أو المستخدم الذي يعتمد على لوحة المفاتيح. عندئذ تصبح اختباراتك غير حسّاسة لإعادة تصميم الأنماط، وحسّاسة للانحدارات التي تهمّ حقًا.

الإعداد

نستخدم Testing Library، وهي متوفرة لـ React وVue وSvelte وAngular بواجهة الاستعلام نفسها. الأمثلة هنا بـ React؛ وواجهة الاستعلام متطابقة في غيرها.