क्रोम एक्सटेंशन का परीक्षण कैसे करें?

Question

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

Answer 1

हाँ, मौजूदा व्यवस्थाएं बहुत उपयोगी होते हैं ..

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

उदाहरण के लिए, मैं chrome-extension://asdasdasdasdad/unittests.html

के तहत एक पेज सुलभ में सभी परीक्षणों है, परीक्षण सामग्री स्क्रिप्ट तक पहुँचने के लिए localStorage आदि के लिए उपयोग किया जाएगा सिद्धांत रूप में आप अपने परीक्षण पृष्ठ में एम्बेडेड iframes के माध्यम से है कि परीक्षण कर सकते हैं हालांकि, ये अधिक एकीकरण स्तर परीक्षण हैं, यूनिट परीक्षणों के लिए आपको वास्तविक पृष्ठों से दूर अमूर्त करने की आवश्यकता होगी ताकि आप उन पर निर्भर न हों, इसी तरह स्थानीय स्टोरेज तक पहुंच के साथ।

यदि आप सीधे पृष्ठों का परीक्षण करना चाहते हैं, तो आप अपने टैब को नए टैब खोलने के लिए ऑर्केस्ट्रेट कर सकते हैं (chrome.tab.create ({"url": "someurl"})। प्रत्येक नए टैब के लिए आपकी सामग्री स्क्रिप्ट चलनी चाहिए और आप पहले से ही क्रोम में उपकरण मौजूदा बारे में जाँच करने के लिए अपने कोड किया है कि यह क्या करना चाहिए अपने परीक्षण ढांचे का उपयोग कर सकते

चौखटे का सवाल है, JsUnit या अधिक हाल ही में Jasmine ठीक काम करना चाहिए

Answer 2

:।।

1. सी में हार्म डेवलपर टूल, संसाधनों के लिए स्थानीय भंडारण के लिए अनुभाग है।

   डेवलपर टूल> संसाधन> स्थानीय संग्रह

   वहाँ LocalStorage के परिवर्तन देखें।

2. आप प्रदर्शन का परीक्षण करने और रन टाइम कॉल स्टैक देखने के लिए console.profile का उपयोग कर सकते हैं। फाइल सिस्टम: क्रोम एक्सटेंशन: अस्थायी ////

आप उपयोग कर रहे हैं सामग्री स्क्रिप्ट और स्थानीय भंडारण

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

Answer 3

कई क्रोम एक्सटेंशन पर कार्य करना मैं sinon-chrome परियोजना है कि mocha, nodejs और phantomjs का उपयोग कर इकाई परीक्षण चलाने के लिए अनुमति देता है के साथ आया था।

मूलभूत, यह सभी chrome.* api के साइनऑन मैक्स बनाता है जहां आप किसी भी पूर्वनिर्धारित जेसन प्रतिक्रिया डाल सकते हैं।

अगला, आप पॉपअप/विकल्प पृष्ठ प्रस्तुत करने के लिए पृष्ठभूमि पृष्ठ के लिए नोड के vm.runInNewContext और phantomjs का उपयोग करके अपनी स्क्रिप्ट लोड करते हैं।

और अंत में, आप जोर देते हैं कि क्रोम एपी को आवश्यक तर्कों के साथ बुलाया गया था।

के एक उदाहरण लेते हैं:
मान लें हम सरल क्रोम एक्सटेंशन है, जो बटन बिल्ला में खोले गए टैब की संख्या प्रदर्शित करता है।

पृष्ठभूमि पृष्ठ:

chrome.tabs.query({}, function(tabs) { 
    chrome.browserAction.setBadgeText({text: String(tabs.length)}); 
}); 

यह परीक्षण करने के लिए हम की जरूरत है:

1. नकली chrome.tabs.query पूर्वनिर्धारित प्रतिक्रिया वापस जाने के लिए, उदाहरण के लिए दो टैब ।
2. हमारे मज़ाक उड़ाया क्रोम * ज़ोर उस बटन बिल्ला '2'

कोड स्निपेट के बराबर

इस माहौल

में हमारे विस्तार कोड चलाने कुछ वातावरण में एपीआई इंजेक्षन पीछा कर रहा है:

var vm = require('vm'); 
var fs = require('fs'); 
var chrome = require('sinon-chrome'); 

// 1. mock `chrome.tabs.query` to return predefined response 
chrome.tabs.query.yields([ 
    {id: 1, title: 'Tab 1'}, 
    {id: 2, title: 'Tab 2'} 
]); 

// 2. inject our mocked chrome.* api into some environment 
var context = { 
    chrome: chrome; 
}; 

// 3. run our extension code in this environment 
var code = fs.readFileSync('src/background.js'); 
vm.runInNewContext(code, context); 

// 4. assert that button badge equals to '2' 
sinon.assert.calledOnce(chrome.browserAction.setBadgeText); 
sinon.assert.calledWithMatch(chrome.browserAction.setBadgeText, { 
    text: "2" 
}); 

अब हम यह मोचा के describe..it कार्यों में लपेट और टर्मिनल से चला सकते हैं

$ mocha 

background page 
    ✓ should display opened tabs count in button badge 

1 passing (98ms) 

आप पूर्ण उदाहरण here पा सकते हैं।

इसके अतिरिक्त, साइनऑन-क्रोम किसी भी क्रोम ईवेंट को पूर्वनिर्धारित प्रतिक्रिया के साथ ट्रिगर करने की अनुमति देता है, उदा।

chrome.tab.onCreated.trigger({url: 'http://google.com'}); 

Answer 4

sinon.js महान काम करने के लिए लगता है, आप भी सिर्फ सादा जैस्मीन का उपयोग करें और क्रोम कॉलबैक आप की जरूरत नकली कर सकते हैं। उदाहरण:

Mock

chrome = { 
    runtime: { 
    onMessage : { 
     addListener : function() {} 
    } 
    } 
} 

Test

describe("JSGuardian", function() { 

    describe("BlockCache", function() { 

    beforeEach(function() { 
     this.blockCache = new BlockCache(); 
    }); 

    it("should recognize added urls", function() { 
     this.blockCache.add("http://some.url"); 
     expect(this.blockCache.allow("http://some.url")).toBe(false); 
    }); 
} // ... etc 

बस डिफ़ॉल्ट SpecRunner.html अपने कोड को चलाने के लिए संशोधित।