Testing Angular in 2024

Slides of the talk at the This is Learning Conference about the current state of testing in Angular.

Transcript

1. RainerHahnekamp Testing in Angular 2024 Rainer Hahnekamp, 16.5.2024
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Agenda 1. Testing Categories 2. Testing Strategies 3. Testing Tools
4. RainerHahnekamp Testing Categories
5. RainerHahnekamp Testing Terms are not specified
6. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
7. RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service Unit Test
8. RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service ~ Component Test
9. RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service Integration Test
10. RainerHahnekamp E2E Test
11. RainerHahnekamp Testing Strategies
12. RainerHahnekamp Pros and Cons Unit ✅ Fast ✅ Precise ✅ Easy ⛔ Low Coverage ⛔ No Refactoring possible ⛔ High Maintenance Costs Integration (+Component) ✅ Good Coverage ✅ Refactoring possible ✅ Lower Maintenance Costs ⛔ Difficult to Write ⛔ Slower than Unit Test End-to-End ✅ Very Easy to Write ✅ Implementation Independent ✅ High Coverage ⛔ Hard to Identify Error ⛔ Challenges for CI Setup ⛔ Slow
13. RainerHahnekamp Spotify - Honeycomb Kent Dodds' Trophy
14. RainerHahnekamp The Right Balance "Fingerspitzengefühl"
15. RainerHahnekamp Testing Tools
16. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
17. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
18. RainerHahnekamp Jasmine (Karma / Web Test Runner) ✅ Official Testing Solution ✅ Supported by Angular • No Issues with ESM • No Issue with Build Process • Used by Angular Material, Framework, etc. ✅ Not so fast as others ✅⛔Full Browser Support ⛔ Not Supported by Nx
19. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
20. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
21. RainerHahnekamp Jest ✅ Major Testing Framework in JavaScript ✅ Parallelization Support ✅ "Affected Mode" ✅ Upcoming Official Support ✅⛔ Depends on Community Contributions ⛔ History of ESM Issues ⛔ Asynchronous Tasks harder than in Jasmine
22. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
23. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
24. RainerHahnekamp Vitest ✅ Modern Testing Framework ✅ Based on Vite ✅ Faster than Jest ✅ Jest Compatibility ✅⛔ Support only via Analog ⛔ Not that much used in Angular
25. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
26. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
27. RainerHahnekamp Cypress ✅ Most used E2E Framework ✅ Great Developer Experience ✅ Stable Tests ✅ Official Partner of Angular ⛔ Parallelization and Test Replay via Cypress Cloud ⛔ Minor Constraints due to "In-Browser Tests"
28. RainerHahnekamp
29. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
30. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
31. RainerHahnekamp Playwright ✅ Future #1 E2E Testing Framework ✅ Parallelization and Traceview out of the Box ✅ No Contraints due to "Outside-Browser Tests" ⛔ Not an Official Partner of Angular
32. RainerHahnekamp
33. RainerHahnekamp In the Midst
34. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
35. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
36. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
37. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
38. RainerHahnekamp Testing Library ✅ Boosts Testing DX ✅ Enforces certain Testing Style ✅ Huge Ecosystem ✅⛔ Runs on top of Jasmine, Jest,... ⛔ No E2E DX Cypress Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Minor Technical Constraints ⛔ Build Issues ⛔ Not Actively Maintained Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ✅⛔ Community Driven ⛔ Experimental
39. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
40. RainerHahnekamp Further Reading • Martin Fowler ◦ https://martinfowler.com/articles/2021-test-shapes.html ◦ https://martinfowler.com/articles/mocksArentStubs.html • Guillermo Rauch ◦ https://twitter.com/rauchg/status/807626710350839808 • Kent Dodds ◦ https://kentcdodds.com/blog/write-tests • Spotify Blog ◦ https://engineering.atspotify.com/2018/01/testing-of-microservices/ • Ramona Schwerig ◦ https://www.smashingmagazine.com/2023/09/long-live-test-pyramid/ • Alex Rickabaugh ◦ https://github.com/angular/angular/issues/54438#issuecomment-1971813177 • Cypress Issue on improving Component Testing for Angular ◦ https://github.com/cypress-io/cypress/issues/26243 • Douglas Parker on official Jest Support ◦ https://github.com/angular/angular-cli/issues/25217#issuecomment-1581581005
41. RainerHahnekamp Thanks