एक नोड और ब्राउज़र में ES6 के साथ कठपुतली, या क्यों Zora इसके आला में सबसे अच्छा परीक्षण ढांचा है

सब कुछ ठीक है जब तक कि आपको बंडल बनाने के लिए डमी के माध्यम से जेएस स्रोतों को चलाने की आवश्यकता है, लेकिन नरक तब शुरू होता है जब आप अपनी साइट या लाइब्रेरी के लिए परीक्षण लिखना चाहते हैं। समस्या यह है कि सभी परीक्षण चौखटे एक नोड से विशिष्ट कार्यों का उपयोग करते हैं और / या ES5 में लिखे गए हैं। इस प्रकार, E2E परीक्षण लॉन्च करना अब कोई तुच्छ कार्य नहीं है और कोड को कवर करने के लिए ट्रांसपिलिकेशन और सोर्समैप्स के टैम्बोरिन के साथ नृत्य प्रस्तुत करता है। आप गलत स्थान की ओर इंगित करने वाली त्रुटियां नहीं चाहते हैं?

इस लेख में, मैं एक छोटे से काम के लिए कठपुतली का उपयोग करके अपने अनुभव का वर्णन करूंगा,
और कैसे मैंने नोड और ब्राउज़र में ईएस 6 मॉड्यूल लॉन्च किए, जिसमें कलेक्टरों के बिना परीक्षण के केवल एक स्रोत रहा।

क्यों कठपुतली, आप पूछते हैं, क्यों नहीं WebDriver? मैंने अभी देखा कि लोकप्रिय ओपन सोर्स WebGL लाइब्रेरी के रचनाकारों को किस तरह से तड़पाया जाता है, उदाहरण के लिए, उनके पास उदाहरणों के साथ 300 पृष्ठ हैं, जिनमें से प्रत्येक किसी भी प्रतिबद्ध के साथ टूट सकता है। वे प्रत्येक परिवर्तन के बाद उनकी जांच करते हैं, और अगर वे कुछ खोलना भूल गए - क्षमा करें ¯\_(ツ)_/¯ it, तो यह टूट गया। यदि किसी ने अभी तक इस समस्या को हल नहीं किया है, तो मैंने अपने छोटे से परिवाद में इसे आजमाने का फैसला किया। पहले सोचा था कि हेडलेस-ग्ल को चलाना था, लेकिन यह अप्रचलित है। नोड-जीएलएस पहले से ही WebGL2 का समर्थन करता है, लेकिन मेरे द्वारा उपयोग किए जाने वाले दुर्लभ एक्सटेंशन का नहीं। WebDriver? मैंने भी इसकी कोशिश नहीं की। मुझे यकीन नहीं है कि यदि यह संभव है, तो मुझे अजगर / सी # / जावा की आवश्यकता नहीं है, लेकिन मुझे नवीनतम नोड और नवीनतम ब्राउज़र एपीआई के साथ जेएस / टीएस की आवश्यकता है, इसलिए उड़ान की विशेषताएं नवीनतम कल्पना से हो सकती हैं।

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

इसलिए, पर्याप्त परिचय, मैंने प्रोजेक्ट में puppeteer और puppeteer-to-istanbul को रखा और इस तरह के आवरण को लिखा।

 // puppeteer.js import puppeteer from 'puppeteer'; import pup2ist from 'puppeteer-to-istanbul'; (async () => { const browser = await puppeteer.launch({ headless: process.env.HEADLESS, // headless customization slowMo: 250 // good fature for new configs }); const page = (await browser.pages())[0]; // enable coverage await page.coverage.startJSCoverage(); await page.coverage.startCSSCoverage(); // some additional code with console events here... // navigate to unit test page await page.goto('http://127.0.0.1:1234/'); // disable coverage const jsCoverage = await page.coverage.stopJSCoverage(); const cssCoverage = await page.coverage.stopCSSCoverage(); pup2ist.write([...jsCoverage, ...cssCoverage]) await new Promise(resolve => setTimeout(resolve, 6000)); await browser.close(); })(); 

