Angular: expandindo funcionalidades com testes unitários e e2e

Criando uma nova feature - Apresentação

Boas-vindas a mais um curso de Angular!

Me chamo Charleston Campos, e serei o seu instrutor.

Audiodescrição: Charleston se identifica como um homem negro. Tem cabelos pretos curtos e crespos. Usa bigode e cavanhaque e veste um moletom cinza. Ao fundo, um estúdio com iluminação azul e roxa. À direita, uma estante com decorações e um letreiro neon do logotipo da Alura.

O que vamos aprender?

Neste curso, desenvolveremos uma nova funcionalidade para o sistema Jornada Milhas, já conhecido nos cursos da Alura. Adicionaremos o fluxo de reserva e o processo de pagamento para completar uma reserva para a pessoa usuária.

Ferramentas

Para garantir que a funcionalidade funcione corretamente, implementaremos testes usando ferramentas amplamente reconhecidas no mercado, como Jest e Cypress. Essas ferramentas nos ajudarão a assegurar que tudo está funcionando perfeitamente na aplicação.

Pré-requisitos

É essencial que você tenha conhecimento prévio de HTML e CSS, esteja familiarizado com JavaScript e, principalmente, conheça o ecossistema do Angular. Também é importante ter experiência com TypeScript (um superconjunto de JavaScript que adiciona tipagem estática e objetos baseados em classes) e com orientação a objetos.

Esses conhecimentos permitirão que você desenvolva a aplicação e os testes de forma fluida e sem problemas.

Conclusão

Esperamos que você participe deste curso para adquirir conhecimento e aplicá-lo no mercado de trabalho. Nos encontramos na próxima aula. Até lá!

Criando uma nova feature - Apresentação do Figma e estrutura do projeto

Começaremos o desenvolvimento das novas telas e funcionalidades para o sistema Jornada Milhas.

Caso tenha participado dos cursos da Alura sobre Angular, é provável que já tenha desenvolvido e acompanhado a construção deste sistema. Para compreender melhor seu funcionamento, é recomendável revisar essas aulas, pois elas cobrem o desenvolvimento completo do sistema.

Exploração do Projeto no Figma

Este curso tem como objetivo principal o desenvolvimento de novas funcionalidades para o Jornada Milhas.

Para entender o desenvolvimento e o que precisamos fazer, abriremos o Figma.

No Figma, temos o planejamento do design para as telas e o comportamento do sistema quando estiver concluído. O que precisamos analisar agora é a visualização da tela atual. Com base nessa visualização, criaremos e desenvolveremos as funcionalidades necessárias.

Essa ferramenta é amplamente utilizado pelas pessoas designers para desenhar telas e organizar fluxos. Isso proporciona às pessoas desenvolvedoras uma visão clara do projeto. O mais interessante do Figma é que ele facilita o trabalho da pessoa desenvolvedora front-end, entregando HTML e CSS prontos para uso. Basta copiar, colar no VSCode e fazer pequenos ajustes para que tudo funcione corretamente. Normalmente são entregues HTML e CSS, mas nosso foco é desenvolver com Angular.

Portanto, talvez seja necessário usar um plugin específico para fazer a conversão. Além disso, é fundamental entender um pouco sobre o framework utilizado. Apesar disso, o Figma é uma ferramenta muito poderosa. O fato de já fornecer o HTML e CSS prontos facilita bastante o desenvolvimento de novas telas e funcionalidades.

Ao clicar na imagem e explorar um pouco mais, podemos entender como o Figma funciona. Ele também possui um modo desenvolvedor, que é justamente o que mostrei para vocês. Neste modo, ao clicar em um componente, o Figma gera o HTML e CSS específicos para ele. Isso é muito importante e bastante útil.

Tela de detalhes a ser desenvolvida

No Figma, temos diversas telas a serem desenvolvidas. Analisando o que vamos desenvolver ao longo deste curso, temos a primeira tela de detalhes, e depois desenvolveremos as outras.

Começaremos pelas telas mais simples e avançaremos para as mais complexas. Isso facilitará o entendimento de como desenvolver essas telas e criar os testes para elas.

