Angular: avançando com testes automatizados

Novo componente, nova complexidade - Apresentação

Oi, pessoal! Eu sou Flávio Almeida e esse curso é uma continuação de fundamentos de testes de Angular. Agora avançando mais nessa questão de testes. Uma coisa importante é que esse curso, como eu acabei de falar, tem como pré-requisito o curso de fundamentos, é importante que você faça esse curso, porque bem começado, metade feito.

E vamos aprender recursos novos, vamos ver a questão de testes de diretivas, como trabalhar e testar Node Changes, trabalhar com HTTP Client teste em model, mock providers e por aí vai.

Bastante novidade nesse curso, é importante também lembrar que a versão do Node js que precisamos ter instalada como infraestrutura é a versão 10.21, os navegadores que você precisa ter na sua máquina é o Chrome e o Firefox.

Agora uma coisa importante, o download do projeto desse curso vai ter todo o código feito do curso anterior com a diferença que ele vai ter um servidor HTTP embutido dentro dele para permitir lidarmos com a situação, estressar aquele cenário no qual temos o componente que se comunica com backend e como eu texto esse componente?

Então se você fez o curso anterior, baixa os arquivos desse curso, porque o seu projeto do curso anterior não vai ter esse servidor com essa API que vou criada especialmente para esse treinamento. Então a questão toda é baixar o projeto, descompactar, executar npm install e seguir as instruções desse instrutor aqui. Então, vamos começar.

Novo componente, nova complexidade - Revisão do projeto

Eu já tenho o projeto baixado, o “ng-teste2”, eu vou abrir o projeto descompactado no VSCode. Lembrando que se você usa Windows, vai ter a opção “Open Folder”, é essa que você vai selecionar.

Abri o projeto. Uma coisa importante lembrarmos que esse projeto tem todo o conteúdo do curso anterior, mas a única diferença é que ele vai ter um servidor com APIs, porque nesse curso precisamos aprender a testar componentes que fazem chamada a API no backend, como lidamos com isso. Então toda essa complexidade vai estar presente nesse treinamento.

O que eu quero fazer com vocês, a primeira coisa é npm install, abrir o terminal para baixar as dependências do meu projeto.

Você pode perguntar se pode usar o projeto do curso anterior, mas não pode, usa esse porque esse vai ter tudo que está pronto do curso anterior mais o servidor. Uma coisa interessante para vermos, é que enquanto ele está instalando e fazendo o download dos pacotes, se eu olho o meu “package.json”, uma mudança nele foi a introdução de 2 scripts, o “api” e o “all”.

Se você quiser rodar a sua aplicação, você vai rodar o “all”, como eu vou fazer aqui npm run all. Quando você executar esse comando, ele em paralelo vai rodar o Angular CLI e o servidor que vai escutar em uma determinada porta, que é essa porta 3000.

Na primeira vez que você for rodar, vai demorar um pouco, porque ele tem que compilar os módulos do Ivy, do Angular usando Ivy Compiler e vai gerar o meu bundle.

Terminou de gerar, agora eu vou no meu navegador, vou abrir o “localhost:4200”, digitando na barra de pesquisa, e vamos ver que tem o nosso mesmo componente do curso anterior, que é o nosso like widget, que eu vou clicando e ele vai processando.

Então o que vamos fazer no próximo vídeo? Primeiro vou mostrar para vocês a API. Se acessarmos “localhost:3000/photos".

Ele vai retornar um monte de dado de foto que vamos usar ao longo desse treinamento. Então com um único comando, vamos voltar no VSCode, vou parar e rodar de novo, o npm run all, rodamos em paralelo o servidor, mas o Angular CLI, para podermos no futuro consumir dados desse servidor da API fornecida pelo servidor.

Agora que estamos com tudo no lugar, vamos começar a criar um novo componente, o PhotoFrame. Esse componente vai ser a composição desse componente que já criamos, com mais coisas por cima, com mais complexidade, para tornar os nossos testes, na verdade, demandar maior conhecimento em relação ao teste de componentes mais complexos. Vamos lá?

Novo componente, nova complexidade - O módulo photoframe

Vamos criar o nosso PhotoFrameComponent. O que ele vai fazer? O que esse componente faz? Ele vai utilizar o nosso like widget, que já existe, vamos fazer composição de componentes e a função dele é exibir uma imagem e o botão de like em cima, lógico, aplicando algum estilo elegante, para que você possa curtir aquela imagem. E toda vez que eu clicar nesse botão de like, se eu ficar clicando freneticamente, eu vou querer aplicar um debounce nesse click.

Esse componente já vai nos demandar um conhecimento extra de testes de Angular, por isso que é importante começarmos a compor e entender como ele é feito.

Na pasta “shared > components”, eu vou criar a pasta “photo-frame”, ou seja, é um shared component e dentro dele, o “photo-frame.module.ts” e o “photo-frame.component.ts”. Agora vamos criar outro, o “photo-frame.component.html”, e o que está faltando é o “photo-frame.component.scss”. Agora eu vou começar pelo esqueleto do módulo.

Vou colocar @NgModule({, ele tem que declarar alguma coisa, então declarations: [], ele tem que importar alguma coisa, então imports: [], e tem que exportar alguma coisa exports [].

E logo abaixo eu vou dizer que export class PhotoFrameModule {}. Agora que eu tenho o esqueleto dele, uma coisa certa que eu preciso do CommonModule para usar “NgIf”, “NgFor”. E como eu vou usar o Like Widget para construir o meu Photo Frame, eu tenho como dependência o LikeWidgetModule.

Faz sentido? Tem que fazer. Agora eu vou para a definição do componente. Chegando lá no componente eu vou começar pelo @Component({, nele eu preciso passar o selector do componente, então vai ser selector: ‘app-photo-frame’,, depois templateUrl: ‘./photo-frame.component.html’ e o styleUrls: [‘./photo-frame.component.scss’], que vai ser os meus estilos nesse component e embaixo eu vou exportar a minha classe, export class PhotoFrameComponent.

Ainda não fiz nada com esse componente, mas eu preciso colocar a declaração desse componente no meu módulo de PhotoFrame, vou em declaration, adiciono [PhotoFrameComponent], adiciono no export, porque quem importar meu PhotoFrame vai fazer uso dele. Importei.

Tudo encaixado, agora o que nos resta é implementar o nosso componente, o PhotoFrameComponent, que é o que vamos fazer no próximo vídeo.

Sobre o curso Angular: avançando com testes automatizados

O curso Angular: avançando com testes automatizados possui 256 minutos de vídeos, em um total de 80 atividades. Gostou? Conheça nossos outros cursos de Angular em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Novo componente, nova complexidade
• Testes temporais e de integração com o DOM
• Lidando com eventos de UI
• Cuidados com a abstração do Angular
• Avançando nos testes