تغطية اختبارات JavaScript: الأدوات ومقاييس الكود

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

تغطية الكود بالاختبارات في JavaScript: الأدوات والمقاييس

\n\n

تخيل أنك قبطان سفينة ضخمة. فريقك يفحص بانتظام المحركات والملاحة وأنظمة الأمان. ولكن في يوم من الأيام، تقرر عدم فحص نظام التبريد لأن "كان يعمل بالأمس". النتيجة متوقعة: ارتفاع الحرارة، عطل، وأنت تنجرف في البحر المفتوح. في عالم JavaScript، يُسمى هذا الإهمال "غياب تغطية الكود بالاختبارات".

\n\n

أنت تكتب الاختبارات - هذا رائع. ولكن كيف تعرف أنك اختبرت كل شيء حقًا، ولم تخلق مجرد وهم بالأمان؟ الإجابة هي مقاييس تغطية الكود. فهي تُظهر أي جزء من تطبيقك تم تنفيذه أثناء الاختبارات. بدون هذه المقاييس، أنت تخاطر بفقدان خطأ حرج اختبأ في فرع شرط لم يتم اختباره.

\n\n

في هذه المقالة، سنشرح كيفية قياس تغطية الكود بالاختبارات في JavaScript بشكل صحيح، وما هي الأدوات المتاحة لذلك، وكيفية تفسير المقاييس حتى لا تؤذي نفسك. نغوص في عالم code coverage دون ملل!

\n\n

ما هي تغطية الكود ولماذا هي مهمة؟

\n\n

تغطية الكود (code coverage) هي مقياس يُظهر عدد الأسطر أو الدوال أو الفروع من الكود الخاص بك التي تم تنفيذها عند تشغيل الاختبارات. ببساطة، هي النسبة المئوية للكود "المختبر".

\n\n

يعتقد العديد من المطورين أن التغطية بنسبة 100% هي الكأس المقدسة. لكن هذا ليس صحيحًا تمامًا. التغطية هي أداة، وليست هدفًا. فهي تساعد في:

\n\n
    \n
  • العثور على الكود "الميت" الذي لا يتم تنفيذه أبدًا (وربما ليس ضروريًا).
  • \n
  • فهم أجزاء الكود التي بقيت بدون اختبارات، وتقييم المخاطر.
  • \n
  • زيادة الثقة في إعادة الهيكلة: إذا لم تنخفض التغطية، فأنت لم تكسر شيئًا.
  • \n
\n\n

ولكن هناك أيضًا مطبات. التغطية بنسبة 100% لا تضمن عدم وجود أخطاء. يمكنك اختبار جميع الأسطر، ولكن تفوت خطأ منطقيًا في قواعد العمل. لذلك، يجب النظر إلى تغطية اختبارات JavaScript بشكل متكامل مع جودة الاختبارات نفسها.

\n\n

المقاييس الرئيسية لتغطية الكود

\n\n

قبل اختيار الأداة، دعنا نفهم المقاييس الموجودة. مقاييس تغطية الكود تنقسم إلى عدة أنواع، وكل منها يجيب على سؤال معين.

\n\n

تغطية الأسطر (Line Coverage)

\n

أبسط مقياس. يُظهر عدد أسطر الكود المصدري التي تم تنفيذها مرة واحدة على الأقل. إذا كان لديك 100 سطر، ونفذت الاختبارات 80 منها، فإن تغطية الأسطر تكون 80%.

\n\n

تغطية الفروع (Branch Coverage)

\n

مقياس أعمق. يحلل جميع المسارات الممكنة لتنفيذ الكود (فروع if/else، العوامل الثلاثية، switch). على سبيل المثال، إذا كان لديك شرط if (a > 5)، فهناك فرعان: true و false. إذا كان اختبارك يتحقق فقط من الحالة عندما a > 5، فإن تغطية الفروع ستكون 50%.

\n\n

تغطية الدوال (Function Coverage)

\n

يُظهر عدد الدوال (أو الطرق) التي تم استدعاؤها أثناء الاختبارات. إذا تم تعريف دالة ولكن لم يتم استدعاؤها مطلقًا، فهي غير مغطاة.

\n\n

تغطية العبارات (Statement Coverage)

\n

يشبه تغطية الأسطر، لكنه لا يتعامل مع الأسطر، بل مع العبارات الفردية (التعبيرات). في JavaScript، غالبًا ما تتداخل هذه المفاهيم، لكنها رسميًا أشياء مختلفة.

\n\n

للمشاريع الحقيقية، تحليل تغطية JS عادةً ما يشمل جميع المقاييس الأربعة. لكن التركيز الرئيسي يجب أن يكون على تغطية الفروع، لأنها هي التي تكشف السيناريوهات المفقودة.

\n\n

أدوات قياس التغطية في JavaScript

\n\n

لحسن الحظ، نظام JavaScript البيئي غني بالأدوات. سنستعرض الأكثر شيوعًا: من البسيطة إلى المتقدمة.

\n\n

Istanbul (nyc) — المعيار الذهبي

\n

Istanbul هي الأداة الأكثر شيوعًا لقياس تغطية الكود بالاختبارات في JavaScript. تعمل مع أي مشغل اختبار تقريبًا: Jest، Mocha، Ava، Cypress. بعد التثبيت، تقوم ببساطة بتشغيل الاختبارات باستخدام الغلاف nyc.

\n\n

مثال على التثبيت والتشغيل:

المدونات

توصيات الكتب