Testando seu código JavaScript com QUnit    

Olá pessoal!

Depois de muito tempo sem escrever, volto falando de um dos meus temas preferidos: JavaScript!

Hoje vou falar de um tema complicado mesmo para linguagens compiladas como C# ou Java, para uma linguagem de script esse tema é ainda mais complicado. Como o título já mostra, vou falar de Testes em JavaScript.

Não pretendo aqui falar de todos os conceitos de Teste abordado para tantas linguagens e de seus inúmeros benefícios, mas apenas apresentar uma boa ferramenta que facilita muito a validação do seu código JavaScript. De qualquer forma, não posso deixar de falar que validar código não é o único benefício dos testes, na realidade, na minha opinião, um dos principais benefícios de criar código para testar seu código é melhorar o design do mesmo, deixando ele mais claro e organizado, além de facilitar futuras refatorações.

Organizar código JavaScript é uma tarefa difícil, e o teste facilita muito isso.

Então vamos lá, conhecendo o QUnit

QUnit é a uma ferramenta de teste criada pela equipe do JQuery, para testar sua biblioteca, que mais tarde foi exposta ao mundo para quem quiser utilizar. Só por ser utilizado pela equipe do JQuery já é um motivo para também querermos adotar essa suite de teste para nossos projetos, afinal, não é fácil encontrar erros na biblioteca do JQuery.

QUnit pode ser utilizada para testar código JavaScript puro ou mesmo o comportamento do DOM. Por exemplo, os plugins do JQuery são testados com QUnit, e não somente os códigos de lógica e classes.

Como qualquer ferramenta de teste, o QUnit é perfeito para teste de regressão, afinal, uma vez que um bug é encontrado, você pode criar um teste para validar a existência dele, e após corrigi-lo, verificar a correção, rodando novamente o teste toda vez que você trabalhar sobre o código.

Você não precisa instalar nada de especial para rodar o QUnit, é necessário apenas referenciar o script do Qunit, que pode ser encontrado aqui, e rodar seus testes no Browser.

Vamos ao código!

Utilizando o QUnit

Para utilizar o QUnit, você deve referenciar o script que realiza os testes e o CSS que dá o layout básico da página que mostra os resultados do teste, além de um HTML padrão para organizar os testes, da seguinte forma:

.

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2: <html xmlns="http://www.w3.org/1999/xhtml">
   3: <head>
   4:     <title></title>  
   5:     <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
   6:     <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
   7:   
   8: </head>
   9: <body>
  10:     <h1 id="qunit-header">
  11:         QUnit example</h1>
  12:     <h2 id="qunit-banner">
  13:     </h2>
  14:     <div id="qunit-testrunner-toolbar">
  15:     </div>
  16:     <h2 id="qunit-userAgent">
  17:     </h2>
  18:     <ol id="qunit-tests">
  19:     </ol>
  20:     <div id="qunit-fixture">
  21:         test markup, will be hidden</div>
  22: </body>
  23: </html>

Explicando o código HTML acima: na tag HEAD adiciono o CSS e o Script necessários para funcionar os testes, e no Body as tags (h1, h2 e div) com id qunit-header, banner, testrunner-toolbar e qunit-userAgent são para criar um layout bonito e para auxiliar na execução dos testes, você não deve mexer nessas tags. A tag com id qunit-tests é onde será exibido os resultados dos seus testes, você também não deve adicionar conteúdo a essa tag. Por fim a tag com id qunit-fixture você deve utilizar no caso de testar algo com HTML, e não somente com código JavaScrit puro. É onde você adiciona HTML de teste. O conteúdo dessa tag não é exibido no browser.

O resultado do código acima é algo como a imagem abaixo:

image

Testando o código

Vamos fazer um código simples para testar. A classe abaixo será utilizada:

   1: var Calculadora = function () {
   2:     this.somar = function (a, b) {
   3:         return a + b;
   4:     }
   5:     this.subtrair = function (a, b) {
   6:         return a / b;
   7:     }
   8: };

Para utilizar o QUnit, precisamos conhecer alguns métodos básicos da biblioteca:

module (nome) – Para separar os testes em módulos

