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

Curso básico gratuito de Angular 2 | kazale.comO objetivo da primeira aula é apresentar os conceitos chaves dos testes unitários com Angular 2

 

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

Ao término dessa aula você aprenderá qual a importância do teste de software, quais frameworks utilizamos para a criação de testes unitários com o Angular 2, assim como criará o ambiente para a criação dos testes nas próximas aulas do curso.

1. Introdução

Gostaria de iniciar dando as boas vindas a você, e também dizer que a iniciativa de acompanhar esse curso lhe trará muitos benefícios para a sua carreira, uma vez que um desenvolvedor sem conhecimentos sólidos em teste de software não consegue criar um código de qualidade a fim de evitar bugs, ou de fácil manutenção.

Se você chegou até aqui é porque você tem como objetivo se tornar um profissional com destaque no mercado de trabalho, um profissional completo, que pretende criar código com qualidade, de fácil manutenção, baixo acoplamento, e confiável, então meus parabéns por estar aqui!

Vamos começar entendendo a importância do teste de software em detalhes, mas antes deixe eu me apresentar.

2. Instrutor

Instrutor-Marcio Casale de Souza

Meu nome é Márcio Casale de Souza, sou graduado em Sistemas de Informação, e pós graduado em Desenvolvimento de Sistemas Corporativos em Java.

Atuo a nove anos como desenvolvedor de sistemas em Java, PHP, e Javascript, e sou entusiasta no aprendizado de novas tecnologias, onde tento sempre me manter atualizado com as últimas tendências do mercado.

Gosto muito de ensinar e compartilhar meus conhecimentos.

Gostaria de dizer também, que um dos principais motivos que contribuiu de forma significativa para meu destaque em minha carreira, foi ter aprendido a criar código usando testes unitários!

No começo, sentia dificuldade em criar códigos com qualidade, com baixo acoplamento, nunca conseguia responder com segurança perguntas relacionadas a testes em entrevistas, e acabava até mesmo sendo visto como um desenvolvedor com limitações quanto a criação de código.

Como eu não iria me entregar, e queria dar a volta por cima, e ainda ser visto como um desenvolvedor que qualidade e respeitado, comecei a estudar muito sobre boas práticas de desenvolvimento de software, e para minha surpresa, o teste de software é o que mais contribui para isso!

Então comecei estudar teste de software, criação de testes unitários, desenvolvimento guiado por testes (TDD – Test Driven Development), e também desenvolvimento guiado por comportamentos (BDD – Behaviour Driven Development).

Assim que me especializei em tudo isso, percebi que a qualidade dos meus códigos haviam melhorado significativamente, meu código continha poucos bugs, era desacoplado, de fácil entendimento e manutenção.

Então lhe farei uma pergunta, você quer mudar e criar um código de qualidade e se diferenciar no mercado de trabalho, ou prefere continuar sendo somente mais um desenvolvedor dentre muitos que ainda não descobriram como se destacar?

Se sua resposta foi SIM, meus parabéns! Você está no lugar certo e eu te ajudarei a atingir esse objetivo!

E se você concluir as quatro aulas do curso, ao término delas eu preparei uma surpresa para você que mudará de vez a sua carreira, e o tornará um profissional com muitos atributos de destaque no mercado de trabalho!

Para não perder nenhuma aula, inscreva-se abaixo em nossa newsletter para receber as notificações de lançamentos de todas as aulas:

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

Então bons estudos, e vamos iniciar entendendo a importância do teste de software.

3. Importância do teste de software

Vamos começar entendendo qual a importância e porque devemos criar testes unitários ao desenvolver qualquer tipo de software:

  1. Permite a criação de um código mais confidente e de fácil manutenção
  2. O código ficará menos acoplado e melhor estruturado
  3. Seguindo o padrão BDD, os testes poderão ser utilizados para entender o funcionamento do sistema
  4. Adicionar uma nova funcionalidade leva menos tempo com testes de regressão, uma vez que o código já cobre testes para as funcionalidades existentes, e elas serão testadas automaticamente ao executar as suítes de testes
  5. Tornará você um desenvolvedor melhor, ajudando a estruturar melhor o código implementado
  6. Contribuirá para você conseguir um novo emprego ou avançar em sua carreira, uma vez que teste de software sempre é requisitado em entrevistas de trabalho

4. Teste de software no Angular 2

Devido ao Angular 2 ser um framework front-end, ele possui três diferentes possibilidades de testes, das quais duas serão abordadas nesse curso por serem voltadas aos testes unitários.

Seguem as três possibilidade de teste no Angular 2:

Tipo de testeDescrição
Teste unitário isoladoÉ o teste de mais baixo nível, onde é testado uma determinada lógica em específico.

Ele deve ter prioridade aos demais testes e é aplicado a serviços (services), filtros (pipes), ou qualquer outro código isolado na aplicação.

Teste unitário de componenteÉ o teste aplicado a um componente do Angular 2.

Ele é mais complexo de ser criado por ser composto por vários recursos distintos, além de também possuir interface gráfica visto que ele trabalha com templates.

Combinado com o teste unitário isolado, ele garantirá uma cobertura de testes bastante significativa para a sua aplicação.

Teste de integraçãoÉ o teste que simula o usuário interagindo com a aplicação.

Como o foco do curso são os testes unitários, e o teste de componente consegue validar programaticamente a interface gerada pelos componentes do Angular 2, o teste de integração não será abordado dentro desse curso.

5. Frameworks de teste utilizados pelo Angular 2

O Angular 2 depende de frameworks externos para criação de testes, que quando integrados ao projeto, auxiliam na sua criação, execução, e automação.

Abaixo segue uma breve descrição de cada um deles:

