En navidad me lei el libro de @alexjoverm sobre Testing en Vue con Jest (100% Recomendado) , pero el testing no solo se limita a Jest , en pasado he usado Jasmine y quise hacer una prueba de usar Jasmine con Vue.

Jasmine es una librería de testing muy fácil de usar y es capaz de mostrar los resultados de los tests directamente en el navegador, tal flexibilidad motiva a usarla.

Creación de Archivos

Creamos los archivos app.js que contiene la instancia de Vue , propiedades y métodos de la aplicación,   app.test.js con los tests y index.html  que tiene la referencia a los scripts de jasmine, vue y la app.

Manos a la obra..

Index.html

En nuestro index.html  creamos un contenedor donde alojaremos nuestra app de vue y en el final de body agrego los scripts del cdn de vue, jasmine , app.js y app.test.js

<div id=”app”>
</div>
<!-- Vue-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<!-- -Jasmine ->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.css">  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.js"></script>
<!-- App y Test -->
<script src="app.js"></script>
<script src="app.test.js"></script>

App.test.js

Escribiré un test que especifica la funcionalidad que mi app , y luego el código que cumpla con el test.

Nuestro test es  muy sencillo, la página debe tener un span con un texto que diga “vue ready”,  escribiremos el test en el archivo app.test.js.

Si no has escrito un test con Jasmine , te recomiendo mi post de hace unos meses http://danywalls.com/2016/06/21/crea-y-organiza-tests-con-jasmine/  o mirar la pagina https://jasmine.github.io/api/edge/global

Mi test verifica que un span contenga el texto “Vue Ready”.

it ('debe tener un span que diga `Vue Ready`', () => {

expect (document.querySelector ('span'). innerText)

.toContain ('Vue Ready')

})

 

Si abrimos nuestra pagina index.html veremos que jasmine,  nos notifica que el test está fallando.

fail

App.js

Aqui ahora crearemos nuestra app, para que le test pase el codigo es bastante sencillo.

 

new Vue({
   el: '#app',
   data: {
       message: 'Vue Ready'
   }
})

 

Grabamos y veremos un lindo color verder notificando que nuestra app, cumple con el test.

ok

Como veis hacer test de nuestra aplicaciones de Vue bastante sencillo con Jasmine,

si quieren ver el código de ejemplo aquí os dejo el link de github.

https://github.com/danywalls/vue_y_jasmine

Fondo de vector creado por Freepik