QUnit - Guia Rápido

O teste é o processo de verificar a funcionalidade do aplicativo, se está funcionando de acordo com os requisitos e para garantir que, no nível do desenvolvedor, o teste de unidade entre em cena. O teste de unidade é o teste de uma única entidade (classe ou método). O teste de unidade é muito essencial para cada organização de software para oferecer produtos de qualidade aos seus clientes.

O teste de unidade pode ser feito de duas maneiras, conforme mencionado na tabela a seguir.

Teste manual Teste automatizado
Executar os casos de teste manualmente sem qualquer suporte de ferramenta é conhecido como teste manual. Ter suporte de ferramenta e executar os casos de teste usando a ferramenta de automação é conhecido como teste de automação.
Demorado e tedioso. Como os casos de teste são executados por recursos humanos, é muito lento e tedioso. Automação rápida. Executa casos de teste significativamente mais rápido do que recursos humanos.
Grande investimento em recursos humanos. Como os casos de teste precisam ser executados manualmente, mais testadores são necessários. Menor investimento em recursos humanos. Casos de teste são executados usando ferramenta de automação, portanto, menos número de testadores são necessários.
Menos confiável, pois os testes podem não ser executados com precisão todas as vezes devido a erros humanos. Mais confiável. Os testes de automação executam exatamente a mesma operação sempre que são executados.
Não programável. Nenhuma programação pode ser feita para escrever testes sofisticados, que buscam informações ocultas. Programável. Os testadores podem programar testes sofisticados para revelar informações ocultas.

O que é QUnit?

QUnit é uma estrutura de teste de unidade para linguagem de programação JavaScript. É importante no desenvolvimento orientado a testes e é usado por projetos jQuery, jQuery UI e jQuery Mobile. QUnit é capaz de testar qualquer base de código JavaScript genérica.

QUnit promove a ideia de "primeiro testar e depois codificar", que enfatiza a configuração dos dados de teste para uma parte do código, que pode ser testada primeiro e depois implementada. Esta abordagem é como "teste um pouco, codifique um pouco, teste um pouco, codifique um pouco ..." o que aumenta a produtividade do programador e a estabilidade do código do programa, reduzindo o estresse do programador e o tempo gasto na depuração.

Características do QUnit

QUnit é uma estrutura de código aberto usada para escrever e executar testes. A seguir estão seus recursos mais importantes -

  • QUnit fornece asserções para testar os resultados esperados.

  • QUnit fornece acessórios de teste para testes em execução.

  • Os testes QUnit permitem escrever código mais rápido, o que aumenta a qualidade.

  • QUnit é elegantemente simples. É menos complexo e leva menos tempo.

  • Os testes QUnit podem ser executados automaticamente e eles verificam seus próprios resultados e fornecem feedback imediato. Não há necessidade de vasculhar manualmente um relatório de resultados de teste.

  • Os testes QUnit podem ser organizados em suítes de teste contendo casos de teste e até mesmo outras suítes de teste.

  • O QUnit mostra o progresso do teste em uma barra que fica verde se o teste está indo bem e fica vermelha quando um teste falha.

O que é um caso de teste de unidade?

Um Caso de Teste de Unidade é uma parte do código que garante que outra parte do código (método) funcione conforme o esperado. Para alcançar os resultados desejados rapidamente, é necessária uma estrutura de teste. QUnit é uma estrutura de teste de unidade perfeita para linguagem de programação JavaScript.

Um caso de teste de unidade escrito formal é caracterizado por uma entrada conhecida e por uma saída esperada, que é trabalhada antes da execução do teste. A entrada conhecida deve testar uma pré-condição e a saída esperada deve testar uma pós-condição.

Deve haver pelo menos dois casos de teste de unidade para cada requisito: um teste positivo e um teste negativo. Se um requisito tiver sub-requisitos, cada sub-requisito deve ter pelo menos dois casos de teste como positivos e negativos.

