2

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 que gestiona la acreditación por medio de tokens. La adaptación consiste en convertirlo en un plugin de , usar para la conexión al servidor y 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 }} veo token 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.

2
  • ¿Estás usando la versión 1? Porque en Vue.js 2 la manera de crear un plugin es por medio del método 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.
    – gugadev
    Commented el 12 abr. 2017 a las 14:07
  • Estaba usando mal la vm. Al rato escribo una guía para hacer pruebas con VueJS.
    – toledano
    Commented el 12 abr. 2017 a las 14:17

1 respuesta 1

0

Para hacer pruebas correctamente en Vue se debe crear una instancia de Vue, previamente configurada. Es decir, en el archivo de pruebas, cargamos los archivos necesarios para correr las pruebas:

let Vue = require('vue')
let expect = require('chai').expect
const plugin = require('../src/plugin/index')

configuramos Vue, en este ejemplo, para que no mande el consejo

mensajeVue.config.productionTip = false
Vue.use(plugin)

y procedemos a crear la instancia de vue

let vm = new Vue()

En esta instancia ya está el plugin y podemos hacer las pruebas que hayamos diseñado, por ejemplo:

describe('El archivo plugin', function () {
  it('debe existir', function () {
    expect(plugin).to.not.be.undefined
  })

  it('debe estar instalado', () => {
    expect(plugin.installed).to.be.true
  })

  it('debe tener la propiedad $acreditar', () => {
    expect(vm.$acreditar).to.not.be.undefined
  })

  it('debe tener la propiedad version', () => {
    const version = '0.1.0'
    expect(vm.$acreditar.version).to.equal('0.1.0')
  })
})
1
  • 1
    Esto era a lo que me refería en mi comentario ;)
    – gugadev
    Commented el 13 abr. 2017 a las 1:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.