Uma introdução ao teste de frontend

Testando o código de frontend ainda é uma prática confusa para muitos desenvolvedores. Mas com o desenvolvimento de frontend se tornando mais complexo e com os desenvolvedores responsáveis ​​pela estabilidade e consistência, como nunca antes, o teste de frontend deve ser abraçado como um cidadão igual em sua faixa bancária. Nós quebramos suas diferentes opções de teste e explicamos quais situações eles são mais usados.

O teste de frontend é um termo cobertor que cobre uma variedade de estratégias de teste automatizadas. Alguns desses, como testes de unidade e integração, têm sido uma melhor prática aceita dentro da comunidade de desenvolvimento de backend há anos. Outras estratégias são mais recentes e resultam das mudanças em que desenvolvimento de backend e frontend são usados ​​por enquanto.

No final deste artigo, você deve se sentir confortável avaliando quais estratégias de teste se encaixam melhor com sua equipe e codebases. Os exemplos de código a seguir serão escritos usando a estrutura de jasmim, mas as regras e processos são semelhantes na maioria das estruturas de teste.

• Melhores peças de teste de teste de usuário

01. Teste da unidade

Teste de unidade, um dos veteranos de teste, é no nível mais baixo de todos os tipos de testes. Sua finalidade é garantir que os menores bits do seu código (chamadas unidades) funcionem independentemente conforme o esperado.

Imagine que você tenha um LEGO para uma casa. Antes de começar a construir, você quer ter certeza de que cada peça individual é contabilizada (cinco quadrados vermelhos, três retângulos amarelos). O teste da unidade está certificando-se de que conjuntos individuais de código - coisas como validações de entrada e cálculos - estão funcionando como pretendido antes de criar o recurso maior.

Ajuda a pensar em testes unitários em conjunto com o mantra "fazer uma coisa boa". Se você tiver um pedaço de código com uma única responsabilidade, provavelmente deseja escrever um teste de unidade para ele.

Vamos ver o snippet de código a seguir, em que estamos escrevendo um teste de unidade para uma calculadora simples:

 Descreva ("Operações de Calculadora", Função () {
  ele ("deve adicionar dois números", função () {
    Calculadora.init ();
    var result = calculadora.adddnumbers (7,3);
    Espere (resultado) .TOBE (10);
  });
}); 

Na nossa Calculadora Aplicação, queremos garantir que os cálculos sempre funcionem independentemente da maneira que esperamos. No exemplo, queremos ter certeza de que podemos sempre adicionar com precisão dois números juntos.

A primeira coisa que fazemos é descrever a série de testes que vamos correr usando o Jasmine's descrever . Isso cria um conjunto de testes - um agrupamento de testes relacionados a uma determinada área do aplicativo. Para nossa calculadora, agruparemos cada teste de cálculo em sua própria suíte.

Suites são ótimas não apenas para organização de código, mas porque eles permitem que você corra suítes por conta própria. Se você estiver trabalhando em um novo recurso para um aplicativo, você não quer executar todos os testes durante o desenvolvimento ativo, já que isso seria muito demorado. Teste suítes individualmente permite que você se desenvolva mais rapidamente.

Em seguida, escrevemos nossos testes reais. Usando o. isto função, escrevemos o recurso ou a funcionalidade que estamos testando. Nosso exemplo testa a função de adição, portanto, executaremos cenários que confirmam que está funcionando corretamente.

Em seguida, escrevemos nossa asserção de teste, que é onde testamos se nosso código funciona como esperamos. Nós inicializamos nossa calculadora e corri nossa addnumbers. função com os dois números que desejamos adicionar. Armazenamos o número como resultado e depois afirma que isso é igual ao número que esperamos (no nosso caso, 10).

Se addnumbers. Não retorna as figuras corretas, nosso teste falhará. Nós escreveríamos testes semelhantes para nossos outros cálculos - subtração, multiplicação e assim por diante.

02. Testes de aceitação

Se os testes unitários forem como verificar cada peça LEGO, os testes de aceitação estão verificando se cada estágio de construção pode ser concluída. Só porque todas as peças são contabilizadas não significam que as instruções são adequadamente executáveis ​​e permitirão que você construa o modelo final.

Os testes de aceitação passam pelo aplicativo em execução e garantem ações designadas, entradas de usuário e fluxos de usuário são completados e funcionando.

Só porque nossa inscrição addnumbers. A função retorna o número certo, não significa que a interface da calculadora definitivamente funcione conforme o esperado para dar o resultado certo. E se nossos botões estiverem desativados ou o resultado do cálculo não for exibido? Os testes de aceitação nos ajudam a responder a essas perguntas.

 Descreva ("Inscrever o estado de falha", função () {
  ("Não deve permitir a inscrição por informações inválidas", função () {
    var página = visita ("/ home");
    página.fill_in ("Entrada [Name = 'E-mail']", "não um email");
    Page.Click ("Botão [Tipo = Submit]");
    Page.Click ("Botão [Tipo = Submit]");
    Espere (página.Find ("# signuperror"). Hasclass ("oculto")). Tobefalsy ();
  });
}); 

A estrutura parece muito semelhante ao nosso teste de unidade: definimos uma suíte com descrever e depois escreva nosso teste dentro do isto função, então execute algum código e verifique seu resultado.

Em vez de testar em torno de funções e valores específicos, no entanto, aqui estamos testando para ver se um fluxo de trabalho específico (um fluxo de inscrição) se comporta conforme o esperado quando preenchemos algumas informações ruins. Há ações mais minutos acontecendo aqui, como validações de formulário que podem ser testadas em unidade, bem como qualquer manuseio para o que mostra nosso estado de erro, demonstrado por um elemento com o ID Signuperror. .