जिसे कमांड node --experimental-modules --no-warnings ./test/puppeteer.js साथ चलाया जा सकता है। 11+ नोड के साथ / node --experimental-modules --no-warnings ./test/puppeteer.js , या नोड 13.2+ पर झंडे के बिना भी। बेशक आप require , तो उपयोग कर सकते हैं ... लेकिन क्यों? यह आम तौर पर एक बैकएंड है, यहाँ ग्राहक सहायता की भी आवश्यकता नहीं है! package.json से निम्न कोड हमें कंसोल और सीआई क्लाउड में HEADLESS डाउनलोड को अनुकूलित करने की अनुमति देता है यदि उनके लिए अलग सेटिंग्स आवश्यक हैं। ट्रैव / सर्कल-सीआई में, संभवतः लिनक्स स्थापित किया जाएगा और आप इस प्रारूप में पर्यावरण चर सेट कर सकते हैं। concurrently एक कंसोल में दो प्रक्रियाओं को समानांतर में खोलता है।

 // package.json { //bla-bla... "type": "module", // this line indicates that we are using es6 modules "scripts": { "test": "node --experimental-modules --no-warnings ./test/puppeteer.js", "server": "http-server -c-1 -p 1234", "not-bad-cmd--dude": "concurrently -k -s first \"npm:test\" \"npm:server\"", "ci": "HEADLESS=true concurrently -k -s first \"npm:test\" \"npm:server\"", } } 

स्थानीय मशीन पर, npm run server कमांड दर्ज करने के बाद, http npm run server शुरू हो जाएगा, और npm run test पर एक अलग विंडो, क्रोम विंडो में npm run test कठपुतली npm run test । मूल रूप से आप सभी को कठपुतली के बारे में जानने की जरूरत है। स्क्रीनशॉट, डिवाइस एमुलेशन, एडमिन एरिया आदि पर आगे के उदाहरण यहां पर हैं । वैसे, puppeteer पैकेज के साथ, आपने node_modules में एक अलग क्रोम स्थापित किया है, अगर आपको इसकी आवश्यकता नहीं है, तो इसे node_modules puppeteer-core या puppeteer-firefox साथ बदलें। यह ध्यान दिया जाना चाहिए कि ऊपर दिए गए उदाहरण में, हमें नि: शुल्क जेएस / सीएसएस कोड कवरेज मिला है जो कि .nyc_output फ़ोल्डर में लिखा है, जब तक हम इस पर ध्यान केंद्रित नहीं करते हैं, इस स्तर पर हम इसे ठंडा नहीं करते हैं यह गर्म नहीं है, लेकिन अगर कुछ है, तो यह वहां है और आंकड़े हैं टेस्ट कवरेज देखने के लिए लगभग तैयार है।

