Curso de testes unitários com Angular 2 – Parte 4/4

Curso básico gratuito de Angular 2 | kazale.comO objetivo da última aula do curso de testes unitários com Angular 2 é apresentar mais recursos utilizados no teste de componentes

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá a criar testes unitários para componentes (components) de modo síncrono, com entrada de dados, e clique em botões de ação. Você também terá acesso a surpresa prometida para dar continuidade ao seus estudos de testes unitários.

1. Introdução

Na aula anterior você aprendeu os principais conceitos necessários para testar um componente, assim como aprendeu como testar o componente de listagem de clientes.

Nessa aula, que é a última dessa série de quatro aulas, você aprenderá como testar o componente de cadastro de clientes, onde você aprenderá como fazer processamento síncrono, definir valores em campos de entrada de dados, e também realizar ações de clique em botões.

Então vamos iniciar a sequência de testes unitários em componentes do Angular 2!

2. Processamento síncrono com ‘fakeAsync’

Muitas vezes precisamos realizar operações que possuem processamento assíncrono, porém quando estamos testando tais operações, é necessário que a execução seja síncrona, para que possamos validar as operações no mesmo momento.

No caso do cadastro de clientes por exemplo, ao alterar o valor de um campo de texto, o valor é definido no componente pelo ‘ngModel’ de modo assíncrono. Uma vez que precisamos dessa definição naquele momento para prosseguir com o teste, devemos garantir que essa operação seja executada naquele instante.

Para que seja possível realizar essa operação, existe o ‘fakeAsync’, que é uma função que deve encapsular a função a ser testada, de modo que as operações sejam realizadas de forma síncrona.

Para que o ‘fakeAsync’ funcione, devemos chamar a função auxiliar ‘tick’ no corpo da função, no momento que queremos ter todos os processamentos realizados.

3. Testando o cadastro de clientes

Com base nos conceitos da aula anterior, e no processamento síncrono que acabamos de ver, vamos criar a classe de teste do cadastro de clientes.

O teste executará as seguintes etapas:

  1. Configurará o ‘TestBed’ para criar o contexto do teste
  2. Inicializará alguns mocks utilizados no teste
  3. Ao exibir o formulário de cadastro, o campo de texto ‘nome’ será preenchido
  4. Após o preenchimento, o botão de cadastro será clicado
  5. Então será verificado se o cadastro foi realizado com sucesso

Segue abaixo o código do teste, localizado em ‘src/app/cliente/cadastrar/cliente-cadastrar.component.spec.ts’:

No código acima ainda existem algumas operações novas que serão abordadas agora na sequência.

Repare no uso do ‘const’ para criar contantes, essa é uma boa prática quando um mesmo valor for reutilizado ao longo do teste mais de uma vez.

No código ‘spyOn(router, ‘navigate’)’, embora o ‘Router’ seja uma classe falsa, ainda assim criamos um spy para o método ‘navigate’, pois dessa forma conseguimos obter o parâmetro passado ao método em questão, que nos interessa para sabermos se o redirecionamento foi configurado corretamente.

Para validar um parâmetro passado a um spy, utilizamos o a função ‘toHaveBeenCalledWith’, assim como podemos retornar o objeto ‘calls’ de um spy para obter informações de como ele foi chamado.

Para executar o teste criado acima, execute o seguinte comando no terminal, na raiz do projeto:

4. Conclusão

Parabéns, você concluiu todas as aulas do curso de Angular 2!

Nessa aula você aprendeu novos conceitos utilizados no teste de componentes, utilizados para iteração com os elementos do template, assim como processar as operações de modo síncrono.

Com o que você aprendeu ao longo dessas quatro aulas, é possível realizar qualquer tipo de teste com o Angular 2!

Conforme prometido, tenho um presente para você conseguir se especializar e aprender mais sobre teste de software, que é um ebook gratuito sobre as principais operações do Jasmine!

Ebook gratuito Jasmine da Kazale.com

Para fazer o download do livro preencha o formulário abaixo:



Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

quatro + três =