VueJS पर मैनुअल परीक्षण की प्रभावशीलता में सुधार

आज मैं VueJS पर परियोजनाओं के मैनुअल परीक्षण के मुद्दे को संबोधित करने का प्रस्ताव करता हूं ।

परीक्षण प्रक्रियाओं के स्वचालन के स्तर के बावजूद, परीक्षक और भविष्य के रिलीज के बीच लगभग हमेशा "लाइव संचार" होता है। स्वाभाविक रूप से, यह आरामदायक और प्रभावी होना चाहिए।

हमारे VueJS परियोजनाओं में, हमने सरल लेकिन प्रभावी समाधानों को लागू किया जिसने हमारे परीक्षकों के जीवन को सरल बनाया। मैं उन्हें आपके साथ साझा करना चाहता हूं।

VueJS में एक अद्भुत वास्तुशिल्प विशेषता है - घटक। एक घटक एक स्व-निहित कार्यात्मक मॉड्यूल है, जो VueJS पर परियोजनाओं में एक्सटेंशन .vue के साथ एक अलग फ़ाइल में तैयार किया गया है। VueJS एप्लिकेशन स्वयं ऐसे मॉड्यूल का एक संग्रह है।

वास्तव में, हम यह कह सकते हैं कि किसी एकल घटक को बदलने से एकल फ़ाइल बदल जाती है। प्रस्तावित समाधान का आधार क्या है।

विचार

यह विचार बहुत सरल है - परीक्षक को उन घटकों के साथ कल्पना करने के लिए जिनमें पिछले रिलीज / देव या मूल ब्रंच से बदलाव आए हैं (यह माना जाता है कि परियोजना का भंडार है)। यह परीक्षक को उन घटकों पर ध्यान केंद्रित करते हुए और अधिक कुशलतापूर्वक और कुशलतापूर्वक परीक्षण करने की अनुमति देगा, जो परिवर्तन से गुजर चुके हैं और पूर्ण प्रतिगमन पर समय बर्बाद नहीं करते हैं।

कार्यान्वयन

क्योंकि चूंकि घटक एक अलग फ़ाइल है, यह वर्तमान प्रतिबद्ध और लक्ष्य के अंतर को प्राप्त करने के लिए पर्याप्त है, अर्थात। वह जिसके साथ हम सभी संशोधित घटकों की पहचान करने की तुलना कर रहे हैं। ऐसा करना सरल है, इस तरह:

git diff --no-commit-id --name-only -r 'origin/dev' 

यहां हमें संशोधित फ़ाइलों की सूची के रूप में वर्तमान प्रतिबद्ध और 'मूल / देव' शाखा के बीच अंतर मिलता है।

परीक्षण के लिए परियोजना में इन परिवर्तनों की कल्पना करने के लिए केवल एक चीज बची है।

जादू

इस मामले में, वेबपैक बचाव में आता है, जो विभिन्न मोड में परियोजना को इकट्ठा करना संभव बनाता है। हमने खुद के लिए "परीक्षण" मोड बनाया, जो आवश्यक सुधार के साथ मानक "देव" मोड (व्यू-क्ली एप्लिकेशन टेम्पलेट) का एक कांटा बन गया। विशेष रूप से, हमने संशोधित फ़ाइलों की सूची प्राप्त की है:

git.diffs.js

 const exec = require('child_process').exec; var changedComponents = []; //    exec("git fetch", function(error, stdout, stderr) { if (error) { throw error; } //  fetch console.log("\ngit fetch\n"); console.log(stdout); //   dev  exec("git diff --no-commit-id --name-only -r 'origin/dev'", function (error, stdout, stderr) { if (error) { throw error; } //  diff console.log("\ngit diff --no-commit-id --name-only -r 'origin/dev'\n"); console.log(stdout); stdout.split("\n").map(function (file) { if (file.slice(-4) == '.vue' && (file.substring(0, 15) == 'src/components/' || file.substring(0, 11) == 'src/kernel/' )) { changedComponents.push('"' + file + '"'); } }); }); }); module.exports = changedComponents; 

और इस सूची के साथ विस्तार किया:

 env.CHANGED_COMPONENTS = require('./git.diffs') 

इस प्रकार, हमने परियोजना में परिवर्तन की पूरी सूची को "छोड़ दिया" और अब इसे अपने विवेक पर रनटाइम में उपयोग करने में सक्षम थे। विशेष रूप से, उन्होंने एक वैश्विक अशुद्धता पेश की, जो यह जांचती है कि घटक परिवर्तनों की सूची में शामिल है या नहीं, और यदि है, तो उसे लाल फ्रेम के साथ घेर लें।

 export default { install (Vue, options) { let oldStyle = null; Vue.mixin({ mounted () { if (this.isCodeChanged) { setInterval(() => { if (this.$el) { if (store.state.system.isTesting()) { if (!oldStyle) { oldStyle = this.$el.style.border ? this.$el.style.border : 'empty'; } this.$el.style.border = 'solid 3px #f00'; } else { if ((!oldStyle || !oldStyle.length || oldStyle === 'empty') && this.$el.style) { this.$el.style.removeProperty('border'); } else { this.$el.style.border = oldStyle; } } } }, 300); } }, computed: { vueComponentName () { return this.$options.__file; }, isCodeChanged () { return window.$testing.CHANGED_COMPONENTS.indexOf(this.$options.__file) >= 0; } } }); } }; 

ध्यान दें कि कोड में एक संकेत store.state.system.isTesting () कोड है जो बदले हुए घटक के दृश्य प्रदर्शन मोड को चालू या बंद करता है। यह परीक्षक को लेआउट की जांच करने के लिए घटक चयन के प्रदर्शन को मनमाने ढंग से अक्षम करने की अनुमति देता है।

वास्तव में, हमारे पास कई समान विशेषताएं हैं। उन्हें प्रबंधित करने के लिए, हमने एक विशेष पृष्ठ बनाया जहां परीक्षक परीक्षण वातावरण को ऑनलाइन कॉन्फ़िगर कर सकता है। यह / परीक्षण प्रत्यक्ष मार्ग पर "परीक्षण" बिल्ड मोड में भी उपलब्ध है।

परिणामस्वरूप, आलेख की शुरुआत में चित्र में परिवर्तित घटक दिखता है।

ऑफ स्क्रीन

बेशक, प्रदान किए गए घटकों के अलावा, सेवा घटकों में परिवर्तन हो सकते हैं। यह सुनिश्चित करने के लिए कि परीक्षक की आँखों से कुछ भी नहीं निकलता है, हम स्टार्टअप में ब्राउज़र कंसोल में संशोधित फ़ाइलों की पूरी सूची प्रदर्शित करते हैं। यह बिल्ड टाइम, बिल्ड मोड, करंट रिलीज़ आदि की जानकारी भी प्रदर्शित करता है।