Os testes de aceitação são uma ótima maneira de garantir que os fluxos de experiência chave estejam sempre funcionando corretamente. Também é fácil adicionar testes ao redor de casos de borda e ajudar suas equipes de QA a encontrá-los em sua inscrição.

Ao considerar o que escrever testes de aceitação, suas histórias de usuário são um ótimo lugar para começar. Como o usuário interage com seu site e qual é o resultado esperado dessa interação? É diferente de testes unitários, que é melhor combinado com algo como requisitos de função, como os requisitos em torno de um campo validado.

03. Teste de regressão visual

Como mencionado na introdução, alguns tipos de testes são exclusivos do mundo do frontend. O primeiro deles é o teste de regressão visual. Isso não testa seu código, mas também compara o resultado renderizado do seu código - sua interface - com a versão renderizada do seu aplicativo em produção, encenação ou um ambiente local pré-alterado.

Isso normalmente é feito comparando capturas de tela tiradas em um navegador sem cabeça (um navegador que é executado no servidor). As ferramentas de comparação de imagens detectam quaisquer diferenças entre os dois tiros.

Usando uma ferramenta, como Phantomcss, seus testes especificam onde o corredor de teste deve navegar, pegar uma captura de tela e a estrutura mostra as diferenças que surgiram nessas exibições.

 Casper.start ("/ home"). Então (função () {

  // estado inicial de forma
  Phantomcss.Screenshot ("# SignupForm", "Inscreva-se no formulário");

  // Bata o botão de inscrição (deve acionar o erro)
  casper.click ("Botão # Signup");

  // pegue uma captura de tela do componente UI
  Phantomcss.Screenshot ("# SignupForm", "Inscreva-se erro de formulário");

  // Preencha o formulário por nome Atributos e amp; enviar
  Casper.fill ("# SignupForm", {
    Nome: "Alicia Sedlock",
    E-mail: "[email protected]"
  }, verdade);

  // Tome uma segunda captura de tela do estado de sucesso
 Phantomcss.Screenshot ("# SignupForm", "Inscreva-se o sucesso do formulário");
}); 

Ao contrário da aceitação e teste de unidade, o teste de regressão visual é difícil de se beneficiar se você estiver construindo algo novo. Como sua interface do usuário verá mudanças rápidas e drásticas durante todo o curso do desenvolvimento ativo, você provavelmente salvará esses testes para quando partes da interface estiverem visuais. Portanto, os testes de regressão visual são os últimos testes que você deve escrevendo.

Atualmente, muitas ferramentas de regressão visual exigem um pouco de esforço manual. Você pode ter que executar sua captura de tela antes de iniciar o desenvolvimento em sua filial ou atualizar manualmente screenshots de linha de base à medida que você faz alterações na interface.

Isso é simplesmente por causa da natureza do desenvolvimento - mudanças no Ui. Pode ser intencional, mas os testes só sabem "sim, isso é o mesmo" ou "não, isso é diferente". No entanto, se regressões visuais são um ponto de dor dentro de sua aplicação, essa abordagem pode salvar o tempo e o esforço de sua equipe em geral, comparado a regressões constantemente fixadoras.

04. Testes de acessibilidade e desempenho

Como a cultura e a conscientização em torno do teste de Frontend crescem, então nossa capacidade de testar vários aspectos do ecossistema. Dado o foco aumentado em acessibilidade e desempenho em nossa cultura técnica, integrando isso em sua suíte de testes ajuda a garantir que esses conceitos continuem sendo uma prioridade.

Se você tiver problemas que impeça os orçamentos de desempenho ou os padrões de acessibilidade, esta é uma maneira de manter esses requisitos na vanguarda das mentes das pessoas.

Ambas as verificações podem ser integradas ao seu fluxo de trabalho com ferramentas de construção, como grunhir e gole, ou semi-manualmente dentro do seu terminal. Para orçamentos de desempenho, uma ferramenta como Grunt-PerfBudget fornece a capacidade de executar seu site através da WebPageTest automaticamente dentro de uma tarefa especificada.

No entanto, se você não estiver usando um corredor de tarefas, também poderá agarrar o PerfBudget como um módulo NPM independente e executar os testes manualmente.

Aqui está o que parece executar isso através do terminal:

 PerfBudget --url http://www.aliciabilidade.com --Key [WebPagetest API Key] --speedindex 2000 --render 400

E da mesma forma, configurando pelo grunhido:

PerfBudget: {
  predefinição: {
    Opções: {
      URL: 'http://aliciabilidade.com',
      Chave: Key 'WebPagetest API',
      orçamento: {
        SpeedIndex: '2000',
        Render: '400'
      }
    }
  }
}

[...]

Grunt.RegisterTask ('default', ['jshint', 'perfbudget']); 

As mesmas opções estão disponíveis para testes de acessibilidade. Então, para pa11y, você pode executar o PA11Y. comando no seu navegador para saída ou configurar uma tarefa para automatizar esta etapa. No terminal:

 PA11Y Aliciabilidade.com

// como um comando javascript após a instalação do npm

var pa11y = requer ('pa11y'); // requer pa11y.
var teste = pa11y (); // obter pa11y pronto para definir

teste.run ('aliciabilidade.com', função (erro, resultados) {
  // log nosso analisar seus resultados
}); 

A maioria das ferramentas nessas categorias é bastante plug-and-play, mas também fornece a opção de personalizar como os testes são executados - por exemplo, você pode configurá-los para ignorar determinados padrões WCAG.

Próxima página: Como introduzir testes em seu fluxo de trabalho

• 1.
• 2.

Pagina atual: Diferentes tipos de testes de frontend (e quando usá-los)