Brincando com Jasmine

Você testa seu código JS? Se a resposta foi não, nunca é tarde pra começar. Não vou me alongar aqui falando o porque tanta gente fala de fazer testes, existem milhares de posts sobre isso. Vou direto ao assunto: o brother Jasmine.

O tal do Jasmine

Jasmine é um framework behavior-driven development para testar nossos paranauês em JavaScript. Uma das coisas legais que particularmente achei dele é que a sintaxe é bem intuitiva o que faz com que escrever testes se torne uma tarefa fácil.

Na prática..

Mostrar na prática é bem melhor que só teoria. Então vamos lá.. Primeiro faça o download da última versão do Jasmine (recomendo seguir o passo a passo deles no GitHub, super tranquilo).

Pra essa brincadeira criei duas pastas: uma com o nome jasmine onde joguei todos os arquivos do framework e outra chamada hello onde vamos jogar os arquivos desse primeiro exemplo rápido. Dentro dessa pasta vamos criar uma pasta chamada spec onde deixaremos os arquivos relacionados aos testes. Nossa pasta hello seria assim:

E a estrutura completa ficaria assim:

Um adendo: essa foi uma organização só a fim de exemplo.

Então temos nosso menino spec/index.html:

Aí temos um exemplo simples de arquivo JavaScript:

Observando o arquivo anterior, conseguimos já visualizar o que acontece certo? Mentalmente já esperamos que ao criarmos um objeto utilizando Hello e chamarmos o método sayHy, deve-se retornar uma string específica com o argumento que passarmos.

Passando pra parte testável da coisa. Vamos lá, poderíamos implementar nosso teste assim:

Destrinchando nosso arquivo de teste:

Poderíamos também mudar algumas coisas na organização do código e adicionarmos a função beforeEach:

A função beforeEach como o próprio nome diz, roda uma vez antes de cada spec do describe e, também existe o afterEach que tem o papel inverso e roda uma vez depois de cada spec.

Se abrirmos nosso index.html para rodarmos nossos testes, teremos algo assim:

Print da tela mostrando que o teste passou
Nosso teste passou! \o/

É possível também usar o Jasmine para fazer testes em aplicações com Node.js através do Jasmine Node. Depois de instalado, precisaríamos fazer pequenos ajustes no nosso código para testá-lo:

Nosso arquivo hello.js ficaria assim:

E nosso arquivo de testes hello.spec.js ficaria assim:

Eaí é só rodarmos nosso teste via terminal:

Gif animado mostrando o teste do jasmine node

Testes antes?

No exemplo anterior primeiro desenvolvemos nosso código e depois escrevemos nosso teste. No TDD ocorre o inverso: primeiro escreveríamos os testes e depois o nosso código. Achou estranho? Vamos tentar brincar.

Comecemos de algo básico: imagine que queremos ter uma função simples que aceita 2 números como argumentos e nos retorna o resultado da adição de ambos. Poderíamos fazer um teste simples assim:

No teste acima, quebramos nosso componente em 2 testes específicos:

Obs.: Poderíamos ter mais um monte de testes, como verificar se o argumento passado é realmente um número, mas deixemos apenas esses 2 para o exemplo.

Tendo isso em mente, podemos partir pro nosso código:

Com certeza, de cara já poderíamos imaginar algo assim certo? No entanto como é de se esperar isso vai nos retornar um erro quando rodarmos os testes.

Print da tela mostrando que os testes quebraram

Nossos testes quebraram e conseguimos ver exatamente onde: Calc 1 argument - should calculate the addition using the argument twice. Isso acontece pois não fizemos nenhum tratamento na nossa função caso recebessemos apenas um argumento. Vamos lá então:

Agora se rodarmos os testes novamente:

Print da tela mostrando que os testes passaram

Acho que é isso. No próximo post, vou tentar escrever um pouco sobre os matchers do Jasmine que é uma outra parte bem legal do framework. Deixo aqui meu valeu ao Weslley Araujo pela revisão do conteúdo!

Ver mais posts