Vue.js - अतुल्यकालिक रूप से परीक्षण डेटा

लौटे मैं निम्न उदाहरण है:Vue.js - अतुल्यकालिक रूप से परीक्षण डेटा

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Mocha</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="mocha.css" /> 
    </head> 
    <body> 
    <div id="mocha"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.1.2/mocha.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.min.js"></script> 

    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script> 

    <script>mocha.setup('bdd');</script> 
    <script> 
    "use strict"; 
    var assert = chai.assert; 
    var should = chai.should(); 

    var vm = new Vue({ 
    data: { 
     message: "Hello" 
    }, 

    methods: { 
     loadMessage: function() { 
     this.$http.get("/get").then(
      function(value) { 
      this.message = value.body.message; 
      }); 
     }, 
    } 
    }); 
    describe('getMessage', function() { 
    let server; 
    beforeEach(function() { 
     server = sinon.fakeServer.create(); 
    }); 

    it("should get the message", function(done) { 
     server.respondWith([200, { 'Content-Type': 'application/json' }, 
       JSON.stringify({message: "Test"})]); 

     vm.message.should.equal("Hello"); 
     vm.loadMessage(); 
     server.respond(); 
     setTimeout(function() { 
     // This one works, but it's quirky and a possible error is not well represented in the HTML output. 
     vm.message.should.equal("Test"); 
     done(); 
     }, 100); 

     // This one doesn't work 
     //vm.message.should.equal("Test"); 
    }); 
    }); 
    </script> 
    <script> 
     mocha.run(); 
    </script> 
    </body> 
</html>

मैं Vue एसिंक्रोनस रूप से सर्वर से डेटा हो जाता है कि परीक्षण करना चाहते हैं। हालांकि, मैं सिनॉन नकली सर्वर के साथ वास्तविक http अनुरोध का मज़ाक उड़ाता हूं।

स्वाभाविक रूप से, loadMessage पर कॉल के बाद, संदेश अभी तक सेट नहीं है। मैं परीक्षण के लिए टाइमआउट फ़ंक्शन का उपयोग कर सकता हूं, लेकिन मेरा मानना है कि एक बेहतर तरीका होना चाहिए। मैंने respondImmediately में देखा है, लेकिन यह नहीं बदला। इसके अलावा, एक() फ़ंक्शन कॉल करने की संभावना है। हालांकि, जैसा कि मैं इसे समझता हूं, इसे किए गए loadMessage फ़ंक्शन के भीतर कॉल करने की आवश्यकता होगी, इसलिए परीक्षण के तहत कोड को संशोधित करना होगा।

इस समस्या को संभालने के लिए सही दृष्टिकोण क्या है?

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

स्रोत

2016-11-09 Maximilian Matthé

यदि आपको कोई बेहतर उत्तर नहीं मिलता है तो आपको इंटरसेप्टर्स को देखना चाहिए: https://github.com/pagekit/vue-resource/blob/master/docs/http.md#interceptors – Hammerbot

'loadMessage' वापसी क्या करती है ? –

loadMessage कुछ भी नहीं देता है, और दृश्य मॉडल में परिभाषित किया गया है। यह सर्वर से असीमित रूप से डेटा लोड करता है और संदेश प्राप्त होने पर मॉडल को अद्यतन करता है। –

के बाद से Vue घटक को अद्यतन एसिंक्रोनस रूप से किया जाता है आप का उपयोग करने के

// Inspect the generated HTML after a state update 
    it('updates the rendered message when vm.message updates', done => { 
    const vm = new Vue(MyComponent).$mount() 
    vm.message = 'foo' 
    // wait a "tick" after state change before asserting DOM updates 
    Vue.nextTick(() => { 
     expect(vm.$el.textContent).toBe('foo') 
     done() 
    }) 
    })

official docs से लिया की आवश्यकता होगी।

स्रोत

2017-03-08 20:04:08 peaceman

Vue.js - अतुल्यकालिक रूप से परीक्षण डेटा

उत्तर

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