2015-06-26 3 views
7

मैं एक वेबसाइट और एक जावास्क्रिप्ट समारोह जो FileReader उपयोग करता है और बेस 64 के लिए छवि धर्मान्तरित वास्तविक सर्वर पर अपलोड करने के बिना उपयोगकर्ता के लिए यह प्रदर्शित करने के लिए सरल छवि अपलोड करने वाले है।mocha के साथ जावास्क्रिप्ट परीक्षण html5 फ़ाइल api?

function generateThumb(file) { 
    var fileReader = new FileReader(); 
    fileReader.readAsDataURL(file); 
    fileReader.onload = function (e) { 
     // Converts the image to base64 
     file.dataUrl = e.target.result; 
    }; 
} 

अब मैं इस विधि Mocha और Chai प्रयोग करने के लिए परीक्षण लिखने की कोशिश कर रहा हूँ। मेरी सोच यह है कि मैं यह जांचना चाहता हूं कि file.dataUrl सफलतापूर्वक बनाया गया था और यह बेस 64 है। तो मैं किसी भी तरह स्थानीय फाइल को पर्यावरण के परीक्षण में नकल करना चाहता हूं (यह सुनिश्चित नहीं है कि यह कैसे करें)। या मुझे यह बिल्कुल परीक्षण नहीं करना चाहिए और मान लें कि यह काम कर रहा है?

+0

मैं एक ही बात सोच रहा हूँ के रूप में अच्छी तरह से। – frogbandit

उत्तर

3

जवाब यहाँ एक छोटे से निर्भर करता है। क्या आपके "जेनरेट थंबस" विधि में फाइल सामग्री लोड करने की तुलना में अन्य तर्क हैं और किसी ऑब्जेक्ट में पास की गई संपत्ति को असाइन करते हैं? या क्या इसमें अन्य तर्क हैं जैसे छवि डेटा से थंबनेल उत्पन्न करना, फ़ाइल गुणों को पढ़ना और फ़ाइल ऑब्जेक्ट को असाइन करना? और इसी तरह?

यदि ऐसा है तो मैं वास्तव में चाहते हैं आप अपने खुद के साथ FileReader वस्तु बाहर नकली है, ताकि आप अपने परीक्षण के परिणाम को नियंत्रित कर सकते सुझाव देते हैं। हालांकि, यह फ़ाइल रीडर कार्यक्षमता नहीं है जिसे आप परीक्षण करना चाहते हैं, यह आपका स्वयं का तर्क है। तो आपको यह मानना ​​चाहिए कि FileReader काम करता है और परीक्षण करता है कि आपका कोड उस पर निर्भर करता है।

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

//This implements the EventTarget interface 
//and let's us control when, where and what triggers events 
//and what they return 
//it takes in a spy and some fake return data 

var FakeFileReader = function(spy, fakeData) { 
    this.listeners = {}; 
    this.fakeData = fakeData; 
    this.spy = spy; 
    this.addEventListener('load', function() { 
     this.spy.loaded = true; 
    }); 
}; 
//Fake version of the method we depend upon 
FakeFileReader.prototype.readAsDataURL = function(file){ 
    this.spy.calledReadAsDataURL = true; 
    this.spy.file = file; 
    this.result = this.fakeData; 
    this.dispatchEvent({type:'load'}); //assume file is loaded, and send event 
}; 
FakeFileReader.prototype.listeners = null; 
FakeFileReader.prototype.addEventListener = function(type, callback) { 
    if(!(type in this.listeners)) { 
     this.listeners[type] = []; 
    } 
    this.listeners[type].push(callback); 
}; 

FakeFileReader.prototype.removeEventListener = function(type, callback) { 
    if(!(type in this.listeners)) { 
     return; 
    } 
    var stack = this.listeners[type]; 
    for(var i = 0, l = stack.length; i < l; i++) { 
     if(stack[i] === callback){ 
      stack.splice(i, 1); 
      return this.removeEventListener(type, callback); 
     } 
    } 
}; 

FakeFileReader.prototype.dispatchEvent = function(event) { 
    if(!(event.type in this.listeners)) { 
     return; 
    } 
    var stack = this.listeners[event.type]; 
    event.target = this; 
    for(var i = 0, l = stack.length; i < l; i++) { 
     stack[i].call(this, event); 
    } 
}; 

// Your method 

function generateThumb(file, reader){ 
    reader.readAsDataURL(file); 
    reader.addEventListener('load', function (e) { 
     file.dataUrl = base64(e.target.result); 
    }); 

} 

अब हम एक अच्छी छोटी वस्तु है कि एक FileReader की तरह बर्ताव करता है, लेकिन हम पर नियंत्रण यह व्यवहार है, और हम अब, हमारे विधि का उपयोग करें और को इसकी सुई कर सकते हैं इस प्रकार के परीक्षण और उत्पादन के लिए असली बात के लिए इस नकली उपयोग करने के लिए हमें सक्षम।

तो अब हम इस परीक्षण करने के लिए अच्छा इकाई परीक्षण लिख सकते हैं: https://jsfiddle.net/workingClassHacker/jL4xpwwv/2/

यहाँ लाभ हैं: मुझे लगता है आप मोचा और चाय सेटअप

describe('The generateThumb function', function() { 
    var file = { src: 'image.file'}; 
    var readerSpy = {}; 
    var testData = 'TESTDATA'; 
    var reader = new FakeFileReader(readerSpy, testData); 
    it('should call the readAsDataURL function when given a file name and a FileReader', function() { 
     generateThumb(file, reader); 
     expect(readerSpy.calledReadAsDataURL).to.be.true; 
     expect(readerSpy.loaded).to.be.true; 
    }); 
    it('should load the file and convert the data to base64', function() { 
     var expectedData = 'VEVTVERBVEE='; 
     generateThumb(file, reader); 
     expect(readerSpy.file.src).to.equal(file.src); 
     expect(readerSpy.file.dataUrl).to.equal(expectedData); 
    }); 
}); 

यहाँ एक काम कर JSFiddle उदाहरण है आप इस नकली के कई संस्करण बना सकते हैं:

  • क्या होता है जब सही डेटा दिया जाता है?
  • गलत डेटा कब दिया जाता है जब क्या होता है?
  • क्या होता है जब कॉलबैक कभी नहीं कहा जाता है?
  • क्या होता है जब किसी फ़ाइल की बहुत बड़ी में डाल रहा है?
  • क्या होता है जब एक निश्चित माइम प्रकार लगाया जाता है?

आप offcourse बड़े पैमाने पर नकली को आसान बनाने में कर सकते हैं अगर आप सभी की जरूरत है एक घटना है कि:

function FakeFileReader(spy, testdata){ 
    return { 
     readAsDataURL:function (file) { 
      spy.file = file; 
      spy.calledReadAsDataURL = true; 
      spy.loaded = true; 
      this.target = {result: testdata}; 
      this.onload(this); 
     } 
    }; 
} 

function generateThumb(file, reader){ 
    reader.onload = function (e) { 
     file.dataUrl = base64(e.target.result); 
    }; 
    reader.readAsDataURL(file); 
} 

कौन कैसे मैं वास्तव में यह कर होता है। और विभिन्न उद्देश्यों के लिए इनमें से कई बनाएं।

सरल संस्करण: https://jsfiddle.net/workingClassHacker/7g44h9fj/3/

संबंधित मुद्दे