Como executar testes de unidade no Angular

A maioria das equipes de desenvolvimento concordará que o teste de unidade em Angular é demorado e muitos também concordarão que é desnecessário - e decidirão ignorá-lo. Dependendo da escala do seu projeto e das habilidades de programação das pessoas que trabalham nele, não testar seu aplicativo Angular pode ser a coisa certa a fazer. Mas, geralmente, o teste de unidade é extremamente valioso para evitar a criação de uma base de código mal projetada que resultará em depuração e correções de código muito mais caras posteriormente. Então, você prefere arriscar a qualidade do seu código ou prefere entender o código que está desenvolvendo com antecedência, ajudando a encontrar bugs no código no início do ciclo de desenvolvimento?

Eu digo, não subestime o teste de unidade, especialmente ao trabalhar em um grande aplicativo de Angular, big data ou projetos de ciência de dados.

Try Ignite UI for Angular

O quadro geral: o que é teste de unidade?

No desenvolvimento de software, o teste de unidade (também chamado de teste isolado) é realizado para garantir que seu aplicativo esteja funcionando da maneira que deveria, eliminando quaisquer bugs em unidades separadas do código na fase de desenvolvimento. Um teste de unidade pode ser executado várias vezes para verificar o comportamento de uma unidade de código específica para diferentes conjuntos de entrada.

Ele aborda problemas como capturar valores ausentes ou perguntas como "A função de filtro restringe os valores da maneira certa?" ou mais complexos em aplicativos de ciência de dados, como "Os retornos da função têm formas conforme o esperado?" e muitos outros.

Quanto ao motivo pelo qual você precisa de testes unitários, aqui está o que eu acho:

• A execução de testes de unidade permite detectar e corrigir bugs imediatamente, evitando saídas inesperadas em uma fase muito posterior do ciclo de desenvolvimento do aplicativo, quando será mais caro e demorado reescrever o código.
• Sabendo qual comportamento esperar de uma determinada unidade do código, você pode ver o que está quebrado e, portanto, atualizar seu código com mais facilidade.
• A execução de testes de unidade dá confiança na qualidade do seu código e ajuda a estruturá-lo de uma maneira melhor.
• Você pode testar classes individuais isoladamente e os pontos fortes dos blocos de acoplamento em seu aplicativo para ver como eles se comportam.
• O teste de unidade permite a refatoração, o que significa que você pode modificar o código de maneira livre de bugs sem alterar o comportamento, pois você já sabe como tudo funciona.
• Como ele é executado em unidades isoladas do código, sempre que você quiser testar um recurso recém-adicionado ou uma modificação de arquivo, terá a garantia de que a execução do teste de unidade não interromperá todo o código.
• Os testes de unidade são super-rápidos e são capazes de simular todas as condições de erro.
• Eles não podem falhar por motivos acidentais, como interrupção de rede e serviço ou erros de autenticação de dados.
• Super útil na chamada metodologia de Programação Extrema que essencialmente pede que você teste tudo o que pode quebrar.
• Se você quiser saber mais sobre uma funcionalidade que uma unidade fornece e ver como usá-la, poderá usar os testes de unidade para obter uma compreensão básica da API da unidade.

O que é teste de unidade em Angular?

O teste de unidade no Angular é um processo para testar unidades individuais de código com o objetivo de identificar problemas como funções que se comportam mal, lógica incorreta e muito mais o mais cedo possível. E como Angular projetos são modulares por padrão, a execução de testes de unidade nesses aplicativos parece um pouco mais intuitiva, pois permite que você examine as funções do seu aplicativo isoladamente.

Ao contrário de outras estruturas, Angular oferece uma ótima maneira de realizar testes de unidade de seus modelos. Normalmente, os desenvolvedores fazem testes manuais para verificar comportamentos e ver se o código está funcional ou não. No entanto, em alguns casos, testar manualmente cada pequena alteração leva mais tempo em comparação com o desenvolvimento de um teste de unidade. Mas Angular fornece ferramentas e executores de teste como o Karma que fazem o teste de unidade para você.

Por que você deve testar Angular aplicativos

Testar sua base de código Angular função por função é a melhor maneira de melhorar a qualidade do código, ter menos bugs na produção e menos código morto, reduzir os custos de manutenção e obter uma refatoração mais rápida e até mesmo atualizações sem discrepâncias quebrando todo o código.

Pode parecer lento no começo, mas vale a pena a longo prazo. Os bugs são detectados durante o desenvolvimento. O processo de depuração foi aprimorado. Se um determinado teste falhar, podemos encontrar facilmente o que exatamente não está funcionando conforme o esperado. E como o desenvolvimento orientado a testes e os testes unitários, em particular, parecem um pouco mais desafiadores do que realmente são, confiar em novas ferramentas e práticas recomendadas pode realmente facilitar e automatizar todo o processo.

Como fazer testes unitários em Angular e testar componentes Angular

Há várias coisas que um componente pode fazer e devemos garantir que todos esses comportamentos sejam levados em consideração ao escrever testes para componentes:

• Eles podem renderizar modelos na árvore HTML DOM.
• Eles podem aceitar dados de componentes pai usando Entradas e emitir dados usando Saídas.
• Eles podem interagir com diferentes tipos de eventos.
• Eles podem falar com serviços ou lojas.
• Eles podem vincular dados e permitir que o usuário os edite.

