Cypress के साथ फ्रंट-एंड टेस्ट कवरेज प्राप्त करें

पृष्ठभूमि

लेख "साइप्रस के साथ स्थिर उत्पाद वितरण" में, हमने चर्चा की कि हमने अपने E2E परीक्षण ढांचे के रूप में साइप्रस को क्यों चुना। परीक्षण मामलों को परिष्कृत करने में लगभग दो महीने बिताने के बाद, हमें यह जानने की आवश्यकता थी कि परीक्षण कवरेज पर्याप्त है या नहीं। यह लेख बताएगा कि साइप्रस का उपयोग करके APISIX डैशबोर्ड फ्रंट-एंड E2E कवरेज कैसे प्राप्त करें।

कोड कवरेज क्या है

कोड कवरेज सॉफ्टवेयर परीक्षण में एक मीट्रिक है जो किसी प्रोग्राम में स्रोत कोड के परीक्षण की मात्रा और सीमा का वर्णन करता है, और परिणामी अनुपात को कोड कवरेज कहा जाता है। परीक्षण कोड कवरेज किसी हद तक कोड की स्वास्थ्य स्थिति को दर्शाता है।

निर्भरताएं स्थापित करना और कॉन्फ़िगरेशन

परीक्षण कवरेज डेटा एकत्र करने के लिए, हमें मूल व्यावसायिक कोड में कुछ प्रोब्स लगाने की आवश्यकता है ताकि साइप्रस डेटा एकत्र कर सके।

साइप्रस आधिकारिक तौर पर दो दृष्टिकोणों की सिफारिश करता है, पहला यह है कि nyc के माध्यम से एक अस्थायी निर्देशिका उत्पन्न करें और प्रोब्स में लिखे गए कोड को चलाकर परीक्षण कवरेज डेटा एकत्र करें। दूसरा तरीका यह है कि कोड रूपांतरण पाइपलाइन के माध्यम से कोड रूपांतरण को वास्तविक समय में करें, जो अस्थायी फ़ोल्डर्स की परेशानी को दूर करता है और परीक्षण कवरेज डेटा एकत्र करने को अपेक्षाकृत सरल बनाता है। हम फ्रंट-एंड E2E कवरेज एकत्र करने के लिए दूसरे तरीके को चुनते हैं।

1. निर्भरताएं स्थापित करना

yarn add  babel-plugin-istanbul --dev

2. साइप्रस प्लगइन स्थापित करना

yarn add  @cypress/code-coverage --dev

3. बेबल कॉन्फ़िगर करना

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

4. साइप्रस कोड कवरेज प्लगइन कॉन्फ़िगर करना

// 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';

5. परीक्षण कवरेज प्राप्त करना

कॉन्फ़िगरेशन पूरा होने के बाद, हमें परीक्षण मामले चलाने की आवश्यकता है। परीक्षण मामले चलाने के बाद, साइप्रस coverage और .nyc_output फ़ोल्डर्स उत्पन्न करेगा, जिनमें परीक्षण कवरेज रिपोर्ट्स होंगे।

निम्नलिखित कमांड को निष्पादित करने के बाद कंसोल में परीक्षण कवरेज जानकारी दिखाई देगी।

npx nyc report --reporter=text-summary

कवरेज निर्देशिका के तहत, एक और अधिक विस्तृत रिपोर्ट पृष्ठ उपलब्ध होगा, जैसा कि यहां दिखाया गया है।

• Statements यह दर्शाता है कि क्या प्रत्येक स्टेटमेंट निष्पादित किया गया था
• Branchs यह दर्शाता है कि क्या प्रत्येक if ब्लॉक निष्पादित किया गया था
• Functions यह दर्शाता है कि क्या प्रत्येक फ़ंक्शन को कॉल किया गया था
• Lines यह दर्शाता है कि क्या प्रत्येक लाइन निष्पादित की गई थी

सारांश

परीक्षण कवरेज दर किसी हद तक परियोजना की गुणवत्ता को दर्शाती है। वर्तमान में, APISIX डैशबोर्ड फ्रंट-एंड E2E कवरेज दर 71.57% तक पहुंच गई है। हम समुदाय के साथ मिलकर परीक्षण कवरेज दर को बढ़ाने और उपयोगकर्ताओं के लिए अधिक विश्वसनीय और स्थिर उत्पाद प्रदान करने के लिए काम करते रहेंगे।