Eduardo Florence
Desenvolvedor Full Stack, atualmente trabalhando com Angular, NestJS e MongoDB e tecnologias Serverless. Um dos coordenadores do Meetup Angular Rio de Janeiro
Angular
Component
Harnesses
Angular
Component
Harnesses
Eduardo Florence
@eduardoflorence
eduardo@infolink.com.br
github.com/eduardoflorence
Desenvolvedor Full Stack
slides.com/eduardoflorence
Testes só atrasam a
entrega da aplicação!
Qual o problema a ser resolvido?
No frontend, ao escrevermos testes para componentes, geralmente precisamos de uma consulta a um seletor CSS.
Se o Layout/CSS mudam, os testes quebram.
Page Objects
"Ao escrever testes em uma página da web, você precisa consultar os elementos dessa página da web para clicar nos links e determinar o que é exibido. No entanto, se você escrever testes que manipulam os elementos HTML diretamente, seus testes serão frágeis para mudanças na IU. Um Page Object envolve uma página HTML ou fragmento com uma API específica, permitindo que você manipule os elementos da página sem vasculhar o HTML."
Martin Fowler
O que é Harness?
Arreio, toda a estrutura que veste um cavalo (sela, estribo, chicote) para que possamos cavalgá-lo
Angular Component Harnesses
Ferramental necessário para “vestir” um componente e ser possível testá-lo. Ele permite criar a API pela qual um teste irá interagir com um componente
Angular Component Harnesses
- Disponibilizado pelo pacote @angular/cdk/testing
- Foi introduzido no angular 9
- Inicialmente para testar componentes do Angular Material
- Agora disponível para uso em qualquer componente
Visão Geral de Testes
Benefícios
- O teste é isolado das atualizações internas de um componente (ex.: alteração do seu DOM)
- Testes de componentes confiáveis, estáveis e legíveis
- Testes não quebram durante a atualização de sua biblioteca de componentes
- Redução da complexidade para escrever um teste
Autor
de Testes
Autor
de Componente Harness
Autor
de Ambiente Harness
Funcionalidades
Hands On
Referências
- https://material.angular.io/cdk/test-harnesses/overview
- https://martinfowler.com/bliki/PageObject.html
- https://material.angular.io/guide/using-component-harnesses
- https://medium.com/@mhamel06/component-test-harnesses-angular-9s-second-best-feature-4261cabedc77
- https://kevinkreuzer.medium.com/test-your-components-using-angular-materials-component-harnesses-f9c1deebdf5d
- https://indepth.dev/create-a-component-harness-for-your-tests-with-angular-cdk
Eduardo Florence
@eduardoflorence
eduardo@infolink.com.br
github.com/eduardoflorence
Desenvolvedor Full Stack
slides.com/eduardoflorence
Angular Component Harnesses
By Eduardo Florence
Angular Component Harnesses
Escrever testes buscando elementos através de seu CSS é uma forma muito frágil de trabalho, qualquer mudança de layout pode quebrar todos os seus testes. A feature “Component Harnesses” do Angular traz um novo jeito dos testes interagirem com os componentes, permitindo o desenvolvimento de uma API que cuidará de expor apenas o que é preciso para o teste, resultando em um confiabilidade e legibilidade melhor.
