الحصول على تغطية اختبارات Front-End باستخدام Cypress

الخلفية

في المقالة "توصيل منتج مستقر باستخدام Cypress"، ناقشنا سبب اختيارنا لـ Cypress كإطار عمل لاختبارات E2E. بعد قضاء ما يقرب من شهرين في تحسين حالات الاختبار، كنا بحاجة إلى تغطية اختبار لتحديد ما إذا كانت تغطية الاختبار كافية. ستوضح هذه المقالة كيفية الحصول على تغطية E2E لواجهة APISIX Dashboard باستخدام Cypress.

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

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

تثبيت التبعيات والتكوين

لجمع بيانات تغطية الاختبار، نحتاج إلى وضع بعض المجسات في الكود الأصلي للأعمال حتى يتمكن Cypress من جمع البيانات.

يوصي Cypress رسميًا بطريقتين، الأولى هي إنشاء دليل مؤقت عبر nyc وتشغيل الكود الذي تمت كتابة المجسات فيه لجمع بيانات تغطية الاختبار. الطريقة الثانية هي تحويل الكود في الوقت الفعلي عبر خط أنابيب تحويل الكود، مما يلغي عناء المجلدات المؤقتة ويجعل جمع بيانات تغطية الاختبار أكثر سلاسة. نختار الطريقة الثانية لجمع تغطية E2E للواجهة الأمامية.

تثبيت التبعيات

yarn add  babel-plugin-istanbul --dev

تثبيت إضافة cypress

yarn add  @cypress/code-coverage --dev

تكوين babel

// web/config/config.ts
extraBabelPlugins: [
    ['babel-plugin-istanbul',  {
      "exclude": ["**/.umi", "**/locales"]
    }],
  ],

تكوين إضافة تغطية كود Cypress

// web/cypress/plugins/index.js
module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config);
  return config;
};

// web/cypress/support/index.js
import '@cypress/code-coverage/support';

الحصول على تغطية الاختبار

بعد الانتهاء من التكوين، نحتاج إلى تشغيل حالات الاختبار. بعد تشغيل حالات الاختبار، سيولد Cypress مجلدات coverage و .nyc_output، والتي تحتوي على تقارير تغطية الاختبار.

ستظهر معلومات تغطية الاختبار في وحدة التحكم بعد تنفيذ الأمر التالي.

npx nyc report --reporter=text-summary

تحت دليل coverage، ستتوفر صفحة تقرير أكثر تفصيلاً، كما هو موضح هنا.

Statements تشير إلى ما إذا تم تنفيذ كل عبارة
Branchs تشير إلى ما إذا تم تنفيذ كل كتلة if
Functions تشير إلى ما إذا تم استدعاء كل دالة
Lines تشير إلى ما إذا تم تنفيذ كل سطر

الخلاصة

تعكس نسبة تغطية الاختبار جودة المشروع إلى حد ما. حاليًا، وصلت نسبة تغطية E2E لواجهة APISIX Dashboard الأمامية إلى 71.57%. سنواصل العمل مع المجتمع لتعزيز نسبة تغطية الاختبار وتقديم منتجات أكثر موثوقية واستقرارًا للمستخدمين.