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
   

   View Slide

2. About Me
   ● Rainer Hahnekamp
   ANGULARarchitects.io
   ● Trainings and Consultancy
   ● > 20 Years Experience
   @rainerhahnekamp
   https://angulararchitects.io/workshops
   

   View Slide

3. View Slide

4. View Slide

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?
   

   View Slide

6. Overwhelmed by too
   many choices?
   

   View Slide

7. Architecture as a
   Guideline
   

   View Slide

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
   

   View Slide

9. Example
   Application
   

   View Slide

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
    

    View Slide

11. Different Testing
    Techniques
    

    View Slide

12. Unit Tests
    Integration Tests
    End-to-End (E2E) Tests
    

    View Slide

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
    

    View Slide

14. Unit vs. Integration
    Tests
    

    View Slide

15. Unit Tests
    Integration Tests
    End-to-End (E2E) Tests
    

    View Slide

16. Testing Pyramid Revisited
    Unit Tests
    Integration Tests
    End-to-End Tests
    

    View Slide

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
    

    View Slide

18. Testing According to ROI
    Kent C. Dodds: https://twitter.com/kentcdodds/status/960723172591992832
    

    View Slide

19. Testing Pyramid Revisited
    Unit Tests
    Integration Tests
    End-to-End Tests
    Sweet Spot
    Edge Cases
    Modules
    

    View Slide

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?
    

    View Slide

21. nx* Architecture
    * DDD Addition by AngularArchitects
    

    View Slide

22. Shared
    Forms Grid
    Error
    Handling
    Widgets
    Backend
    Middleware
    ...
    App Shell
    Domain Domain Domain Domain
    

    View Slide

23. Domain
    Feature (Container Cmp.)
    Data UI (Presentational Cmp.)
    Domain Models
    Component
    Service
    Module
    

    View Slide

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
    

    View Slide

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
    

    View Slide

26. Data
    Holiday Domain
    Feature
    Holidays
    Brochure
    Sender
    Store
    actions
    reducer
    effects
    selectors
    UI
    Holiday
    Card
    Shared
    Address
    Getter
    Nominatim
    Validator
    validate-
    address.ts
    

    View Slide

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
    

    View Slide

28. Edge Cases
    Unit Tests
    Integration Tests Sweet Spot
    Edge Cases
    Modules
    

    View Slide

29. Edge Cases Examples
    ● Components
    ● Services
    ● Functions
    

    View Slide

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
    

    View Slide

31. Edge Cases
    Container
    Components
    Presentational
    Components
    State
    Management
    Domain Models
    Visual Regression
    Snapshot
    Full Mocking / no TestBed
    RxJs Marbles
    

    View Slide

32. Modules
    Unit Tests
    Integration Tests Sweet Spot
    Edge Cases
    Modules
    

    View Slide

33. Modules Examples
    ● Interplay between Container & Presentational Components
    ● Complex Components (DataGrid)
    ● State Management
    

    View Slide

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
    

    View Slide

35. Logical Groups
    Container
    Components
    Presentational
    Components
    State
    Management
    Domain Models
    Selected Mocking
    without DOM
    Selected Mocking with
    DOM interaction
    

    View Slide

36. Sweet Spot
    Unit Tests
    Integration Tests Sweet Spot
    Edge Cases
    Modules
    

    View Slide

37. Sweet Spot Examples
    ● Per Domain
    ● Per Feature
    ● Tests which are too hard for E2E
    

    View Slide

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
    

    View Slide

39. Sweet Spot
    Container
    Components
    Presentational
    Components
    State
    Management
    Domain Models
    

    View Slide

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
    

    View Slide

41. Thank you very much
    https://github.com/rainerhahnekamp/testable-architecture-in-angular
    

    View Slide

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
    

    View Slide

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
    

    View Slide