를 반환 나는 다음과 같은 예를 가지고 :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>
내가 뷰 비동기 서버에서 데이터를 얻을 수 있음을 테스트 할 수 있습니다. 하지만 Sinon FakeServer로 실제 HTTP 요청을 조롱합니다.
당연히 loadMessage
을 호출 한 직후에 메시지가 아직 설정되지 않았습니다. 테스트에 타임 아웃 기능을 사용할 수는 있지만 더 나은 방법이 있어야한다고 생각합니다. 나는 respondImmediately
을 조사했지만 변경되지 않았습니다. 또한 done() 함수를 호출 할 수 있습니다. 그러나 이것을 이해함에 따라이 작업은 loadMessage
함수 내에서 호출되어야하므로 테스트중인 코드를 수정해야합니다.
이 문제를 해결하기위한 올바른 접근 방법은 무엇입니까?
편집 : 적어도 부분적인 해결책을 찾았지만 여전히 지저분한 것 같습니다. mocha unit 테스트에서 done() 함수를 호출하십시오. 어설 션이 실패하면 적어도 html 출력에 표시됩니다. 그러나 어설 션 메시지는 정상적인 테스트 에서처럼 명확하지 않습니다. 또한이 기술은 여전히 나에게 지저분 해 보입니다. VUE 구성 요소의 업데이트가 비동기 적으로 이루어지기 때문에
더 좋은 답변을 얻지 못하면 인터셉터를보아야합니다 : https://github.com/pagekit/vue-resource/blob/master/docs/http.md#interceptors – Hammerbot
'loadMessage'가 리턴하는 것은 무엇입니까? ? –
loadMessage는 아무 것도 반환하지 않고 뷰 모델에 정의됩니다. 서버로부터 데이터를 비동기 적으로로드하고 메시지 수신시 모델을 업데이트합니다. –