Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Integrando Test Driven Development en aplicaciones React

78 views

Published on

Cuando desarrollamos aplicaciones Web o móviles nos enfocamos en el desarrollo de las funcionalidades y en tener estilos acordes a los mockups que cumplan con los requerimientos del cliente, dejando el Unit Testing como un requerimiento adicional y no principal dentro de una metodología de desarrollo.

En esta presentación exploraremos todas las ventajas que se manejan aplicando la metodología TDD contra la metodología tradicional de testing, mediante una aplicación Web real con React-Redux. Asimismo, aprenderemos a configurar correctamente un ambiente de unit testing para aplicaciones React-Redux y cómo medir la cobertura de pruebas de la aplicación.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Integrando Test Driven Development en aplicaciones React

  1. 1. Integrando Test Driven Development en aplicaciones React
  2. 2. Nuestras locaciones
  3. 3. Nuestros Panelistas Juan Carlos Pacheco H Senior Frontend Engineer Tracy Leveau Marketing Analyst
  4. 4. Agenda • Metodologías Ágiles de Desarrollo • Qué es TDD y sus beneficios • TDD vs Pruebas Tradicional • Aplicaciones React Redux Typescript • Herramientas de Pruebas– Jest - Enzyme • Configurando un ambiente de pruebas en Aplicaciones React • Pruebas del DOM • Probando Estado de React • Probando acciones Redux y asíncronas Thunks • Cobertura de Pruebas • Ejemplo en vivo. • Conclusiones y recomendaciones
  5. 5. Metodologías ágiles de desarrollo ¿QUESTIONS? #TDDBelatrix
  6. 6. ¿Qué es TDD (Test Driven Development)? ¿QUESTIONS? #TDDBelatrix
  7. 7. Beneficios de TDD • Criterios de aceptación • Enfoque • Interfaces • Código más organizado • Dependencias • Refactorización Segura • Reducción de errores en app • Incremento de retorno • Documentación Actualizada ¿QUESTIONS? #TDDBelatrix Quality Scope
  8. 8. TDD VS TEST LAST ¿QUESTIONS? #TDDBelatrix Costo de Desarrollo
  9. 9. Apps React Redux Typescript ¿QUESTIONS? #TDDBelatrix
  10. 10. Herramientas de prueba Jest - Enzyme ¿QUESTIONS? #TDDBelatrix
  11. 11. ¿QUESTIONS? #TDDBelatrix VAMOS A DIVERTIRNOS, ¡¡¡MUÉSTRAME EL CÓDIGO!!!
  12. 12. Instalando herramientas de pruebas Jest - Enzyme ¿QUESTIONS? #TDDBelatrix
  13. 13. ¿QUESTIONS? #TDDBelatrix Configuando herramientas de pruebas Jest - Enzyme
  14. 14. PROBANDO APPS REACT – REDUX REALES
  15. 15. Probando Apps React - Redux reales ¿QUESTIONS? #TDDBelatrix
  16. 16. Testeando objectos DOM ¿QUESTIONS? #TDDBelatrix DIVS FORMS INPUTSPAN BUTTON LINKS H1 CONTENT
  17. 17. ¿QUESTIONS? #TDDBelatrixProbando Apps React - Redux reales
  18. 18. Cobertura de pruebas ¿QUESTIONS? #TDDBelatrix
  19. 19. Ejemplo en vivo.
  20. 20. CONCLUSIONES Y RECOMENDACIONES
  21. 21. Referencias • JEST - ENZYME • https://jestjs.io/ • https://airbnb.io/enzyme/docs/api/ • https://medium.com/codeclan/testing-react-with-jest-and- enzyme-20505fec4675 • REACT - REDUX • https://reactjs.org/ • https://es.redux.js.org/ • https://medium.com/netscape/testing-a-react-redux-app- using-jest-and-enzyme-b349324803a9 • Typescript • https://rjzaworski.com/2016/12/testing-typescript-with-jest
  22. 22. ¿Preguntas?
  23. 23. ¡Muchas Gracias! www.belatrixsf.com

×