Testing in 2024: A "dynamic" Situation

Mit der Modernisierung von Angular nimmt auch das Testumfeld Fahrt auf.

Karma tritt zugunsten des Web Test Runners zurück, während Jest offizielle Unterstützung erhält und Analog uns mit Vitest lockt. Playwright beansprucht den Spitzenplatz vor Cypress und was war da noch mit Jasmine?

Zeit für Klarheit!

Ich werde einen umfassenden Überblick über die Testlandschaft im Jahr 2024 geben – die aktuellen verfügbaren Tools hervorheben, zukünftige Entwicklungen prognostizieren und skizzieren, was eine zeitgemäße Teststrategie beinhaltet.

Modernes Angular braucht modernes Testing Tooling!

Transcript

1. Testing in 2024 Eine "dynamische" Situation Rainer Hahnekamp 9. November 2024
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) • Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality
3. RainerHahnekamp Agenda 1. Testing Types 2. Testing Strategies 3. Testing Tools
4. RainerHahnekamp Testing Types
5. RainerHahnekamp Testing Terms are not specified
6. Unit Tests Integration & Component Tests End-to-End (E2E) Tests
7. Component Service Service Service Directive Service Component Pipe Service Unit Test
8. Component Service Service Service Directive Service Component Pipe Service ~ Component Test
9. Component Service Service Service Directive Service Component Pipe Service Integration Test
10. E2E Test
11. RainerHahnekamp Testing Strategies
12. Spotify - Honeycomb Kent Dodds' Trophy
13. RainerHahnekamp Jeremy Elbourn: Angular Lead Angular Q&A Session September 2024 As close to the real-world as practical. Services as Dependencies - Don't replace them - Try to come up with a fake - Last resort: Use a Mock
14. 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. ✅⛔Full Browser Support ⛔ Not Supported by Nx ⛔ Not so fast as others
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 ✅ Nx Availability ✅⛔ Community-driven ⛔ 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 ✅ Widely Used ✅ Great Developer Experience ✅ Stable Tests ✅ Official Partner of Angular ⛔ Parallelization and Test Replay via Cypress Cloud ⛔ Minor Constraints due to "In-Browser Tests"
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 ✅ #1 E2E Testing Framework ✅ Parallelization and Traceview out of the Box ✅ No Constraints due to "Outside-Browser Tests"
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 ⛔ Minor Technical Constraints ⛔ Build Speed Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Not Available Yet ⛔ Experimental/Status Unclear
39. RainerHahnekamp https://github.com/microsoft/playwright/pull/27783
40. RainerHahnekamp Safe Pragmatic Brave
41. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
42. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests
43. 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 • Nx & Karma ◦ https://github.com/nrwl/nx/issues/19770 • 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