O foco é desenvolver uma tela, entender toda a sua funcionalidade e criar os testes correspondentes. Não vamos nos concentrar tanto na construção do HTML e do CSS, mas sim na criação dos testes.

Preste atenção na parte dos testes, pois são fundamentais para a construção e consolidação do conhecimento em desenvolvimento.

Um detalhe muito importante: ao usar o Figma, podemos pegar uma tela, desenvolver o componente, criar a tela desejada e identificar suas funcionalidades. Isso simula o processo do mercado de trabalho, onde recebemos a tela do designer e desenvolvemos em cima do framework utilizado, seja Angular, React, Vue ou HTML puro.

Dessa forma, conseguimos entregar todas as funcionalidades importantes para a pessoa cliente final.

Entrega das telas em sprints

Cada uma dessas etapas ou telas será entregue dentro de uma sprint. O Scrum é uma metodologia ágil usada em diversos projetos. Nosso objetivo é trabalhar dessa forma, focando em uma tela por aula e aumentando gradualmente a complexidade. Isso ajuda na fixação do conhecimento adquirido e na curva de aprendizado de todos. Isso é o mais importante.

Acompanhe o desenvolvimento de cada uma dessas telas para entender melhor o dia a dia de uma pessoa desenvolvedora front-end, desde o recebimento da tela de um designer até a codificação.

Agora que sabemos quais telas serão desenvolvidas e como implementar as features ("funcionalidades"), é importante explorar o projeto para entender seu funcionamento. Isso garantirá que as features sejam desenvolvidas de acordo com o planejamento da equipe de produtos e do pessoal de design responsável pelos detalhes das telas.

localhost:4200

Abrimos o Google Chrome, onde o projeto Jornada Milhas está em execução. Isso nos permitirá ver como o projeto está funcionando atualmente. Antes de começarmos o desenvolvimento, é importante entender exatamente como o projeto está sendo executado.

Este projeto permite fazer reservas para viagens, seja para férias ou um final de semana tranquilo. Nessa página, podemos escolher o destino, se cadastrar, fazer login e explorar todas as opções disponíveis para você como pessoa usuária.

Como pessoas desenvolvedoras, é importante entender o que será feito. Portanto, vamos voltar um pouco no Figma para revisar em detalhe a tela de detalhes de reserva. Esta é a tela que a pessoa usuária visualizará ao selecionar uma promoção disponível na seção "Promoções". A partir dessa tela, desenvolveremos a funcionalidade correspondente.

Estrutura do projeto no VSCode

Para isso, vamos ao VSCode para examinar a estrutura do projeto. Este é um projeto Angular com uma estrutura básica, comum em muitos projetos no mercado.

À esquerda, temos uma pasta shared com os principais componentes compartilhados entre vários módulos e telas. Em seguida, temos a tela home e a tela de detalhes denominada apenas detalhe, que é a tela que vamos desenvolver. A pasta core contém os principais serviços e módulos utilizados na aplicação.

A estrutura do projeto inclui páginas como busca, autenticacao (com cadastro, login e perfil) e é dividida dessa forma.

Para desenvolver uma nova tela, criaremos uma pasta dentro de app e utilizaremos os componentes compartilhados, seguindo o mesmo modelo das telas existentes.

A estrutura do projeto é relativamente simples, o que facilita o desenvolvimento de novas telas, e esse é o nosso foco.

Próximos passos

Na próxima aula, começaremos a desenvolver a tela de detalhes e continuaremos com o desenvolvimento. Esperamos você no próximo vídeo!

Criando uma nova feature - Estrutura do projeto mostrando módulos, services e API

Agora que sabemos o que será desenvolvido — a tela de detalhes de reservas — retornaremos ao Figma para confirmar os requisitos. Em seguida, iremos ao VSCode para criar o componente e prosseguir com o desenvolvimento.

Confirmação dos requisitos no Figma

No Figma, identificamos os elementos das telas de detalhes de reservas para entender claramente o que será implementado.

É essencial revisar sempre as propostas do design no Figma antes de iniciar o desenvolvimento.