Existem duas maneiras de usar o QUnit.

  • Local Installation - Você pode baixar a biblioteca QUnit em sua máquina local e incluí-la em seu código HTML.

  • CDN Based Version - Você pode incluir a biblioteca QUnit em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

  • Vou ao https://code.jquery.com/qunit/ para baixar a versão mais recente disponível.

  • Coloque o baixado qunit-git.js e qunit-git.css arquivo em um diretório do seu site, por exemplo, / jquery.

Exemplo

Você pode incluir qunit-git.js e qunit-git.css arquivos em seu arquivo HTML da seguinte forma -

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Isso produzirá o seguinte resultado -

Versão baseada em CDN

Você pode incluir a biblioteca QUnit em seu código HTML diretamente da Content Delivery Network (CDN).

Estamos usando a versão jQuery CDN da biblioteca em todo este tutorial.

Exemplo

Vamos reescrever o exemplo acima usando a biblioteca QUnit do jQuery CDN.

<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>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -

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 no 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.

APIs importantes de QUnit

Algumas das categorias importantes do QUnit são -

Sr. Não. Categoria Funcionalidade
1 Afirmar Um conjunto de métodos de declaração.
2 Controle assíncrono Para operações assíncronas.
3 Callbacks Ao integrar QUnit em outras ferramentas, como servidores CI, esses retornos de chamada podem ser usados ​​como uma API para ler os resultados do teste.
4 Configuração e utilitários Esses métodos e propriedades são usados ​​como auxiliares de utilitário e para configurar o QUnit. Por exemplo, para ajustar o comportamento do tempo de execução diretamente, estenda a API QUnit por meio de asserções personalizadas, etc.
5 Teste Para operações de teste.

Categoria: Assert

Ele fornece um conjunto de métodos de declaração.

Sr. Não. Métodos e Descrição
1

async()

Instrua QUnit para esperar por uma operação assíncrona.
2

deepEqual()

Uma comparação recursiva profunda, trabalhando em tipos primitivos, matrizes, objetos, expressões regulares, datas e funções.
3

equal()

Uma comparação não estrita, aproximadamente equivalente a assertEquals de JUnit.
4

expect()

Especifique quantas asserções devem ser executadas em um teste.
5

notDeepEqual()

Uma comparação recursiva profunda invertida, trabalhando em tipos primitivos, matrizes, objetos, expressões regulares, datas e funções.
6

notEqual()

Uma comparação não estrita, verificando a desigualdade.
7

notOk()

Uma verificação booleana, inversa de ok () e assert.ok () de CommonJS, e equivalente a assertFalse () de JUnit. Aprovado se o primeiro argumento for falso.
8

notPropEqual()

Uma comparação estrita das próprias propriedades de um objeto, verificando se há desigualdade.
9

notStrictEqual()

Uma comparação estrita, verificando a desigualdade.
10

ok()

Uma verificação booleana, equivalente a assert.ok () do CommonJS e assertTrue () do JUnit. Aprovado se o primeiro argumento for verdadeiro.
11

propEqual()

Uma comparação estrita de tipo e valor das propriedades de um objeto.
12

push()

Relate o resultado de uma declaração customizada.
13

strictEqual()

Uma comparação estrita de tipo e valor.
14

throws()

Teste se um retorno de chamada lança uma exceção e, opcionalmente, compare o erro lançado.

Categoria: Controle Assíncrono

Ele fornece um conjunto de operações assíncronas.

Sr. Não. Métodos e Descrição
1

async()

Instrua QUnit para esperar por uma operação assíncrona.
2

QUnit.asyncTest()

DESCONTINUADO: adicione um teste assíncrono para ser executado. O teste deve incluir uma chamada para QUnit.start ().
3

QUnit.start()

PARCIALMENTE DESCONTINUADO: Comece a executar os testes novamente depois que o testrunner for interrompido. Veja QUnit.stop () e QUnit.config.autostart.
4

