Testes unitários e javascript – parte 1

Olá pessoal, tudo certo?

Depois de um bom tempo, aqui estou eu de volta. Nesse post a ideia é apresentar os testes unitários em javascript com o uso dos frameworks Jasmie e QUnit. Para isso iremos criar uma calculadora de pilha utilizando anotação polonesa inversa.

Introdução

Notação polonesa inversa (RPN) é uma forma de escrever expressões matemáticas que evita o uso de parênteses. Vamos à um exemplo:

Normal: (2 + 2) / 2

RPN: 2 2 + 2 /

O nosso objetivo é fazer com que a calculadora retorne o resultado correto para as duas expressões seguintes:

3 6 * 5 + 3 – 2 / = 10

5 6 3 + * 2 / = 22.5

Ferramentas

Irei utilizar o Visual Studio para desenvolvimento e a extensão Chutzpah para rodar os testes. No entanto é possível utilizar qualquer editor de textos e rodar os testes no navegador, ou até mesmo o próprio PhantomJS. Como dito anteriormente, os testes serão escritos nos frameworks Jasmine e QUnit.

Abaixo está a estrutura dos fontes utilizada. Para rodar os testes no navegador, basta abrir o(s) arquivo(s) Calculator.jasmine.test.html e/ou Calculator.qunit.test.html.

Estrutura dos fontes

Estrutura dos fontes

Calculator.jasmine.test.html

Calculator.qunit.test.html

Organização

Separei o post em duas partes, para não ser tão extenso e cansativo. No final do segundo post colocarei os links para os arquivos no github e dos próprios gists utilizados.

É hora de testar (e codificar)

Como todos nós somos bons desenvolvedores, vamos iniciar sempre com os testes. Neste caso sempre irei escrever dois testes (um para cada framework) e em seguida o código da aplicação. O nosso primeiro teste será uma simples soma (2 2 +).

Neste momento o nosso teste falha pois não temos uma implementação. Vamos adicionar o mínimo para que nosso teste compile e possamos refatorar o código.

Neste momento o nosso teste compila e roda, no entanto ele falha. Para que nosso teste funcione e possamos refatorar, podemos simplesmente fazer o método calculate retornar o valor 4.

E agora os testes passam, agora precisamos remover a redundância do valor 4 do nosso código (ele aparece no teste e está fixo no código). Vamos refatorar.

Após uma rápida refatoração, cheguei ao código acima. No comentário está o código mínimo para que o teste continuasse passando e fosse simples. Optei por uma “complexidade” maior para que ficassem evidentes certas refatorações do código.

Agora podemos escrever o nosso próximo teste, uma multiplicação simples.

E os nossos testes falham. Vamos escrever o mínimo para que os testem passem e possamos melhorar o código anterior.

Rodamos os testes e eles passam. Agora vamos refatorar. Antes de partirmos para o código em si, podemos perceber que o nosso teste possui uma redundância, a linha Calculator.setExpression(”).calculate() se repete. Neste momento vamos inicialmente refatorar o teste, centralizando esta chamada e depois partiremos para o código.

Agora que nossos testes estão refatorados e funcionam como antes. Vamos refatorar o código 🙂

Vamos ver o que foi feito no código refatorado. Foi adicionado um método para fazer a interpretação da expressão (parse) e também deixamos para o método calculate apenas a lógica para calcular a expressão. Rodamos os testes e tudo funciona 😀

Para esse post era isso. No próximo, trataremos da subtração, divisão e também das expressões que introduzimos como objetivo.

Abraço.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s