Nas próximas seções, demonstrarei como fazer testes unitários em Angular e testar componentes.

We will start testing Angular components, using Ignite UI for Angular. Here’s what to do.

Set up TestBed

Angular fornece o TestBed para testes, o que cria um ambiente onde podemos testar componentes e serviços facilmente. Ele é configurado como um módulo Angular normal e, em seguida, todos os componentes declarados são compilados. Para salvar o código duplicado em cada teste, podemos usá-lo na função beforeEach.

Depois que os componentes são compilados, podemos criar um componente que é renderizado no HTML DOM. Quando um componente é usado no ambiente de teste, ele não é renderizado automaticamente nas atualizações. É por isso que precisamos acioná-lo manualmente:

    fixture.detectChanges(); 

Testando o DOM

Na maioria das vezes, as funções nos componentes estão fazendo alguma lógica que está refletindo o modelo. Podemos acessar a árvore DOM usando DebugElement e seus métodos query e queryAll:

• query retorna o primeiro elemento que corresponde a uma condição
• queryAll retorna uma coleção de elementos correspondentes

Usando By.css(), podemos obter elementos por seletores CSS.

Acionando manipuladores de eventos

Imagine que temos uma função que envia dados de um formulário e é acionada quando clicamos em um botão específico. Nos testes, temos duas opções. A primeira é executar a função diretamente e a segunda, que é preferível, é simular um evento de clique nesse botão. Isso pode ser feito facilmente usando triggerEventHandler de DebugElement. Ele tem dois argumentos: o nome do evento e as propriedades do evento.

Se o evento for necessário, ele deverá ser criado usando a palavra-chave new e, em seguida, enviar como um parâmetro em vez de null.

Como "simular" dados usando dependências falsas

Na maioria dos casos, queremos testar um código específico isoladamente. Mas como os componentes se comunicam com muitos serviços diferentes e cada serviço tem suas próprias dependências, torna-se complexo (e o código se torna desnecessariamente longo) adicionar todas as dependências apenas para testar uma funcionalidade.

Em vez disso, usando nosso kit de ferramentas de Ignite UI abrangente para Angular, podemos criar dependências falsas que simulam o comportamento das reais. Esse método é chamado de simulação.

Using Jasmine spies

O Jasmine nos fornece uma ótima funcionalidade para criar dependências falsas chamadas espiões. Vamos dar um exemplo:.

Vamos ter um componente simples com um método que está chamando fetchData de DataService, que está fazendo uma solicitação a uma API para obter alguns dados e depois disso, se houver uma resposta, salvamos esses dados no componente.  Nesse caso, não queremos testar o que está acontecendo na função fetchData. O que nos importa é a resposta. Então, aqui podemos falsificar a resposta usando o método spyOn e, em seguida, verificar se esse método foi acionado.

Como testar código assíncrono e Angular observáveis

O teste de código assíncrono é semelhante com pequenas diferenças.

Se quisermos espionar um método assíncrono, usamos .resolveTo() em vez de .returnValues(). Depois disso, se estivermos testando o método assíncrono, faremos mais duas coisas. Primeiro, envolvemos o teste em fakeAsync e, em seguida, usamos tick() que simula a passagem assíncrona do tempo.

O mesmo se aplica se estivermos testando dados de Angular Observable e BehaviorSubject que queremos exibir no modelo. Precisamos preencher o assunto com .next e, em seguida, usar tick() para esperar algum tempo antes de passar para a próxima linha.

Medindo a cobertura do código

A cobertura de código é uma métrica que nos informa quais partes do código são testadas com testes de unidade. Ele descobre partes do aplicativo que ainda não foram testadas. Ao escrever o código, devemos garantir que a pontuação geral de cobertura não seja reduzida, mas aumentada. É aceito que 80% de cobertura de código é uma meta de código a ser alcançada. Mas tente cobrir o máximo de código possível. Quanto mais, melhor. Há um comando embutido que nos fornece um relatório de cobertura. Tudo o que devemos fazer é adicionar o sinalizador –code-coverage ao nosso comando de teste.

teste ng –cobertura de código

Se não quisermos usar o gerador de cobertura de código integrado do modelo ng, existem milhares de outros pacotes npm que você pode escolher. Além disso, se você estiver usando o Azure DevOps para desenvolvimento, eles também terão funcionalidades internas que podemos usar.

Por fim, quais são Angular práticas recomendadas de teste de unidade

Para encerrar, gostaria de compartilhar algumas práticas recomendadas que você pode adotar ao realizar testes de unidade Angular.

• Certifique-se de ter configurado seu Módulo de Teste corretamente executando ng test na linha de comando para começar a compilar e executar Angular testes de unidade.
• Nomeie seu teste de unidade de Angular corretamente – descrevendo o método, o cenário em que a unidade está sendo testada.
• Crie suas funções o menor possível para que o teste de unidade possa ser executado de forma rápida e sem problemas.
• Sempre execute testes de unidade em um ambiente isolado, eliminando quaisquer dependências externas.
• Use espiões da estrutura Jasmine para as dependências ao testar serviços.
• É melhor acessar o DOM com debugElement (fornecendo uma abstração para o ambiente de tempo de execução primário) em vez de chamar nativeElement ao testar componentes.
• Caso você execute seu aplicativo no servidor, use By.css em vez de queryselector, pois este último só funciona no navegador.
• Certifique-se de ter pelo menos 80% de cobertura de código.