अब हम स्वयं परीक्षणों पर चलते हैं, यह चुनने की कोशिश कर रहे हैं कि मैं अपने छोटे से परिवाद में ई 2 ई कहां चलाऊंगा, मैं निम्नलिखित ग्राफ में आया, जिसने परीक्षण के लिए रूपरेखा के प्रदर्शन की तुलना की। शायद, रनटाइम इतना महत्वपूर्ण नहीं है, लेकिन जब कुछ जेस्ट ने उन्हें 10 गुना धीमा शुरू किया, तो सवाल "क्या है और इसकी आवश्यकता क्यों है" उठता है। HTML चयन में मुख्य चयन मानदंड <script type="module" src="./test.js"></script> साथ es6 चल रहा था। चूंकि मेरे कोड लिखने के समय, नोड ने अभी तक ES6 का पूरी तरह से समर्थन नहीं किया था (कल इसे 12.3 जारी किया गया था जिसमें झंडे हटा दिए गए थे)। मैंने फैसला किया कि यदि आप टीएस या ईएस 6+ के स्रोतों के साथ रूपरेखा लेते हैं, तो यह निश्चित रूप से शुरू होना चाहिए। सामान्य तौर पर, आप शायद किसी प्रकार का मोचा ले सकते हैं, इसे पृष्ठ पर अधिक घोषित कर सकते हैं और घोषित वर्ग को संदर्भित कर सकते हैं, लेकिन यदि कोई त्रुटि होती है, तो क्या होता है? सामान्य तौर पर, आप अपने पसंदीदा धावक का नाम यहां दे सकते हैं। मैं सिर्फ इतना कहूंगा कि ज़ोरा TAP प्रारूप का समर्थन करती है, और इसका अर्थ है कि TAP खाने वालों का एक पूरा चिड़ियाघर इसके लिए उपयुक्त है। इसमें अधिकांश अभिकर्मक हैं, यह async का समर्थन करता है, यह सबसे तेज़ में से एक है, जो नोड पर निर्भरता के बिना शुद्ध ES6 में लिखा गया है। यह मुझे छोटी परियोजनाओं के लिए एक असली हीरा लग रहा था।

नतीजतन, मुझे कुछ परीक्षण मिले जो ब्राउज़र और नोड दोनों में काम करते हैं। ज़ोरा दस्तावेज़ीकरण में आदेशों के सिद्धांतों और समूहों पर व्यापक निर्देश हैं।

 // test.js import MyLibrary from '../dist/my-library.module.js'; import { test } from 'https://cdn.jsdelivr.net/npm/zora@3.0.3/dist/bundle/module.js'; test('CPU', async (t) => { // some stuff here t.ok(tfps != null, 'fps = ' + (tfps != null ? tfps.toFixed(1) : 'null')); t.ok(tcpu != null, 'cpu = ' + (tcpu != null ? tcpu.toFixed(1) : 'null')); }); test('Memory', async (t) => { // some stuff here t.ok(tmem != null, 'mem = ' + (tmem != null ? tmem.toFixed(1) : 'null')); }); // etc... 

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

 <!DOCTYPE html> <html lang="en"> <head> <!-- some declarations in head --> </head> <body> <!-- some declarations in body --> <script> const addSniffer = (spyTarget) => function() { spyTarget.apply(window.console, arguments); sniffer([...arguments]); } window.console.log = addSniffer(window.console.log); window.console.error = addSniffer(window.console.error); let screen = document.getElementById('screen'); function sniffer(string) { let screen = document.getElementById("screen"); string.forEach(line => { let div = document.createElement("div"); let text = document.createTextNode(line); div.appendChild(text) screen.appendChild(div); }); } </script> <script type="module" src="./test.js"></script> </body> </html> 

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

उदाहरण के लिए, नवीनीकरण से इस तरह के एक विन्यास रविवार को ऑटो कमिट करता है, और संस्करण को बढ़ाता है

 { "automerge": true, "automergeType": "branch", "bumpVersion": "patch", "schedule": ["on sunday"], "ignorePaths": [".circleci"] } 

और ट्रैविस, जब आपने खुद संस्करण या कुछ बॉट उठाया, स्वचालित रूप से पैकेज को एनपीएम पर अपलोड कर सकते हैं। ऐसा करने के लिए, travis-ci.org पर एक खाता travis-ci.org , इस लेख में बताए अनुसार f2a को सक्षम करें , दो गुप्त कुंजी $NPM_EMAIL और $NPM_TOKEN , और एक समान कॉन्फ़िगरेशन बनाएं।

 language: node_js node_js: '12' script: - npm run ci deploy: provider: npm edge: true email: $NPM_EMAIL api_key: $NPM_TOKEN on: branch: master 

कुल मिलाकर, यह किसी तरह संभव है, लेकिन गितुब से सूचनाओं से छुटकारा पाना मुश्किल है कि किसी तरह की निर्भरता में एक भेद्यता दिखाई दी: डी