QUnit.stop()

DESCONTINUADO: Aumente o número de chamadas QUnit.start () que o testrunner deve esperar antes de continuar.
5

QUnit.test()

Adicione um teste para executar.

Categoria: Callbacks

Ao integrar QUnit em outras ferramentas como servidores CI, esses retornos de chamada podem ser usados ​​como uma API para ler os resultados do teste.

Sr. Não. Métodos e Descrição
1

QUnit.begin()

Registre um retorno de chamada para disparar sempre que o conjunto de testes começar.
2

QUnit.done()

Registre um retorno de chamada para disparar sempre que o conjunto de testes terminar.
3

QUnit.log()

Registre um retorno de chamada para disparar sempre que uma asserção for concluída.
4

QUnit.moduleDone()

Registre um retorno de chamada para disparar sempre que um módulo terminar.
5

QUnit.moduleStart()

Registre um retorno de chamada para disparar sempre que um módulo começar.
6

QUnit.testDone()

Registre um retorno de chamada para disparar sempre que um teste terminar.
7

QUnit.testStart()

Registre um retorno de chamada para disparar sempre que um teste começar.

Categoria: Configuração e Utilitários

Esses métodos e propriedades são usados ​​como auxiliares de utilitário e para configurar o QUnit. Por exemplo, para ajustar o comportamento do tempo de execução diretamente, estenda a API QUnit por meio de asserções personalizadas, etc.

Sr. Não. Métodos e Descrição
1

QUnit.assert

Namespace para asserções QUnit.
2

QUnit.config

Configuração para QUnit.
3

QUnit.dump.parse()

Despejo de dados avançado e extensível para JavaScript.
4

QUnit.extend()

Copie as propriedades definidas pelo objeto mixin no objeto alvo.
5

QUnit.init()

DESCONTINUADO: Reinicialize o executor de teste.
6

QUnit.push()

DESCONTINUADO: relata o resultado de uma asserção personalizada.
7

QUnit.reset()

DESCONTINUADO: Reinicialize o dispositivo de teste no DOM.
8

QUnit.stack()

Retorna uma string de linha única que representa o rastreamento de pilha (pilha de chamadas).

Categoria: Teste

Ele fornece um conjunto de operações de teste.

Sr. Não. Métodos e Descrição
1

QUnit.assert

Namespace para asserções QUnit.
2

QUnit.asyncTest()

DESCONTINUADO: adicione um teste assíncrono para ser executado. O teste deve incluir uma chamada para QUnit.start ().
3

QUnit.module()

Testes relacionados ao grupo sob um único rótulo.
4

QUnit.only()

Adiciona um teste para ser executado exclusivamente, evitando que todos os outros testes sejam executados.
5

QUnit.skip()

Adiciona um objeto semelhante a um teste a ser ignorado.
6

QUnit.test()

Adiciona um teste para execução.

Todas as assertivas estão na categoria Assert.

Esta categoria fornece um conjunto de métodos de asserção úteis para escrever testes. Apenas as afirmações com falha são registradas.

Sr. Não. Métodos e Descrição
1

async()

Instrua QUnit para esperar por uma operação assíncrona.
2

deepEqual()

Uma comparação recursiva profunda, trabalhando em tipos primitivos, matrizes, objetos, expressões regulares, datas e funções.
3

equal()

Uma comparação não estrita, aproximadamente equivalente a assertEquals de JUnit.
4

expect()

Especifique quantas asserções devem ser executadas em um teste.
5

notDeepEqual()

Uma comparação recursiva profunda invertida, trabalhando em tipos primitivos, matrizes, objetos, expressões regulares, datas e funções.
6

notEqual()

Uma comparação não estrita, verificando a desigualdade.
7

notOk()

Uma verificação booleana, inversa de ok () e assert.ok () de CommonJS, e equivalente a assertFalse () de JUnit. Aprovado se o primeiro argumento for falso.
8

notPropEqual()