test (nome,testMethod) – Método que executa o teste, o primeiro parâmetro recebe o nome do método e o segundo é um método anonimo responsável por realizar o teste. Esse método tem um overload, podendo receber no segundo parâmetro, chamado expected, a quantidade de assets esperados dentro do método definido no parâmetro testMethod.

expect (total) – Define a quantidade de asserts esperados em um testMethod. É utilizado no caso de não ser utilizado o parâmetro expeted do método test.

Além do métodos acima, também têm os métodos responsáveis pelos Asserts dos testes, abaixo listo os principais:

ok(resultado, mensagem) – Realiza uma validação booleana do parâmetro resultado e exibe a mensagem como resultado.

equal(valor_real,valor_esperado, mensagem). Valida se o Valor Real é igual ao Valor Esperado.

notEqual(valor_real,valor_esperado, mensagem). Valida se o Valor Real NÃO é igual ao Valor Esperado.

Para testar meu código acima, vou fazer o seguinte código de teste:

   1: module("Testes de Somar");
   2: test("Testar Soma", 1, function () {
   3:    var calc = new Calculadora();
   4:    equal(calc.somar(1, 2), 3, "O resultado deve ser 3");
   5: });
   6:  
   7: test("Testar Soma Com Erro", 1, function () {
   8:    var calc = new Calculadora();
   9:    notEqual(calc.somar(2, 2), 3, "O resultado não pode ser 3");
  10: });

O resultado do código acima seria como a imagem abaixo:

image

Caso meu código tenha algum erro, o resultado seria como a imagem abaixo, mostrando inclusive o local onde ocorre o erro:

image

O código é bem simples, mas vou fazer uma pequena explicação.

No método test eu passo o nome do teste e a quantidade de assert que eu quero fazer no teste. Se eu definir um número de assert diferente do número que eu executo, o teste vai falhar (os possíveis métodos de assert do QUnit está acima). Por último parâmetro eu passo o método responsável por realizar os testes. O QUnit verifica os asserts dentro deste método, e se todos estiverem de acordo com o esperado, os testes passarão.

E se eu quiser testar um HTML? Bom vamos aos códigos abaixo:

Primeiro vou adicionar referência aos scripts do JQuery e JQuery.UI:

   1: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   1:  
   2: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js">
</script>

Vou criar um JQuery Ui Widget simples, e testar se meu código está funcionando conforme o esperado:

   1: (function ($, undefined) {
   2:     $.widget('teste.bolder', {
   3:     _create: function () {
   4:  
   5:         $(this.element).append("<p class='bolder'/>");
   6:     }
   7: });
   8: } (jQuery));

O que meu código faz é apenas adicionar uma tag P com uma classe “bolder” ao controle selecionado pelo JQuery, ou seja, se eu fizer:

$(“div#teste”).bolder();

Um div vazio deve ficar assim:

<div><p class=”bolder”/></div>

Vamos ao teste. Primeiro devo alterar a tag com id qunit-fixture:

   1: <div id="qunit-fixture">
   2:     <div id="teste"></div>
   3: </div>

Após fazer isso, crio meu código de teste:

   1: test("Testando widget Bolder", 1, function () {
   2:    //Crio o controle executando o widget
   3:   $("#teste").bolder();
   4:   //faço um teste básico para ver  se fpo criado como o esperado.
   5:   equal($("p.bolder").length, 1, "Testando criação");
   6: });

É um teste bem simples, mas dá para ver como podemos fazer coisas mais complexas se quisermos. Lembre-se: A equipe do JQuery teste seu código dessa forma!

O resultado do meu teste está abaixo:

image

Bom, acredito que com isso você já consegue codificar seus métodos de testes de JavaScript. É só aplicar os mesmo conceitos que você já utiliza para testar seu código C#.

Para mais informações sobre o QUnit, visite o site do JQuery específico para essa ferramenta.

Abraços e até o próximo!

25. janeiro 2012 00:03 by Frederico B. Emídio | Comments (0) | Permalink

Sobre mim

Minha Imagem

Meu nome é Frederico Batista Emídio, trabalho com desenvolvimento de sistemas profissionalmente a oito anos, porém, já faço sites pessoais a pelo menos dez anos.

Para saber mais clique aqui.

Páginas

Calendário

<<  novembro 2017  >>
seteququsedo
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

Visualizar posts em um Calendário
Sigua @fredemidio

MCP Asp.NET