Testeando Componentes

+ Testing Library
Ignacio perfil

Ignacio Falk

Software developer @ This Dot
Ingeniero en Sonido
Músico

¿Qué es un componente?

Tipos de tests

  • Aislado
  • Shallow
  • Integrado

Test aislado

  • No renderizamos componente
  • Testeamos solo la clase
  • No necesitamos TestBed
componente test aislado
ejemplo test aislado

Shallow test

  • Renderizamos solo 1 componente
  • No se renderizan los componentes hijo
Ejemplo ejemplo componente y test fallido

NO_ERRORS_SCHEMA

shallow test con NO_ERRORS_SCHEMA

Dobles (mock, spy)

shallow test con mocks

Test de integración

  • + de un componente
  • servicios? pipes? Directives?
integracion sin bindings
integracion con bindings

¿Cuanto integramos?

  • router-outlet
  • Containers/ componentes presentacionales
  • Componentes creados dinámicamente

Otros tests

Tests visuales

visual testing

Test de accesibilidad

accessibility test

+ tests

programming chaos

100% cobertura

componente
test componente
resultado test cobertura
error en template componente

DOM

Implementación vs funcionalidad

Testing Library

logo testing library

Simple and complete testing utilities that encourage good testing practices

testing libraries

npm install --save-dev @testing-library/angular

  • Interactuar con la aplicación de la misma forma que el usuario interactúa (a través del DOM)
  • Evitar testear detalles de implementación.
  • Usar selectores que por defecto nos ayuden a testear accesibilidad.
  • Selectores

    • ByLabelText
    • ByPlaceholderText
    • ByText
    • ByDisplayValue
    • ByAltText
    • ByTitle
    • ByRole
    • ByTestId
    setup test
    ejemplos de test

    Recomendaciones en nuestros test

    • + integración
    • Testear funcionamiento y no implementación
    • Algo flexibles (ok/OK)
    • Accesibilidad

    Gracias!

    twitter: @flakolefluk
    github: flakolefluk
    flakolefluk.dev