QUnit - Uso Básico

Agora mostraremos a você um processo passo a passo para obter um kickstart no QUnit usando um exemplo básico.

Importar qunit.js

qunit.js da biblioteca Qunit representa o executor de teste e a estrutura de teste.

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Importar qunit.css

qunit.css da biblioteca Qunit estiliza a página do conjunto de testes para exibir os resultados do teste.

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Adicionar luminária

Adicione dois elementos div com id = "qunit" e "qunit-fixture". Esses elementos div são necessários e fornecem o suporte para os testes.

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Crie uma função para testar

function square(x) {
   return x * x;
}

Criar um caso de teste

Faça uma chamada para a função QUnit.test, com dois argumentos.

Name - O nome do teste para exibir os resultados do teste.
Function - Código de teste de função, com uma ou mais asserções.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Execute o teste

Agora vamos ver o código completo em ação.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Carregue a página no navegador. O executor de teste chamaQUnit.test()quando a página é carregada e adiciona o teste a uma fila. A execução do caso de teste é adiada e controlada pelo executor de teste.

Verifique a saída

Você deve ver o seguinte resultado -

Header- O cabeçalho do conjunto de testes exibe o título da página, uma barra verde quando todos os testes são aprovados. Caso contrário, uma barra vermelha quando pelo menos um teste falhar, uma barra com três caixas de seleção para filtrar os resultados do teste e uma barra azul com o texto navigator.userAgent para exibir os detalhes do navegador.
Hide passed tests checkbox - Para ocultar os casos de teste aprovados e mostrar apenas os casos de teste que falharam.
Check for globals checkbox- Para mostrar a lista de todas as propriedades do objeto janela, antes e depois de cada teste, verifique se há diferenças. A modificação nas propriedades irá falhar no teste.
No try-catch checkbox - Para executar casos de teste fora de um bloco try-catch de modo que, no caso de um teste lançar uma exceção, o testrunner morrerá e mostrará a exceção nativa.
Summary- Mostra o tempo total gasto para executar os casos de teste. Total de casos de teste executados e afirmações com falha.
Contents- Mostra os resultados do teste. Cada resultado de teste tem o nome do teste seguido por afirmações reprovadas, aprovadas e totais. Cada entrada pode ser clicada para obter mais detalhes.