Fazendo uma aplicação em Vue.js com TDD — Um guia extensivo para quem quer aprender — parte 5

Testando com dependências de terceiros

Daniel Kuroski

Published in

magnetis backstage

5 min readNov 21, 2018

Este é o quinto de uma série de artigos:

No último artigo, finalizamos toda a nossa aplicação 👏

Neste artigo vamos ver como fazer a integração com uma biblioteca de componentes de terceiros, e como atualizar os nossos testes para comportar essa alteração.

Melhorando a aparência + Bibliotecas de terceiros

Podemos estilizar os nossos componentes manualmente, eu geralmente faço isso devido ao meu contexto de trabalho, mas aqui eu quero mostrar como podemos estilizar os nossos componentes utilizando uma biblioteca de terceiros, nunca cheguei a utilizar ela em produção mas vamos experimentar o ElementUI.

Podemos usar o VueCLI para baixar a lib, mas aqui vamos instalar ela manualmente.

npm i -d element-ui

Feito isto, basta instalar ela no nosso projeto.

// src/main.jsimport Vue from 'vue'
import Element from 'element-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element)
Vue.config.productionTip = falsenew Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vamos inserir no App.vue o markup base para uma aplicação utilizando o ElementUI

// App.vue<template>
  <el-container>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

Nossos testes ainda estão passando e podemos continuar fazendo alterações no layout.

src/components/VUserSearchForm.vue

Aqui fizemos o nosso primeiro grande refactor relacionado a aparência, basicamente demos uma nova cara para a parte de formulário:

Maravilha, nosso formulário está mais bonito, porém:

Nossos testes estão falhando, mas o que exatamente está acontecendo aqui?

Bom… como baixamos o ElementUI como dependência de terceiros e fizemos a inicialização dele no main.js, quando fazemos uso dos elementos dentro dos testes do componente VUserSearchForm.vue, ele não tem conhecimento do ElementUI, então precisamos voltar no arquivo de testes e fazer exatamente o que fizemos no main.js

tests/unit/VUserSearchForm.spec.js

Perfeito, inserimos aqui a dependência do createLocalVue na linha 1, e também importamos o ElementUI na linha 2.

Depois criamos uma instância local e usamos o ElementUI nas linhas 5 e 6 e adicionamos a instância local como opção na hora de renderizar o nosso componente na linha 10, basicamente o que a gente tinha visto com o caso do Vuex 😃

Agora basta atualizar a snapshot e teremos informações mais concisas:

Aqui, basta a gente atualizar as referências dos nossos seletores para buscar pelas classes do nosso HTML

const build = () => {
  const wrapper = shallowMount(VUserSearchForm, { localVue })return {
    wrapper,
    input: () => wrapper.find('.search-form__input'),
    button: () => wrapper.find('.search-form__button'),
  }
}

Mas espera aí, como o teste do input está passando e o do button não?

O que acontece, é que estamos renderizando um el-input que é um elemento customizado, e pela documentação do ElementUI, precisamos colocar o botão dentro dele para renderizar corretamente na página.

Agora para testarmos isso, chegamos em um caso a onde precisamos renderizar toda a arvore de dependências do nosso componente, então finalmente, vamos fazer uso do mount.

tests/unit/VUserSearchForm.spec.js

Primeiro importamos o mount na linha 1.

Em seguida, criamos um wrapperMounted na linha 12, e então, retornamos o nosso botão na linha 19, utilizando o nosso wrapperMounted.

Agora sim, com o componente “montado”, temos acesso a árvore inteira dele, assim podemos buscar o button e até mesmo o input renderizados pelo ElementUI.

Neste caso, eu também estou retornando o wrapperMounted e o inputMounted pois iremos utilizá-los no nosso próximo teste.

Com isso, precisamos fazer o nosso último teste passar, no qual estamos verificando a emissão do evento submitted

tests/unit/VUserSearchForm.spec.js

Para fazer isto, já que estamos lidando com eventos dos componentes nativos que são criados pelo ElementUI, precisamos então importar o wrapperMounted e o inputMounted ao invés das versões em shallowMount na linha 4.

E então é só substituí-los no teste, com isso voltamos ao verde.

Por fim, vamos alterar apenas o css do VUserProfile.vue pois já fizemos uso da biblioteca de terceiros.

// src/components/VUserProfile.vue<style scoped>
.user-profile {
  border-top: solid 1px #ccc;
  padding-top: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-profile__avatar {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
.user-profile__name {
  margin-top: 14px;
  font-size: 24px;
  font-family: 'Bungee', cursive;
  text-transform: uppercase;
}
.user-profile__bio {
  margin-top: 14px;
  font-family: 'Open Sans', sans-serif;
}
</style>

Pronto, aqui está a nossa aplicação funcional e testada 😄

Nesse artigo eu não vou abordar css modules para o vue pois não faz parte do contexto desta serie de artigos, porém é fortemente aconcelhavel fazer uso de modules ao invés de scoped, você pode encontrar mais informações aqui e aqui.