Category Archives: JavaScript

Teste Unitário em Javascript no modo Easy

Existe e sempre existirá aqueles desenvolvedores céticos aos poderes do Javascript e suas bibliotecas.

Shame on them!

Suas vidas serão poupadas graças a misericórdia do todo poderoso deus Javascript.

[Feeling like Maomé batendo um cajado e abrindo caminho sob o mar para esses céticos pecadores encontrarem o caminho certo e começarem a pregar a palavra!]

Esse processo de exorcismo pode levar mais de um post, mas começarei com esse!

Testes Unitários em Código Javascript!

Sim, meu caro leitor, ele existe!

Existem algumas ferramentas que fazem testes unitários, mas hoje irei falar sobre uma em específico, o QUnit.

Mas por que QUnit ?

Pela experiência que tive trabalhando com ela, mas nada impede que venha trabalhar com Jasmine um dia!

Eis o nosso protagonista da noite!

Bruce Buffer style

“Introducing first, fighter at the blue corner, a professional tool for unit test purpose using TDD approach, weight in 83.4 KB, the undisputed, QUnit!”

Para efetuar o download dos arquivos necessários para associar o Qunit à sua aplicação, você pode acessar o site oficial da ferramenta clicando aqui e fazer o download do arquivo qunit-1.14.0.js e de seu CSS qunit-1.14.0.css

Vamos a receita!

1- Crie uma Web Application MVC 4 no Visual Studio 2012 (ou outra versão)

2- Na pasta Scripts coloque o arquivo qunit-1.14.0.js

3- Na pasta Contents coloque o arquivo qunit-1.14.0.css

Com isso os arquivos fontes do QUnit já estão associados à sua aplicação.

4- No seu HomeController (caso esteja usando MVC), crie um novo método chamado TestesUnitario e sua respectiva View herdando o layout de _Layout

5- O código na View TestesUnitario é bem simples,

<link href="~/Content/qunit-1.14.0.css" rel="stylesheet" />
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="~/Scripts/qunit-1.14.0.js"></script>

6- Precisamos de um arquivo Javascript na qual conterá as regras de cada teste que criarmos. Irei chamá-lo de Teste.js e ficará na pasta de Scripts.

7- Vou colocar um código bem simplório nesse arquivo Testes.js apenas para vermos o QUnit em pleno vapor!

QUnit.test("Meu primeiro teste com QUnit", function (assert) {
assert.ok(1 == "1", "Passei!");
});

8- Rode sua aplicação, e acesse /Home/TestesUnitario

Você deverá algo semelhante a imagem abaixo

qunitBem simples não ?

Modo Easyiest OFF !

Vamos “dificultar” os testes, mas sairemos do modo Easyiest para o modo Easy, nada de muito excepcional ainda para não traumatizar ninguém.

Desenvolvendo Códigos Testáveis

Pelo fato de que o Javascript foi criado e é mantido pelo tinhoso 7 peles, com certeza você viu códigos como o abaixo

$("#botao1").click(function() {
$("#div").text("Clicou no botao!");
});

Funciona perfeitamente, lindo! Não merece Palmas, merece Tocantins inteiro!

Mas, impossível de testarmos isso!

O ideal será sempre separar em funções, na qual poderia ficar conforme abaixo, existem N maneiras de se refatorar esse trecho, mas vou deixar apenas uma maneira aqui.

$("#botao1").click(function() {
$("#div").text(InsereTexto());
});

function InsereTexto() {
return "Clicou no botao!";
}

 E o conceito aqui é, você não irá testar o comportamento do clique, e sim o retorno que o clique tem que ter!

Nesse caso, a função InsereTexto() é a grande responsável por tudo, então o teste será se a função retorna exatamente “Clicou no botao!”.

QUnit.test("Meu segundo teste com QUnit", function (assert) {
assert.equal(InsereTexto(), "Passei!");
});

Sem muito esforço conseguimos efetuar testes unitários em código Javascript !

VAvPeeV

Advertisements