Uma comparação estrita das próprias propriedades de um objeto, verificando se há desigualdade.
9

notStrictEqual()

Uma comparação estrita, verificando a desigualdade.
10

ok()

Uma verificação booleana, equivalente a assert.ok () do CommonJS e assertTrue () do JUnit. Aprovado se o primeiro argumento for verdadeiro.
11

propEqual()

Uma comparação estrita de tipo e valor das propriedades de um objeto.
12

push()

Relate o resultado de uma declaração customizada.
13

strictEqual()

Uma comparação estrita de tipo e valor.
14

throws()

Teste se um retorno de chamada lança uma exceção e, opcionalmente, compare o erro lançado.

Vamos tentar cobrir a maioria dos métodos mencionados acima em um exemplo.

<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>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Este capítulo explica o procedimento de execução de métodos em QUnit, que indica qual método é chamado primeiro e qual é depois disso. A seguir está o procedimento de execução dos métodos da API de teste QUnit com um exemplo.

<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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

É assim que funciona o procedimento de execução QUnit.

  • O módulo é usado para agrupar casos de teste.

  • beforeEach() método é executado para cada caso de teste, no entanto, antes de executar o caso de teste.

  • afterEach() método é executado para cada caso de teste, porém após a execução do caso de teste.

  • Entre beforeEach() e afterEach() cada caso de teste é executado.

  • Chamando QUnit.module() novamente, simplesmente redefina quaisquer funções beforeEach / afterEach definidas por outro módulo anteriormente.

Às vezes acontece que nosso código não está pronto e o caso de teste escrito para testar esse método / código falha se executado. QUnit.skipajuda nisso. Um método de teste escrito usando o método Skip não será executado. Vamos ver o método Skip 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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Às vezes acontece que nosso código não está pronto e o caso de teste escrito para testar esse método / código falha, se executado. QUnit.onlyajuda nisso. Um método de teste escrito usando apenas o método será executado, enquanto outros testes não serão executados. Se mais de um único método for especificado, apenas o primeiro será executado. Vamos ver apenas o método 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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Para cada operação assíncrona em QUnit.test() callback, use assert.async(), que retorna uma função "concluída" que deve ser chamada quando a operação for concluída. assert.async () aceita contagens de chamadas como um parâmetro. O retorno de chamada retornado de assert.async () lançará um erro, se for invocado mais do que a contagem de chamadas aceitas, se fornecida. Cadadone()chamada é adicionada à contagem de chamadas. Depois que cada chamada for concluída, o teste estará concluído.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Podemos usar assert.expect()função para verificar o número de afirmações feitas no teste. No exemplo a seguir, esperamos que três asserções sejam feitas no teste.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Ao integrar QUnit em outras ferramentas como servidores CI, esses retornos de chamada podem ser usados ​​como uma API para ler os resultados do teste. A seguir está o procedimento de execução do método da API de retorno de chamada QUnit com um exemplo.

<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>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

Módulos com funções de teste agrupadas são usados ​​para definir módulos aninhados. QUnit executa testes no módulo pai antes de aprofundar nos aninhados, mesmo se eles forem declarados primeiro. obeforeEach e afterEachretornos de chamada em uma chamada de módulo aninhado serão empilhados no modo LIFO (último a entrar, primeiro a sair) para os ganchos pai. Você pode especificar o código a ser executado antes e depois de cada teste usando o argumento e ganchos.

Os ganchos também podem ser usados ​​para criar propriedades que serão compartilhadas no contexto de cada teste. Quaisquer propriedades adicionais no objeto ganchos serão adicionadas a esse contexto. O argumento hooks é opcional se você chamar QUnit.module com um argumento callback.

O retorno de chamada do módulo é invocado tendo o contexto como ambiente de teste, com as propriedades do ambiente copiadas para os testes do módulo, ganchos e módulos aninhados.

<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>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

Verifique a saída

Você deve ver o seguinte resultado -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved