Introdução ao teste de unidade JavaScript usando o Qunit
Geralmente, é uma boa prática ter testes de unidade automatizados durante o desenvolvimento do código. No teste de unidade, testamos a menor unidade do código para um comportamento específico. O teste de unidade nos ajuda a encontrar bugs no código no início do ciclo de desenvolvimento.
Dhananjay Kumar
8min read
Essencialmente, um teste de unidade é o pedaço de código que verifica o comportamento de uma determinada unidade do código na fase de desenvolvimento. Os testes de unidade podem ser executados pelo executor de teste várias vezes para verificar o comportamento de uma unidade de código específica para diferentes conjuntos de entrada. Hoje em dia, a maioria dos desenvolvedores de aplicativos adere à abordagem Agile e TDD.
Na abordagem de desenvolvimento orientado a testes, você primeiro escreve um teste de unidade e, quando ele falha, você escreve um código de aplicativo para passar no teste. Em JavaScript, o teste de unidade não é muito diferente de outras linguagens de programação. Para fazer testes unitários ou TDD em JavaScript, você precisa de uma estrutura de teste. Existem muitas estruturas de teste JavaScript populares disponíveis, incluindo:
- Mocha
- Jasmine
- QUnit
- JSUnit
Neste post, vamos nos concentrar no QUnit, um framework de teste unitário fornecido pela equipe do jQuery. Ele fornece um rico conjunto de asserções de teste, interface do usuário do conjunto de testes altamente informativa, suporte de retorno de chamada síncrono e assíncrono, suporte ao módulo de teste e muito mais. Neste post, abordaremos o seguinte:
- Escrevendo o primeiro teste de unidade
- Subestimando a UI do conjunto de testes
- Uma olhada nas afirmações
- Agrupando os testes
Escrevendo o primeiro teste
Vamos começar configurando o QUnit para o teste de unidade JavaScript. Você precisa adicionar uma referência aos dois arquivos QUnit na página HTML. Você pode ter arquivos localmente no projeto ou pode usar a referência da CDN do jQuery. Vou usar a opção CDN conforme mostrado abaixo:
Source file
<head>
<title>Test Page</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.16.0.css">
<script src="//code.jquery.com/qunit/qunit-1.16.0.js"></script>
</head>
Em seguida, você precisa de dois div no corpo da página HTML e um deve ter o id qunit.
Source file
1 <body> 2 <div id="qunit"></div> 3 <div id="qunit-fixture"></div> 4 </body>
Adicionamos referência de qunit.js e qunit.css para configurar o ambiente de teste. Qunit.js é o executor de teste e a estrutura de teste, e qunit.css fornece estilo à página do conjunto de testes.
Agora vamos escrever um teste básico. Estou escrevendo os testes no arquivo test.js separado e adicionei a referência do arquivo na página HTML. Um teste básico de saudação é escrito conforme mostrado abaixo:
Source file
QUnit.test("hello test", function (assert) {
assert.ok(1 == "1", "Passed!");
});
QUnit.test usa dois parâmetros de entrada. O primeiro parâmetro é o nome do teste e o segundo parâmetro é uma função. A função contém o código de teste e pode conter qualquer número de asserções.
No teste acima, incluí uma afirmação simples de ok. A asserção ok afirmará true, se o argumento for avaliado como true. Ele também usa o parâmetro de entrada de cadeia de caracteres para exibir a mensagem do resultado do teste. Quando formos em frente e executarmos o teste, devemos obter a saída conforme mostrado abaixo:
No conjunto de testes, o QUnit está dando a mensagem de que um em cada um dos testes foi aprovado. Agora vamos alterar o teste para fazê-lo falhar e examinar como o QUnit fornece informações sobre o teste com falha. Modifiquei o teste conforme mostrado abaixo:
Source file
QUnit.test("hello test", function (assert) {
assert.ok(1 == "2", "Passed!");
});
Mais uma vez, quando eu executar o teste, o QUnit fornecerá informações sobre o teste com falha no conjunto de testes, conforme mostrado abaixo:
Para o teste com falha, o QUnit está nos fornecendo as seguintes informações:
- Resultado esperado
- Actual result
- Diferença
- Fonte do teste com falha
Usando essas informações, podemos encontrar facilmente a fonte e o motivo da falha no teste.
Understanding the Test Suite UI
Na suíte de testes, o QUnit exibirá os resultados dos testes. O cabeçalho da suíte de testes exibe o título da página de teste e, abaixo do cabeçalho, você encontrará uma barra verde ou vermelha. A barra verde indica que todos os testes foram aprovados, enquanto a barra vermelha indica que pelo menos um teste falhou. Abaixo da barra, há três caixas de seleção:
- Hide passed tests
- Verificar globais
- Sem try-catch
Você pode ocultar todos os testes aprovados do conjunto de testes marcando a primeira caixa. Isso é muito útil quando você tem muitos testes e deseja encontrar poucos testes com falha no conjunto.
Ao marcar a caixa de seleção Verificar globais, você instrui o QUnit a fazer uma lista de todas as propriedades do objeto windows antes e depois da execução do teste. O QUnit verificará as diferenças e, se encontrar alguma, o teste falhará.
Ao marcar a caixa de seleção Sem try-catch, você pode instruir o QUnit a lançar uma exceção nativa quando o teste lançar a exceção. Nesta opção, o QUnit garantirá que, quando o executor de teste morrer devido a uma exceção nos testes, ele lance uma exceção nativa no navegador, o que pode ser útil na depuração.
Abaixo do cabeçalho da caixa de seleção, uma barra azul exibe informações sobre navigator.userAgent. Abaixo da barra azul há um resumo do teste, que nos fornece informações sobre o tempo total necessário para executar todos os testes. Ele também fornece informações sobre o número de asserções com falha e asserções aprovadas.
Abaixo do resumo do teste estão os resultados do teste, que são exibidos em forma de número com o nome do teste ao lado do número. Ao lado do nome do teste no número de chaves da asserção aprovada, o número de asserções com falha e o número total de asserções são exibidos. No canto direito, você encontrará o tempo gasto pelo teste específico. No resultado do teste para cada asserção com falha, o resultado esperado, o resultado real, a diferença e a origem do teste com falha são exibidos.
Assertions
O QUnit nos fornece diferentes tipos de afirmações. As asserções são o componente mais importante do teste de unidade. Em um teste, afirmamos o resultado esperado com o resultado real, e a estrutura de teste compara esses dois resultados para produzir os resultados. O QUnit nos fornece cerca de 13 afirmações, incluindo:
- ok()
- equal()
- deepEqual()
- async()
- expect()
- notDeepEqual()
- notEqual()
- notPropEqual()
- notStrictEqual()
- propEqual()
- push()
- lança()
- strictEqual()
Na próxima seção, daremos uma olhada em dois deles e nos concentraremos nas afirmações em outros artigos. A mais simples das afirmações é ok(). São necessários dois argumentos: o primeiro é a expressão a ser avaliada e o segundo argumento opcional é a mensagem do resultado do teste.
Se a expressão for passada porque o primeiro argumento é avaliado como verdadeiro, a declaração será aprovada ou falhará. Algumas das afirmações ok são mostradas abaixo:
Source file
QUnit.test("Test 1", function (assert) {
assert.ok(1 == "1", "1 is ok with 1 : OK");
assert.ok(true, "true is ok : OK");
assert.ok(false, "false is not ok : fails");
assert.ok(NaN, "NaN is not ok : fails");
assert.ok(null, "null is not ok : fails");
assert.ok(undefined, "undefined is not ok : fails");
});
Na suíte de testes, você pode ver que para NaN, indefinido e nulo etc. ok a asserção falha.
Vamos dar uma olhada na afirmação igual. A asserção equal usa o operador == para comparar os argumentos reais e esperados. In leva dois argumentos obrigatórios e um opcional. O primeiro argumento é o valor real, o segundo é o valor esperado e o terceiro argumento opcional é a mensagem do resultado do teste.
Algumas das afirmações iguais são mostradas abaixo. Aqui estou passando dois argumentos para testar se eles são iguais ou não:
Source file
QUnit.test("Test 1", function (assert) {
assert.equal(1,1, "1 is equal to 1 : PASS");
assert.equal(null,null, "null is equal to null : PASS");
assert.equal(0,false, "0 is equal to false : PASS");
assert.equal(0, "zero", "0 is not equal to zero : FAILS");
assert.equal("", "","Empty is equal to Empty : PASS");
});
Na suíte de testes, você pode ver o comportamento da asserção igual.
Agrupando os testes
Os testes podem ser agrupados logicamente usando o QUnit.module(). Um determinado grupo de teste pode ser executado por conta própria. É uma boa ideia agrupar os testes para evitar efeitos colaterais. Usando o QUnit.module, os testes podem ser agrupados conforme mostrado abaixo:
Source file
QUnit.module("Test Group 1");
QUnit.test("Test 1 TG1", function (assert) {
assert.equal(1,1, "1 is equal to 1 : PASS");
});
QUnit.test("Test 2 TG1", function (assert) {
assert.ok(true, "this test will return true : PASS");
});
QUnit.module("Test Group 2");
QUnit.test("Test 1 TG2", function (assert) {
assert.equal(null,null, "null is equal to null : PASS");
});
QUnit.test("Test 2 TG2", function (assert) {
assert.ok(false, "this test will return true : FAIL");
});
Na UI do conjunto de testes, é possível visualizar os resultados do teste como agrupados no grupo de teste.
Você também pode filtrar para visualizar os resultados do teste de um grupo de teste específico selecionando um grupo de teste no menu suspenso abaixo da barra vermelha/verde.
Conclusão
Neste post começamos com o teste unitário de JavaScript com QUnit. Aprendemos a escrever nosso primeiro teste de unidade, discutimos a interface do usuário do conjunto de testes, exploramos os diferentes tipos de asserções e revisamos o agrupamento de testes. Fique atento aos artigos futuros, onde discutiremos outros tópicos de teste de unidade e QUnit em detalhes.