आवेदन में redux चयनकर्ताओं का स्वचालित परीक्षण

इस लेख में, मैं अपने विचारों को साझा करना चाहूंगा कि कैसे प्रतिक्रिया / रिड्यूक्स अनुप्रयोगों में इकाई परीक्षणों के लेखन को स्वचालित किया जाए। इन विचारों को सहकर्मियों के साथ चर्चा में पैदा हुए थे, परीक्षण लिखने की प्रक्रिया में, और, यह मुझे लगता है, प्रस्तावित समाधान में जीवन का अधिकार है।

समस्या के बारे में

मैं इकाई परीक्षणों की आवश्यकता के बारे में सोचना छोड़ना चाहता हूं और बिंदु पर अधिकार प्राप्त करना चाहता हूं। अब हम चयनकर्ताओं का परीक्षण कैसे करेंगे?

Redux चयनकर्ता एक फ़ंक्शन है जो एप्लिकेशन (स्टोर) की स्थिति लेता है और परिणाम देता है। यहां तक ​​कि अगर चयनकर्ता reselect createSelector () का उपयोग करके बनाया गया है और कई चयनकर्ताओं को जोड़ती है, तो यह स्टोर को इनपुट के रूप में भी स्वीकार करता है।

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

यहाँ आप कई तरीकों से जा सकते हैं:

• एक परीक्षण वातावरण में आवेदन की स्थिति को फिर से बनाना और राज्य को उतारना, उदाहरण के लिए, Redux devtools एक्सटेंशन का उपयोग करना;
• बस एक वस्तु बनाएं, जैसा कि वे कहते हैं, कलम के साथ। यदि अनुप्रयोग बड़ा है और उसके राज्य में कई "शाखाएँ" हैं, तो यह एक जटिल और श्रमसाध्य प्रक्रिया हो सकती है।

प्रक्रिया स्वचालन विचार

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

• घटना (कार्रवाई);
• आवेदन राज्य (स्टोर);
• इस राज्य के साथ सभी चयनकर्ताओं को निष्पादित करने का परिणाम;

इस प्रकार, प्रत्येक कार्रवाई के लिए, हमारे पास एक डेटा सेट होगा: चयनकर्ताओं को ट्रांसमिशन के लिए आवेदन की स्थिति और अपेक्षित परिणाम - वास्तव में, तुलना करने के लिए।

यानी हमारे पास वास्तविक एप्लिकेशन से डेटा सेट है, जिसकी तैयारी में कम से कम समय लगता है।

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

यह कैसे काम करता है?

यदि सामान्य रूप से विचार स्पष्ट है (और यह आपको पर्याप्त लगता है :)), मैं कार्यान्वयन के साथ आगे बढ़ने का प्रस्ताव करता हूं। सबसे पहले, हमें ब्राउज़र एक्सटेंशन Redux CheckState की आवश्यकता है ।
यह एक्सटेंशन आपके एप्लिकेशन की सभी क्रियाओं को प्राप्त करता है, चयनकर्ताओं को निष्पादित करता है, और परीक्षण मामलों को बचाता है। अंत में, आप बटन पर क्लिक करते हैं और परिणामी परीक्षण मामलों के साथ फ़ाइल डाउनलोड करते हैं।

यह कुछ इस तरह दिखता है:



चल रहे कार्यों पर डेटा प्राप्त करने के लिए एक्सटेंशन के लिए और सिल्कर प्रदर्शन कर सकता है, आपको प्रोजेक्ट के साथ छोटे हेरफेर करने की आवश्यकता है।

चरण 1. निर्यात चयनकर्ताओं

परियोजना की जड़ में, आपको checkState.config.js फ़ाइल बनाने और उन सभी चयनकर्ताओं को निर्यात करने की आवश्यकता होती है, जिनसे आप इसका परीक्षण करना चाहते हैं। मेरी परीक्षण परियोजना में, यह इस तरह दिखता है:

export { selectCategories, selectActiveCategory, selectIsCategoryActive, selectActiveCategoryId, } from "./state/category"; export { selectPopup, selectPopupType, selectIsPopupOpen, } from "./state/popup"; export { selectTasks, selectActiveTasks, selectActiveDoneTasks, selectActiveInProgressTasks, } from "./state/task"; 

