Testes

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A página da Ribeira já abre. Falta perguntar: ela ainda faz o que combinamos? Testar é conferir o comportamento, não “olhar se está bonito”.

Pasta: exemplos/34-testes/. Abra index.html. Três linhas ok devem aparecer. Leia, copie, mude um número no teste, preveja, recarregue e confira.

O que você vai aprender

• Dizer por que testar, mesmo num site pequeno.
• Fazer um teste manual de teclado na página.
• Ler testes.js e a função afirmar.
• Entender automação como ideia, sem serviço pago.

Por que testar

Um teste é uma pergunta com resposta esperada. “O contador começa em zero?” Se a resposta mudar depois de um conserto, você vê na hora.

Sem teste, um clique que funcionava ontem quebra e ninguém nota. Com teste, a pasta deste capítulo mostra ok ou falha na própria página.

A Biblioteca da Ribeira, fictícia, registra empréstimos do dia. Não há banco. Não há usuário real. O contador mora na memória da página.

Teste manual no teclado

Antes do arquivo de testes, use o teclado.

1. Abra index.html.
2. Aperte Tab até o botão “Registrar empréstimo”.
3. Aperte Enter.
4. Confira se o total passa de 0 para 1.

O foco precisa ser visível. Se você não achar o botão sem o mouse, a página falhou no teste manual. Corrija o contraste ou o foco antes de avançar.

Recarregue. O total volta a 0. Isso é esperado: o número não está gravado no disco.

Pare e experimente. Tab, Enter, Tab de novo. Preveja um único controle focável além dos links do navegador. O botão deve ser esse controle.

Erro comum: testar só com o mouse. Quem usa teclado ou leitor de tela precisa do mesmo fluxo.

testes.js e afirmar

O contador está em contador.js:

function criarContador() {
  let total = 0;
  return {
    valor: function () { return total; },
    emprestar: function () { total += 1; return total; }
  };
}
const contador = criarContador();
const botao = document.getElementById("emprestar");
if (botao) {
  botao.addEventListener("click", function () {
    document.getElementById("total").textContent = String(contador.emprestar());
  });
}

criarContador devolve um objeto com valor e emprestar. A página usa uma instância. Os testes usam outra, isolada.

O arquivo testes.js:

function afirmar(condicao, nome) {
  const linha = (condicao ? "ok " : "falha ") + nome;
  const caixa = document.getElementById("resultado");
  if (caixa) caixa.textContent += linha + "\n";
  else console.log(linha);
}
const prova = criarContador();
afirmar(prova.valor() === 0, "começa em zero");
afirmar(prova.emprestar() === 1, "primeiro empréstimo");
afirmar(prova.emprestar() === 2, "segundo empréstimo");

afirmar escreve ok ou falha mais o nome da prova. Três provas. Três linhas. A página index.html carrega os dois scripts no fim do body.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contador testável</title>
  </head>
  <body>
    <h1>Empréstimos do dia</h1>
    <p>Total: <span id="total">0</span></p>
    <button type="button" id="emprestar">Registrar empréstimo</button>
    <pre id="resultado"></pre>
    <script src="contador.js"></script>
    <script src="testes.js"></script>
  </body>
</html>

type="button" evita envio de form. lang="pt-BR" e viewport continuam obrigatórios.

Pare e experimente. Em testes.js, troque === 0 por === 1. Recarregue. Preveja falha começa em zero. Depois devolva 0.

Erro comum: carregar testes.js antes de contador.js. criarContador ainda não existe e o console mostra erro.

Automação, só o conceito

Automação é um programa rodando os testes sem você clicar. python manage.py test no Django já foi um exemplo. Aqui o testes.js roda sozinho ao abrir a página.

Serviços de grade de navegadores na nuvem, pagos, não são o caminho deste volume. Você não precisa de laboratório remoto para afirmar três linhas. O arquivo na pasta basta.

Se no futuro um time usar um servidor de CI, a ideia é a mesma: o computador pergunta e compara. A conta paga não é requisito para aprender.

Quando as três linhas ok aparecerem e o Tab alcançar o botão, este volume (e o volume) fecha o percurso de qualidade. Continue em 127.0.0.1 se servir a pasta. Não publique dados reais.

Atividades

1. Por que o volume pede teste além de “olhar a tela”?
2. O que o teste de teclado precisa alcançar nesta página?
3. O que afirmar escreve quando a condição é verdadeira?

Respostas comentadas

1. Porque um conserto pode quebrar o contador sem você notar no visual. A pergunta automática (ok ou falha) mostra o comportamento.
2. O botão “Registrar empréstimo”, com Tab e Enter, e o total subindo. Sem mouse.
3. A linha ok seguida do nome da prova, na caixa #resultado. Se a condição falha, escreve falha.

O arquivo completo

Referência do exemplo 34-testes, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Contador testável</title>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Empréstimos do dia</h1>
<p>Total: <span id="total">0</span></p>
<button id="emprestar" type="button">Registrar empréstimo</button>
<pre id="resultado"></pre>


</main><script src="contador.js"></script><script src="testes.js"></script></body>
</html>

testes.js

function afirmar(condicao, nome) {
  const linha = (condicao ? "ok " : "falha ") + nome;
  const caixa = document.getElementById("resultado");
  if (caixa) caixa.textContent += linha + "\n";
  else console.log(linha);
}
const prova = criarContador();
afirmar(prova.valor() === 0, "começa em zero");
afirmar(prova.emprestar() === 1, "primeiro empréstimo");
afirmar(prova.emprestar() === 2, "segundo empréstimo");