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

Curso básico gratuito de Angular 2 | kazale.comO objetivo da terceira aula do curso de testes unitários com Angular 2 é ensinar como testar 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).

1. Introdução

Na aula anterior você aprendeu a criar testes unitários isolados para filtros (pipes) e serviços (services).

Nessa aula você verá como criar testes unitários para componentes (components).

O teste unitário para componentes (components) é um pouco mais complexo, devido ao fato de que ele simula a renderização de uma view, que por sua vez possui algumas dependências.

Então vamos iniciar e ver como fazemos para testar componentes no Angular 2!

2. Entendo o ‘TestBed’

Para executar o teste de componente, precisamos criar um contexto de uma aplicação real, que seria através do nosso conhecido ‘NgModule’, que é responsável pelo carregamento das dependências de execução.

O Angular 2 provê a classe ‘TestBed’, que é a classe responsável pela criação desse contexto de teste para nós.

O ‘TestBed’ seria o ‘NgModule’ para testes, e nele informamos todos os objetos necessários para a execução dos testes, que incluem os componentes, filtros, serviços, entre outros.

Ele deve ser inicializado na função ‘beforeEach’ do Jasmine, e a seguir podemos ver o exemplo de um contexto de teste inicializado:

Ele possui os mesmos atributos do ‘NgModule’, e o importante a saber, é que ele pode receber objetos falsos (mocks) como parâmetros, caso não desejamos algum comportamento real de uma funcionalidade.

O ‘TestBed’ assim que configurado, possui um método ‘createComponent’ para a criação em si do componente, conforme exemplo a seguir:

Com posse do objeto devidamente configurado e criado, é possível iniciar os testes.

3. Criando mocks de objetos

Como citei anteriormente, ao testar um componente, ele provavelmente dependerá de alguns serviços, filtros, acessos externos, e não queremos nos preocupar com a execução dessas dependências, que já deveriam ter sido testadas isoladamente em outro momento.

Uma vez que queremos somente focar no teste do componente, precisamos criar uma maneira de mascarar esses recursos, e para fazer isso utilizamos o que chamamos de mock objects, ou objetos falsos, onde conseguimos manipular o comportamento de um objeto sem que o código verdadeiro dele seja executado.

Vamos a um exemplo, imagine que para listar nossos clientes, nosso serviço fizesse um acesso a uma API externa. É totalmente indesejável executar essa operação em nosso teste, assim criamos um objeto falso onde podemos instruí-lo a somente nos retornar uma lista qualquer de clientes.

Você conseguiu reparar a vantagem em se criar os tais mock objects?

Mas então como criamos esses mocks objects?

O Jasmine possui uma série de utilitários para a criação de mocks objects, que dentro de sua API são os populares ‘spies’.

A ideia aqui é apresentar o básico de como criar ‘spies’, mas ao término do curso você terá a oportunidade de se aprofundar nesse tópico, o que fortemente recomendo, através da surpresa que preparei para você.

Vamos então a um exemplo prático de como criar um ‘spy’, veja o código abaixo:

O código acima realiza duas operações, na primeira linha ele obtém a referência de um serviço configurado no ‘TestBed’, e a segunda linha instrui o serviço ‘clienteService’ a retornar o valor ’10’ quando o método ‘totalRegistros’ for chamado.

Em um cenário real esse serviço acessaria uma API externa para obter essa informação, então dizemos através da função utilitária ‘spyOn’ do Jasmine, que ao executar esse método ele apenas deverá retornar o valor ’10’, que é o suficiente para testarmos nosso componente.

Utilizando o Jasmine é o modo mais tradicional para criar mock objects, mas existe uma segunda alternativa que é bastante útil em algumas ocasiões.

O segundo método seria a criação de uma classe a ser usada como mock, onde ela teria uma implementação bem básica, e esse objeto seria passado ao iniciar o ‘TestBed’.

Usaremos essa técnica para criar mock objects do serviço de roteamento do Angular 2, que é bastante complexo, e não podemos simplesmente deixá-lo executar a implementação original.

