🚣🏻 🙅🏿 😴 एक्स्टस / सेन्चा घटकों और एप्लिकेशन का परीक्षण करना 👩🏼‍🤝‍👨🏿 🤓 👨🏿‍🏫

PhantomJS एक ग्राफिकल इंटरफ़ेस के बिना WebKit इंजन का एक निर्माण है जो आपको कंसोल मोड में एक वेब पेज लोड करने, जावास्क्रिप्ट निष्पादित करने और डोम, कैनवस और एसवीजी के साथ पूरी तरह से काम करने की अनुमति देता है। PhantomJS के मुख्य दावा किए गए अनुप्रयोगों में से एक स्वचालित उपयोगकर्ता इंटरफ़ेस कार्यात्मक परीक्षण है। PhantomJS का जावास्क्रिप्ट और वेब पृष्ठों के परीक्षण के लिए विभिन्न रूपरेखाओं के साथ एकीकरण है। आइए देखें कि एक अलग घटक और ExtJS / Sencha में लिखे गए एक संपूर्ण अनुप्रयोग का परीक्षण करने के लिए मानक PhantomJS कार्यक्षमता के आधार पर क्या किया जा सकता है। इस लेख में, मैं एक तृतीय-पक्ष जावास्क्रिप्ट पुस्तकालय के आधार पर परीक्षण कोड के दृष्टिकोण को दर्शाने वाले परीक्षण ढांचे के लिए कुछ सरल तैयारी प्रदान करूंगा। लेख में प्रस्तुत सभी कोड GitHub पर उपलब्ध है ।

घटक परीक्षण

मानक Ext.form.ComboBox ड्रॉप-डाउन सूची का विस्तार करने वाले एक साधारण घटक पर विचार करें। इसमें महीनों की एक सूची होनी चाहिए, कॉन्फ़िगरेशन पैरामीटर महीनों का उपयोग करके अनुकूलन - एक सरणी जिसमें प्रदर्शित महीनों की संख्या शून्य से शुरू होती है। उदाहरण के लिए, यदि सरणी में संख्या 1, 3 और 5 शामिल हैं, तो ड्रॉप-डाउन सूची को फरवरी, अप्रैल और जून के महीनों को प्रदर्शित करना चाहिए।

Ext.define('MonthComboBox', { extend : 'Ext.form.ComboBox', alias : 'widget.monthcombo', store : Ext.create('Ext.data.Store', { fields : [ 'num', 'name' ] }), queryMode : 'local', displayField: 'name', valueField : 'num', allMonths : ['', '', '', '', '', '', '', '', '', '', '', '' ], months: [], initComponent: function() { /** *     ,      {@link MonthComboBox#months} */ for (var i = 0; i < this.months.length; i++) { this.store.add({ num : this.months[i], name: this.allMonths[this.months[i]] }); } this.callParent(arguments); } });

HTML पेज ExtjsTesterPage.html बनाएं, जिसके भीतर घटक का परीक्षण किया जाएगा। किसी पृष्ठ में एक्सटीजेएस शैलियों और लिपियों को शामिल करने के लिए कम से कम ext-all.css और ext-all.js फ़ाइलों को आयात करें। इस उद्देश्य के लिए, हम एक्सटीजेएस 4.0.2 ए के संस्करण का उपयोग करेंगे, जिसे कैशेफली पर होस्ट किया गया है।

 <!DOCTYPE html> <html> <head> <title>ExtJS Test Page</title> <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"> <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script> </head> <body></body> </html>

परीक्षण के लिए एक छोटा सा नमूना ढांचा तैयार करें। यह फ़ाइल ExtjsTester.js है, जिसे PhantomJS को पास किया जाएगा और एक तर्क के रूप में परीक्षण के साथ स्क्रिप्ट का नाम लिया जाएगा। शुरुआत में हमने एक कमांड लाइन तर्क की उपस्थिति के लिए एक चेक लगाया:

 if (phantom.args.length == 0) { console.log('      '); phantom.exit(1); }

एक उदाहरण के रूप में इस कोड स्निपेट का उपयोग करते हुए, फैंटमजस एपीआई के दो महत्वपूर्ण तत्वों को चित्रित किया जा सकता है। सबसे पहले, एक स्क्रिप्ट के लिए पासिंग पैरामीटर: phantom.args कमांड लाइन आर्ग्युमेंट्स की एक सरणी है। दूसरा API तत्व phantom.exit () विधि के लिए एक कॉल है, जो PhantomJS को निर्दिष्ट त्रुटि कोड को समाप्त करने और वापस करने का कारण बनता है।

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

 var fs = require('fs');

सादगी के लिए, मैंने जावास्क्रिप्ट के कार्यात्मक परीक्षण के लिए किसी भी मौजूदा पुस्तकालयों को नहीं जोड़ा है, हालांकि उनके साथ फैंटमजेएस का एकीकरण है। अपवादों के एक मानक वर्ग की घोषणा करें:

 function AssertionError(message) { this.message = message; } AssertionError.prototype.toString = function() { return 'AssertionError: ' + this.message; };

