Testable Architecture in Angular Reliable Web Summit, 26. - 27. August 2021

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

No content

No content

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?

Overwhelmed by too many choices?

Architecture as a Guideline

Agenda 1. Demo Application 2. Different Testing Techniques 3. Unit vs. Integration tests 4. Nx Architecture a. + DDD Extension by AngularArchitects 5. Testable Architecture

Example Application

Dep-Graph Holidays Address Getter Brochure Sender Store Nominatim Validator validate- address.ts holiday. reducer.ts holiday. actions.ts Holiday Effects holiday. selectors.ts

Different Testing Techniques

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

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

Unit vs. Integration Tests

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

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

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

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

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

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?

nx* Architecture * DDD Addition by AngularArchitects

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

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

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

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

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

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

Edge Cases Unit Tests Integration Tests Sweet Spot Edge Cases Modules

Edge Cases Examples ● Components ● Services ● Functions

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

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

Modules Unit Tests Integration Tests Sweet Spot Edge Cases Modules

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

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

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

Sweet Spot Unit Tests Integration Tests Sweet Spot Edge Cases Modules

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

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

Sweet Spot Container Components Presentational Components State Management Domain Models

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

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

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

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