Introdução
Apesar de algo antigo os testes unitários tem sido enfatizado cada vez mais pelos amantes da programação, ainda há uma certa resistência por parte de alguns desenvolvedores em implementá-los, porque bons testes são difíceis de ser escritos e podem até requerer uma refatoração do código. Por esse motivo esta prática pode parecer contra-produtivo e isso pode minar o objetivo de se desenvolver um bom programa de testes em seus projetos.
Pensando nisso vamos desenvolver uma série de dois artigos voltados a testes unitários para Vue.js. Neste primeiro vamos passar por conceitos gerais e no segundo lançaremos alguns testes, discutindo a idéia geral por trás deles. Nosso objetivo não é exaurir o tema, o que seria muito impossível, mas gerar interesse e engajamento nesse tema. Ao término você será capaz de criar seus testes e saberá um caminho para trilhar.
Em termos de desenvolvimento ágil de software existem duas abordagem, o desenvolvimento orientado a testes e o desenvolvimento orientado ao comportamento.
O desenvolvimento orientado a testes busca criar testes antes de escrever o código, assim os testes inicialmente devem falhar para que o programador reescreva o código até que o teste passe. Esse ciclo é conhecido como Red-Green-Refactor. A validação do código nesse caso ficaria para os testes, o que gerou uma crítica e promoveu o surgimento do desenvolvimento orientado ao comportamento do usuário. Nessa abordagem busca-se validar através do comportamento do usuário.
A grande vantagem não é simplesmente o desenvolvimento de testes, mas o fato de forçar o programador a pensar em design, regras de negócio e qualidade de código antes de sair escrevendo. Ainda se tem a garantia de que qualquer alteração no código não vá quebrar o código já escrito.
Escolha abordagem mais apropriada
Definida a abordagem utilizada no desenvolvimento deve-se buscar misturar testes unitários, de integração e de interface de usuário. Neste pool de testes a grande maioria será unitário, que são testes voltados para pequenas porções de código. Teste de integração devem ser o segundo mais comum e de interface de usuário os menos comuns. Isso acontece devido ao custo associado a cada tipo de testes. Testes unitários são baratos e rápido de se executar enquanto testes de interface de usuário são caros e lentos.
Todos estes princípios também são válidos quando falamos de frameworks, como Vue.js, React, Angular, entre outros. É totalmente possível testar componentes de forma unitária, integrada ou diretamente na interface. Nesse artigo focaremos especificamente no framework do Vue.js.
O Vue.js possui uma biblioteca padrão de testes, o Vue Test Utils. Com ele é possível escolher o suas bibliotecas de test runner, assertion e doubles. De forma breve, um test runner é o que vai ler seus arquivos de teste e executá-los. Bibliotecas de assertion são responsáveis por criar estados específicos para seus testes e doubles são usados quando precisamos substituir uma parte/objeto do software em produção por outro, estas partes muitas vezes são coisas de terceiros, como módulos, e a responsabilidade de testá-los não é nossa.
Há alguns conceitos que devemos saber antes de iniciar no mundo de testes, vamos a eles antes de escrever o código propriamente dito de forma simples e dinâmica, citando exemplos nos diversos frameworks.
Conceitos principais
Runners
Test runners são bibliotecas que pegarão seus testes, de acordo com a configuração definida por você, e os executaram. A saída (relatório) dos testes também é sua responsabilidade. São exemplos de Test Runners: Jest, Karma, Mocha, ADA, Cypress, entre outros.
Assertion
Bibliotecas de assertion são responsáveis por verificar se os estados criados pelos seus testes estão de acordo com o esperado. Um exemplo clássico de biblioteca de assertion em JavasScript é o ChaiJs, ele oferece as funções expect, should e assert. O NodeJs também possui um assert nativo.
Os dublês – test fakes, spies, stubs e mocks
Fakes e spies são funções que recebem argumentos, retornam valores, this e lançam exceções. Fakes tem implementações reais diferentes do código em produção, spies chamam as implementações reais que estão em produção. Stubs são funções (spies) com um comportamento pré-programado. Mocks são métodos falsos com comportamentos e retornos pré-programados.
Frameworks/Test Runners
Nessa seção passaremos pelos principais test runners, bibliotecas de assertion e doubles. Para tanto considere o seguinte componente como exemplo.
Jasmine [https://jasmine.github.io/]
Segundo a documentação Jasmine é um framework de desenvolvimento orientado ao comportamento para testes em Javascript (BDD). Vem com tudo que é necessário para testes, não requerendo nenhum pacote adicional.
AVA [https://github.com/avajs/ava]
AVA é um test runner para Node JS com uma API concisa, com intuito de se ter uma curva de aprendizagem pequena, e saída de erros detalhada. Tem uma proposta interessante, pois nasceu com a ideia de rodar testes de forma concorrente. Abraça novas features da linguagem e isolamento de processo.
Mocha JS [https://mochajs.org/]
Mocha é um framework de testes rico de Node.js e browser, fazendo testes assíncronos simples e divertidos. É um dos mais famosos e usados atualmente. Tem suporte para a instalação para bibliotecas de assertions, como o chai, expect, should, entre outros e também para doubles, como sinon.js. Na prática o mocha é algo pequeno que será personalizado de acordo com o usuário com outras bibliotecas.
JEST [https://jestjs.io/]
JEST se destaca por ser completo, vem com tudo necessário para testar. A suíte conta com uma incrível facilidade de mocar dados, funções ou módulos inteiros. É rápido e um dos mais usados atualmente no desenvolvimento das aplicações.
Conclusão
Vimos brevemente que é há um grande ecossistema e diversas possibilidades para testes unitários utilizando Vue.jsJS, que trata a questão de forma flexível e nos deixa escolher um framework de teste do nosso gosto. Nos próximos artigos vamos demonstrar com alguns testes como aplicar cada ferramenta.