Esse curso não cobrirá o estudo dos frameworks listados a seguir, o foco principal do curso é demonstrar como testar aplicações Angular 2.
Mas não se preocupe, ao término do curso tenho uma surpresa para você se especializar nesses frameworks, aguarde!
FrameworkDescrição
JasmineUtilizado para criação de testes unitários com Javascript.

Página oficial: https://jasmine.github.io.

Segue o padrão de desenvolvimento BDD, ou seja, desenvolvimento guiado por comportamentos.

É de fácil aprendizado, e possui uma API com recursos para validar resultados dado um valor esperado.

KarmaUtilizado para automatizar a execução dos testes, assim como executá-los diretamente no navegador.

Página oficial: https://karma-runner.github.io.

Se integra ao Jasmine, adicionando recursos de produtividade a ele.

Permite realizar debug do código diretamente no navegador.

ProtractorUtilizado para a criação de testes de integração, ou e2e (end to end).

Página oficial: http://www.protractortest.org.

Consegue simular o usuário interagindo com o sistema.

*Não será abordado no curso conforme descrito no tópico anterior.

6. Baixando o projeto base

Após essa introdução sobre os aspectos dos testes unitários com o Angular 2, vamos colocar a mão na massa e iniciar o estudo prático.

Para isso vamos baixar o template base para nosso projeto, que será o template criado aqui pela Kazale.

Embora seja possível utilizar qualquer outro projeto que possua o Jasmine e Karma configurados, recomendo utilizar o template aqui sugerido para facilitar o acompanhamento do curso.

Primeiramente acesse a url do projeto no GitHub em:

Template Angular 2 com WebPack

Clique no botão verde “Clone or download”, e na sequência em “Download ZIP”.

Extraia o conteúdo em um diretório de sua preferência.

Caso você possua o git configurado em seu computador, poderá utilizar o seguinte comando no terminal para obter os arquivos:

Após ter baixado o projeto, no terminal na raiz do projeto, digite o seguinte comando para instalação de suas dependências (certifique de ter o NodeJS instalado):

Para testar se a aplicação está funcionando corretamente, digite o seguinte comando no terminal, na raiz do projeto:

Acesse http://localhost:8080 para acessar o sistema.

7. Entendendo a configuração dos testes no Angular 2

Antes de iniciarmos os estudos sobre como criar testes em um projeto Angular 2, devemos entender como ele é configurado e organizado em um projeto.

Ao contrário do que é utilizado na maioria das linguagens, a equipe do Angular 2 não recomenda ter os testes separados em diretórios distintos, mas sim juntamente com o arquivo fonte a ser testado, adicionando o sufixo ‘spec’ ao nome do arquivo de teste.

Isso significa que se tivermos um serviço chamado ‘meu-servico.service.ts’, devemos ter um arquivo no mesmo diretório chamado ‘meu-servico.service.spec.ts’, onde esse arquivo conterá os testes unitários para o serviço em questão.

Embora não seja obrigatório seguir esse padrão, seguiremos aqui para manter a mesma definição da equipe de desenvolvimento do Angular 2.

A configuração dos frameworks no projeto se da através da configuração do Karma, que utiliza como base o Jasmine e o Webpack.

O Karma utiliza o Jasmine para validar os resultados dos testes unitários, e utiliza o Webpack para ‘compilar’ os testes antes da execução, uma vez que os testes são executados no navegador, e os arquivos Typescript precisam ser compilados para Javascript, que é o papel do Webpack nesse caso.

Uma vez que o Karma coordena toda essa configuração e execução, os arquivos utilizados para tais definições são:

  • karma.conf.js
  • config/karma.conf.js
  • config/karma-test-shim.js
  • config/webpack.test.js

Os testes são executados através do Karma, e para isso foram criadas entradas no arquivo ‘package.json’ para facilitar sua execução.

Existem duas formas de executar os testes, uma em modo de escuta, utilizada em desenvolvimento, e outra que executa os testes uma única vez, utilizada para build da aplicação.

Para executar os testes em modo de escuta (para desenvolvimento), execute no terminal na raiz do projeto o seguinte comando (pressione Ctlr + C para sair):

Para executar os testes uma única vez, execute no terminal na raiz do projeto:

8. Criando o CRUD utilizado nos testes

Agora que você já entendeu o funcionamento e como executar os testes, vamos criar o CRUD para a criação dos testes ao longo do curso.

Você criará um cadastro simples de clientes, e para isso utilizaremos o gerador de códigos presente no template.

No terminal, na raiz do projeto, digite:

Digite ‘cliente’ para o nome do módulo e pressione ‘ENTER’.

Configure o módulo no projeto conforme descrito ao término da criação do CRUD, e execute a aplicação para verificar se está funcionando corretamente:

Acesse http://localhost:8080/clientes para acessar o módulo criado.

9. Conclusão

Chegamos ao fim da primeira aula do curso de testes unitários com o Angular 2.

Nessa aula você aprendeu conceitos muito importantes sobre teste de software, assim como criar e configurar os frameworks no projeto.

Na próxima aula você criará seus primeiros testes unitários, que serão testes isolados em filtros (pipes) e serviços (services), onde você aprenderá como utilizar os recursos do Jasmine para verificação das informações, assim como o Karma para execução do mesmo.

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

2 comentários em “Curso de testes unitários com Angular 2 – Parte 1/4

    1. Olá Wilson,

      se voe está utilizando o Windows, é provável que ele esteja gerando o código no diretório scaffoldind, dai você deve movê-lo para o diretório src/app.

      Isso acontece porque existe um problema com o Windows ao retornar o path a gerar os arquivos…

Deixe uma resposta

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

três + 13 =