Vamos a um exemplo prático, criando uma classe mock a ser utilizada com o método de navegação do roteamento do Angular 2. Ficaria assim:

Como sabemos, utilizamos o método ‘navigate’ para redirecionar telas no Angular 2, e o objetivo da classe acima é simplesmente simular essa operação, sem efetuar o redirecionamento.

Para utilizar o código acima, fazemos conforme o código a seguir:

Reparem como a classe ‘RouterStubService’, que contém a implementação do ‘navigate’, é passada para o ‘TestBed’ como um provider para a classe ‘Router’, através do atributo ‘useValue’.

Isso significa que no momento que o método ‘navigate’ for executado pelo código, ele usará a implementação da nossa classe mock, e não a implementação real do serviço do Angular 2.

4. Validando objetos do template

Uma vez que os componentes não contém lógica de negócio por estarem em serviços e filtros, o que geralmente focaremos em validar em um componente, será o conteúdo de seu template após a renderização.

Então antes de criarmos o teste do componente, você precisará entender como isso é feito.

Ao chamarmos o ‘TestBed.createComponent’, o Angular 2 retorna um objeto do tipo ‘ComponentFixture’, que contém a representação de nossa view e componente, além de mais informações.

A partir desse objeto, podemos chamar o ‘debugElement.query’ presente nele, para acessar elementos HTML contidos no template, como headers ‘H1’, tabelas, entre outros.

O ‘debugElement.query’ recebe como parâmetro o utilitário ‘By.css’, que por sua vez recebe um seletor que segue o mesmo padrão do utilizado no jQuery, caso você conheça essa API.

Esse selector consegue selecionar um elemento HTML por id, classe, tipo, entre outros, as possibilidades são muitas.

Vamos a um exemplo para demonstrar a utilização do que foi explicado:

O exemplo acima contém alguns elementos que são novidade, mas antes de explicá-los, reparem como o elemento HTML de ID chamado ‘id’ foi retornado.

Na terceira linha, chamamos o atributo ‘nativeElement’ para obter o elemento HTML em si, e por fim chamamos ‘textContent’, que retornará o valor desse elemento renderizado na tela.

Por fim, na primeira linha, temos a chamada ‘fixture.detectChanges’, que serve para instruir o teste a renderizar o template antes que possamos verificar o seu resultado.

Agora que você já conhece todos os elementos necessários para testar um componente, vamos criar um teste para validar algumas informações do componente de listagem de clientes, criado na primeira aula.

5. Testando o componente de listagem de clientes

Vamos agora colocar em prática os tópicos aprendidos anteriormente para testar a listagem de clientes.

Edite o arquivo ‘src/app/cliente/listar/cliente-listar.component.spec.ts’ e adicione o seguinte conteúdo a ele:

O código acima contém os elementos apresentados anteriormente, e três funções extras do Jasmine que serão explicadas a seguir.

A primeira delas é o ‘toContain’, que é muito similar ao ‘toEqual’, mas permite buscar um texto dentro de uma sentença.

Os outros dois são utilitários do objeto ‘spyOn’, que são os ‘toHaveBeenCalled’ e ‘toHaveBeenCalledTimes’, que retornam se o método do ‘spy’ foi chamado, e quantas vezes ele foi chamado, respectivamente.

6. Conclusão

Nessa aula você aprendeu como testar um componente, e deve ter dado para perceber que ele apresenta uma complexidade maior do que um teste unitário isolado, e demanda um conhecimento mais amplo para que tudo funcione perfeitamente.

Na próxima aula daremos continuidade aos testes unitários de componentes, testando a operação de cadastro de clientes, na qual serão introduzidos novos recursos como entrada de dados em campo de texto, e clique em um botão programaticamente.

Caso você ainda não tenha assinado nossa newsletter, e não deseja perder a próxima e última aula desse curso, entre com seu email no formulário abaixo para ser notificado assim que ela for lançada.

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

Nos vemos na próxima aula, até lá!

Deixe uma resposta

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

quatro + 1 =