Isso garante que o que será desenvolvido esteja alinhado com o que foi solicitado, evitando a geração de bugs e assegurando que o resultado final corresponda às expectativas.

Estrutura da Tela de Detalhes

Na tela que vamos desenvolver, encontramos os detalhes da reserva, que incluem imagens, informações sobre a viagem, que ocorre no deserto do Chile, e depoimentos logo abaixo. Abaixo dessa seção, está o rodapé com informações sobre a Jornada Milhas. Esta é a tela que será desenvolvida.

Agora, vamos voltar ao VSCode.

Preparação no VSCode

Certifique-se de que o VSCode esteja aberto e que você tenha o terminal do back-end pronto.

É fundamental que o back-end já esteja clonado na sua máquina, instalado e em execução com sucesso. O back-end é a API para o front-end do Jornada Milhas, e seu funcionamento efetivo é essencial para o desenvolvimento.

Criação do componente de detalhes

Abrimos o terminal do front-end do Jornada Milhas. Com esse terminal aberto, podemos focar no desenvolvimento da tela de detalhes. Digitamos o seguinte comando:

ng g c detalhe

Esse comando cria o componente de detalhes e permite o desenvolvimento da tela conforme visto no Figma. Pressionamos "Enter" e aguardamos a geração do componente. O sistema pergunta se desejamos incluir estatísticas no Google Analytics; podemos responder "sim" ou "não", pois ambas as opções funcionarão da mesma forma. No caso, optamos por "Yes".

Após pressionar "Enter", o componente é criado conforme esperado.

Effective status: enabled
CREATE src/app/detalhe/detalhe.component.html (22 bytes)
CREATE src/app/detalhe/detalhe.component.spec.ts (566 bytes)
CREATE src/app/detalhe/detalhe.component.ts (207 bytes)
CREATE src/app/detalhe/detalhe.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1371 bytes)

A pasta detalhe já está disponível dentro de app, junto com as outras telas desenvolvidas no Jornada Milhas.

src
- app
  - autenticacao
  - busca
  - core
  - detalhe
    - detalhe.component.html
    - detalhe.component.scss
    - detalhe.component.spec.ts
    - detalhe.component.ts
  - home
  - shared

Primeiro, acessamos a pasta detalhe e abrimos o arquivo HTML detalhe.component.html. O Angular CLI cria uma tag p padrão indicando que a tela de detalhes está funcionando.

No entanto, o foco do curso é o teste, e não o desenvolvimento do HTML e CSS do zero. Portanto, em alguns momentos, usaremos referências para adicionar conteúdo ao HTML e ao CSS, para que possamos nos concentrar nos testes, que são a parte mais importante.

É importante revisar com atenção o HTML e o CSS para entender a estrutura criada. Compreender bem essa estrutura é essencial para o desenvolvimento das telas e para entender o que está por trás do código.

Transferência de recursos do Figma

Para avançar no desenvolvimento, vamos trazer alguns recursos para esse arquivo. Primeiro, retornamos ao Figma para entender a estrutura que desejamos.

Importação das imagens

Observe que há várias imagens da tela "Detalhes", e vamos optar pela forma mais simples de trabalhar com elas: transferir as imagens diretamente do Figma para a nossa aplicação. Para isso, clicamos na imagem no Figma e realizamos o download na parte inferior direita.

Podemos exportar a imagem, fazer o download e adicioná-la à nossa aplicação. Utilizaremos todas as imagens disponíveis.

Copiamos todas as imagens no Figma e a colamos na pasta assets da nossa aplicação.

Com as imagens já adicionadas, podemos focar mais no desenvolvimento do HTML e do CSS.

Estrutura e aplicação do CSS

Nossa ideia é focar nas partes importantes da tela de detalhes. Para facilitar o desenvolvimento, usaremos o HTML que já temos pronto. O mais importante é entender o que será feito e como o desenvolvimento se baseia nesse HTML.

src/app/detalhe/detalhe.component.html

<app-banner
  src="assets/imagens/banner-detalhes.png"
  alt="Banner da tela de detalhe">
