Jasmine – Testando seu código JavaScript

Conforme evoluímos na complexidade das aplicações de front-end que desenvolvemos, uma necessidade começa a se tornar óbvia: testar o código JavaScript. Jasmine é um framework exatamente para resolver essa necessidade.

Jasmine é um framework de testes para o código JavaScript, que adere aos conceitos de Behavior Driven Development.

• BDD
• Jasmine
• Jasmine Standalone
• Criando primeiro teste em Jasmine
  • Criando a especificação de teste
  • Criando nosso source

BDD

Behavior Driven Development (Desenvolvimento Guiado por Comportamento) é uma técnica que incentiva a colaboração da equipe de testes, de desenvolvimento e até não-técnicos num projeto de software. Podemos dizer que é uma melhoria de TDD.

Jasmine

Quando trabalhamos com Jasmine, definimos comportamentos, que são conhecidos como specs. As especificações são os testes, que mapeamos para o nosso código-fonte JavaScript.

Existem algumas formas de baixar e implantar o ambiente de teste Jasmine. Jasmine está no Github e você pode instalar via npm direto no seu projeto, ou pode baixar a versão desejada e fazer Standalone.

Jasmine Standalone

1. Vamos entrar na página de releases, e baixar a versão mais recente (que no momento é a 2.9.1).
2. Crie uma pasta para o projeto de testes
3. Descompacte a release baixada na pasta que acabou de criar.

Ao descompactar você terá uma estrutura como essa:

Na pasta lib ficam os arquivos necessários para o funcionamento do framework, spec é o diretório onde ficarão nossos testes e src é o diretório onde fica o código-fonte que estamos testando.

O arquivo SpecRunner.html é o arquivo HTML que será executado no nosso navegador para executar o teste. Portanto, abra este arquivo no seu navegador.

Vamos agora abrir o código do arquivo SpecRunner, para entender como essa página foi gerada.

Na primeira área demarcada são importados os arquivos de código fonte que serão testados (src). E na segunda área demarcada são importados os arquivos de especificação, que são os testes (spec).

Os arquivos acima, são os arquivos do framework, necessários para executar os testes e formatar a página da forma como vimos acima.

Criando primeiro teste em Jasmine

Vamos criar o nosso Hello World, de uma forma bem simples. Dentro da pasta src, crie um arquivo com o nome de Hello.js. Já dentro da pasta spec crie um arquivo com o nome de hello.spec.js.

Vamos atualizar também o nosso arquivo SpecRunner retirando a chamada dos arquivos de exemplo (Player e Song) e importando os arquivos que acabamos de criar. Ele vai ficar dessa forma:

Como nossos arquivos ainda estão vazios, se você atualizar o SpecRunner no navegador, verá a informação de que não tem nenhum teste (spec) definido.

Criando a especificação de teste

Vamos criar um teste muito simples. Esse teste deve validar se ao enviar uma string, é retornada uma string que inclua o nome que enviamos.

Um grupo de testes, é definido como describe. Dentro do describe inserimos uma função com as variáveis, funções e os testes que desejamos executar. Cada teste, é definido como it. Dentro de cada it inserimos uma função com a validação desejada.

Depois de salvar, podemos voltar no nosso navegador e executar. Veremos que nosso teste não passou. A mensagem de erro diz: “hello is not defined””

Então vamos corrigir isso, declarando hello.

Mesmo assim o erro continua, mas agora ele diz que encontrou uma exceção de declaração. Claro, nós não criamos um objeto hello, mas estamos instanciando ele. Então vamos criar nosso objeto Hello.

Criando nosso source

Abra o arquivo Hello.js, dentro da pasta src e vamos criar o construtor do objeto Hello.

Estamos quase lá. Atualizando o teste no navegador, agora ele diz que hello.digaOi não é uma função. E faz sentido, nós realmente não criamos essa função ainda. Vamos cria-lá então. Além de criar a função, vamos fazer ela retornar a mensagem que desejamos.

Depois de salvar! Tcharãn. Atualizando o navegador, agora está tudo verde! 1 spec, 0 failures. Isso quer dizer que nosso teste aconteceu como o esperado! No mesmo arquivo de spec, você pode ter vários conjuntos de testes e vários testes.

Esse foi só o início, mas Jasmine tem muitos outros recursos para controlar o escopo dos testes, criar espiões e vários outros. Para aprofundar mais, você pode olhar a documentação do Jasmine.