unit-testing - utils - vue.js testing
Vue.js-Prueba de datos devueltos de forma asÃncrona (1)
Dado que la actualización del componente vue se realiza de forma asíncrona, necesitarás usar
// 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()
})
})
Tomado de documentos oficiales .
Tengo el siguiente ejemplo:
<!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>
Quiero probar que Vue asíncronamente obtiene datos del servidor. Sin embargo, me burlo de la solicitud http real con Sinon FakeServer.
Naturalmente, inmediatamente después de la llamada a loadMessage , el mensaje aún no está configurado. Podría usar una función de tiempo de espera para la prueba, pero creo que debería haber un método mejor. He respondImmediately , pero no ha cambiado. Además, existe la posibilidad de llamar a una función done (). Sin embargo, como yo lo entiendo, esto debería llamarse dentro de la función loadMessage , modificando el código bajo prueba.
¿Cuál es el enfoque correcto para manejar este problema?
Editar: he encontrado al menos una solución parcial, pero parece estar todavía desordenada: llame a la función done () en la prueba de la unidad mocha. Cuando la aserción falla, al menos se muestra en la salida html. Sin embargo, el mensaje de aserción no es tan claro como en una prueba normal. Además, la técnica parece todavía desordenada para mí.