Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testable Architecture in Angular

Testable Architecture in Angular

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

Rainer Hahnekamp

August 27, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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
  3. None
  4. None
  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