Testable Architecture in Angular

An architectural style in Angular that makes it easy to apply the right testing methodologies.

Transcript

1. Testable Architecture in Angular Reliable Web Summit, 26. - 27. August 2021
2. About Me • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consultancy • > 20 Years Experience @rainerhahnekamp https://angulararchitects.io/workshops
5. Common Questions in Testing • What should we test? • How much should we test? • Should we use the TestBed all the time? • What components/services should be included in a test? • What should we mock?
6. Overwhelmed by too many choices?
7. Architecture as a Guideline
8. Agenda 1. Demo Application 2. Different Testing Techniques 3. Unit vs. Integration tests 4. Nx Architecture a. + DDD Extension by AngularArchitects 5. Testable Architecture
9. Example Application
10. Dep-Graph Holidays Address Getter Brochure Sender Store Nominatim Validator validate- address.ts holiday. reducer.ts holiday. actions.ts Holiday Effects holiday. selectors.ts
11. Different Testing Techniques
12. Unit Tests Integration Tests End-to-End (E2E) Tests
13. 1. Unit / Integration Range a. Full mocking, no TestBed b. Selected mocking, without DOM interaction c. Selected mocking, DOM interaction d. Most minimal mocking, DOM Interaction 2. Exotic a. RxJs Marbles b. Visual Regression c. Component Tests via Storybook/Cypress (E2E) Different Testing Techniques
14. Unit vs. Integration Tests
15. Unit Tests Integration Tests End-to-End (E2E) Tests
16. Testing Pyramid Revisited Unit Tests Integration Tests End-to-End Tests
17. Unit vs Integration Test Unit Tests • Mock a lot ◦ Very tightly coupled to implementation • Advantages ◦ Great code quality (FP) ◦ Perfect fit for edge cases / finding bugs ◦ Fast • Disadvantages ◦ Lots of code for mocking ◦ Refactoring not really possible Integration Tests • Mock out-of-system dependencies ◦ Run against an API (UI) • Advantages ◦ Great for refactoring ◦ Efficient (coverage) • Disadvantages ◦ Big setup required ◦ Slow
18. Testing According to ROI Kent C. Dodds: https://twitter.com/kentcdodds/status/960723172591992832
19. Testing Pyramid Revisited Unit Tests Integration Tests End-to-End Tests Sweet Spot Edge Cases Modules
20. Potential Problems • Unit Tests ◦ What technique should be applied? ◦ Too much mocking ◦ Do I need unit tests for everything? ▪ AngularCLI generated spec files • Integration Tests ◦ Too much setup required → feels like E2E ◦ What should I mock / What is my entry point?
21. nx* Architecture * DDD Addition by AngularArchitects
22. Shared Forms Grid Error Handling Widgets Backend Middleware ... App Shell Domain Domain Domain Domain
23. Domain Feature (Container Cmp.) Data UI (Presentational Cmp.) Domain Models Component Service Module
24. Container Components • Minimal HTML/CSS • Lots of DI • Facilitator • HTML & CSS only • Minimal Typescript • No DI • @Input & @Output • No Observables @Input @Output Presentational Components Data (ngrx) selectors actions Container & Presentational Components
25. Dep-Graph Revisited Holidays Address Getter Store Nominatim Validator validate- address.ts holiday. reducer.ts holiday. actions.ts Holiday Effects holiday. selectors.ts Brochure Sender Holiday Card
26. Data Holiday Domain Feature Holidays Brochure Sender Store actions reducer effects selectors UI Holiday Card Shared Address Getter Nominatim Validator validate- address.ts
27. Testable Architecture • Unit Tests ◦ Class has a defined type ◦ One testing technique per Type • Integration Tests ◦ Reduction of dependencies via domain/feature boundaries ◦ Integration Test per Domain/Feature ◦ Entry point is the feature component
28. Edge Cases Unit Tests Integration Tests Sweet Spot Edge Cases Modules
29. Edge Cases Examples • Components • Services • Functions
30. 1. Unit / Integration Range a. Full mocking, no TestBed b. Selected mocking, without DOM interaction c. Selected mocking, DOM interaction d. Most minimal mocking, DOM Interaction 2. Exotic a. RxJs Marbles b. Visual Regression c. Component Tests via Storybook/Cypress (E2E) Edge Cases: Testing Techniques
31. Edge Cases Container Components Presentational Components State Management Domain Models Visual Regression Snapshot Full Mocking / no TestBed RxJs Marbles
32. Modules Unit Tests Integration Tests Sweet Spot Edge Cases Modules
33. Modules Examples • Interplay between Container & Presentational Components • Complex Components (DataGrid) • State Management
34. 1. Unit / Integration Range a. Full mocking, no TestBed b. Selected mocking, without DOM interaction c. Selected mocking, DOM interaction d. Most minimal mocking, DOM Interaction 2. Exotic a. RxJs Marbles b. Visual Regression c. Component Tests via Storybook/Cypress (E2E) Modules: Testing Techniques
35. Logical Groups Container Components Presentational Components State Management Domain Models Selected Mocking without DOM Selected Mocking with DOM interaction
36. Sweet Spot Unit Tests Integration Tests Sweet Spot Edge Cases Modules
37. Sweet Spot Examples • Per Domain • Per Feature • Tests which are too hard for E2E
38. 1. Unit / Integration Range a. Full mocking, no TestBed b. Selected mocking, without DOM interaction c. Selected mocking, DOM interaction d. Most minimal mocking, DOM Interaction 2. Exotic a. RxJs Marbles b. Visual Regression c. Component Tests via Storybook/Cypress (E2E) Sweet Spot: Testing Techniques
39. Sweet Spot Container Components Presentational Components State Management Domain Models
40. Summary • Try to go for Integration Tests • Leave the edge cases for Unit Tests with full mocking • Cover what's left with "Modules" Tests • Apply the right techniques: ◦ Visual Regression: Presentational Components ◦ RxJs Marbles: ngRx Effect ◦ Storybook/Cypress: Component Groups
41. Thank you very much https://github.com/rainerhahnekamp/testable-architecture-in-angular
42. Schedules: Public Testing Workshop • 25. & 26. October (German) • 28. & 29. October (English) • 6. & 7. December (English) Cooperation with Angular Academy • 15. September - 17. September • 29. September - 1. October
43. Image Sources • Babel: https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Kunsthistorisches_Museum_Wien%2C_Pieter_Bruegel_d.%C3%84.%2C_der_Turmbau_zu_Babel.JPG/1024px-Ku nsthistorisches_Museum_Wien%2C_Pieter_Bruegel_d.%C3%84.%2C_der_Turmbau_zu_Babel.JPG • Wiener Tafelspitz: https://www.flickr.com/photos/pokpok/382061 • Wiener Schnitzel: https://pixabay.com/get/gcb51eeba20917a5033792cd225f69146ce3ca04e07ecdabefbe0014c3280c5237b7ac2050244c38855e83408e24c0b9f_1920.jpg • Kaiserschmarrn: https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/2015_0731_Kaiserschmarrn_Apfelso%C3%9Fe_Edelweissh%C3%BCtte_S%C3%B6lden.jpg/960px-2015_0731_Kai serschmarrn_Apfelso%C3%9Fe_Edelweissh%C3%BCtte_S%C3%B6lden.jpg • Sacher Torte: https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Original_Sacher-Torte_%C2%A9Hotel_Sacher.jpg/1024px-Original_Sacher-Torte_%C2%A9Hotel_Sacher.jpg • No Kangaroos in Austria: https://ih1.redbubble.net/image.467145234.1731/bg,f8f8f8-flat,750x,075,f-pad,750x1000,f8f8f8.u5.jpg • Sound of Music Cover: https://www.rottentomatoes.com/m/sound_of_music