نجاح الاختبار لا يعني دائماً أن الواجهة تعمل

مو كل Test ناجح يعني إنو كل شي شغّال صح!

خلينا نحكي شوي عن الـ Unit Testing والـ Integration Testing بالـ Frontend، وليش الاختبارات بتنجح، بس المستخدم بيواجه مشكلة بالمتصفح.

بالبداية، كان عنا أدوات مثل Jest مع JSDOM، واللي بتسمح لنا نختبر الـ DOM وسلوك المكونات ضمن بيئة JavaScript، بدون الحاجة لتشغيل متصفح حقيقي.

وهالشي ممتاز للـ Unit Tests والكتير من اختبارات المكونات، بس في مشكلة: محاكاة الـ DOM مو هي نفسها تجربة المتصفح الحقيقية.

خلينا ناخد مثال بسيط:

عندك Card فيها Button، بس بسبب overflow: hidden والـ responsive layout، الزر صار خارج المساحة المرئية على الموبايل.

الاختبار ممكن يلاقي الزر بالـ DOM ويتأكد إنو الـ click handler اشتغل، وكل شي يمرّ بنجاح.

بس بالمقابل، المستخدم ممكن ما يقدر يشوف الزر أو يوصل إله أصلاً!

هون مو بالضرورة يكون الاختبار غلط؛ هو ببساطة عم يختبر شي مختلف عن اللي متوقعينه منه.

مع أدوات مثل Karma، صار بإمكاننا نشغّل الاختبارات ضمن متصفحات حقيقية، ونختبر سلوكيات ما بتقدر بيئة مثل JSDOM تمثّلها بشكل كامل.

وبعدين إجت Vitest، وقدّمت تجربة اختبار حديثة وسريعة، مع دعم لبيئات مثل JSDOM، وكمان Browser Mode اللي بيسمح بتشغيل الاختبارات ضمن متصفح حقيقي، باستخدام مزوّدات مثل Playwright.

مو مطلوب نستبدل كل اختبار بمتصفح حقيقي، لأن هالشي ممكن يزيد وقت التنفيذ والتكلفة.

المطلوب إننا نختار الأداة المناسبة لكل نوع من المشاكل، وما نخلط بين نجاح الاختبار ونجاح تجربة المستخدم.