अब परीक्षण के उद्देश्यों के लिए, हम मानक PhantomJS वर्ग - वेबपेज पर एक आवरण बनाएंगे।

 function TestPage(scriptUnderTest, testFun) { //      if (!fs.exists(scriptUnderTest)) { console.log("File " + scriptUnderTest + " not found"); phantom.exit(1); } var me = this; //   this.page = require('webpage').create(); //           this.page.onConsoleMessage = function (msg) { console.log(msg); }; //    this.page.open("ExtjsTesterPage.html", function() { //    me.page.injectJs(scriptUnderTest); //   ExtJS     me.waitForExtReady(function() { me.doTest(testFun); }); }); }

कंस्ट्रक्टर पैरामीटर scriptUnderTest उस फ़ाइल का नाम है जिसका परीक्षण स्क्रिप्ट के साथ किया जाना चाहिए, उदाहरण के लिए, ExtJS घटक के कोड के साथ। पहले से आयातित fs निर्भरता का उपयोग करते हुए, हम इस फ़ाइल के अस्तित्व को सत्यापित करते हैं, और WebPage # इंजेक्ट फ़ंक्शन का उपयोग करते हुए, हम इसे अपने परीक्षण पृष्ठ में इंजेक्ट करते हैं, जिसे हमने पहले बनाई गई ExtjsTesterPage.html फ़ाइल से डाउनलोड किया है।

यह WebPage # onConsoleMessage पद्धति पर ध्यान देने योग्य है। यदि आप इसे निर्दिष्ट नहीं करते हैं, तो पृष्ठ पर होने वाले सभी कंसोल आउटपुट खो जाएंगे, क्योंकि पृष्ठ सैंडबॉक्स में निष्पादित होता है।

TestFun पैरामीटर हमारे भविष्य का परीक्षण कार्य है। एक्सटीजेएस घटक के सही परीक्षण को सुनिश्चित करने के लिए, आपको यह सुनिश्चित करने की आवश्यकता है कि एक्सटीजेएस रूपरेखा पूरी तरह से भरी हुई है और प्रारंभिक है। Ext.onReady () विधि इसके लिए अभिप्रेत है, लेकिन हमारे मामले में इसका उपयोग इस तथ्य से बाधित है कि पृष्ठ को सैंडबॉक्स में निष्पादित किया गया है, और पृष्ठ के अंदर किसी भी कोड का हस्तांतरण केवल वेबपेज के मूल्यांकन पद्धति का उपयोग करके संभव है। इसलिए, हम TestPage वर्ग को एक विधि प्रदान करेंगे जो एक्सटजेएस को लोड करने की उम्मीद करता है:

 TestPage.prototype.waitForExtReady = function(fun) { var me = this; console.log(' ExtJS...'); var readyChecker = window.setInterval(function() { var isReady = me.page.evaluate(function() { return Ext.isReady; }); if (isReady) { console.log('ExtJS .'); window.clearInterval(readyChecker); fun.call(me); } }, 100); };

जब ExtJS पूरी तरह से लोड हो जाता है, तो doTest विधि निम्नानुसार निष्पादित करेगी:

 TestPage.prototype.doTest = function(testFun) { try { //    testFun.call(this); phantom.exit(0); } catch (e) { console.log(e); phantom.exit(1); } };

यह परीक्षण फ़ंक्शन के कॉल और परीक्षण फ़ंक्शन के परिणामों के अनुरूप रिटर्न कोड के साथ PhantomJS के पूरा होने को लागू करता है।

अंत में, पृष्ठ के संदर्भ में कोड डालने और निष्पादित करने के लिए टेस्टपेज क्लास में कई सम्मेलनों को जोड़ें:

 TestPage.prototype.evaluate = function(fun) { return this.page.evaluate(fun); }; TestPage.prototype.assert = function assert(test, message) { if (!test) { throw new AssertionError(message); } }; TestPage.prototype.evaluateAndAssertEquals = function(expectedValue, actualFun, message) { this.assert(expectedValue === this.evaluate(actualFun), message); };

मूल्यांकन विधि लिपटे WebPage ऑब्जेक्ट के लिए पारित समारोह के निष्पादन को दर्शाता है। यदि यह विफल हो जाता है, तो Assert विधि एक सामान्य निदान कथन को निष्पादित करती है। मूल्यांकनएंडएसेर्सएक्वाल्स विधि पृष्ठ के संदर्भ में फ़ंक्शन निष्पादन के परिणाम की अपेक्षा मूल्य के साथ तुलना करती है।

ExtjsTester फ़ाइल की अंतिम पंक्ति परीक्षण स्क्रिप्ट को लोड कर रही होगी, जिसे हम कमांड लाइन पैरामीटर से गुजरेंगे। हम इसके लिए फ़ाइल सिस्टम के साथ काम करने के लिए मॉड्यूल का उपयोग करेंगे - स्क्रिप्ट को एक स्ट्रिंग के रूप में लोड करें और इसे eval के माध्यम से निष्पादित करें:

 eval(fs.read(phantom.args[0]));

और यहाँ परीक्षण स्क्रिप्ट ही है - MonthComboBoxTest.js फ़ाइल:

 new TestPage("MonthComboBox.js", function() { //   MonthComboBox      this.evaluate(function() { Ext.widget('monthcombo', { months : [1, 2, 5], renderTo: Ext.getBody() }); }); // ,        this.evaluateAndAssertEquals(3, function() { return Ext.ComponentQuery.query('monthcombo')[0].store.getCount(); }, "Wrong element count"); });

यहां हम अपना टेस्टपेज रैपर ऑब्जेक्ट बनाते हैं, इसे परीक्षण के तहत घटक की स्क्रिप्ट और परीक्षण के लिए एक फ़ंक्शन पास करते हैं। इसमें, हम पहले ऐसे कॉन्फ़िगरेशन वाले पृष्ठ पर एक घटक बनाते हैं जिसमें केवल तीन महीने होते हैं, और फिर जांचें कि हमारी योजना सही है, घटक वास्तव में पृष्ठ पर मौजूद है, और इसके भंडारण में ठीक तीन तत्व शामिल हैं।

परीक्षण चलाने के लिए, कमांड का उपयोग करें:

phantomjs ExtjsTester.js MonthComboBoxTest.js

आवेदन परीक्षण

सबसे पहले, आवेदन का परीक्षण करने के लिए, हमें अपने ढांचे को थोड़ा परिष्कृत करने की आवश्यकता है। एप्लिकेशन लॉन्च के पूरा होने पर परीक्षण फ़ंक्शन किया जाना चाहिए। इसे निर्धारित करने का एक तरीका पृष्ठ पर व्यूपोर्ट घटक की उपस्थिति की जांच करना है। TestPage वर्ग में निम्न विधि जोड़ें, आम तौर पर TestPage # WaitForExtReady विधि के समान:

 TestPage.prototype.waitForViewport = function(fun) { var me = this; console.log('  Viewport...'); var launchedChecker = window.setInterval(function() { var isLaunched = me.page.evaluate(function() { return typeof Ext.ComponentQuery.query('viewport')[0] !== 'undefined'; }); if (isLaunched) { console.log('Viewport .'); window.clearInterval(launchedChecker); fun.call(me); } }, 100); };

हम TestPage ऑब्जेक्ट के कंस्ट्रक्टर के लिए waForViewport पैरामीटर भी जोड़ते हैं, जिसके मान का मतलब यह होगा कि परीक्षण फ़ंक्शन निष्पादित होने से पहले, व्यूपोर्ट दिखाई देने तक प्रतीक्षा करना आवश्यक है। हम उस टुकड़े को थोड़ा संशोधित करते हैं जिसमें परीक्षण फ़ंक्शन कहा जाता है:

 me.waitForExtReady(function() { if (waitForViewport) { me.waitForViewport(function() { me.doTest(testFun); }) } else { me.doTest(testFun); } });

संक्षिप्तता के लिए, मैं परीक्षण के तहत आवेदन के सभी कोड यहां नहीं दूंगा - आप इसे GitHub पर देख सकते हैं। मैं केवल यह समझाऊंगा कि एप्लिकेशन में एक बटन और एक विंडो के साथ एक मुख्य रूप होता है जो इस बटन पर क्लिक करने पर दिखाई देता है। मुख्य रूप और खिड़की को विभिन्न नियंत्रकों द्वारा परोसा जाता है, जिसके बीच संचार अनुप्रयोग-स्तरीय संदेशों (Ext.app.Application # fireEvent) के माध्यम से आयोजित किया जाता है। यह सत्यापित करने के लिए एक परीक्षण कोड है कि जब एक बटन पर क्लिक किया जाता है, तो पॉपअप विंडो दिखाई देती है:

 new TestPage("app.js", function() { //     this.evaluate(function() { Ext.ComponentQuery.query('mainform > button[action=popup]')[0].btnEl.dom.click(); }); // ,      this.evaluateAndAssertTrue(function() { return typeof Ext.ComponentQuery.query('popupwindow')[0] !== 'undefined'; }, "Popup window not opened"); }, true);

घटक अनुरोध 'मेनफॉर्म> बटन [एक्शन = पॉपअप]' एप्लीकेशन के मुख्य रूप के बटन से मेल खाता है। क्वेरी 'पॉपअपविंडो' एक पॉपअप से मेल खाती है। टेस्टपेज कंस्ट्रक्टर (ट्रू) के तीसरे पैरामीटर का मतलब है कि आपको टेस्ट फ़ंक्शन को निष्पादित करने से पहले व्यूपोर्ट का इंतजार करना होगा। परीक्षण समारोह उसी तरह से शुरू होता है:

phantomjs ExtjsTester.js AppTest.js

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

परीक्षण घटक और आवेदन का कोड, साथ ही लेख में प्रस्तुत परीक्षण रूपरेखा, GitHub पर उपलब्ध है ।

एक्स्टस / सेन्चा घटकों और एप्लिकेशन का परीक्षण करना

घटक परीक्षण

आवेदन परीक्षण

More articles: