Un poco de contexto.
Estoy creando un plugin usando pruebas y al usar la instancia de una clase, simplemente no pasa la prueba mas simple.
El plugin es una copia adaptada del Satellizer un conocido módulo de angular que gestiona la acreditación por medio de tokens. La adaptación consiste en convertirlo en un plugin de vue.js, usar axios para la conexión al servidor y localforage para el almacenamiento persistente. Además, estoy practicando el desarrollo basado en pruebas (TDD por sus siglas en inglés).
El plugin
La estructura del plugin es mas o menos así:
index.js // punto de entrada
|
---> acreditar.js // contiene la clase VueAcreditacion
|
---> opciones.js // contiene las opciones basicas por defecto
Este archivo de opciones, es un objeto que contiene la lista de propiedades, por ejemplo:
export default {
tokenName: 'token'
}
Y este archivo se carga en el archivo de la clase, acreditar.js
, que contiene solo lo básico:
import opcionesBasicas from './opciones'
export default class VueAcreditacion {
constructor() {
let _opciones = opcionesBasicas
Object.defineProperties(this, {
opciones: {
get: () => _opciones
}
})
}
}
En mi archivo de pruebas, importo mis dependencias, incluyendo el plugin; para poder instalarlo en la instancia de Vue.
let Vue = require('vue')
let expect = require('chai').expect
const plugin = require('../src/plugin/index')
Vue.config.productionTip = false
Vue.use(plugin)
let vm = new Vue()
Por último, el archivo index.js
que es donde se crea el plugin, se carga este archivo y se crea la instancia de VueAcreditacion
.
import opcionesBasicas from './opciones'
export default class VueAcreditacion {
constructor() {
let _opciones = opcionesBasicas
Object.defineProperties(this, {
opciones: {
get: () => _opciones
}
})
}
}
En este momento, si arranco el servidor de desarrollo y veo mi plantilla con
{{ this.$acreditar.opciones.tokenName }}
veotoken
en la pantalla. Ergo, el plugin funciona.
Las pruebas
Cuando se instala un plugin correctamente, VueJS le coloca una propiedad installed
automáticamente, así que mi prueba es correcta:
describe('El plugin', () => {
it('debe estar instalado', () => {
console.log(plugin)
expect(plugin.installed).to.be.true
})
})
La siguiente prueba, donde verifico la propiedad $acreditar.opciones.tokenName
falla.
describe('La propiedad `$acreditar.opciones.tokenName', () => {
it('debe devolver `token`', () => {
const NOMBRE = 'token'
expect(plugin.$acreditar.opciones.tokenName).to.be.equal(NOMBRE)
})
})
Este es el reporte, con todo y gato
1 -_-_,------,
1 -_-_| /\_/\
0 -_-^|__( x .x)
-_- "" ""
1 passing (23ms)
1 failing
1) La opción `$acreditar.opciones.tokenName debe devolver `token`:
TypeError: Cannot read property 'opciones' of undefined
at Context.<anonymous> (test/index.spec.js:54:12)
Como dice que opciones
no está definido, verifico si $acreditar
si existe:
describe('El plugin', () => {
it('debe tener la propiedad $acreditar', () => {
expect(plugin.$acreditar).to.not.be.undefined
})
})
Pero sigue fallando:
1) El plugin debe tener la propiedad $acreditar:
AssertionError: expected undefined not to be undefined
at Context.<anonymous> (test/index.spec.js:34:5)
Dado que el plugin funciona como se espera en las condiciones de uso pero falla en las pruebas, supongo que algo estoy haciendo mal en mis pruebas.
Problema
¿Estoy escribiendo mal mis pruebas o está mal mi plugin? ¿Cuál es el problema, cómo puedo solucionarlo?
Agradecería enormemente si me proporcionan información, enlaces, etc., que me ayude a comprender el origen del problema y a evitar su recurrencia.
Gracias.
install
, el cual recibe dos parámetros: el constructor de Vue y el objeto de opciones. Es en éste método en donde puedes agregar propiedades/funciones a Vue directamente a su constructor o como instancia (agregado directamente al prototipo de Vue). Según tengo entendido,Vue
es el que debería tener$acreditar
.vm
. Al rato escribo una guía para hacer pruebas con VueJS.