Guilherme Cardoso, Blog PT

QUnit - Testes Unitários em Javascript

English version of this article: http://geekswithblogs.net/guilhermecardoso/archive/2011/10/15/qunit---client-side-unit-testing-with-tdd.aspx
Link Github: https://github.com/guilhermegeek/QUnitSample

Como tenho o hábito de escrever testes unitários para o código que escrevo decidi pesquisar um bocado sobre este tema mas em relação a client side. 
De algumas frameworks que vi aquela que escolhi foi o QUnit. É utilizado pela equipa da jQuery para testar os códigos deles, e sinceramente foi aquela que mais me pareceu fácil de configurar e é-me familiar aos testes que tenho escrito com o NUnit (para C#: http://www.nunit.org)..

Neste artigo vou mostrar um exemplo básico de como pode ser usado.

Para utilizar o QUnit é preciso recorrer á framework jQuery: http://docs.jquery.com/Downloading_jQuery
O QUnit está disponível no GitHub: https://github.com/jquery/qunit

Começamos por declarar os scripts na head da página. Podemos usar a folha de estilo disponibilizada pelo pessoal do QUnit. É apenas um ficheiro css e o código usado é limpo e simples de perceber.

<link href="/Styles/qunit.css" rel="Stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="/Scripts/qunit.js" type="text/javascript"></script>  

A seguir vamos construir um objecto para retornar o estado do erro e a mensagem. Algo assim:

function OutputJS() {
      this.Mensagem = null;
      this.Codigo = null;
}

Isto é opcional claro. Eu apenas uso este objecto porque facilita bastante o meu trabalho quando faço a verificação do estado de erro.

Para acabar as configurações de defeito do QUnit só nos falta definir os elementos html onde ele vai mostrar os estados dos testes:

<h1 id="qunit-header">Testes Unitários</h1>  
<h2 id="qunit-banner"></h2>  
<h2 id="qunit-userAgent"></h2>  
<ol id="qunit-tests">

Feito isto vamos escrever o nosso primeiro teste!
Seguindo o conceito de TDD (a início o teste é escrito para dar erro, e só depois escrevemos o código que vai ser testado e então verificamos se o teste deixa de dar erro) vamos escrever este teste:

function Deve_Validar_Codigo(codigoAluno) {
        resultado.Codigo = false;
        resultado.Mensagem = "O código de aluno deverá ter no mínimo 4 caracteres.";
        return resultado;
}

Como podem ver o teste vai devolver falso (o tal conceito de TDD). 
É agora que o QUnit entra. Como se trata de Javascript, a forma mais fácil de correr o teste é no evento $(document).ready() (quando a página é carregada). No entanto podem associar isto a um evento de um botão com um select onde tenham todos os testes que querem testar por exemplo.

<script type="text/javascript">
    $(document).ready(function () {
        module("Validação");
        test("Validar Código de Aluno", function () {
            var teste = Deve_Validar_Codigo("CD122");
            ok(teste.Codigo, teste.Mensagem);
        });
    }); 
</script>

module: permite-nos separar os testes em módulos (categorias)
test: nome dado ao teste
ok(): um dos vários tipos de assertions disponíveis do QUnit para os testes.O ok() espera que o primeiro parâmetro tenha o valor boleano true, e caso não tenha mostra a mensagem de erro do segundo parâmetro.

O teste Deve_Validar_Codigo() esta a devolver o objecto OutputJS que tem as propriedades Codigo e Mensagem. Assim, se o teste.Codigo for falso é mostrada a teste.Mensagem. É por isso que digo que utilizar um objecto deste tipo é bastante útil!

Para correr o teste basta abrir a página (onde colamos o código do test("Validar Código de Aluno", function ()) e o resultado vai ser este:

Como era de esperar o nosso teste deu erro. Vamos então alterar o método Deve_Validar_Codigo() para conseguirmos validar o código de aluno:

function Deve_Validar_Codigo(codigoAluno) {
    var resultado = new OutputJS();
    if (codigoAluno.length < 4) {
        resultado.Codigo = false;
        resultado.Mensagem = "O código de aluno deverá ter no mínimo 4 caracteres.";
    }
    else {
        resultado.Codigo = true;
        resultado.Mensagem = "Código de aluno validado com sucesso";
    }
    return resultado;
}

Se voltarmos a correr o teste o resultado já vai ser este:

E voilá!

A documentação do QUnit pode ser encontrada no site do JQuery, e lá conseguem ver mais tipos de assertions e outros tipos de opções úteis como testes assíncronos: http://docs.jquery.com/Qunit