</app-banner>

<app-container>
  <section class="wrapper">
    <article>
      <h1 class="main-title">Atravesse o deserto no Chile</h1>
      <section class="travel-details">
        <div class="travel-image-container"></div>
        <aside class="travel-info">
          <div class="travel-info-content">
            <p><strong>Data de ida:</strong> 23/09/2025</p>
            <p><strong>Data de volta:</strong> 30/09/2025</p>
            <p><strong>Origem:</strong> Rio Branco</p>
            <p><strong>Estado de origem:</strong> Acre</p>
            <p class="travel-price">R$ 3769</p>
            <div>
              <button class="reserve-button">Quero reservar agora!</button>
            </div>
            <button class="buy-button">Quero comprar agora!</button>
          </div>
        </aside>
      </section>
      <section class="adventure-description">
        <p>
          Bem-vindo à aventura de uma vida no coração do Deserto do Atacama! Nosso pacote de viagem oferece uma experiência única e inesquecível, explorando uma das maravilhas naturais mais fascinantes do mundo. Localizado no norte do Chile, o Atacama é conhecido por suas paisagens surreais, vastidão impressionante e céu noturno estrelado. Durante sua estadia, você terá a oportunidade de testemunhar a beleza hipnotizante dos salares brilhantes, vulcões imponentes e cânions esculpidos pelo tempo.
        </p>
        <p>
          Prepare-se para se perder na imensidão do deserto enquanto embarca em emocionantes excursões guiadas. Desde os Geysers del Tatio, onde os vapores se elevam ao amanhecer, até as lagoas salgadas de Miscanti e Miñiques, cada destino revela uma parte única da rica tapeçaria natural do Atacama. À noite, mergulhe na magia do observatório astronômico, onde a falta de poluição luminosa permite que as estrelas brilhem com intensidade inigualável, oferecendo um espetáculo celestial incomparável. Esteja preparado para se surpreender e encantar a cada passo neste oásis deslumbrante no meio do deserto.
        </p>
      </section>
      <section class="image-gallery">
        <div class="gallery">
          <div class="gallery-image-1"></div>
          <div class="gallery-image-2"></div>
        </div>
        <div class="large-gallery-image"></div>
      </section>
    </article>
  </section>

  <hr class="diveder">

  <section class="testimonials">
    <h2>Depoimentos</h2>
    <app-depoimentos />
  </section>
</app-container>

Entenderemos cada uma das estruturas presentes.

Estamos tratando do app banner. Para entender isso, voltamos ao Figma. O app banner exibe uma imagem com um estilo específico na parte superior. Neste caso, é a imagem acima de "Atravesse o deserto do Chile" e abaixo de "Jornada".

Em todas as telas que desenvolvermos, será necessário incluir o app banner. Também utilizamos o app-container, que encapsula todo o conteúdo e garante que ele siga um layout específico.

Notamos uma margem entre o fim da tela e o início do conteúdo HTML. Esse componente cria essa estrutura, garantindo que a aplicação siga um padrão consistente e evitando ajustes individuais de padding em cada componente. Compreender essa estrutura é importante!

Além disso, o restante do HTML é escrito de forma semântica, o que é importante para o SEO do Google. Isso permite que cada componente e estrutura de tela seja identificado corretamente.

Temos as sections, o article, e o h1, que indica o título da página. Em seguida, detalhamos cada aspecto da viagem ou reserva. Com o HTML já estruturado, é importante aplicar o CSS correspondente.

Neste caso, usamos SASS, o que significa que o arquivo é um SCSS. Isso permite um trabalho mais robusto com o CSS, facilitando a manutenção e tornando-o mais reutilizável na aplicação. Até mais!

Sobre o curso Angular: expandindo funcionalidades com testes unitários e e2e

O curso Angular: expandindo funcionalidades com testes unitários e e2e possui 198 minutos de vídeos, em um total de 50 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:

Criando uma nova feature
Aprimorando funcionalidades com testes
Fluxo de pagamento
Fluxo de cancelamento
Testando a feature desenvolvida com Cypress