गितुब पर एक उदाहरण देखें।

चरण 2. मिडिलवेयर कार्यान्वयन

अब आपको मिडिलवेयर जोड़ने की जरूरत है, जो सभी कार्रवाई और अन्य डेटा को एक्सटेंशन में स्थानांतरित कर देगा।

कोड बेहद सरल है:

 import * as selectors from "./checkState.config"; const checkStateMiddleware = (options = {}) => { return window && window["__checkStoreExtension__"] ? window["__checkStoreExtension__"](options) : store => next => action => next(action); }; 

मेरे परीक्षण आवेदन में, आप टाइपस्क्रिप्ट कार्यान्वयन विकल्प भी देख सकते हैं।

यही है, इस पर कोडिंग पूरी हो गई है। अब हम एप्लिकेशन लॉन्च करते हैं, एक्सटेंशन खोलते हैं और उपयोगकर्ता के रूप में एप्लिकेशन का उपयोग करना शुरू करते हैं। आपको यथासंभव अधिक एक्शन गेम्स को पूरा करने की आवश्यकता है। प्रत्येक सही कार्रवाई आपको एक्सटेंशन में दिखाई देगी। आप किसी भी कार्रवाई पर क्लिक कर सकते हैं और चयनकर्ताओं के परिणाम देख सकते हैं।

जब सभी कार्रवाई सही है - बस फ़ाइल डाउनलोड करें और इसे परियोजना में डालें। अब यह केवल परीक्षण चलाने के लिए बनी हुई है। यह अभी भी आसान है।

परीक्षण चल रहा है

परीक्षणों को चलाने के लिए, मैंने सीएलआई उपकरण तैयार किया। पैकेज स्थापित करें:

npm i चेक-राज्य-जी

उसके बाद, प्रोजेक्ट फ़ोल्डर में, कमांड निष्पादित करें:

चेक-स्टेट प्रारंभ

चेक स्टेट सीएलआई फ़ाइल को ब्राउज़र एक्सटेंशन द्वारा तैयार किए गए परीक्षण मामलों के साथ मिल जाएगा, यह निर्यात किए गए चयनकर्ताओं को ढूंढेगा और संकलित करेगा (जबकि जावास्क्रिप्ट और टाइपस्क्रिप्ट समर्थित हैं)।
उसके बाद, सभी परीक्षण मामलों को क्रमिक रूप से पारित कर दिया जाएगा, प्रत्येक चयनकर्ता को परीक्षण मामले से आवेदन की स्थिति के साथ निष्पादित किया जाएगा और गणना मूल्य की तुलना उम्मीद के साथ की जाएगी (परीक्षण मामले से भी)। यदि कोई अंतर नहीं है, तो हम एक हरे रंग की रेखा देखेंगे, अगर एक लाल रेखा है, तो जानकारी के साथ समस्या का निदान करने में मदद मिलेगी:

• गलत परिणाम लौटाने वाले चयनकर्ता का नाम;
• अपेक्षित परिणाम
• वर्तमान परिणाम;
• परीक्षण मामले से आवेदन की स्थिति का एक स्नैपशॉट।

एक "गिर" परीक्षण का एक उदाहरण है।

उपकरण के साथ प्रयोग करने में सक्षम होने के लिए, मैंने एक परीक्षण एप्लिकेशन तैयार किया जिसमें कई चयनकर्ता हैं और पहले से ही लागू स्थिति की जाँच करें: उदाहरण अनुप्रयोग

निष्कर्ष

मुझे आशा है कि आपको ऑटोटेस्ट के लेखन को स्वचालित करने का विचार पसंद आया होगा, और शायद आप इस दृष्टिकोण को अपनी परियोजना में लागू करेंगे :)

यदि आप उपकरण के तकनीकी कार्यान्वयन में रुचि रखते हैं:

• गिटक्स पर Redux CheckState ब्राउज़र एक्सटेंशन;
• गितुब पर सीएलआई टूल चेक स्टेट ।

मुझे विचारों और टिप्पणियों पर खुशी होगी :)