Esplorare il Test-Driven Development (TDD) nel FrontEnd

Transcript

1. © 2022 Thoughtworks Esplorare il Test-Driven Development (TDD) nel FrontEnd 1
2. © 2022 Thoughtworks 2
3. © 2022 Thoughtworks 3
4. © 2022 Thoughtworks 4 Fare TDD nel FE è difficile • Il TDD funziona bene quando abbiamo da testare la logica, ma non quando testiamo interazioni o parti grafiche • Nel BE abbiamo un chiaro contratto (e.g. API contract), nel FE non abbiamo contatti • Tests basati su dettagli implementativi
5. © 2022 Thoughtworks 5 Che fare?
6. © 2022 Thoughtworks Fare TDD nel FrontEnd è difficile 6 … ma non impossibile
7. © 2022 Thoughtworks Demo - App 7
8. © 2022 Thoughtworks 8 Business logic • Il TDD funziona bene quando abbiamo da testare la logica, ma non quando testiamo interazioni o parti grafiche
9. © 2022 Thoughtworks 9 Single component, multiple concerns
10. © 2022 Thoughtworks 10 Single component, multiple concerns
11. © 2022 Thoughtworks Demo - Domain logic 11
12. © 2022 Thoughtworks 12 Contatto • Nel BE abbiamo un chiaro contratto (e.g. API contract), nel FE non abbiamo contatti • I contratti sono gli elementi nell’ accessibility tree
13. © 2022 Thoughtworks 15% Della popolazione mondiale ha qualche forma di disabilità 13 13 © 2024 Thoughtworks | Confidential https://ddiy.co/web-accessibility-statistics/
14. © 2022 Thoughtworks 14 Mettiamoci nei panni degli utenti https://testing-library.com/docs/queries/about #priority React Testing Library
15. © 2022 Thoughtworks Demo - Accessibility based tests 15
16. © 2022 Thoughtworks 16 Funziona me è brutto!
17. © 2022 Thoughtworks 17 E lo stile? Come possiamo applicare il TDD al CSS? Non dobbiamo! Non dobbiamo! Non Dobbiamo!
18. © 2022 Thoughtworks Demo - Custom Hook for the rescue 18
19. © 2022 Thoughtworks 19 Test basati su dettagli implementativi
20. © 2022 Thoughtworks 20 Test basati su dettagli implementativi
21. © 2022 Thoughtworks 21 Test basati su dettagli implementativi Ma dipende…
22. © 2022 Thoughtworks 22 Testare componenti in Isolamento
23. © 2022 Thoughtworks 23 Testare componenti in Isolamento +
24. © 2022 Thoughtworks Demo - Component test 24
25. © 2022 Thoughtworks Summary 25 Consigli (personali) su come applicare il TDD nel mondo FE: • Unit test the Domain Logic • Testare la UI tramite Accessibilità • Non applicare il TDD alle sperimentazioni • Favorire test comprensivi essendo consapevoli dei tradeoff
26. © 2022 Thoughtworks References 26 Libri: Video: Shipping React app with zero-bugs policy using TDD (Nik Sumeiko) Articoli: • Modularizing React Applications with Established UI Patterns • Testing Implementation Details
27. © 2022 Thoughtworks “There is no failure in sports, it’s step to success” 27 Giannis Antetokounmpo 27 © 2024 Thoughtworks | Confidential
28. © 2022 Thoughtworks 28 Luca Giuberti Senior Developer Consultant lucagiuberti @gix_lg Grazie
29. © 2022 Thoughtworks Domande? *Lasciate un feedback ❤ 29 29